[A11y] fix DOM breakpoint checkbox not announced by screen reader
When tabbing into the DOM bp sidebar, the screen reader wont announce the checkbox status because the focus is on the listItem.
This CL makes makes focus to be on the checkbox element.
Gif with NVDA screen reader
https://imgur.com/F0F8Rbq
Bug:963183
Change-Id: I1e793bf962fcc21c6c9ebe4e7dd4d44c160a522b
Reviewed-on: https://chromium-review.googlesource.com/c/devtools/devtools-frontend/+/2228805
Reviewed-by: Jack Lynch <[email protected]>
Reviewed-by: Songtao Xia <[email protected]>
Commit-Queue: Christy Chen <[email protected]>
diff --git a/front_end/browser_debugger/DOMBreakpointsSidebarPane.js b/front_end/browser_debugger/DOMBreakpointsSidebarPane.js
index fb5edda..346d25c 100644
--- a/front_end/browser_debugger/DOMBreakpointsSidebarPane.js
+++ b/front_end/browser_debugger/DOMBreakpointsSidebarPane.js
@@ -85,25 +85,19 @@
element.classList.add('breakpoint-entry');
element.addEventListener('contextmenu', this._contextMenu.bind(this, item), true);
UI.ARIAUtils.markAsListitem(element);
- element.tabIndex = this._list.selectedItem() === item ? 0 : -1;
+ element.tabIndex = -1;
const checkboxLabel = UI.UIUtils.CheckboxLabel.create(/* title */ '', item.enabled);
const checkboxElement = checkboxLabel.checkboxElement;
checkboxElement.addEventListener('click', this._checkboxClicked.bind(this, item), false);
- checkboxElement.tabIndex = -1;
+ checkboxElement.tabIndex = this._list.selectedItem() === item ? 0 : -1;
+ element.checkboxElement = checkboxElement;
UI.ARIAUtils.markAsHidden(checkboxLabel);
element.appendChild(checkboxLabel);
const labelElement = document.createElement('div');
labelElement.classList.add('dom-breakpoint');
element.appendChild(labelElement);
- element.addEventListener('keydown', event => {
- if (event.key === ' ') {
- checkboxElement.click();
- event.consume(true);
- }
- });
-
const description = createElement('div');
const breakpointTypeLabel = BreakpointTypeLabels.get(item.type);
description.textContent = breakpointTypeLabel;
@@ -121,6 +115,7 @@
if (item === this._highlightedBreakpoint) {
element.classList.add('breakpoint-hit');
UI.ARIAUtils.setDescription(element, ls`${checkedStateText} breakpoint hit`);
+ UI.ARIAUtils.setDescription(checkboxElement, ls`breakpoint hit`);
} else {
UI.ARIAUtils.setDescription(element, checkedStateText);
}
@@ -169,14 +164,14 @@
*/
selectedItemChanged(from, to, fromElement, toElement) {
if (fromElement) {
- fromElement.tabIndex = -1;
+ fromElement.checkboxElement.tabIndex = -1;
}
if (toElement) {
- this.setDefaultFocusedElement(toElement);
- toElement.tabIndex = 0;
+ this.setDefaultFocusedElement(toElement.checkboxElement);
+ toElement.checkboxElement.tabIndex = 0;
if (this.hasFocus()) {
- toElement.focus();
+ toElement.checkboxElement.focus();
}
}
}
