DevTools: Fix acessibility issues in QuickOpen dialog
Add aria labels for the dialog and the prompt
https://imgur.com/a/UsQs5lG
Bug: 963183
Change-Id: I4bcdf4e1c9fb6fc853fe345ecd77ba2adc255f18
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1718606
Commit-Queue: Anubha Mathur <[email protected]>
Reviewed-by: Erik Luo <[email protected]>
Reviewed-by: Dominic Mazzoni <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#698572}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: d12404e6bc8ffa16c236d38b5f004d12dd3890df
diff --git a/front_end/quick_open/CommandMenu.js b/front_end/quick_open/CommandMenu.js
index e7636ff..686a8e7 100644
--- a/front_end/quick_open/CommandMenu.js
+++ b/front_end/quick_open/CommandMenu.js
@@ -231,7 +231,7 @@
* @return {string}
*/
notFoundText() {
- return Common.UIString('No commands found');
+ return ls`No commands found`;
}
};
diff --git a/front_end/quick_open/FilteredListWidget.js b/front_end/quick_open/FilteredListWidget.js
index c146b19..5b8cd56 100644
--- a/front_end/quick_open/FilteredListWidget.js
+++ b/front_end/quick_open/FilteredListWidget.js
@@ -22,6 +22,7 @@
this.registerRequiredCSS('quick_open/filteredListWidget.css');
this._promptElement = this.contentElement.createChild('div', 'filtered-list-widget-input');
+ UI.ARIAUtils.setAccessibleName(this._promptElement, ls`Quick open prompt`);
this._promptElement.setAttribute('spellcheck', 'false');
this._promptElement.setAttribute('contenteditable', 'plaintext-only');
this._prompt = new UI.TextPrompt();
@@ -96,13 +97,15 @@
/**
* @param {string} placeholder
+ * @param {string=} ariaPlaceholder
*/
- setPlaceholder(placeholder) {
- this._prompt.setPlaceholder(placeholder);
+ setPlaceholder(placeholder, ariaPlaceholder) {
+ this._prompt.setPlaceholder(placeholder, ariaPlaceholder);
}
showAsDialog() {
this._dialog = new UI.Dialog();
+ UI.ARIAUtils.setAccessibleName(this._dialog.contentElement, ls`Quick open`);
this._dialog.setMaxContentSize(new UI.Size(504, 340));
this._dialog.setSizeBehavior(UI.GlassPane.SizeBehavior.SetExactWidthMaxHeight);
this._dialog.setContentPosition(null, 22);
@@ -435,8 +438,10 @@
_updateNotFoundMessage(hasItems) {
this._list.element.classList.toggle('hidden', !hasItems);
this._notFoundElement.classList.toggle('hidden', hasItems);
- if (!hasItems)
+ if (!hasItems) {
this._notFoundElement.textContent = this._provider.notFoundText(this._cleanValue());
+ UI.ARIAUtils.alert(this._notFoundElement.textContent, this._notFoundElement);
+ }
}
_onInput() {
diff --git a/front_end/quick_open/QuickOpen.js b/front_end/quick_open/QuickOpen.js
index 9f1160d..04e78ce 100644
--- a/front_end/quick_open/QuickOpen.js
+++ b/front_end/quick_open/QuickOpen.js
@@ -23,7 +23,8 @@
const filteredListWidget =
new QuickOpen.FilteredListWidget(null, this._history, quickOpen._queryChanged.bind(quickOpen));
quickOpen._filteredListWidget = filteredListWidget;
- filteredListWidget.setPlaceholder(Common.UIString('Type \'?\' to see available commands'));
+ filteredListWidget.setPlaceholder(
+ ls`Type '?' to see available commands`, ls`Type question mark to see available commands`);
filteredListWidget.showAsDialog();
filteredListWidget.setQuery(query);
}
diff --git a/front_end/quick_open/quick_open_strings.grdp b/front_end/quick_open/quick_open_strings.grdp
index e34f7e8..9bb91fc 100644
--- a/front_end/quick_open/quick_open_strings.grdp
+++ b/front_end/quick_open/quick_open_strings.grdp
@@ -3,6 +3,15 @@
<message name="IDS_DEVTOOLS_06f884351ae9dbaaca31602b74d0ed4e" desc="Text in Quick Open of the Command Menu">
Type '?' to see available commands
</message>
+ <message name="IDS_DEVTOOLS_532ce4f18bb96f70d8ee338082ad7ed0" desc="Title of quick open dialog">
+ Quick open
+ </message>
+ <message name="IDS_DEVTOOLS_c986e2ac993abbee8febcc7e21ebb4d8" desc="Aria-placeholder text for quick open dialog prompt">
+ Type question mark to see available commands
+ </message>
+ <message name="IDS_DEVTOOLS_db1accfc3285ca06387a9b35f80523a7" desc="Aria label for quick open dialog prompt">
+ Quick open prompt
+ </message>
<message name="IDS_DEVTOOLS_8bb9829a676055080c3d4507e0b5f201" desc="Text in Command Menu of the Command Menu">
No commands found
</message>
diff --git a/front_end/ui/TextPrompt.js b/front_end/ui/TextPrompt.js
index b0e26a1..5f86810 100644
--- a/front_end/ui/TextPrompt.js
+++ b/front_end/ui/TextPrompt.js
@@ -201,11 +201,14 @@
/**
* @param {string} placeholder
+ * @param {string=} ariaPlaceholder
*/
- setPlaceholder(placeholder) {
+ setPlaceholder(placeholder, ariaPlaceholder) {
if (placeholder) {
this._element.setAttribute('data-placeholder', placeholder);
- UI.ARIAUtils.setPlaceholder(this._element, placeholder);
+ // TODO(https://github.com/nvaccess/nvda/issues/10164): Remove ariaPlaceholder once the NVDA bug is fixed
+ // ariaPlaceholder and placeholder may differ, like in case the placeholder contains a '?'
+ UI.ARIAUtils.setPlaceholder(this._element, ariaPlaceholder || placeholder);
} else {
this._element.removeAttribute('data-placeholder');
UI.ARIAUtils.setPlaceholder(this._element, null);
