Commit 6bc241b3 authored by Brian Cui's avatar Brian Cui Committed by Commit Bot

DevTools: Fix NVDA screen reader Enter keypress hiding settings pane

This PR addresses an interaction bug with the NVDA screen reader.
When the NVDA screen reader is in "scan" mode (instead of "focus" mode),
pressing the Enter key when focused on a button element in the Settings
pane causes the Settings pane to close unexpectedly.

Before: https://i.imgur.com/GNRvdyW.gif

This is because NVDA is simulating a click event triggered on the
UI.Dialog element that wraps the Settings pane, which is not supposed to
be clickable by the user. The default behavior for click events on the
UI.Dialog is to hide the dialog. Our hypothesis is that NVDA is
incorrectly targeting the UI.Dialog element in the accessibility tree,
which is not meant to be directly interacted with.

The fix in this PR simply disables the default behavior of clicking on
the UI.Dialog for the Settings screen. This should have no side effects
on existing behavior as the UI.Dialog element was never intended to be
interacted with. With the hide behavior disabled, NVDA interaction
acts as expected (button is pressed), and normal usage is unaffected.

After: https://i.imgur.com/Gas1ydF.gif

Bug: 963183
Change-Id: Ie1773ed8987dd6d42f8c9cb897fea3de5a091bcb
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1848114Reviewed-by: default avatarLorne Mitchell <lomitch@microsoft.com>
Commit-Queue: Brian Cui <brcui@microsoft.com>
Auto-Submit: Brian Cui <brcui@microsoft.com>
Cr-Commit-Position: refs/heads/master@{#704914}
parent 8fbfd622
...@@ -74,6 +74,12 @@ Settings.SettingsScreen = class extends UI.VBox { ...@@ -74,6 +74,12 @@ Settings.SettingsScreen = class extends UI.VBox {
const dialog = new UI.Dialog(); const dialog = new UI.Dialog();
dialog.contentElement.tabIndex = -1; dialog.contentElement.tabIndex = -1;
dialog.addCloseButton(); dialog.addCloseButton();
// Prevent clicks outside the Settings dialog from dismissing the dialog
// Settings screen is fullscreen and has its own close button, unlike other dialogs
// This also prevents screen readers (NVDA) from dismissing the dialog on Enter keypresses
dialog.setOutsideClickCallback(event => event.consume());
settingsScreen.show(dialog.contentElement); settingsScreen.show(dialog.contentElement);
dialog.show(); dialog.show();
settingsScreen._selectTab(name || 'preferences'); settingsScreen._selectTab(name || 'preferences');
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment