Skip to content

Improve admin UI accessibility #1420

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

Open
murshed wants to merge 3 commits into
base: trunk
Choose a base branch
from
Open

Improve admin UI accessibility #1420

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
a4c16b0
Improve admin UI accessibility
murshed Jul 27, 2026
e276059
Merge branch 'WordPress:trunk' into trunk
murshed Aug 10, 2026
27a2e8b
Announce results message; simplify promise chain
murshed Aug 13, 2026
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
2 changes: 2 additions & 0 deletions assets/css/plugin-check-admin.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,12 +19,14 @@
table.plugin-check__results-table thead {
border: none;
clip: rect(0 0 0 0);
clip-path: inset(50%);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px;
white-space: nowrap;
}

table.plugin-check__results-table tr {
Expand Down
22 changes: 17 additions & 5 deletions assets/js/plugin-check-admin.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -80,6 +80,7 @@
e.preventDefault();

resetResults();
announce( defaultString( 'checkingPlugin' ) );
checkItButton.disabled = true;
pluginsList.disabled = true;
spinner.classList.add( 'is-active' );
Expand All @@ -100,13 +101,14 @@
.then( setUpEnvironment )
.then( runChecks )
.then( cleanUpEnvironment )
.then( ( data ) => {
console.log( data.message );

.then( () => {
resetForm();
} )
.catch( ( error ) => {
console.error( error );
const errorMsg =
error && error.message ? error.message : String( error );
announce( errorMsg );

resetForm();
} );
Expand All @@ -119,7 +121,7 @@
*/
function resetResults() {
// Empty the results container.
resultsContainer.innerText = '';
resultsContainer.textContent = '';
exportContainer.innerHTML = '';
exportContainer.classList.add( 'is-hidden' );
resetAggregatedResults();
Expand Down Expand Up @@ -768,7 +770,14 @@
}

renderFalsePositiveResults();
renderResultsMessage( isSuccessMessage, aiStats );
const resultsMessage = renderResultsMessage( isSuccessMessage, aiStats );

Check failure on line 773 in assets/js/plugin-check-admin.js

View workflow job for this annotation

GitHub Actions / Lint 

Replace `·isSuccessMessage,·aiStats·` with `⏎↹↹↹isSuccessMessage,⏎↹↹↹aiStats⏎↹↹`

// Announce the check results summary so screen-reader users know
// whether errors or warnings were found, rather than only the
// internal runtime cleanup status.
if ( resultsMessage ) {
announce( resultsMessage );
}
}

/**
Expand All @@ -778,6 +787,7 @@
*
* @param {boolean} isSuccessMessage Whether the message is a success message.
* @param {Object} aiStats AI statistics.
* @return {string} The rendered results message.
*/
function renderResultsMessage( isSuccessMessage, aiStats ) {
// Count errors and warnings to determine notice severity and compose the message.
Expand Down Expand Up @@ -935,6 +945,8 @@

checksCompleted = true;
renderExportButtons();

return messageText;
}

/**
Expand Down
2 changes: 2 additions & 0 deletions includes/Admin/Admin_Page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -180,6 +180,7 @@ public function enqueue_scripts() {
WP_PLUGIN_CHECK_PLUGIN_DIR_URL . 'assets/js/plugin-check-admin.js',
array(
'wp-util',
'wp-a11y',
),
WP_PLUGIN_CHECK_VERSION,
true
Expand Down Expand Up @@ -218,6 +219,7 @@ public function enqueue_scripts() {
/* translators: %s: Formatted issue count string (e.g. "3 errors" or "2 warnings"). */
'summarySingleTemplate' => __( '%s found.', 'plugin-check' ),
'strings' => array(
'checkingPlugin' => __( 'Running plugin checks…', 'plugin-check' ),
'exportCsv' => __( 'Export CSV', 'plugin-check' ),
'exportJson' => __( 'Export JSON', 'plugin-check' ),
'exportCtrf' => __( 'Export CTRF', 'plugin-check' ),
Expand Down
2 changes: 1 addition & 1 deletion includes/Lib/Readme/Parser.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -583,7 +583,7 @@ protected function trim_length( $desc, $length = 150, $type = 'char' ) {
}

// Apply the length restriction without counting html entities.
$str_length = mb_strlen( html_entity_decode( $desc ) ?: $desc );
$str_length = mb_strlen( html_entity_decode( $desc, ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML401 ) ?: $desc );

if ( $str_length > $length ) {
$desc = mb_substr( $desc, 0, $length );
Expand Down
11 changes: 5 additions & 6 deletions templates/admin-page.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,14 @@
<span id="plugin-check__spinner" class="spinner" style="float: none;"></span>
<div class="plugin-check__options">
<div>
<h4><?php esc_attr_e( 'Categories', 'plugin-check' ); ?></h4>
<h4><?php esc_html_e( 'Categories', 'plugin-check' ); ?></h4>
<?php if ( ! empty( $categories ) ) : ?>
<table id="plugin-check__categories">
<?php foreach ( $categories as $category => $label ) : ?>
<tr>
<td>
<fieldset>
<legend class="screen-reader-text"><?php echo esc_html( $category ); ?></legend>
<legend class="screen-reader-text"><?php echo esc_html( $label ); ?></legend>
<label for="<?php echo esc_attr( $category ); ?>">
<input type="checkbox" id="<?php echo esc_attr( $category ); ?>" name="categories" value="<?php echo esc_attr( $category ); ?>" <?php checked( in_array( $category, $user_enabled_categories, true ) ); ?> />
<?php echo esc_html( $label ); ?>
Expand All @@ -61,14 +61,14 @@
<?php endif; ?>
</div>
<div id="plugin-check__types-container">
<h4><?php esc_attr_e( 'Types', 'plugin-check' ); ?></h4>
<h4><?php esc_html_e( 'Types', 'plugin-check' ); ?></h4>
<?php if ( ! empty( $types ) ) : ?>
<table id="plugin-check__types">
<?php foreach ( $types as $type => $label ) : ?>
<tr>
<td>
<fieldset>
<legend class="screen-reader-text"><?php echo esc_html( $type ); ?></legend>
<legend class="screen-reader-text"><?php echo esc_html( $label ); ?></legend>
<label for="<?php echo esc_attr( $type ); ?>">
<input type="checkbox" id="<?php echo esc_attr( $type ); ?>" name="types" value="<?php echo esc_attr( $type ); ?>" checked="checked" />
<?php echo esc_html( $label ); ?>
Expand All @@ -81,13 +81,12 @@
<?php endif; ?>
</div>
<div id="plugin-check__ai-container">
<h4><?php esc_attr_e( 'AI Settings', 'plugin-check' ); ?></h4>
<h4><?php esc_html_e( 'AI Settings', 'plugin-check' ); ?></h4>
<p>
<label><input type="checkbox" value="use-ai" id="plugin-check__use-ai" /> <?php esc_html_e( 'Enable AI Analysis', 'plugin-check' ); ?></label>
</p>
</div>
</div>
<span id="plugin-check__spinner" class="spinner" style="float: none;"></span>
<?php if ( $has_experimental_checks ) { ?>
<p>
<label><input type="checkbox" value="include-experimental" id="plugin-check__include-experimental" /> <?php esc_html_e( 'Include Experimental Checks', 'plugin-check' ); ?></label>
Expand Down
24 changes: 12 additions & 12 deletions templates/results-table.php
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,25 +2,25 @@
<table id="plugin-check__results-table-{{data.index}}" class="widefat striped plugin-check__results-table">
<thead>
<tr>
<td>
<th scope="col">
<?php esc_html_e( 'Line', 'plugin-check' ); ?>
</td>
<td>
</th>
<th scope="col">
<?php esc_html_e( 'Column', 'plugin-check' ); ?>
</td>
<td>
</th>
<th scope="col">
<?php esc_html_e( 'Type', 'plugin-check' ); ?>
</td>
<td>
</th>
<th scope="col">
<?php esc_html_e( 'Code', 'plugin-check' ); ?>
</td>
<td>
</th>
<th scope="col">
<?php esc_html_e( 'Message', 'plugin-check' ); ?>
</td>
</th>
<# if ( data.hasLinks ) { #>
<td>
<th scope="col">
<?php esc_html_e( 'Edit Link', 'plugin-check' ); ?>
</td>
</th>
<# } #>
</tr>
</thead>
Expand Down
Loading