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

cibernox · Sep 7, 2022 · 04e58eb · 04e58eb
1 parent 19a90e2
commit 04e58eb
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
@@ -124,7 +124,13 @@
             (component '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}}
         {{#let 
@@ -134,7 +140,13 @@
             (component 'power-select/no-matches-message')
           ) 
          as |NoMatchesMessage|}}
-          <NoMatchesMessage @noMatchesMessage={{this.noMatchesMessage}} @select={{publicAPI}} />
+          <NoMatchesMessage 
+            @noMatchesMessage={{this.noMatchesMessage}} 
+            @select={{publicAPI}} 
+            id={{listboxId}} 
+            aria-label={{@ariaLabel}}
+            aria-labelledby={{@ariaLabelledBy}} 
+          />
         {{/let}}
       {{else}}
         {{#let 

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>