Skip to content

Improve admin UI accessibility - #1420

Open
murshed wants to merge 1 commit into
WordPress:trunkfrom
murshed:trunk
Open

Improve admin UI accessibility#1420
murshed wants to merge 1 commit into
WordPress:trunkfrom
murshed:trunk

Conversation

@murshed

@murshed murshed commented Jul 27, 2026

Copy link
Copy Markdown

Enhance accessibility throughout the plugin check admin interface:

  • Add screen reader announcements for check status (starting, success, errors)
  • Improve CSS for screen-reader-text with clip-path and white-space
  • Use semantic HTML: convert table header to
  • Fix legend text to display labels instead of IDs for better context
  • Correct escaping functions: esc_html_e() instead of esc_attr_e() for headings
  • Use textContent instead of innerText in JS for better practice
  • Add wp-a11y dependency for ARIA live regions
  • Remove duplicate spinner element
  • Improve html_entity_decode() with proper flags

What?

This PR improves accessibility (WCAG compliance), HTML standards, screen reader notifications, and PHP 8+ compatibility across the Plugin Check admin UI and core libraries.

Why?

  • Screen reader users were not receiving ARIA live region updates when checks were started, completed, or failed.
  • Form controls contained duplicate IDs (#plugin-check__spinner), unlocalized raw slug text in <legend> tags, and incorrect escaping functions (esc_attr_e() instead of esc_html_e()).
  • Table header rows in <thead> used non-semantic <td> cells rather than <th scope="col"> cells.
  • Offscreen screen-reader CSS relied on outdated clip properties without modern clip-path: inset(50%) and white-space: nowrap.
  • JS DOM manipulation used innerText instead of textContent, causing unnecessary browser style recalculations and reflows.
  • html_entity_decode() in Parser.php was missing explicit $flags, triggering PHP 8.1+ default parameter deprecation issues.

How?

  1. PHP 8+ Compatibility: Added ENT_QUOTES | ENT_SUBSTITUTE | ENT_HTML401 flags to html_entity_decode() in includes/Lib/Readme/Parser.php.
  2. HTML & Escaping:
    • Removed the duplicate plugin-check__spinner element in templates/admin-page.php.
    • Updated section headings inside <h4> tags to use esc_html_e().
    • Changed fieldset <legend> screen-reader text to display human-readable labels ($label) instead of raw slugs.
    • Converted <thead> cells from <td> to <th scope="col"> in templates/results-table.php.
  3. JS & ARIA Live Announcements:
    • Added 'wp-a11y' dependency to plugin-check-admin script registration in includes/Admin/Admin_Page.php.
    • Integrated wp.a11y.speak() notifications in assets/js/plugin-check-admin.js for check startup, execution summary, and error reporting.
    • Replaced innerText = '' with textContent = '' for clearing results containers.
  4. CSS Improvements: Modernized offscreen screen-reader hiding rules in assets/css/plugin-check-admin.css with clip-path: inset(50%) and white-space: nowrap.

Testing Instructions

  1. Navigate to Tools > Plugin Check.
  2. Run a check on any installed plugin.
  3. Verify with a screen reader (e.g. VoiceOver, NVDA) that announcements are spoken when checks start ("Running plugin checks…") and when checks complete with results.
  4. Inspect the results table markup to ensure <thead> cells use <th scope="col">.
  5. Verify HTML validation: check that no duplicate #plugin-check__spinner IDs exist on the page.
  6. Run vendor/bin/phpcs --standard=PHPCompatibility --runtime-set testVersion 8.0-8.5 and verify 0 compatibility errors.
  7. Run vendor/bin/phpcs and vendor/bin/phpstan analyse to verify linting and static analysis pass cleanly.

AI Usage Disclosure

  • This PR was created without the help of AI tools
  • This PR includes AI-assisted code or content

If AI tools were used, please describe how they were used:
Used AI coding agent to perform static analysis auditing for PHP 8+ compatibility, WCAG accessibility standards adherence, and automated linting verification.

Screenshots or screencast

Before After
N/A N/A
Open WordPress Playground Preview

Enhance accessibility throughout the plugin check admin interface:

- Add screen reader announcements for check status (starting, success, errors)
- Improve CSS for screen-reader-text with clip-path and white-space
- Use semantic HTML: convert table header <td> to <th scope="col">
- Fix legend text to display labels instead of IDs for better context
- Correct escaping functions: esc_html_e() instead of esc_attr_e() for headings
- Use textContent instead of innerText in JS for better practice
- Add wp-a11y dependency for ARIA live regions
- Remove duplicate spinner element
- Improve html_entity_decode() with proper flags
@github-actions

Copy link
Copy Markdown

The following accounts have interacted with this PR and/or linked issues. I will continue to update these lists as activity occurs. You can also manually ask me to refresh this list by adding the props-bot label.

If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message.

Co-authored-by: murshed <fahimmurshed@git.wordpress.org>

To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant