DevTools: Label and group audit radio buttons
Addressing axe-core failure of missing labels with ARIA technique
ARIA17: Using grouping roles to identify related form controls.
https://www.w3.org/TR/WCAG20-TECHS/ARIA17.html
Without this change screen readers would not announce the group when
a radio button received focus and would announce the radio placement
order as if all radio buttons in the panel was one group, for example:
"Desktop radio button checked 2 of 5"
instead of ...
"Device group, Desktop radio button checked 2 of 2"
Screenshot (axe-core failures): https://i.imgur.com/INN9oaP.png
Screenshot (Throttling accessibility tree): https://i.imgur.com/0TVwIG6.png
Screenshot (Devices NVDA Speech Viewer): https://i.imgur.com/3iwpsig.png
Screenshot (Throttling NVDA Speech Viewer): https://i.imgur.com/9JyueO7.png
Bug: 963183
Change-Id: Ic36e507d816228248ac6671edbc72305d5fdab1b
Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/1696356
Commit-Queue: John Emau <[email protected]>
Reviewed-by: Joel Einbinder <[email protected]>
Cr-Original-Commit-Position: refs/heads/master@{#678050}
Cr-Mirrored-From: https://chromium.googlesource.com/chromium/src
Cr-Mirrored-Commit: d58fd818bcfd7b7d3cf6a1aa97b27b1868b27e14
diff --git a/front_end/audits/AuditsStartView.js b/front_end/audits/AuditsStartView.js
index b17f92a..a961b66 100644
--- a/front_end/audits/AuditsStartView.js
+++ b/front_end/audits/AuditsStartView.js
@@ -18,15 +18,17 @@
/**
* @param {string} settingName
+ * @param {string} label
* @param {!Element} parentElement
*/
- _populateRuntimeSettingAsRadio(settingName, parentElement) {
+ _populateRuntimeSettingAsRadio(settingName, label, parentElement) {
const runtimeSetting = Audits.RuntimeSettings.find(item => item.setting.name === settingName);
if (!runtimeSetting || !runtimeSetting.options)
throw new Error(`${settingName} is not a setting with options`);
const control = new Audits.RadioSetting(runtimeSetting.options, runtimeSetting.setting, runtimeSetting.description);
parentElement.appendChild(control.element);
+ UI.ARIAUtils.setAccessibleName(control.element, label);
}
/**
@@ -49,7 +51,7 @@
_populateFormControls(fragment) {
// Populate the device type
const deviceTypeFormElements = fragment.$('device-type-form-elements');
- this._populateRuntimeSettingAsRadio('audits.device_type', deviceTypeFormElements);
+ this._populateRuntimeSettingAsRadio('audits.device_type', ls`Device`, deviceTypeFormElements);
// Populate the audit categories
const categoryFormElements = fragment.$('categories-form-elements');
@@ -63,7 +65,7 @@
// Populate the throttling
const throttlingFormElements = fragment.$('throttling-form-elements');
- this._populateRuntimeSettingAsRadio('audits.throttling', throttlingFormElements);
+ this._populateRuntimeSettingAsRadio('audits.throttling', ls`Throttling`, throttlingFormElements);
// Populate other settings
