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

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.

diff --git a/lang/en/form.php b/lang/en/form.php
index 4014ba2..ab3ee37 100644 (file)
--- a/lang/en/form.php
+++ b/lang/en/form.php
@@ -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';

diff --git a/lib/templates/form_autocomplete_selection.mustache b/lib/templates/form_autocomplete_selection.mustache
index 9c04e25..0476f27 100644 (file)
--- a/lib/templates/form_autocomplete_selection.mustache
+++ b/lib/templates/form_autocomplete_selection.mustache
@@ -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>

diff --git a/lib/templates/form_autocomplete_suggestions.mustache b/lib/templates/form_autocomplete_suggestions.mustache
index a7cc56a..7e1a0f5 100644 (file)
--- a/lib/templates/form_autocomplete_suggestions.mustache
+++ b/lib/templates/form_autocomplete_suggestions.mustache
@@ -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}}

diff --git a/user/templates/local/participantsfilter/autocomplete_selection.mustache b/user/templates/local/participantsfilter/autocomplete_selection.mustache
index 3278577..57327a8 100644 (file)
--- a/user/templates/local/participantsfilter/autocomplete_selection.mustache
+++ b/user/templates/local/participantsfilter/autocomplete_selection.mustache
@@ -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>