[ENHANCEMENT] Propagate aria to options component

[billybonks]

propagates label of push button to listbox element.

Still need to explore the other 2 role="listbox" elements. May break if a different options component is used.

Motivation

https://github.com/tradegecko/ember-semantic-test-helpers/pull/3

Edit

Trying to get voice over to announce the currently selected item as you use the up and down arrows.

• problem 1 active-descendent does not support button.

so i moved to the power select with search box,

• problem 2 aria-selected is the only thing that gets announced as you use the up and down arrows

so i made aria-selected the currently highlighted element.

• problem 3 now it announces the item previous item when i press up and down :'(

resouces https://www.w3.org/TR/wai-aria-1.1/#aria-selected https://www.w3.org/TR/wai-aria-1.1/#aria-current https://www.w3.org/TR/wai-aria-1.1/#aria-activedescendant

https://codepen.io/billybonks/full/jxMYpr/ ( trying to get this behavior )

[cibernox]

This looks good, I only wonder if there is a test you can add to ensure we never regress on this. Other than that looks good.

[billybonks]

Yes let's hold off on the merge was hoping to make some tonight changes because I had some extra thoughts on it. But my laptop just died on me so it will have to wait till tomorrow

On Wed, 25 Apr 2018, 21:24 Miguel Camba, [email protected] wrote:

This looks good, I only wonder if there is a test you can add to ensure we never regress on this. Other than that looks good.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/cibernox/ember-power-select/pull/1101#issuecomment-384284957, or mute the thread https://github.com/notifications/unsubscribe-auth/ABkGyHk3DNPW2x0c0bw_pKpwQlnQVA1Aks5tsHj-gaJpZM4TiAiZ .

[peculiarism]

Has there been any progress with this PR? Looking at a solution for this exact problem in our codebase, just wanted to know if the status has changed :)

[billybonks]

@eglenfield right now i my priority is to finish https://github.com/tradegecko/ember-semantic-test-helpers/pull/5. would be awesome if you could pull this branch and figure out why it, announces the item i left versus the item i navigated to when going up and down the drop down. that's the biggest blocker at the moment.

[peculiarism]

@billybonks so after some investigating with @MichalBryxi we realised that there is a typo here, it should be activeDescendant instead of ariaActivedescendant. After a quick check using Safari and V/O it's now announcing in the right order 👍

[billybonks]

i made the change but it still only announces selected - 1 element :(.

so some notes on the raw powerselect with search enabled.

ember-power-select-trigger ember-basic-dropdown-trigger should own ember-power-select-search

Authors MUST ensure an element with role combobox contains or owns a text input element with role textbox or searchbox and that the text input has aria-multiline set to false. If the combobox provides autocompletion behavior for the text input as described in aria-autocomplete, authors MUST set aria-autocomplete on the textbox element to the value that corresponds to the provided behavior.

then the spec goes on to say

When a combobox is expanded, authors MUST ensure it contains or owns an element that has a role of listbox, tree, grid, or dialog. This element is the combobox popup. When the combobox is expanded, authors MUST set aria-controls on the textbox element to a value that refers to the combobox popup element.

apparently owned can be defined by

Owned Element
An 'owned element' is any DOM descendant of the element, any element specified as a child via aria-owns, or any DOM descendant of the owned child.

so if the main div owns the input and the input owns the listbox then that should work the input should also aria-controls the list box

got all of it from this definition

i think if we make it match the spec exactly as described it should work well http://oaa-accessibility.org/example/11/ doesn't even use aria-selected, and it works.

[MichalBryxi]

Maybe I'm missing part of the conversation, but:

• my patch on top of your previous patch
• demonstration that it reads the correct item

Also I used different role. If you can show me the case in the docs that fails in Safari with V/O, we can have a look.

Note: Seems to me that Chrome + V/O does not work well. So it might be that our solution still needs some work.

[mkszepp]

Closing this, as cause in the last years there was improved a11y support and in v8 we have now aria 1.2 implemented out of the box