Add aria-label & aria-labelled-by to single select search input

Otherwise, the input has no label. This also removes the role="combobox" from the input, as that is redundant for input type="search" and axe also complains about it.
cibernox · May 18, 2020 · fa3ed70 · fa3ed70
1 parent 096acd1
commit fa3ed70
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 3 deletions.
diff --git a/addon/templates/components/power-select.hbs b/addon/templates/components/power-select.hbs
@@ -84,6 +84,8 @@
           @listboxId={{listboxId}}
           @selectedItemComponent={{@selectedItemComponent}}
           @searchPlaceholder={{@searchPlaceholder}}
+          @ariaLabel={{@ariaLabel}}
+          @ariaLabelledBy={{@ariaLabelledBy}}
           />
       {{/let}}
       {{#if this.mustShowSearchMessage}}

diff --git a/addon/templates/components/power-select/before-options.hbs b/addon/templates/components/power-select/before-options.hbs
@@ -1,12 +1,16 @@
 {{#if @searchEnabled}}
   <div class="ember-power-select-search">
-    <input type="search" autocomplete="off"
-      autocorrect="off" autocapitalize="off"
-      spellcheck={{false}} role="combobox"
+    <input type="search"
+      autocomplete="off"
+      autocorrect="off"
+      autocapitalize="off"
+      spellcheck={{false}}
       class="ember-power-select-search-input"
       value={{@select.searchText}}
       aria-controls={{@listboxId}}
       placeholder={{@searchPlaceholder}}
+      aria-label={{@ariaLabel}}
+      aria-labelledby={{@ariaLabelledBy}}
       {{on "input" @onInput}}
       {{on "focus" @onFocus}}
       {{on "blur" @onBlur}}