MDL-68167 lib: Fix label for autocomplete selection/suggestion box
authorShamim Rezaie <shamim@moodle.com>
Tue, 28 Jul 2020 16:45:30 +0000 (02:45 +1000)
committerShamim Rezaie <shamim@moodle.com>
Fri, 30 Oct 2020 05:01:38 +0000 (16:01 +1100)
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.

lang/en/form.php
lib/templates/form_autocomplete_selection.mustache
lib/templates/form_autocomplete_suggestions.mustache
user/templates/local/participantsfilter/autocomplete_selection.mustache

index 4014ba2..ab3ee37 100644 (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';
index 9c04e25..0476f27 100644 (file)
         { "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>
index a7cc56a..7e1a0f5 100644 (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}}
index 3278577..57327a8 100644 (file)
         { "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>