accessibility fixes

Author: ahuseyn

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;

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";

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" ';

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>';
 	}
 
 	/**

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 ); ?>>

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>