MDL-80805 core_form: Accessibility - add aria-required to form fields

Most types of form field will now include aria-required="true" if the field is marked as required. This causes assistive technology to inform users that the field is required. Before this change, in some cases (e.g. screen reader users tabbing through fields) users were not informed that a field is required.
sammarshallou · Feb 15, 2024 · 208298d · 208298d
1 parent 6acc064
commit 208298d
Show file tree

Hide file tree

Showing 25 changed files with 70 additions and 5 deletions.
diff --git a/lib/amd/build/form-autocomplete.min.js b/lib/amd/build/form-autocomplete.min.js
diff --git a/lib/amd/build/form-autocomplete.min.js.map b/lib/amd/build/form-autocomplete.min.js.map
diff --git a/lib/amd/src/form-autocomplete.js b/lib/amd/src/form-autocomplete.js
@@ -1133,6 +1133,7 @@ define([
                 selectionId: 'form_autocomplete_selection-' + uniqueId,
                 downArrowId: 'form_autocomplete_downarrow-' + uniqueId,
                 items: [],
+                required: originalSelect[0]?.ariaRequired === 'true',
             };
 
             // Increment the unique counter so we don't get duplicates ever.

diff --git a/lib/form/templates/element-advcheckbox-inline.mustache b/lib/form/templates/element-advcheckbox-inline.mustache
@@ -16,6 +16,9 @@
     {{#error}}
         autofocus aria-describedby="{{element.iderror}}"
     {{/error}}
+    {{#required}}
+       aria-required="true"
+    {{/required}}
     {{#element.frozen}}
         disabled
     {{/element.frozen}}

diff --git a/lib/form/templates/element-advcheckbox.mustache b/lib/form/templates/element-advcheckbox.mustache
@@ -31,6 +31,9 @@
                         aria-describedby="{{element.id}}_description"
                     {{/text}}
                 {{/error}}
+                {{#required}}
+                   aria-required="true"
+                {{/required}}
                 {{#element.frozen}}
                     disabled
                 {{/element.frozen}}

diff --git a/lib/form/templates/element-autocomplete-inline.mustache b/lib/form/templates/element-autocomplete-inline.mustache
@@ -10,6 +10,9 @@
             {{#error}}
                 autofocus aria-describedby="{{element.iderror}}"
             {{/error}}
+            {{#required}}
+                aria-required="true"
+            {{/required}}
             {{{element.attributes}}} >
             {{#element.options}}
             <option value="{{value}}" {{#selected}}selected{{/selected}}{{#html}} data-html="{{html}}"{{/html}}>{{{text}}}</option>

diff --git a/lib/form/templates/element-autocomplete.mustache b/lib/form/templates/element-autocomplete.mustache
@@ -10,6 +10,9 @@
             {{#error}}
                 autofocus aria-describedby="{{element.iderror}}"
             {{/error}}
+            {{#required}}
+                aria-required="true"
+            {{/required}}
             {{{element.attributes}}} >
             {{#element.options}}
             <option value="{{value}}" {{#selected}}selected{{/selected}}{{#html}} data-html="{{html}}"{{/html}}>{{{text}}}</option>

diff --git a/lib/form/templates/element-checkbox-inline.mustache b/lib/form/templates/element-checkbox-inline.mustache
@@ -16,6 +16,9 @@
     {{#error}}
         autofocus aria-describedby="{{element.iderror}}"
     {{/error}}
+    {{#required}}
+       aria-required="true"
+    {{/required}}
     {{#element.frozen}}
         disabled
     {{/element.frozen}}

diff --git a/lib/form/templates/element-checkbox.mustache b/lib/form/templates/element-checkbox.mustache
@@ -31,6 +31,9 @@
                         aria-describedby="{{element.id}}_description"
                     {{/text}}
                 {{/error}}
+                {{#required}}
+                   aria-required="true"
+                {{/required}}
                 {{#element.frozen}}
                     disabled
                 {{/element.frozen}}

diff --git a/lib/form/templates/element-password-inline.mustache b/lib/form/templates/element-password-inline.mustache
@@ -44,7 +44,11 @@
                 {{#element.size}}size="{{element.size}}"{{/element.size}}
                 {{#error}}
                     autofocus aria-describedby="{{element.iderror}}"
-                {{/error}} {{{element.attributes}}}>
+                {{/error}}
+                {{#required}}
+                   aria-required="true"
+                {{/required}}
+                {{{element.attributes}}}>
         {{/element.frozen}}
     {{/element}}
 {{/ core_form/element-template-inline }}
diff --git a/lib/form/templates/element-password.mustache b/lib/form/templates/element-password.mustache
@@ -44,7 +44,11 @@
                 {{#element.size}}size="{{element.size}}"{{/element.size}}
                 {{#error}}
                     autofocus aria-describedby="{{element.iderror}}"
-                {{/error}} {{{element.attributes}}}>
+                {{/error}}
+                {{#required}}
+                   aria-required="true"
+                {{/required}}
+                {{{element.attributes}}}>
         {{/element.frozen}}
     {{/element}}
 {{/ core_form/element-template }}
diff --git a/lib/form/templates/element-passwordunmask.mustache b/lib/form/templates/element-passwordunmask.mustache
@@ -59,6 +59,9 @@
                         {{# error }}
                             autofocus aria-describedby="{{ element.iderror }}"
                         {{/ error }}
+                        {{#required}}
+                            aria-required="true"
+                        {{/required}}
                         {{{ element.attributes }}}
                         >
             </span>

diff --git a/lib/form/templates/element-radio.mustache b/lib/form/templates/element-radio.mustache
@@ -30,7 +30,8 @@
                         {{#element.frozen}}disabled{{/element.frozen}}
                         {{#error}}
                             autofocus aria-describedby="{{element.iderror}}"
-                        {{/error}} {{{element.attributes}}} >
+                        {{/error}}
+                        {{#required}}aria-required="true"{{/required}} {{{element.attributes}}} >
                     {{#text}}
                         {{{.}}}
                     {{/text}}

diff --git a/lib/form/templates/element-select-inline.mustache b/lib/form/templates/element-select-inline.mustache
@@ -14,6 +14,9 @@
         {{#error}}
             autofocus aria-describedby="{{element.iderror}}"
         {{/error}}
+        {{#required}}
+            aria-required="true"
+        {{/required}}
         {{{element.attributes}}} >
         {{#element.options}}
         <option value="{{value}}" {{#selected}}selected{{/selected}} {{#disabled}}disabled{{/disabled}} {{{optionattributes}}}>{{{text}}}</option>

diff --git a/lib/form/templates/element-select.mustache b/lib/form/templates/element-select.mustache
@@ -107,6 +107,9 @@
             {{#error}}
                 autofocus aria-describedby="{{element.iderror}}"
             {{/error}}
+            {{#required}}
+                aria-required="true"
+            {{/required}}
             {{{element.attributes}}} >
             {{#element.options}}
             <option value="{{value}}" {{#selected}}selected{{/selected}} {{#disabled}}disabled{{/disabled}}

diff --git a/lib/form/templates/element-selectgroups-inline.mustache b/lib/form/templates/element-selectgroups-inline.mustache
@@ -8,6 +8,9 @@
         {{#error}}
             autofocus aria-describedby="{{element.iderror}}"
         {{/error}}
+        {{#required}}
+            aria-required="true"
+        {{/required}}
         {{{element.attributes}}} >
         {{#element.optiongroups}}
         {{#text}}

diff --git a/lib/form/templates/element-selectgroups.mustache b/lib/form/templates/element-selectgroups.mustache
@@ -8,6 +8,9 @@
             {{#error}}
                 autofocus aria-describedby="{{element.iderror}}"
             {{/error}}
+            {{#required}}
+                aria-required="true"
+            {{/required}}
             {{{element.attributes}}} >
             {{#element.optiongroups}}
             {{#text}}

diff --git a/lib/form/templates/element-selectwithlink.mustache b/lib/form/templates/element-selectwithlink.mustache
@@ -8,6 +8,9 @@
             {{#error}}
                 autofocus aria-describedby="{{element.iderror}}"
             {{/error}}
+            {{#required}}
+                aria-required="true"
+            {{/required}}
             {{{element.attributes}}} >
             {{#element.options}}
             <option value="{{value}}" {{#selected}}selected{{/selected}} {{#disabled}}disabled{{/disabled}} {{{optionattributes}}}>{{{text}}}</option>

diff --git a/lib/form/templates/element-tags-inline.mustache b/lib/form/templates/element-tags-inline.mustache
@@ -8,6 +8,9 @@
             {{#error}}
                 autofocus aria-describedby="{{element.iderror}}"
             {{/error}}
+            {{#required}}
+                aria-required="true"
+            {{/required}}
             {{{element.attributes}}} >
             {{#element.options}}
             <option value="{{value}}" {{#selected}}selected{{/selected}}>{{{text}}}</option>

diff --git a/lib/form/templates/element-tags.mustache b/lib/form/templates/element-tags.mustache
@@ -8,6 +8,9 @@
             {{#error}}
                 autofocus aria-describedby="{{element.iderror}}"
             {{/error}}
+            {{#required}}
+                aria-required="true"
+            {{/required}}
             {{{element.attributes}}} >
             {{#element.options}}
             <option value="{{value}}" {{#selected}}selected{{/selected}}>{{{text}}}</option>

diff --git a/lib/form/templates/element-text-inline.mustache b/lib/form/templates/element-text-inline.mustache
@@ -12,6 +12,9 @@
             {{#error}}
                 autofocus aria-describedby="{{element.iderror}}"
             {{/error}}
+            {{#required}}
+               aria-required="true"
+            {{/required}}
             {{{element.attributes}}}>
     {{/element}}
 {{/ core_form/element-template-inline }}
diff --git a/lib/form/templates/element-text.mustache b/lib/form/templates/element-text.mustache
@@ -12,6 +12,9 @@
                 {{#error}}
                     autofocus aria-describedby="{{element.iderror}}"
                 {{/error}}
+                {{#required}}
+                    aria-required="true"
+                {{/required}}
                 {{{element.attributes}}} >
     {{/element}}
 {{/ core_form/element-template }}
diff --git a/lib/form/templates/element-textarea.mustache b/lib/form/templates/element-textarea.mustache
@@ -7,6 +7,9 @@
             {{#error}}
                 autofocus aria-describedby="{{element.iderror}}"
             {{/error}}
+            {{#required}}
+            aria-required="true"
+            {{/required}}
             {{{element.attributes}}}
             {{#element.frozen}}
             readonly {{#element.hardfrozen}}disabled{{/element.hardfrozen}}

diff --git a/lib/form/templates/element-url.mustache b/lib/form/templates/element-url.mustache
@@ -49,6 +49,9 @@
                 {{#error}}
                     autofocus aria-describedby="{{element.iderror}}"
                 {{/error}}
+                {{#required}}
+                   aria-required="true"
+                {{/required}}
                 {{#element.frozen}}
                     readonly {{#element.hardfrozen}}disabled{{/element.hardfrozen}}
                 {{/element.frozen}}

diff --git a/lib/templates/form_autocomplete_selection.mustache b/lib/templates/form_autocomplete_selection.mustache
@@ -45,6 +45,7 @@
     }} role="listbox"{{!
     }} aria-atomic="true"{{!
     }} tabindex="0"{{!
+    }} {{#required}}aria-required="true"{{/required}}{{!
     }} {{#multiple}}aria-multiselectable="true"{{/multiple}}>
     {{> core/form_autocomplete_selection_items }}
 </div>