Add id, aria-label & aria-labelledby to all listboxes

cibernox · Nov 10, 2020 · 24f9f40 · 24f9f40
1 parent c59a136
commit 24f9f40
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 3 deletions.
diff --git a/addon/components/power-select.hbs b/addon/components/power-select.hbs
@@ -90,11 +90,23 @@
       {{/let}}
       {{#if this.mustShowSearchMessage}}
         {{#let (component (or @searchMessageComponent "power-select/search-message")) as |SearchMessage|}}
-          <SearchMessage @searchMessage={{this.searchMessage}} @select={{publicAPI}}/>
+          <SearchMessage 
+            @searchMessage={{this.searchMessage}} 
+            @select={{publicAPI}} 
+            id={{listboxId}} 
+            aria-label={{@ariaLabel}}
+            aria-labelledby={{@ariaLabelledBy}}  
+          />
         {{/let}}
       {{else if this.mustShowNoMessages}}
         {{#if this.noMatchesMessage}}
-          <ul class="ember-power-select-options" role="listbox">
+          <ul 
+            class="ember-power-select-options" 
+            role="listbox" 
+            id={{listboxId}}
+            aria-label={{@ariaLabel}}
+            aria-labelledby={{@ariaLabelledBy}}
+          >
             <li class="ember-power-select-option ember-power-select-option--no-matches-message" role="option">
               {{this.noMatchesMessage}}
             </li>

diff --git a/addon/components/power-select/search-message.hbs b/addon/components/power-select/search-message.hbs
@@ -1,4 +1,4 @@
-<ul class="ember-power-select-options" role="listbox">
+<ul class="ember-power-select-options" role="listbox" ...attributes>
   <li class="ember-power-select-option ember-power-select-option--search-message" role="option">
     {{@searchMessage}}
   </li>