ember-power-select
ember-power-select copied to clipboard
cibernox
'ariaLabel' behaviour with multiselect
Currently, I believe that the 'ariaLabel' property gets applied on the trigger div element. Incase of multiselect with search enabled, the 'tabindex' on the trigger element is -1.
<div class="ember-power-select-multiple-trigger" role="button" tabindex="-1"
aria-owns="ember-basic-dropdown-content-ember41">
<ul id="ember-power-select-multiple-options-ember41">
<input class="ember-power-select-trigger-multiple-input" type="search">
</ul>
</div>
This means that it is the input element inside the trigger element that gets focused upon TAB. If this is the expected behaviour, should the 'ariaLabel' be applied on the input element rather than the trigger div?
The above scenario works fine for single select as the trigger div is the focusable element there.
@ganapathyHf yes, the tabindex of the input is -1 so the focus flows automatically to the input inside. About wether it would be more correct to apply the ariaLabel to the input i'm not sure, a11y is not my strongest suite, but I wouldn't mind changing it if someone more expert with a11y thinks it's more correct.
@cibernox Thanks for the quick response.
The thing is that I would expect my screenreader to announce what the input refers to, once it is focused. Hence the question.
Makes sense. Can you confirm that putting the aria-label in the input works better?
@cibernox Hi, Sorry for the late response.
Yes. aria-label for the input element works fine.
@ganapathyHf Cool. I labeled this as a bug and try to implement it, but I first need to rearchitecture the component a bit to, conditionally, pass the aria-label (and also the aria-labelledby!!!) to the trigger or the input depending if the select is multiple or single.
I'm not sure this can be fixed right now without breaking the component's public API.