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.

Sign up for GitHub

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

Jump to bottom

Tab sequence when suggestions are shown; need to tab twice to tab to the next field #17255

Closed
nico-amsterdam opened this issue Jun 26, 2024 · 1 comment
Closed

Tab sequence when suggestions are shown; need to tab twice to tab to the next field #17255

nico-amsterdam opened this issue Jun 26, 2024 · 1 comment

Comments

@nico-amsterdam
Copy link
Contributor

Although my PR #17254 fixes the issue that in the Talkback screen reader you couldn't select anything from the suggestions, it also introduced a minor annoyance in the tab sequence:

  • if suggestions are shown and you hit the tab key in the input field to leave the field, it doesn't go immediately to the next field in the tab sequence. It tries to go to the suggestion first. You have to enter the tab key another time to get in the next field.

Luckily there is an easy fix.
Instead of having tabindex 0 on the list items, it is enough to set tabindex -1 to make the list items focusable elements.
I tested this in the Talkback screen reader, and this works just as good and this doesn't disturb the tab sequence.

I will submit a PR for this.
I was thinking about adding a test, but as far as I know, it is not possible to test the tab sequence with Jasmine tests.

In the PR I will also make aria-activedescendant empty when no suggestion is selected. Currently aria-activedescendant keeps pointing to a list item even though the popup with items are hidden. This doesn't seem to cause any issues, but it is cleaner to make aria-activedescendant empty.
nico-amsterdam pushed a commit to nico-amsterdam/awesomplete that referenced this issue Jun 26, 2024
Fixes issue of LeaVerou#17255. Tab navigation when suggestions are sh…
d456424 
…own is wrong
LeaVerou pushed a commit that referenced this issue Jul 25, 2024
@nico-amsterdam
Fixes issues of #17255. Fix tab sequence (#17256)
96cddba 
* fixes issus #17252. a11y improvements. fix Talkback item selection. i18n for the status text.

* fixes issues of #17252. a11y improvements. fix Talkback item selection. i18n for the status text.

* Make aria-activedescendant empty when none is selected. see w3c/aria#501 (comment)

* Make aria-activedescendant empty when none is selected. see w3c/aria#501 (comment)

* Transformation must end with visibility hidden. Fixes tab navigation to hidden li item

* Also in css leading tab characters. After css transition everything in the suggestion list must be hidden and for example links in suggestions should not be in the tab sequence anymore

* Fixes issue of #17255. Tab navigation when suggestions are shown is wrong

---------

Co-authored-by: Nico <[email protected]@users.noreply.github.com>
@nico-amsterdam
Copy link
Contributor Author

PR with the fix is merged. Closes this ticket.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
None yet
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
1 participant
@nico-amsterdam