Bug 1524080 - Improve accessibility of the new "about:config" warning page. r=Jamie
authorPaolo Amadini <paolo.mozmail@amadzone.org>
Sun, 03 Feb 2019 14:02:46 +0000
changeset 456651 10f6c4319f6c7f6fd8820091ca56a603d524425e
parent 456650 f87b390877dd3d18d20c6b45f5b1825e1923ebba
child 456652 3d835071d1604e99978933b2ae98611580a728dc
push id35499
push userccoroiu@mozilla.com
push dateMon, 04 Feb 2019 21:42:59 +0000
treeherdermozilla-central@a27965fa7374 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersJamie
bugs1524080
milestone67.0a1
first release with
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
last release without
nightly linux32
nightly linux64
nightly mac
nightly win32
nightly win64
Bug 1524080 - Improve accessibility of the new "about:config" warning page. r=Jamie The main section now has an "alertdialog" role, and the button is focused by default. Differential Revision: https://phabricator.services.mozilla.com/D18502
browser/components/aboutconfig/content/aboutconfig.html
--- a/browser/components/aboutconfig/content/aboutconfig.html
+++ b/browser/components/aboutconfig/content/aboutconfig.html
@@ -13,31 +13,33 @@
     <link rel="stylesheet" type="text/css"
           href="chrome://browser/content/aboutconfig/aboutconfig.css">
     <link rel="localization" href="browser/aboutConfig.ftl">
     <script type="application/javascript"
             src="chrome://browser/content/aboutconfig/aboutconfig.js"></script>
     <title data-l10n-id="about-config-title"></title>
   </head>
   <body>
-    <div class="container">
+    <div class="container" role="alertdialog" aria-labelledby="warningTitle"
+         aria-describedby="warningDescription">
 
       <div class="title">
-        <h1 class="title-text" data-l10n-id="about-config-warning-title"></h1>
+        <h1 id="warningTitle" class="title-text"
+            data-l10n-id="about-config-warning-title"></h1>
       </div>
 
       <div class="description">
-        <p data-l10n-id="about-config-warning-text"></p>
+        <p id="warningDescription" data-l10n-id="about-config-warning-text"></p>
       </div>
 
       <div class="toggle-container-with-text">
         <input type="checkbox" id="showWarningNextTime" checked>
         <label for="showWarningNextTime"
                data-l10n-id="about-config-warning-checkbox"></label>
       </div>
 
       <div class="button-container">
-        <button class="primary" onclick="onWarningButtonClick();"
+        <button autofocus class="primary" onclick="onWarningButtonClick();"
                 data-l10n-id="about-config-warning-button"></button>
       </div>
     </div>
   </body>
 </html>