Skip to content

Fix: Add accessible labels to filter select elements in Abilities Exp…#642

Merged
dkotter merged 2 commits into
WordPress:developfrom
Trushiv04:fix/abilities-explorer-select-labels
Jun 1, 2026
Merged

Fix: Add accessible labels to filter select elements in Abilities Exp…#642
dkotter merged 2 commits into
WordPress:developfrom
Trushiv04:fix/abilities-explorer-select-labels

Conversation

@Trushiv04

@Trushiv04 Trushiv04 commented May 30, 2026 •
edited by github-actions Bot
Loading

Copy link
Copy Markdown
Contributor

What?

Closes #641

Adds accessible labels to the provider and category filter <select> elements in the Abilities Explorer screen.

Why?

The two filter dropdowns ("All Providers" and "All Categories") had no accessible name, aria-label, or aria-labelledby. Screen readers could not announce what each dropdown controls, which is a WCAG 2.1 AA violation (SC 1.3.1 and SC 4.1.2).

How?

Added a visually hidden <label class="screen-reader-text"> before each <select>, linked via the for attribute matching the existing id. This uses WordPress's standard screen-reader-text pattern, so there is no visual change — the labels are only exposed to assistive technology.

Use of AI Tools

AI assistance: Yes
Tool(s): Claude
Used for: Identifying the issue location, drafting the label markup, and verifying coding standards. Final implementation was reviewed and tested by me.

Testing Instructions

  1. Navigate to Tools → AI → Abilities Explorer (/wp-admin/tools.php?page=ai-abilities-explorer)
  2. Inspect the provider and category filter dropdowns
  3. Confirm each <select> now has an associated <label> and that a screen reader announces its purpose
  4. Confirm there is no visual change to the filter controls

Changelog Entry

Fixed - Added accessible labels to the provider and category filter dropdowns in the Abilities Explorer.

Open WordPress Playground Preview

@github-actions

github-actions Bot commented May 30, 2026 •
edited
Loading

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.

Unlinked Accounts

The following contributors have not linked their GitHub and WordPress.org accounts: @trushiv@example.com.

Contributors, please read how to link your accounts to ensure your work is properly credited in WordPress releases.

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

Unlinked contributors: trushiv@example.com.

Co-authored-by: Trushiv04 <trushiv@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>

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

@dkotter dkotter added this to the 1.1.0 milestone Jun 1, 2026
@codecov

codecov Bot commented Jun 1, 2026

Copy link
Copy Markdown

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 74.50%. Comparing base (f435d19) to head (1817eba).

Additional details and impacted files 
@@            Coverage Diff             @@
##             develop     #642   +/-   ##
==========================================
  Coverage      74.50%   74.50%           
  Complexity      1740     1740           
==========================================
  Files             85       85           
  Lines           7522     7523    +1     
==========================================
+ Hits            5604     5605    +1     
  Misses          1918     1918
Flag Coverage Δ
unit 74.50% <100.00%> (+<0.01%) ⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@dkotter dkotter merged commit 6b36539 into WordPress:develop Jun 1, 2026
39 of 41 checks passed
jorgefilipecosta pushed a commit that referenced this pull request Jun 15, 2026
@Trushiv04 @jorgefilipecosta
Fix: Add accessible labels to filter select elements in Abilities Exp…
ab704ec 
…lorer (#642)

Fixed - Added accessible labels to the provider and category filter dropdowns in the Abilities Explorer page.

Co-authored-by: Trushiv04 <trushiv@git.wordpress.org>
Co-authored-by: dkotter <dkotter@git.wordpress.org>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@dkotter dkotter dkotter approved these changes

Assignees

@Trushiv04 Trushiv04

Labels

None yet

Projects

None yet

Milestone

1.0.2

Development

Successfully merging this pull request may close these issues.

Filter select elements in Abilities Explorer lack accessible names

2 participants

@Trushiv04 @dkotter