nagai/fune
3
0
Fork 0
forked from mirrors/gecko-dev
Code Pull requests Activity

Bug 1894098 - Announce SelectTranslationsPanel content to screen readers r=translations-reviewers,gregtatum

Browse source 
Ensures that the content of the SelectTranslationsPanel
is announced to screen readers when the panel is opened
by utilizing the aria-describedby attribute.

Differential Revision: https://phabricator.services.mozilla.com/D212209
This commit is contained in:
Erik Nordin 2024-06-04 14:41:43 +00:00
parent 2893ff2a72
commit 521ca6e5fc
2 changed files with 12 additions and 5 deletions
repo.diff.show_diff_stats Download patch file Download diff file Expand all files Collapse all files

6
browser/components/translations/content/selectTranslationsPanel.inc.xhtml
View file

@ -11,8 +11,10 @@
tabspecific="true" tabspecific="true"
locationspecific="true" locationspecific="true"
orient="vertical"> orient="vertical">
<html:div role="document" <html:div id="select-translations-panel-a11y-document-wrapper"
aria-labelledby="select-translations-panel-header"> role="document"
aria-labelledby="select-translations-panel-header"
aria-describedby="select-translations-panel-a11y-document-wrapper">
<hbox class="panel-header select-translations-panel-header"> <hbox class="panel-header select-translations-panel-header">
<html:h1 class="translations-panel-header-wrapper"> <html:h1 class="translations-panel-header-wrapper">
<html:span id="select-translations-panel-header" data-l10n-id="select-translations-panel-header"> <html:span id="select-translations-panel-header" data-l10n-id="select-translations-panel-header">

11
browser/components/translations/tests/browser/head.js
View file

@ -2623,12 +2623,17 @@ class SelectTranslationsTestUtils {
const documentRoleElement = panel.querySelector('[role="document"]'); const documentRoleElement = panel.querySelector('[role="document"]');
ok(documentRoleElement, "The document-role element can be found."); ok(documentRoleElement, "The document-role element can be found.");
const label = document.getElementById( const ariaDescription = document.getElementById(
documentRoleElement.getAttribute("aria-describedby")
);
ok(ariaDescription, "The a11y description for the panel can be found.");
const ariaLabel = document.getElementById(
documentRoleElement.getAttribute("aria-labelledby") documentRoleElement.getAttribute("aria-labelledby")
); );
ok(label, "The a11y label for the panel view can be found."); ok(ariaLabel, "The a11y label for the panel can be found.");
assertVisibility({ visible: { label } }); assertVisibility({ visible: { ariaLabel } });
} }
/** /**