Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Initial item highlight is broken until first selection is made #193

Closed
oliverfoster opened this issue Sep 2, 2024 · 3 comments · Fixed by adaptlearning/adapt-contrib-vanilla#526
Assignees
Labels

Comments

@oliverfoster
Copy link
Member

oliverfoster commented Sep 2, 2024

Subject of the issue

If using the keyboard up/down arrows, the item highlighting does not show until an initial selection is made.

Seems to have been introduced in adaptlearning/adapt-contrib-vanilla#507

Where .dropdown__btn.is-selected + is not valid until an initial selection.

@kirsty-hames kirsty-hames self-assigned this Sep 2, 2024
@kirsty-hames
Copy link
Contributor

Yep this is due to Fix 2: Only apply selected styles when a dropdown item has been selected of the above PR. If we revert the line above however, the issue still stands that there's no distinguish between the selected option and the focused option.

This is due to aria-selected="true" being applied to the focused option rather than the selected option only.

To replicate, you can inspect the listbox .dropdown__list (expand so all .dropdown-items are visible) in you devtools. In your course, navigate to the listbox via keyboard, select enter to expand. Use up/down arrows to navigate the options. As per the video below, aria-selected="true" chases the option with focus. In the video, I selected the last option '2015' prior to hitting record. I didn't make a selection during the video so aria-selected="true" should have remained on the last option.

keypress_focus.mov

Note, if no options are selected before the listbox receives focus, the first option receives focus. There's no requirement for an option to be automatically selected (mdn listbox keyboard interactions for ref).

I'll review this against https://www.w3.org/WAI/ARIA/apg/patterns/combobox/examples/combobox-select-only/ as per #147

@oliverfoster
Copy link
Member Author

Yes. It currently doesn't distinguish between highlighted/focused and selected. That is as designed.

If I remember correctly, it was an issue with the placeholder text not being an acceptable entry in the list, such that once open it should not be possible to close the dropdown without making a valid selection.

Should it be able to be closed without making a selection? The should it return to the placeholder text, etc?

@kirsty-hames
Copy link
Contributor

Please ignore my comment above @oliverfoster, this is separate to this issue and will address in #147. I'll raise a PR on Vanilla to address this issue.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
2 participants