Dropdowns are inaccessible for screen readers about semantic-ui-ember

[James1x0]

Related Semantic-Org/Semantic-UI#348

[rachael-ross]

Yes, they are. We have a blind customer that cannot complete their tasks due to the dropdown not responding to same keyboard events that a "select" normally does. It receives the focus on tab and the reader reads the option text, however, using arrow keys doesn't move the focus from "option" to "option" (really divs) and hitting Enter on the keyboard, of course, then doesn't select the item the blind user would like to select. Any workarounds or plans to address this?

[James1x0]

@rachael-ross We obviously needed some solution to this, and I came up with a workaround. It's not perfect, but it works with my testing.

I came up with a tweak function we use in an input wrapper component (it can also render other inputs).

  dropdownAriaTweaks (type) {
    let $dropdown = this.$('.ui.dropdown');

    if (type === 'init') {
      $dropdown.attr({
        'aria-haspopup':   'listbox',
        'aria-labelledby': `${this.get('inputId')}__text ${this.get('inputId')}__label`,
        role:              'button'
      });
    } else if (type === 'show') {
      setTimeout(() => {
        $dropdown.attr('aria-expanded', true);
        let $menu =  this.$('ul[role="listbox"]')[0];
        console.log('focusing ', $menu);
        this.set('adtIsFocusing', true);
        $menu.focus();
      }, 300);

      if (this.get('adtIsFocusing')) {
        this.set('adtIsFocusing', false);
        return false;
      }
    } else if (type === 'hide') {
      if (this.get('adtIsFocusing')) {
        this.set('adtIsFocusing', false);
        return false;
      }

      setTimeout(() => {
        $dropdown.attr('aria-expanded', false);
        let $focused = document.activeElement || {};

        let totalFocusLoss = $focused.id && !this.$(`#${$focused.id}`)[0];

        if (!this.get('adtIsFocusing') && !totalFocusLoss) {
          this.set('adtIsFocusing', true);
          $dropdown.focus();
        }
      }, 300);
    }
  }

Our dropdown usage looks like this. Please note this is highly tailored to our usage.

  {{#ui-dropdown
    aria-haspopup=inputId
    class=inputClass
    selected=(readonly (get model field.path))
    forceSelection=false
    showOnFocus=field.inputAttrs.showOnFocus
    allowAdditions=(if field.inputAttrs.allowAdditions true false)
    onShow=(action dropdownAriaTweaks "show")
    onHide=(action dropdownAriaTweaks "hide")
    onChange=(action (mut value))
    debug=true
    as |execute mapper|}}
    <div id="{{inputId}}__text" class="default text" {{action showDropdown}}>
      {{#if field.selectText}}
        {{field.selectText}}
      {{else}}
        --Select--
      {{/if}}
    </div>
    <i class="dropdown icon"></i>
    <ul
      id="{{inputId}}"
      tabindex="-1"
      aria-labelledby="{{inputId}}__text {{inputId}}__label"
      class="menu"
      role="listbox"
      aria-describedby="{{aria.describedBy}}"
      aria-activedescendant="{{if (not-eq value undefined) (join '__' (array inputId value))}}">
      {{#each (get this field.contentPath) as |item|}}
        <li
          id="{{inputId}}__{{if field.valuePath (get item field.valuePath) item}}"
          class="item"
          role="option"
          data-value="{{map-value mapper (if field.valuePath (get item field.valuePath) item)}}"
          aria-selected="{{eq value (if field.valuePath (get item field.valuePath) item)}}">
          {{#if field.displayKey}}
            {{get item field.displayKey}}
          {{else}}
            {{item}}
          {{/if}}
        </li>
      {{/each}}
    </ul>
  {{/ui-dropdown}}

I hope this helps.

EDIT: Forgot to mention we call the init tweak portion of that function in didReceiveAttrs:

  didReceiveAttrs () {
    scheduleOnce('afterRender', () => this.dropdownAriaTweaks('init'));
  }