Fix: accessibility issue of device preview options

[up1512001]

What?

• added aria-label to desktop, tablet, mobile & preview links.

Why?

Fixes #63910

Testing Instructions

• open editor and click on view to resize now check with screenreader selected view will be accessible.

Screenshots or screencast

Screen.Recording.2024-07-26.at.01.25.23.mov

[github-actions]

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: up1512001 <[email protected]>
Co-authored-by: talldan <[email protected]>
Co-authored-by: joedolson <[email protected]>
Co-authored-by: jeryj <[email protected]>

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

[joedolson]

Thanks for contributing! However, this change won't solve the problem in question. Adding an aria-label means that now the accessible name won't match the visible label. The intention of the ticket is to ensure that whichever of the options is currently selected is announced differently from the unselected items.

Possible solutions could include providing an accessible name for the checkbox (e.g., "selected"); adding a visible text label such as Desktop (selected); or adding an attribute like aria-pressed="true" to indicate that the state of the button is pressed.

[up1512001]

@joedolson updated aria-label by checking the selected device type.

video reference

Screen.Recording.2024-07-26.at.11.03.46.mov

[talldan]

Thanks for the PR @up1512001!

I think this UI should be implemented using the MenuItemsChoice component as it should provide the correct accessibility out of the box.

The 'Visual Editor' / 'Code Editor' options are an example of that component being used:

[up1512001]

@talldan replaced MenuItem with MenuItemsChoice. please review the PR.

reference video

Screen.Recording.2024-07-28.at.00.33.50.mov

[talldan]

Thanks for addressing the feedback. I've left one further comment, then this should be good to ship!

[talldan]

The changes so far look good. Right now voiceover announces that the menu item is ticked on focus which is a big improvement over what's in trunk:

But when changing the option (e.g if I select 'Tablet' now) there's no announcement that the option was changed.

So another good accessibility improvement would be to add a spoken message when an option is selected (using the speak function from the a11y package). This would let screenreader users know that something happened when they change the option.

There's an example here of how the visual/code editor mode option does this:

gutenberg/packages/editor/src/store/actions.js

Line 810 in 27fbbd8

speak( __( 'Visual editor selected' ), 'assertive' );

Something similar could be done for the device previews, either as part of this onSelect function or within the setDeviceType action.

[up1512001]

@talldan added speak on the device selection.

[talldan]

Thanks @up1512001, testing well, code looks good, this looks ready to merge

[jeryj]

Thanks for this PR! These announcements shouldn't be necessary. Could you remove these in a follow-up?

[up1512001]

@jeryj Sure

[up1512001]

@jeryj created PR to remove speak from menu selection.
#64115