mirror of
https://github.com/moodle/moodle.git
synced 2025-03-13 20:26:32 +01:00
bdd60287e5
Fixes 3 problems with deselecting items in an autocomplete field: 1. Keep track of whether items were in the offical suggestion list, or are newly created tags and remove the "newly created tags" from the suggestion list when they are deselected 2. Change the aria-role for the selected items list when items cannot be deselected (and do not treat it like a multiselect list). 3. When leaving and returning focus to the selected items list, remember the last active-descendant.
51 lines
2.0 KiB
Plaintext
51 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 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.
|
||
|
||
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" }
|
||
]}
|
||
}}
|
||
<div class="form-autocomplete-selection {{#multiple}}form-autocomplete-multiple{{/multiple}}" id="{{selectionId}}" role="list" aria-atomic="true" {{#multiple}}tabindex="0" aria-multiselectable="true"{{/multiple}}>
|
||
<span class="accesshide">{{#str}}selecteditems, form{{/str}}</span>
|
||
{{#items}}
|
||
<span role="listitem" data-value="{{value}}" aria-selected="true" class="label label-info">
|
||
{{#multiple}}<span aria-hidden="true">× </span>{{/multiple}}{{{label}}}
|
||
</span>
|
||
{{/items}}
|
||
{{^items}}
|
||
<span>{{#str}}noselection,form{{/str}}</span>
|
||
{{/items}}
|
||
</div>
|
||
</div>
|