Improving Accessibility in Ember Power Select for Screen Readers

1

Hi everyone,

I’m currently working with Ember Power Select and focusing on enhancing its accessibility for screen readers, particularly when handling dropdown options and search fields. My goal is to ensure the dropdown component provides a seamless and informative experience for users relying on assistive technologies.

Desired Behavior

Here’s how I envision the dropdown behaving with a screen reader:

  1. When the dropdown is collapsed and focused:

• It should announce the current state and selection, such as:

“Dropdown menu, collapsed, Option 2 selected, 1 of 5 options.”

  1. While navigating within the dropdown:

• It should sequentially announce options as follows:

“Option 1, 1 of 5.”

“Option 2, 2 of 5, selected.”

“Option 3, 3 of 5.”

“Option 4, 4 of 5.”

“Option 5, 5 of 5.”

Note: The list of options is dynamic, so the component must handle a varying number of options gracefully while maintaining proper accessibility attributes.

PowerSelect
  @disabled={{or
    @mockData.isReadOnly
    this.isMultiEdit
    (not this.canEdit)
  }}
  @options={{this.mockOptions}}
  @selected={{this.selectedMockOption}}
  @placeholder="Choose an option"
  @id="mock-select"
  @allowClear={{false}}
  @searchEnabled={{true}}
  @searchField="name"
  @onChange={{this.updateMockOption}}
  @onOpen={{this.onDropdownOpen}}
  @onClose={{this.onDropdownClose}}
  @onHighlight={{this.onOptionHighlight}}
  @required={{true}}
  aria-haspopup="listbox"
  aria-expanded={{if this.isDropdownOpen "true" "false"}}
  aria-activedescendant={{if this.highlightedOptionId this.highlightedOptionId null}}
  role="combobox"
  as |option index|
>
  <span
    id={{concat "mock-option-" index}}
    role="option"
    aria-selected={{eq option this.selectedMockOption}}
    aria-posinset={{inc index}}
    aria-setsize={{this.mockOptions.length}}
  >
    {{option.name}}
    {{#if (and (not option.enabled) option.id)}}
      <span class="float-right text-mock-class">Hidden on Device</span>
    {{/if}}
    {{#if option.isChildOption}}
      <span class="child-option-icon ml-1 ember-tooltip-target"></span>
    {{/if}}
  </span>
</PowerSelect>
  1. How can I make the dropdown consistently announce the format:

“Option X, X of Y.”

for each item when navigating sequentially?

  1. Are there additional attributes or techniques I should consider for better ARIA compliance, especially for dynamic content?
1 Like