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.
This commit is contained in:
sam marshall
+1
-1
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -1186,6 +1186,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.
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
{{#error}}
|
||||
autofocus aria-describedby="{{element.iderror}}"
|
||||
{{/error}}
|
||||
{{#required}}
|
||||
aria-required="true"
|
||||
{{/required}}
|
||||
{{#element.frozen}}
|
||||
disabled
|
||||
{{/element.frozen}}
|
||||
|
||||
@@ -31,6 +31,9 @@
|
||||
aria-describedby="{{element.id}}_description"
|
||||
{{/text}}
|
||||
{{/error}}
|
||||
{{#required}}
|
||||
aria-required="true"
|
||||
{{/required}}
|
||||
{{#element.frozen}}
|
||||
disabled
|
||||
{{/element.frozen}}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -16,6 +16,9 @@
|
||||
{{#error}}
|
||||
autofocus aria-describedby="{{element.iderror}}"
|
||||
{{/error}}
|
||||
{{#required}}
|
||||
aria-required="true"
|
||||
{{/required}}
|
||||
{{#element.frozen}}
|
||||
disabled
|
||||
{{/element.frozen}}
|
||||
|
||||
@@ -31,6 +31,9 @@
|
||||
aria-describedby="{{element.id}}_description"
|
||||
{{/text}}
|
||||
{{/error}}
|
||||
{{#required}}
|
||||
aria-required="true"
|
||||
{{/required}}
|
||||
{{#element.frozen}}
|
||||
disabled
|
||||
{{/element.frozen}}
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -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 }}
|
||||
|
||||
@@ -59,6 +59,9 @@
|
||||
{{# error }}
|
||||
autofocus aria-describedby="{{ element.iderror }}"
|
||||
{{/ error }}
|
||||
{{#required}}
|
||||
aria-required="true"
|
||||
{{/required}}
|
||||
{{{ element.attributes }}}
|
||||
>
|
||||
</span>
|
||||
|
||||
@@ -30,7 +30,8 @@
|
||||
{{#element.frozen}}disabled{{/element.frozen}}
|
||||
{{#error}}{{#element.checked}}
|
||||
autofocus aria-describedby="{{element.iderror}}"
|
||||
{{/element.checked}}{{/error}} {{{element.attributes}}} >
|
||||
{{/element.checked}}{{/error}}
|
||||
{{#required}}aria-required="true"{{/required}} {{{element.attributes}}} >
|
||||
{{#text}}
|
||||
{{{.}}}
|
||||
{{/text}}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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}}
|
||||
|
||||
@@ -8,6 +8,9 @@
|
||||
{{#error}}
|
||||
autofocus aria-describedby="{{element.iderror}}"
|
||||
{{/error}}
|
||||
{{#required}}
|
||||
aria-required="true"
|
||||
{{/required}}
|
||||
{{{element.attributes}}} >
|
||||
{{#element.optiongroups}}
|
||||
{{#text}}
|
||||
|
||||
@@ -8,6 +8,9 @@
|
||||
{{#error}}
|
||||
autofocus aria-describedby="{{element.iderror}}"
|
||||
{{/error}}
|
||||
{{#required}}
|
||||
aria-required="true"
|
||||
{{/required}}
|
||||
{{{element.attributes}}} >
|
||||
{{#element.optiongroups}}
|
||||
{{#text}}
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -12,6 +12,9 @@
|
||||
{{#error}}
|
||||
autofocus aria-describedby="{{element.iderror}}"
|
||||
{{/error}}
|
||||
{{#required}}
|
||||
aria-required="true"
|
||||
{{/required}}
|
||||
{{{element.attributes}}}>
|
||||
{{/element}}
|
||||
{{/ core_form/element-template-inline }}
|
||||
|
||||
@@ -12,6 +12,9 @@
|
||||
{{#error}}
|
||||
autofocus aria-describedby="{{element.iderror}}"
|
||||
{{/error}}
|
||||
{{#required}}
|
||||
aria-required="true"
|
||||
{{/required}}
|
||||
{{{element.attributes}}} >
|
||||
{{/element}}
|
||||
{{/ core_form/element-template }}
|
||||
|
||||
@@ -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}}
|
||||
|
||||
@@ -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}}
|
||||
|
||||
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user