Skip to content

fix(logging): Logging plugin accessibility fixes #496

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
colinmurphy merged 2 commits into from
Nov 14, 2025
Merged

fix(logging): Logging plugin accessibility fixes #496

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
f87d4e6
accessibility fixes
ahuseyn Nov 14, 2025
bd576bb
linter fix
ahuseyn Nov 14, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 5 additions & 1 deletion plugins/wpgraphql-logging/assets/css/view/wp-graphql-logging-view.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
6 changes: 4 additions & 2 deletions plugins/wpgraphql-logging/assets/js/settings/wp-graphql-logging-settings.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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();
}
Expand All @@ -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";
Expand Down
1 change: 1 addition & 0 deletions plugins/wpgraphql-logging/src/Admin/Settings/Fields/Field/SelectField.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" ';
Expand Down
9 changes: 6 additions & 3 deletions plugins/wpgraphql-logging/src/Admin/View/List/ListTable.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -280,9 +280,12 @@ 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(),
// translators: %d is the log entry ID.
sprintf( __( 'Select log entry %d', 'wpgraphql-logging' ), $log_id )
);
}

Expand Down Expand Up @@ -413,7 +416,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>';
}

/**
Expand Down
2 changes: 1 addition & 1 deletion plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerFilters.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 ); ?>>
Expand Down
6 changes: 3 additions & 3 deletions plugins/wpgraphql-logging/src/Admin/View/Templates/WPGraphQLLoggerView.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
Loading