docs(cdk-experimental/listbox): add docs & examples

[mmalerba]

No description provided.

[github-actions]

Deployed dev-app to: https://ng-comp-dev--pr-25317-12d13d41740a198e4dbe0775a21877e3-s5kwevwm.web.app

[mmalerba]

I embedded all the examples I added in the dev-app, you can check them out here: https://ng-comp-dev--pr-25317-2998a6aea0f4c5d81c00616767c9e8e1-rzze2wbv.web.app/cdk-experimental-listbox

[zarend]

I only skimmed looking over the code, but I did test this with voiceover on chrome. Here's what I found.

The checkmark unicode character should aria-hidden="true" because it is decorative. Otherwise screen readers will actually try to read the checkmark. Probably fine to not put aria-hidden="true" on the emojis.

^ Syrah is selected, but it should only be focused and not selected. This also happens in the examples: "Listbox with Value Binding", "Listbox with compareWith Function", "Listbox with Reactive Forms", "Listbox with Forms Validation", "Listbox with Disabled Options", "Horizontal Listbox", "Listbox with Custom Typeahead", and "Listbox with Custom Keyboard Navigation Options"

The listbox spec has an optional requirement where pressing Home and End moves focus to the start or end of the listbox. Not required, but it's an improvement if you're looking for something. https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/listbox_role

[mmalerba]

@zarend

checkmark

ok, its on a ::before element, so aria-hidden isn't possible, but I switched it to a background image, which hopefully works

focus/selected

are you saying that the sceenreader is reading "Syrah" as selected, or that it looks selected? The background color was supposed to indicate focused-ness but I was applying it based on the active class which remains if the entire listbox is defocused. I've switched it to target :focus so hopefully it makes more sense now

home/end

are you saying those keys don't work for you? they seem to be working for me

[zarend]

@zarend

checkmark

ok, its on a ::before element, so aria-hidden isn't possible, but I switched it to a background image, which hopefully works

focus/selected

are you saying that the sceenreader is reading "Syrah" as selected, or that it looks selected? The background color was supposed to indicate focused-ness but I was applying it based on the active class which remains if the entire listbox is defocused. I've switched it to target :focus so hopefully it makes more sense now

home/end

are you saying those keys don't work for you? they seem to be working for me

Home/End are not working correctly when I have VoiceOver turned on. This only aplys to the examples "Listbox with Value Binding", "Listbox with compareWith Function", "Listbox with Reactive Forms", "Listbox with Forms Validation", "Listbox with Disabled Options", "Horizontal Listbox", "Listbox with Custom Typeahead", and "Listbox with Custom Keyboard Navigation Options". However, it works fine when voiceover is turned off.

Yes voiceover is reading Syrah as selected when I navigate to it via the down arrow. When I navigate via screen reader navigation (cmd + option + down), Voice Over reads Syrah, but not as selected.

[zarend]

cdk-listbox-voiceover.mov

1. Tab to listbox
2. press End
3. (last item in listbox is activated but screen reader focus seems to move to a button at the top of the page).

Looks like the listbox focuses the correct item when I press End with VoiceOver enabled, but the screen reader's navigation state gets in a bad state.

[mmalerba]

@zarend I definitely want to look into the strange a11y behavior you're seeing, but I'll do it in a followup PR

[angular-automatic-lock-bot]

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

_{This action has been performed automatically by a bot.}