Skip to content

Revisions Slider: Add aria-valuetext for screen reader accessibility#77549

Open
R1shabh-Gupta wants to merge 1 commit intoWordPress:trunkfrom
R1shabh-Gupta:fix/revisions-slider-aria-valuetext
Open

Revisions Slider: Add aria-valuetext for screen reader accessibility#77549
R1shabh-Gupta wants to merge 1 commit intoWordPress:trunkfrom
R1shabh-Gupta:fix/revisions-slider-aria-valuetext

Conversation

@R1shabh-Gupta
Copy link
Copy Markdown
Contributor

@R1shabh-Gupta R1shabh-Gupta commented Apr 22, 2026

What?

Part of #77530

Slider: Visual label not available to screen readers. Use aria-valuetext to allow screen readers to get the text interpretation of the numeric revision value.

Adds aria-valuetext to the revisions slider so screen readers announce a meaningful string instead of a bare numeric index.

Why?

The revisions slider uses a 0-based index as its value. Screen readers would announce "3" with no context, giving users no useful information about which revision they're on.

How?

Computes a human-readable string from the currently selected revision, e.g. "Revision 3 of 7: January 15, 2025 at 2:30 pm" and passes it as aria-valuetext on the RangeControl.

Testing Instructions

  1. Open a post or page that has at least two saved revisions.
  2. Click the Revisions button in the right side toolbar.
  3. Inspect the slider element in DevTools — the <input type="range"> should have an aria-valuetext attribute.
  4. Move the slider left/right and confirm aria-valuetext updates to reflect the newly selected revision's number and date.

Testing Instructions for Keyboard

  1. Open a post with multiple revisions and navigate to the Revisions panel.
  2. Tab to the revisions slider.
  3. Enable a screen reader (e.g. VoiceOver on macOS: Cmd+F5).
  4. Press the left/right arrow keys to move through revisions and the screen reader should announce the full revision label (e.g. "Revision 3 of 7: April 21, 2026 at 3:45 pm") instead of just a number.

Screenshots or screencast

Before

Before-77530.mp4

After

After-77530.mp4

Use of AI Tools

I used Claude Code to review the code.

@github-actions github-actions Bot added the [Package] Editor /packages/editor label Apr 22, 2026
@t-hamano t-hamano added [Feature] History History, undo, redo, revisions, autosave. [Type] Bug An existing feature does not function as intended labels Apr 22, 2026
@R1shabh-Gupta R1shabh-Gupta marked this pull request as ready for review April 22, 2026 12:58
@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: R1shabh-Gupta <rishabhwp@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

[Feature] History History, undo, redo, revisions, autosave. [Package] Editor /packages/editor [Type] Bug An existing feature does not function as intended

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants