Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Fix: accessibility issue of device preview options #63958

Merged
merged 4 commits into from
Jul 30, 2024
Merged

Fix: accessibility issue of device preview options #63958

Changes from 3 commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8968a2d
Fix: accessibility issue of menugroup
up1512001 Jul 25, 2024
f5e7766
update: aria label when device type is selected
up1512001 Jul 26, 2024
f9cc02c
update: menuItem to MenuItemChoice
up1512001 Jul 27, 2024
3490808
feature: added speak on device selection
up1512001 Jul 29, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
75 changes: 56 additions & 19 deletions packages/editor/src/components/preview-dropdown/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,12 @@ import {
DropdownMenu,
MenuGroup,
MenuItem,
MenuItemsChoice,
VisuallyHidden,
Icon,
} from '@wordpress/components';
import { __ } from '@wordpress/i18n';
import { check, desktop, mobile, tablet, external } from '@wordpress/icons';
import { desktop, mobile, tablet, external } from '@wordpress/icons';
import { useSelect, useDispatch } from '@wordpress/data';
import { store as coreStore } from '@wordpress/core-data';
import { store as preferencesStore } from '@wordpress/preferences';
Expand Down Expand Up @@ -62,6 +63,54 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
desktop,
};

/**
* The choices for the device type.
*
* @type {Array}
*/
const choices = [
{
value: 'Desktop',
label: __( 'Desktop' ),
icon: desktop,
},
{
value: 'Tablet',
label: __( 'Tablet' ),
icon: tablet,
},
{
value: 'Mobile',
label: __( 'Mobile' ),
icon: mobile,
},
];

/**
* The selected choice.
*
* @type {Object}
*/
let selectedChoice = choices.find(
( choice ) => choice.value === deviceType
);

/**
* If no selected choice is found, default to the first
*/
if ( ! selectedChoice ) {
selectedChoice = choices[ 0 ];
}

/**
* Handles the selection of a device type.
*
* @param {string} value The device type.
*/
const onSelect = ( value ) => {
setDeviceType( value );
};
Copy link
Contributor

@talldan talldan Jul 29, 2024 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
Screenshot 2024-07-29 at 12 05 12 PM

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.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@talldan added speak on the device selection.


return (
<DropdownMenu
className="editor-preview-dropdown"
Expand All @@ -75,24 +124,11 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
{ ( { onClose } ) => (
<>
<MenuGroup>
<MenuItem
onClick={ () => setDeviceType( 'Desktop' ) }
icon={ deviceType === 'Desktop' && check }
>
{ __( 'Desktop' ) }
</MenuItem>
<MenuItem
onClick={ () => setDeviceType( 'Tablet' ) }
icon={ deviceType === 'Tablet' && check }
>
{ __( 'Tablet' ) }
</MenuItem>
<MenuItem
onClick={ () => setDeviceType( 'Mobile' ) }
icon={ deviceType === 'Mobile' && check }
>
{ __( 'Mobile' ) }
</MenuItem>
<MenuItemsChoice
choices={ choices }
value={ selectedChoice.value }
onSelect={ onSelect }
/>
</MenuGroup>
{ isTemplate && (
<MenuGroup>
Expand All @@ -118,6 +154,7 @@ export default function PreviewDropdown( { forceIsAutosaveable, disabled } ) {
className="editor-preview-dropdown__button-external"
role="menuitem"
forceIsAutosaveable={ forceIsAutosaveable }
aria-label={ __( 'Preview in new tab' ) }
textContent={
<>
{ __( 'Preview in new tab' ) }
Expand Down
Loading