From bb1b8e9e10dfa23dd2b362461cb5be4da3a6b7df Mon Sep 17 00:00:00 2001
From: Calvin Lough <clough@freshbooks.com>
Date: Wed, 17 Nov 2021 08:17:28 -0700
Subject: [PATCH] Update markup to make the component usable by screen readers

---
 addon/components/power-select.hbs         |  5 ++++-
 addon/components/power-select.ts          | 12 ++++++++++++
 addon/components/power-select/options.hbs | 11 ++++++-----
 3 files changed, 22 insertions(+), 6 deletions(-)

diff --git a/addon/components/power-select.hbs b/addon/components/power-select.hbs
index a4f1a862c..6ee3bfad2 100644
--- 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
index 12cc926fb..6dab40e5a 100644
--- 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
index d8641a343..62b170cea 100644
--- 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>