Add aria-label to Revisions button in Post Summary sidebar#78140
Conversation
|
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 If you're merging code through a pull request on GitHub, copy and paste the following into the bottom of the merge commit message. To understand the WordPress project's expectations around crediting contributors, please review the Contributor Attribution page in the Core Handbook. |
|
👋 Thanks for your first Pull Request and for helping build the future of Gutenberg and WordPress, @vishnucmsminds! In case you missed it, we'd love to have you join us in our Slack community. If you want to learn more about WordPress development in general, check out the Core Handbook full of helpful information. |
|
@vishnucmsminds, Do you know about E2E tests? The button label has changed, so we need to update the E2E tests accordingly. The files that need to be modified are as follows:
In other words, we need to change the code included in the file above as follows. } );
await settingsSidebar.getByRole( 'tab', { name: 'Post' } ).click();
await settingsSidebar
- .getByRole( 'button', { name: '2', exact: true } )
+ .getByRole( 'button', { name: 'Open revisions screen: 2 revisions' } )
.click();
await expect(
page.getByRole( 'button', { name: 'Restore' } ) |
Thanks for the feedback @t-hamano! I've updated the E2E tests in the following files to match the new button label: Please let me know if any further changes are needed. |
* Add aria-label to Revisions button in Post Summary sidebar * Change ariaLabel to aria-label for better standard compliance * Update E2E tests to match the new revisions button aria-label * Update E2E tests to match new Revisions button aria-label --------- Co-authored-by: vishnupprajapat <vishnuprajapat@git.wordpress.org> Co-authored-by: vishnucmsminds <prajapatvishnu@git.wordpress.org> Co-authored-by: t-hamano <wildworks@git.wordpress.org>
|
I just cherry-picked this PR to the wp/7.0 branch to get it included in the next release: ad384d5 |
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. git-svn-id: https://develop.svn.wordpress.org/branches/7.0@62360 602fd350-edb4-49c9-b593-d223f7449a82
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy See #64595. Built from https://develop.svn.wordpress.org/branches/7.0@62360 git-svn-id: http://core.svn.wordpress.org/branches/7.0@61641 1a063a9b-81f0-0310-95a4-ce76da25c4cd
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: `git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy` Reviewed by desrosj. Merges [62360] to `trunk`. See #64595. git-svn-id: https://develop.svn.wordpress.org/trunk@62361 602fd350-edb4-49c9-b593-d223f7449a82
This updates the pinned hash from the `gutenberg` from `c15cef1d6b07f666df28dac0383bafb0edfe0914 ` to `3a4e8d1418d25da83b70158bcaabf65580690b6b`. The following changes are included: - [WP.7.0] Admin UI: Backport accessibility fixes (WordPress/gutenberg#77617, WordPress/gutenberg#78001) (WordPress/gutenberg#78002) - Fix: Shortcode block does not render in Navigation Overlay (WordPress/gutenberg#77511) - feat: Enhance Connectors page on read-only file system (WordPress/gutenberg#77521) - Connectors: Avoid using centered text (WordPress/gutenberg#78125) - Revisions: Add tooltip to diff marker buttons (WordPress/gutenberg#77690) - Add backport for WP_ALLOW_COLLABORATION (WordPress/gutenberg#78160) - Add aria-label to Revisions button in Post Summary sidebar (WordPress/gutenberg#78140) - Revisions diff markers: enforce 24×24px minimum target size (WCAG 2.5.8) (WordPress/gutenberg#77671) - Connectors: Replace @wordpress/ui Link and Notice usage (WordPress/gutenberg#78117) - Connectors: Increase right padding of callout for mobile layout (WordPress/gutenberg#78126) - isFulfilled: don't change resolution state, call in resolveSelect (WordPress/gutenberg#78201) - Connectors: Restyle AI plugin callout with pastel background and beaker decoration (WordPress/gutenberg#78243) - Block supports: Optimize custom CSS class rendering and parsing (WordPress/gutenberg#78217) - Block Inspector: Hide Styles tab in preview mode (WordPress/gutenberg#78230) - Navigation Link: Preserve custom labels during link updates (WordPress/gutenberg#77186) - Editor: Fix Visual Revisions meta keys overlap (WordPress/gutenberg#78156) - Editor: Disable Visual Revisions when classic meta boxes are present (WordPress/gutenberg#78249) (WordPress/gutenberg#78286) - Revisions: Scale diff markers width with user text-size preference (WordPress/gutenberg#78273) A full list of changes can be found on GitHub: https://github.com/WordPress/gutenberg/compare/c15cef1d6b07f666df28dac0383bafb0edfe0914…3a4e8d1418d25da83b70158bcaabf65580690b6b. Log created with: `git log --reverse --format="- %s" c15cef1d6b07f666df28dac0383bafb0edfe0914..3a4e8d1418d25da83b70158bcaabf65580690b6b | sed 's|#\([0-9][0-9]*\)|https://github.com/WordPress/gutenberg/pull/\1|g; /github\.com\/WordPress\/gutenberg\/pull/!d' | pbcopy` Reviewed by desrosj. Merges [62360] to `trunk`. See #64595. Built from https://develop.svn.wordpress.org/trunk@62361 git-svn-id: http://core.svn.wordpress.org/trunk@61642 1a063a9b-81f0-0310-95a4-ce76da25c4cd
What?
Closes #78138
This PR adds a descriptive
aria-labelto the Revisions button in the Post Summary sidebar panel.Why?
Previously, the Revisions button in the Post Summary sidebar only displayed the count of revisions (e.g., "3"). For screen reader users, this was announced simply as "3 button," which lacked context. Adding a descriptive
aria-labelensures that users understand the button's purpose is to open the revisions screen.How?
In
packages/editor/src/components/post-last-revision/index.js, I've updated thePrivatePostLastRevisioncomponent'sButtonto include anariaLabelprop. The label is localized and dynamically includes the revision count:Open revisions screen: %s revisions.Testing Instructions
aria-labelattribute likearia-label="Open revisions screen: X revisions".Testing Instructions for Keyboard
Tabkey.Use of AI Tools
This PR was authored with the assistance of Claude Opus 4.6. I have reviewed and tested the changes to ensure they meet the project's standards and solve the reported accessibility issue.