moodle/lib/templates/form_autocomplete_selection.mustache
sam marshall 14b1e93e85 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.
2024-02-15 14:30:33 +00:00

52 lines
2.0 KiB
Plaintext

{{!
This file is part of Moodle - http://moodle.org/
Moodle is free software: you can redistribute it and/or modify
it under the terms of the GNU General Public License as published by
the Free Software Foundation, either version 3 of the License, or
(at your option) any later version.
Moodle is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
GNU General Public License for more details.
You should have received a copy of the GNU General Public License
along with Moodle. If not, see <http://www.gnu.org/licenses/>.
}}
{{!
@template core/form_autocomplete_selection
Moodle template for the wrapper of currently selected items in an autocomplate form element.
Classes required for JS:
* none
Data attributes required for JS:
* none
Context variables required for this template:
* multiple True if this field allows multiple selections
* selectionId The dom id of the current selection list.
* items List of items with label and value fields (used by the partial).
* noSelectionString String to use when no items are selected (used by the partial).
Example context (json):
{ "multiple": true, "selectionId": 1, "items": [
{ "label": "Item label with <strong>tags</strong>", "value": "5" },
{ "label": "Another item label with <strong>tags</strong>", "value": "4" }
], "noSelectionString": "No selection" }
}}
<span class="sr-only" id="{{selectionId}}-label">{{#str}}selecteditems, form{{/str}}</span>
<div{{!
}} class="form-autocomplete-selection w-100 {{#multiple}}form-autocomplete-multiple{{/multiple}}"{{!
}} id="{{selectionId}}"{{!
}} aria-labelledby="{{selectionId}}-label"{{!
}} role="listbox"{{!
}} aria-atomic="true"{{!
}} tabindex="0"{{!
}} {{#required}}aria-required="true"{{/required}}{{!
}} {{#multiple}}aria-multiselectable="true"{{/multiple}}>
{{> core/form_autocomplete_selection_items }}
</div>