Improve ember-power-select screen reader accessibility

[calvin-fb]

The current implementation doesn't appear to work well with screen readers. Specifically, screen readers are unable to recognize and read out the options because of missing aria attributes.

This PR fixes a few issues from the previous checklist created by someone else "[a11y] Refine ARIA implementation": #806

It closes these two issues from that list:

• Implement aria-activedescendant on the combobox. This property allows focus to stay on the trigger but tells the screen reader which option in the listbox is currently highlighted.
• Remove aria-controls from ul elements inside the listbox. (This relationship was backwards. The trigger controls the options list, not the other way around.)

I also compared ember-power-select to the reference implementation provided by the W3C. In my testing, this reference implementation works very well with screen readers: https://w3c.github.io/aria-practices/examples/combobox/combobox-select-only.html

This PR by itself doesn't fix all screen reader issues. This is merely a step in the right direction. For one, users will have to pass in @triggerRole="combobox".

[aabzhanova]

👍

[cibernox]

If querying for an ID, maybe use document.getElementById

[calvin-fb]

Updated 👍

[cibernox]

Hey, this looks great!
Only one question comes to mind: I assume aria-owns is set to a blank string to be sure it overrides the default aria-owns in the underlying ember-basic dropdown. Is aria-owns incorrect in every case or only for selects? I wonder because maybe if it's a bad pattern that could be fixed in ember-basic-dropdown instead and both addons would improve.

[calvin-fb]

Only one question comes to mind: I assume aria-owns is set to a blank string to be sure it overrides the default aria-owns in the underlying ember-basic dropdown. Is aria-owns incorrect in every case or only for selects? I wonder because maybe if it's a bad pattern that could be fixed in ember-basic-dropdown instead and both addons would improve.

I'm actually not sure. Personally I haven't seen any issues with using aria-owns for ember-basic-dropdown but I'm no expert. I figured it was less risky to just change it here for now.

[cibernox]

It is less risky indeed and if we end up making that change in ember-basic-dropdown having this override would be unnecessary but not harmful, so I'm good with merging this as is. I'll check if any of the CI errors seems legit, but their are because the addon has some issues with Ember 4.0

[calvin-fb]

@cibernox Apologies, I was doing some testing and realized that more changes needed to be made. I've moved the aria properties from the trigger to the searchbox when searchEnabled is true. The way I had it before worked well when the search wasn't present but when the search was visible it got a little confused. I've added a new test for this.

[cibernox]

Cool. I just ran the test suite locally and i found no errors. If the test suite is also green after these last changes I'll merged it tonight

[cibernox]

Thanks for this! I don't know about jaws but in voice over it's so much better. I'll release a new version

[cibernox]

Merged. I'll let it sit in master for a few days in case you find another edge case. If after a few days you don't find any other problem I'll release 5.0 (I don't think this will be a breaking change in practice for virtually anyone, but I prefer to bump one mayor version to be sure)

[calvin-fb]

Awesome, thanks @cibernox!

[aabzhanova]

@cibernox thank you so much Miguel for getting this reviewed and merged quickly! 🎉 We really appreciate that 👍