Update markup to make the component usable by screen readers

cibernox · Nov 17, 2021 · bb1b8e9 · bb1b8e9
1 parent 00498e6
commit bb1b8e9
Show file tree

Hide file tree

Showing 3 changed files with 22 additions and 6 deletions.
diff --git a/addon/components/power-select.hbs b/addon/components/power-select.hbs
@@ -38,12 +38,15 @@
       {{on "focus" this.handleFocus}}
       {{on "blur" this.handleBlur}}
       class="ember-power-select-trigger {{@triggerClass}}{{if publicAPI.isActive " ember-power-select-trigger--active"}}"
+      aria-activedescendant={{concat publicAPI.uniqueId "-" this.highlightedIndex}}
+      aria-controls={{listboxId}}
       aria-describedby={{@ariaDescribedBy}}
+      aria-haspopup="listbox"
       aria-invalid={{@ariaInvalid}}
       aria-label={{@ariaLabel}}
       aria-labelledby={{@ariaLabelledBy}}
       aria-required={{@required}}
-      role={{or @triggerRole "button"}}
+      role={{or @triggerRole "combobox"}}
       title={{@title}}
       id={{@triggerId}}
       tabindex={{and (not @disabled) (or @tabindex "0")}}

diff --git a/addon/components/power-select.ts b/addon/components/power-select.ts
@@ -147,6 +147,18 @@ export default class PowerSelect extends Component<PowerSelectArgs> {
   get highlightOnHover(): boolean {
     return this.args.highlightOnHover === undefined ? true : this.args.highlightOnHover
   }
+
+  get highlightedIndex(): number {
+    let results = this.results;
+    let highlighted = this.highlighted;
+
+    if (results) {
+      return indexOfOption(results, highlighted);
+    }
+
+    return 0;
+  }
+
   get placeholderComponent(): string {
     return this.args.placeholderComponent || 'power-select/placeholder';
   }

diff --git a/addon/components/power-select/options.hbs b/addon/components/power-select/options.hbs
@@ -1,4 +1,4 @@
-<ul role="listbox" aria-controls="ember-power-select-trigger-{{@select.uniqueId}}" {{did-insert this.addHandlers}} {{will-destroy this.removeHandlers}} ...attributes>
+<div role="listbox" {{did-insert this.addHandlers}} {{will-destroy this.removeHandlers}} ...attributes>
   {{! template-lint-disable no-unnecessary-concat }}
   {{#if @select.loading}}
     {{#if @loadingMessage}}
@@ -22,15 +22,16 @@
           </Options>
         </Group>
       {{else}}
-        <li class="ember-power-select-option"
+        <div class="ember-power-select-option"
+          id="{{@select.uniqueId}}-{{@groupIndex}}{{index}}"
           aria-selected="{{ember-power-select-is-selected opt @select.selected}}"
           aria-disabled={{if opt.disabled "true"}}
           aria-current="{{eq opt @select.highlighted}}"
           data-option-index="{{@groupIndex}}{{index}}"
-          role={{if (eq opt @select.highlighted) "alert" "option"}}>
+          role="option">
           {{yield opt @select}}
-        </li>
+        </div>
       {{/if}}
     {{/each}}
   {{/let}}
-</ul>
+</div>