From b83e8e41a9197071cd25423ccef8297a0b0adfe3 Mon Sep 17 00:00:00 2001 From: Riad Benguella Date: Thu, 30 Jul 2020 18:24:44 +0100 Subject: [PATCH] Announce block selection changes manually on windows --- .../block-list/block-selection-button.js | 17 +++++++++++++++++ 1 file changed, 17 insertions(+) diff --git a/packages/block-editor/src/components/block-list/block-selection-button.js b/packages/block-editor/src/components/block-list/block-selection-button.js index eab60be82f70c..0462b3dbf28f8 100644 --- a/packages/block-editor/src/components/block-list/block-selection-button.js +++ b/packages/block-editor/src/components/block-list/block-selection-button.js @@ -14,12 +14,22 @@ import { getBlockType, __experimentalGetAccessibleBlockLabel as getAccessibleBlockLabel, } from '@wordpress/blocks'; +import { speak } from '@wordpress/a11y'; /** * Internal dependencies */ import BlockTitle from '../block-title'; +/** + * Returns true if the user is using windows. + * + * @return {boolean} Whether the user is using Windows. + */ +function isWindows() { + return window.navigator.platform.indexOf( 'Win' ) > -1; +} + /** * Block selection button component, displaying the label of the block. If the block * descends from a root block, a button is displayed enabling the user to select @@ -63,6 +73,13 @@ function BlockSelectionButton( { clientId, rootClientId, ...props } ) { // Focus the breadcrumb in navigation mode. useEffect( () => { ref.current.focus(); + + // NVDA on windows suffers from a bug where focus changes are not announced properly + // See WordPress/gutenberg#24121 and nvaccess/nvda#5825 for more details + // To solve it we announce the focus change manually. + if ( isWindows() ) { + speak( label ); + } }, [] ); function onKeyDown( event ) {