MDL-68612 user: Participants filter row accessibility improvements
[moodle.git] / user / templates / local / participantsfilter / autocomplete_selection_items.mustache
CommitLineData
f14df62d
AN
1{{!
2 This file is part of Moodle - http://moodle.org/
3
4 Moodle is free software: you can redistribute it and/or modify
5 it under the terms of the GNU General Public License as published by
6 the Free Software Foundation, either version 3 of the License, or
7 (at your option) any later version.
8
9 Moodle is distributed in the hope that it will be useful,
10 but WITHOUT ANY WARRANTY; without even the implied warranty of
11 MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
12 GNU General Public License for more details.
13
14 You should have received a copy of the GNU General Public License
15 along with Moodle. If not, see <http://www.gnu.org/licenses/>.
16}}
17{{!
18 @template core_user/local/participantsfilter/autocomplete_selection_items
19
20 Moodle template for the currently selected items in an autocomplete form element.
21
22 Classes required for JS:
23 * none
24
25 Data attributes required for JS:
26 * data-value
27
28 Context variables required for this template:
29 * items List of items with label and value fields.
30 * - value Value of the selected item.
31 * - label HTML representing the value.
32 * noSelectionString String to use when no items are selected
33
34 Example context (json):
35 {
36 "items": [
37 { "label": "Item label with <strong>tags</strong>", "value": "5" },
38 { "label": "Another item label with <strong>tags</strong>", "value": "4" }
39 ],
40 "noSelectionString": "No selection"
41 }
42}}
43{{#items}}
44 <span role="listitem" data-value="{{value}}" aria-selected="true"
6881ca38 45 class="badge badge-secondary clickable text-wrap text-break line-height-4 mr-2 my-1">
3d60881d
MH
46 {{label}}
47 <button class="btn btn-link text-reset p-0" aria-label='{{#str}}clearfilterselection, core_user, {{label}}{{/str}}'>
48 <i class="icon fa fa-times pl-2 mr-0"></i>
49 </button>
f14df62d
AN
50 </span>
51{{/items}}
52{{^items}}
53 <span class="mb-3 mr-1">{{noSelectionString}}</span>
54{{/items}}