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

Unexpected keyboard focus of inactive tab in a tablist #132

Open
scottaohara opened this Issue Nov 1, 2018 · 1 comment

Comments

Projects
None yet
2 participants
@scottaohara
Copy link
Member

scottaohara commented Nov 1, 2018

Summary

When interacting with an ARIA Tab widget, it's common to set the currently active tab to have a tabindex=0 and to set the inactive tabs to have a tabindex=-1. When testing various different implementations of Tab widgets, it was noticed that if navigating by the virtual cursor, and then hitting the Tab key, keyboard focus would be set to the first tab in the tablist, regardless of whether or not it was the currently active tab / the tab with the tabindex=0.

Removing the possibility that incorrect JavaScript/focus management could be to blame, a reduced test case continues to display this behavior across browsers.

Steps to reproduce:

  • With JAWS 18 or 2018 and a web browsers (tested with firefox, chrome and IE11), visit: http://bleachedgraphics.com/test/tabs/tests/focus-test.html
  • Navigate with the virtual cursor, or by heading elements, until "The test, heading level 2" is announced.
  • Hit the Tab key to navigate into the tablist.

Alternatively

  • Navigate by heading elements until "testing from beneath the tablist, heading level 3" is announced.
  • Hit the Shift + Tab keys to navigate backwards in the DOM.

Expected result

The tab with aria-selected="true" and tabindex="0" should have been the element that received keyboard focus, regardless of navigating forwards or backwards into the tablist.

Note: if navigating solely via the Tab key, keyboard focus moves to the tab with tabindex=0 as expected. e.g. if Navigating by Tab key from one of the links in the test file, the tab with the accessible name of "banana" will be properly focused, as expected.

Actual result

The first tab with the accessible name of "Apple" receives focus, even though it has a tabindex=-1.

If navigating backwards from the h3, the last tab with the accessible name of "Orange" is focused, even though it has a tabindex=-1.

Example

http://bleachedgraphics.com/test/tabs/tests/focus-test.html

Additional Information

Note that this same unexpected behavior also occurs when using NVDA 2018.3.2. It does not occur when using VoiceOver.

JAWS version and build number

JAWS 18.0.5038
JAWS 2018.1808.10

Operating System and version

Windows 10 Pro
10.0.17134

Browser and version:

Chrome (latest), Firefox 63.0.1, Firefox 64.0.2, Firefox 65.0a1, IE11

@scottaohara

This comment has been minimized.

Copy link
Member

scottaohara commented Jan 17, 2019

Tested today with JAWS 2019.1812.49 and this is still occuring.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment