diff --git a/addon-test-support/index.js b/addon-test-support/index.js index a558eaa01..b9c93132f 100644 --- a/addon-test-support/index.js +++ b/addon-test-support/index.js @@ -2,12 +2,11 @@ import { click, fillIn, settled } from '@ember/test-helpers'; import { warn } from '@ember/debug'; async function openIfClosedAndGetContentId(trigger) { - let contentId = trigger.attributes['aria-owns'] && `${trigger.attributes['aria-owns'].value}`; + let contentId = `ember-basic-dropdown-content-${trigger.getAttribute('data-ebd-id').replace('-trigger', '')}` let content = contentId ? document.querySelector(`#${contentId}`) : undefined; // If the dropdown is closed, open it if (!content || content.classList.contains('ember-basic-dropdown-content-placeholder')) { await click(trigger); - contentId = `${trigger.attributes['aria-owns'].value}`; } return contentId; } diff --git a/addon/components/power-select.hbs b/addon/components/power-select.hbs index a4f1a862c..91761b6e7 100644 --- a/addon/components/power-select.hbs +++ b/addon/components/power-select.hbs @@ -38,10 +38,14 @@ {{on "focus" this.handleFocus}} {{on "blur" this.handleBlur}} class="ember-power-select-trigger {{@triggerClass}}{{if publicAPI.isActive " ember-power-select-trigger--active"}}" + aria-activedescendant={{unless @searchEnabled (concat publicAPI.uniqueId "-" this.highlightedIndex)}} + aria-controls={{unless @searchEnabled listboxId}} aria-describedby={{@ariaDescribedBy}} + aria-haspopup={{unless @searchEnabled "listbox"}} aria-invalid={{@ariaInvalid}} aria-label={{@ariaLabel}} aria-labelledby={{@ariaLabelledBy}} + aria-owns="" aria-required={{@required}} role={{or @triggerRole "button"}} title={{@title}} @@ -84,6 +88,7 @@ @placeholderComponent={{this.placeholderComponent}} @extra={{@extra}} @listboxId={{listboxId}} + @ariaActiveDescendant={{concat publicAPI.uniqueId "-" this.highlightedIndex}} @selectedItemComponent={{@selectedItemComponent}} @searchPlaceholder={{@searchPlaceholder}} /> diff --git a/addon/components/power-select.ts b/addon/components/power-select.ts index 12cc926fb..ec4246f1a 100644 --- a/addon/components/power-select.ts +++ b/addon/components/power-select.ts @@ -15,6 +15,7 @@ import { advanceSelectableOption, defaultMatcher, defaultTypeAheadMatcher, + pathForOption, MatcherFn } from '../utils/group-utils'; import { restartableTask } from 'ember-concurrency-decorators'; @@ -147,6 +148,13 @@ export default class PowerSelect extends Component { get highlightOnHover(): boolean { return this.args.highlightOnHover === undefined ? true : this.args.highlightOnHover } + + get highlightedIndex(): string { + let results = this.results; + let highlighted = this.highlighted; + return pathForOption(results, highlighted); + } + get placeholderComponent(): string { return this.args.placeholderComponent || 'power-select/placeholder'; } @@ -413,7 +421,7 @@ export default class PowerSelect extends Component { if (this.args.scrollTo) { return this.args.scrollTo(option, select); } - let optionsList = document.querySelector(`[aria-controls="ember-power-select-trigger-${select.uniqueId}"]`) as HTMLElement; + let optionsList = document.getElementById(`ember-power-select-options-${select.uniqueId}`) as HTMLElement; if (!optionsList) { return; } diff --git a/addon/components/power-select/before-options.hbs b/addon/components/power-select/before-options.hbs index 14be9f0b9..9c9c5b25b 100644 --- a/addon/components/power-select/before-options.hbs +++ b/addon/components/power-select/before-options.hbs @@ -5,7 +5,9 @@ spellcheck={{false}} role="combobox" class="ember-power-select-search-input" value={{@select.searchText}} + aria-activedescendant={{@ariaActiveDescendant}} aria-controls={{@listboxId}} + aria-haspopup="listbox" placeholder={{@searchPlaceholder}} {{on "input" @onInput}} {{on "focus" @onFocus}} @@ -14,4 +16,4 @@ {{did-insert this.focusInput}} {{will-destroy this.clearSearch}}> -{{/if}} \ No newline at end of file +{{/if}} diff --git a/addon/components/power-select/options.hbs b/addon/components/power-select/options.hbs index d8641a343..ff0f36890 100644 --- a/addon/components/power-select/options.hbs +++ b/addon/components/power-select/options.hbs @@ -1,4 +1,4 @@ -