Bug 1659877 - expose print dialog error messages to assistive technology via role=alert and aria-errormessage, r=Jamie,emalysz
authorGijs Kruitbosch <gijskruitbosch@gmail.com>
Mon, 14 Sep 2020 18:47:48 +0000
changeset 548607 59fbb6793bb5f99fbbe09bf40268a07047b12657
parent 548606 a55474bb26c71af50afaf370e3691f036ac9af07
child 548608 eb49606f619e67308b235abefd7ac28e7f29570e
push id126294
push usergijskruitbosch@gmail.com
push dateMon, 14 Sep 2020 20:13:30 +0000
treeherderautoland@59fbb6793bb5 [default view] [failures only]
perfherder[talos] [build metrics] [platform microbench] (compared to previous push)
reviewersJamie, emalysz
bugs1659877
milestone82.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 1659877 - expose print dialog error messages to assistive technology via role=alert and aria-errormessage, r=Jamie,emalysz Differential Revision: https://phabricator.services.mozilla.com/D89225
toolkit/components/printing/content/print.html
--- a/toolkit/components/printing/content/print.html
+++ b/toolkit/components/printing/content/print.html
@@ -19,22 +19,29 @@
   <body loading rendering>
     <template id="page-range-template">
       <select id="range-picker" name="page-range-type" data-l10n-id="printui-page-range-picker">
         <option value="all" selected data-l10n-id="printui-page-range-all"></option>
         <option value="custom" data-l10n-id="printui-page-range-custom"></option>
       </select>
       <div class="range-group" hidden>
         <label data-l10n-id="printui-range-start" class="range-group-separator" for="custom-range-start"></label>
-        <input id="custom-range-start" type="number" min="1" step="1" class="range-group-input" disabled>
+        <!-- Note that here and elsewhere, we're setting aria-errormessage
+             attributes to a list of all possible errors. The a11y APIs will
+             filter this down to visible items only. -->
+        <input id="custom-range-start" type="number"
+               aria-errormessage="error-invalid-range error-invalid-start-range-overflow"
+               min="1" step="1" class="range-group-input" disabled>
         <label data-l10n-id="printui-range-end" class="range-group-separator" for="custom-range-end"></label>
-        <input id="custom-range-end" type="number" min="1" step="1" class="range-group-input" disabled>
+        <input id="custom-range-end" type="number"
+               aria-errormessage="error-invalid-range error-invalid-start-range-overflow"
+               min="1" step="1" class="range-group-input" disabled>
       </div>
-      <p id="error-invalid-range" hidden data-l10n-id="printui-error-invalid-range" class="error-message" data-l10n-args='{ "numPages": 1 }'></p>
-      <p id="error-invalid-start-range-overflow" hidden data-l10n-id="printui-error-invalid-start-overflow" class="error-message"></p>
+      <p id="error-invalid-range" hidden data-l10n-id="printui-error-invalid-range" class="error-message" role="alert" data-l10n-args='{ "numPages": 1 }'></p>
+      <p id="error-invalid-start-range-overflow" hidden data-l10n-id="printui-error-invalid-start-overflow" class="error-message" role="alert"></p>
     </template>
 
     <template id="orientation-template">
       <input type="radio" name="orientation" id="portrait" value="0" checked class="toggle-group-input">
       <label for="portrait" data-l10n-id="printui-portrait" class="toggle-group-label toggle-group-label-iconic"></label>
       <input type="radio" name="orientation" id="landscape" value="1" class="toggle-group-input">
       <label for="landscape" data-l10n-id="printui-landscape" class="toggle-group-label toggle-group-label-iconic"></label>
     </template>
@@ -49,24 +56,28 @@
         <div class="row cols-2">
           <input type="radio" name="scale-choice" id="fit-choice" value="fit" checked>
           <label for="fit-choice" data-l10n-id="printui-scale-fit-to-page-width" class="col"></label>
         </div>
         <div class="row cols-2">
           <input type="radio" name="scale-choice" id="percent-scale-choice">
           <span class="col">
             <label id="percent-scale-label" for="percent-scale-choice" data-l10n-id="printui-scale-pcent"></label>
+            <!-- Note that here and elsewhere, we're setting aria-errormessage
+                 attributes to a list of all possible errors. The a11y APIs
+                 will filter this down to visible items only. -->
             <input
               id="percent-scale" class="photon-number"
               type="number" min="10" max="200" step="1" size="6"
               aria-labelledby="percent-scale-label"
+              aria-errormessage="error-invalid-scale"
               autocomplete="off" disabled required>
           </span>
         </div>
-        <p id="error-invalid-scale" hidden data-l10n-id="printui-error-invalid-scale" class="error-message"></p>
+        <p id="error-invalid-scale" hidden data-l10n-id="printui-error-invalid-scale" class="error-message" role="alert"></p>
       </div>
     </template>
 
     <header class="header-container" role="none">
       <h2 data-l10n-id="printui-title"></h2>
       <div aria-live="off">
         <p id="sheet-count" is="page-count" data-l10n-id="printui-sheets-count" data-l10n-args='{ "sheetCount": 0 }' loading></p>
       </div>