From f87d4e672a486ae48751ceb782768cf6afa2a086 Mon Sep 17 00:00:00 2001
From: ahuseyn <huseyn.aghayev@wpengine.com>
Date: Fri, 14 Nov 2025 17:02:14 +0100
Subject: [PATCH 1/2] accessibility fixes

---
 .../assets/css/view/wp-graphql-logging-view.css           | 6 +++++-
 .../assets/js/settings/wp-graphql-logging-settings.js     | 6 ++++--
 .../src/Admin/Settings/Fields/Field/SelectField.php       | 1 +
 .../wpgraphql-logging/src/Admin/View/List/ListTable.php   | 8 +++++---
 .../src/Admin/View/Templates/WPGraphQLLoggerFilters.php   | 2 +-
 .../src/Admin/View/Templates/WPGraphQLLoggerView.php      | 6 +++---
 6 files changed, 19 insertions(+), 10 deletions(-)

diff --git a/plugins/wpgraphql-logging/assets/css/view/wp-graphql-logging-view.css b/plugins/wpgraphql-logging/assets/css/view/wp-graphql-logging-view.css
index 07545139..1893d14e 100644
--- a/plugins/wpgraphql-logging/assets/css/view/wp-graphql-logging-view.css
+++ b/plugins/wpgraphql-logging/assets/css/view/wp-graphql-logging-view.css
@@ -9,8 +9,12 @@
 .wpgraphql-logging-details pre.wpgraphql-logging-context,
 .wpgraphql-logging-details pre.wpgraphql-logging-extra {
 	white-space: pre-wrap;
+	word-wrap: break-word;
+	word-break: break-word;
+	overflow-wrap: break-word;
 	max-height: 540px;
-	overflow-y: scroll;
+	overflow-y: auto;
+	overflow-x: auto;
 	padding: 15px;
 	border: 1px solid #ddd;
 	border-radius: 4px;
diff --git a/plugins/wpgraphql-logging/assets/js/settings/wp-graphql-logging-settings.js b/plugins/wpgraphql-logging/assets/js/settings/wp-graphql-logging-settings.js
index b6b18778..d44ce01d 100644
--- a/plugins/wpgraphql-logging/assets/js/settings/wp-graphql-logging-settings.js
+++ b/plugins/wpgraphql-logging/assets/js/settings/wp-graphql-logging-settings.js
@@ -63,10 +63,11 @@ document.addEventListener("DOMContentLoaded", function () {
 		);
 
 		function checkLogPointsSelection() {
+			const descriptionId = "log-points-description";
 			const anyLogPointsSelected = logPointsInput.selectedOptions.length > 0;
 
 			const existingDescription =
-				logPointsInput.parentElement.querySelector(".description");
+				logPointsInput.parentElement.querySelector(`#${descriptionId}`);
 			if (existingDescription) {
 				existingDescription.remove();
 			}
@@ -75,8 +76,9 @@ document.addEventListener("DOMContentLoaded", function () {
 			if (enableCheckbox?.checked && !anyLogPointsSelected) {
 				const description = document.createElement("p");
 
-				if (!logPointsInput.parentElement.querySelector(".description")) {
+				if (!logPointsInput.parentElement.querySelector(`#${descriptionId}`)) {
 					description.className = "description";
+					description.id = descriptionId;
 					description.textContent =
 						"If you don't select any log points, no data will be logged.";
 					description.style.marginLeft = "25px";
diff --git a/plugins/wpgraphql-logging/src/Admin/Settings/Fields/Field/SelectField.php b/plugins/wpgraphql-logging/src/Admin/Settings/Fields/Field/SelectField.php
index ffa821e9..c6d37fc6 100644
--- a/plugins/wpgraphql-logging/src/Admin/Settings/Fields/Field/SelectField.php
+++ b/plugins/wpgraphql-logging/src/Admin/Settings/Fields/Field/SelectField.php
@@ -61,6 +61,7 @@ public function render_field( array $option_value, string $setting_key, string $
 		$html .= 'name="' . esc_attr( $field_name ) . ( $this->multiple ? '[]' : '' ) . '" ';
 		$html .= 'id="' . esc_attr( $this->get_id() ) . '" ';
 		$html .= 'class="' . esc_attr( $this->css_class ) . '" ';
+		$html .= 'aria-labelledby="' . esc_attr( $field_name ) . '-tooltip" ';
 
 		if ( $this->multiple ) {
 			$html .= 'multiple="multiple" ';
diff --git a/plugins/wpgraphql-logging/src/Admin/View/List/ListTable.php b/plugins/wpgraphql-logging/src/Admin/View/List/ListTable.php
index 7ad25ec4..4bc34181 100644
--- a/plugins/wpgraphql-logging/src/Admin/View/List/ListTable.php
+++ b/plugins/wpgraphql-logging/src/Admin/View/List/ListTable.php
@@ -280,9 +280,11 @@ public function column_cb( $item ): string {
 		if ( ! $item instanceof WordPressDatabaseEntity ) {
 			return '';
 		}
+		$log_id = $item->get_id();
 		return sprintf(
-			'<input type="checkbox" name="log[]" value="%d" />',
-			$item->get_id()
+			'<label class="screen-reader-text" for="cb-select-%1$d">%2$s</label><input id="cb-select-%1$d" type="checkbox" name="log[]" value="%1$d" />',
+			$item->get_id(),
+			sprintf( __( 'Select log entry %d', 'wpgraphql-logging' ), $log_id )
 		);
 	}
 
@@ -413,7 +415,7 @@ protected function format_code(string $code): string {
 		if ( empty( $code ) ) {
 			return '';
 		}
-		return '<pre class="wpgraphql-logging-list-table-query">' . esc_html( $code ) . '</pre>';
+		return '<pre class="wpgraphql-logging-list-table-query" tabindex="0">' . esc_html( $code ) . '</pre>';
 	}
 
 	/**
diff --git a/plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerFilters.php b/plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerFilters.php
index ed71f7c5..25fb6a7f 100644
--- a/plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerFilters.php
+++ b/plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerFilters.php
@@ -37,7 +37,7 @@ class="wpgraphql-logging-datepicker"
 			value="<?php echo esc_attr( $wpgraphql_logging_current_end_date ); ?>"
 			autocomplete="off" />
 
-	<select name="level_filter">
+	<select name="level_filter" aria-label="<?php esc_attr_e( 'Filter by level', 'wpgraphql-logging' ); ?>">
 		<option value="">All Levels</option>
 		<?php foreach ( $wpgraphql_logging_log_levels as $wpgraphql_logging_level ) : ?>
 			<option value="<?php echo esc_attr( $wpgraphql_logging_level ); ?>" <?php selected( $wpgraphql_logging_current_level, $wpgraphql_logging_level ); ?>>
diff --git a/plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerView.php b/plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerView.php
index 2cf1dc33..cfb3830e 100644
--- a/plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerView.php
+++ b/plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerView.php
@@ -65,15 +65,15 @@
 			</tr>
 			<tr>
 				<th><?php esc_html_e( 'Query', 'wpgraphql-logging' ); ?></th>
-				<td><pre class="wpgraphql-logging-query"><?php echo esc_html( (string) $log->get_query() ); ?></pre></td>
+				<td><pre class="wpgraphql-logging-query" tabindex="0"><?php echo esc_html( (string) $log->get_query() ); ?></pre></td>
 			</tr>
 			<tr>
 				<th><?php esc_html_e( 'Context', 'wpgraphql-logging' ); ?></th>
-				<td><pre class="wpgraphql-logging-context"><?php echo esc_html( (string) wp_json_encode( $log->get_context(), JSON_PRETTY_PRINT ) ); ?></pre></td>
+				<td><pre class="wpgraphql-logging-context" tabindex="0"><?php echo esc_html( (string) wp_json_encode( $log->get_context(), JSON_PRETTY_PRINT ) ); ?></pre></td>
 			</tr>
 			<tr>
 				<th><?php esc_html_e( 'Extra', 'wpgraphql-logging' ); ?></th>
-				<td><pre class="wpgraphql-logging-extra"><?php echo esc_html( (string) wp_json_encode( $log->get_extra(), JSON_PRETTY_PRINT ) ); ?></pre></td>
+				<td><pre class="wpgraphql-logging-extra" tabindex="0"><?php echo esc_html( (string) wp_json_encode( $log->get_extra(), JSON_PRETTY_PRINT ) ); ?></pre></td>
 			</tr>
 		</tbody>
 	</table>

From bd576bb68af675afbefc667d00d6d23d7a08c97e Mon Sep 17 00:00:00 2001
From: ahuseyn <huseyn.aghayev@wpengine.com>
Date: Fri, 14 Nov 2025 17:05:57 +0100
Subject: [PATCH 2/2] linter fix

---
 plugins/wpgraphql-logging/src/Admin/View/List/ListTable.php | 1 +
 1 file changed, 1 insertion(+)

diff --git a/plugins/wpgraphql-logging/src/Admin/View/List/ListTable.php b/plugins/wpgraphql-logging/src/Admin/View/List/ListTable.php
index 4bc34181..726557dc 100644
--- a/plugins/wpgraphql-logging/src/Admin/View/List/ListTable.php
+++ b/plugins/wpgraphql-logging/src/Admin/View/List/ListTable.php
@@ -284,6 +284,7 @@ public function column_cb( $item ): string {
 		return sprintf(
 			'<label class="screen-reader-text" for="cb-select-%1$d">%2$s</label><input id="cb-select-%1$d" type="checkbox" name="log[]" value="%1$d" />',
 			$item->get_id(),
+			// translators: %d is the log entry ID.
 			sprintf( __( 'Select log entry %d', 'wpgraphql-logging' ), $log_id )
 		);
 	}