mirror_php/moodle
1
0
Fork 0
mirror of https://github.com/moodle/moodle.git synced 2025-04-13 12:32:08 +02:00
Code Issues Projects Releases Wiki Activity

MDL-68167 lib: Fix label for autocomplete selection/suggestion box

Browse Source 
The content of the autocomplete selection div is purged by javascript
so we have to move its label outside of it. aria-labeledby is the way
to go.

Each time the suggestion box is expanded, autocomplete js renders the
autocomplete suggestions template. So the label cannot be outside the
suggestions ul.
This commit is contained in:
Shamim Rezaie 2020-07-29 02:45:30 +10:00
parent ceda24637d
commit b6d733dd4e
4 changed files with 6 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
lang/en/form.php
View File

@ -80,6 +80,7 @@ $string['showadvanced'] = 'Show advanced';
$string['showless'] = 'Show less...';
$string['showmore'] = 'Show more...';
$string['somefieldsrequired'] = 'There are required fields in this form marked {$a}.';
$string['suggestions'] = 'Suggestions';
$string['time'] = 'Time';
$string['timeunit'] = 'Time unit';
$string['timing'] = 'Timing';

3
lib/templates/form_autocomplete_selection.mustache
View File

@ -37,12 +37,13 @@
{ "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"{{!
}} {{#multiple}}tabindex="0" aria-multiselectable="true"{{/multiple}}>
<span class="accesshide">{{#str}}selecteditems, form{{/str}}</span>
{{> core/form_autocomplete_selection_items }}
</div>

2
lib/templates/form_autocomplete_suggestions.mustache
View File

@ -35,7 +35,7 @@
{ "label": "Another item label with <strong>tags</strong>", "value": "4" }
]}
}}
<ul class="form-autocomplete-suggestions" id="{{suggestionsId}}" role="listbox" aria-hidden="true" tabindex="-1">
<ul class="form-autocomplete-suggestions" id="{{suggestionsId}}" role="listbox" aria-label="{{#str}}suggestions, form{{/str}}" aria-hidden="true" tabindex="-1">
{{#options}}
<li role="option" data-value="{{value}}">{{{label}}}</li>
{{/options}}

3
user/templates/local/participantsfilter/autocomplete_selection.mustache
View File

@ -37,13 +37,14 @@
{ "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 d-inline-block my-0{{#multiple}} form-autocomplete-multiple h5{{/multiple}}"{{!
}} id="{{selectionId}}"{{!
}} aria-labelledby="{{selectionId}}-label"{{!
}} role="listbox"{{!
}} aria-atomic="true"{{!
}}{{#multiple}} tabindex="0" aria-multiselectable="true"{{/multiple}}{{!
}}>
<span class="accesshide">{{#str}}selecteditems, form{{/str}}</span>
{{> core/form_autocomplete_selection_items }}
</div>