search

cibernox / ember-power-select

The extensible select component built for ember.
http://www.ember-power-select.com
Other
541 stars 380 forks source link

power-select not fully accessible #1145

Open dfgkzhang opened 5 years ago

dfgkzhang commented 5 years ago

When navigating the select dropdown options, a screen reader won't read the value of the highlighted option. This is because focus does not actually shift to the item in the list, but remains on the trigger. This makes the dropdown unusable for accessibility, since the user won't know what they're selecting.

Another issue is the allowClear option, which enables an 'x' button to show up in order to clear the value. This 'x' is a span and is not reachable using only the keyboard. Even if we give it a tabindex and make it reachable, the actions on the button are based on mouse interactions.

Does anyone have any quick solutions to these problems?

MartinMalinda commented 5 years ago

Another issue is the allowClear option, which enables an 'x' button to show up in order to clear the value. This 'x' is a span and is not reachable using only the keyboard. Even if we give it a tabindex and make it reachable, the actions on the button are based on mouse interactions.

I'm creating a wrap component that places the clear button outside the select box. It would be useful to have this in power select by default. On the other hand extra element can totally introduce layout issues, especially if it renders conditionally - the select box jumping to side, getting smaller etc as the clear button renders.

I find accessibility problematic whenever a wormhole is used, you easily lose focus location. I guess renderInPlace should also be used whenever possible to prevent this.