Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

mdc-tab loses keyboard accessibility when deactivated

See original GitHub issue

What MDC Web Version are you using?

0.44.0

What browser(s) is this bug affecting?

All browsers.

But, if you insist.

Chrome 72/Windows Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36

Chrome 72/Mac Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/72.0.3626.109 Safari/537.36

Firefox 65/Windows Mozilla/5.0 (Windows NT 10.0; WOW64; rv:65.0) Gecko/20100101 Firefox/65.0

Firefox 65/Mac Mozilla/5.0 (Macintosh; Intel Mac OS X 10.14; rv:65.0) Gecko/20100101 Firefox/65.0

Safari 12.0 Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_3) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/12.0.3 Safari/605.1.15

What OS are you using?

macOS Mojave 10.14.3 and Windows 10.

What are the steps to reproduce the bug?

In this codepen: https://codepen.io/dfabulich/pen/XOOzjz

It’s a basic tab bar with three tabs. Click in the white space under the tab bar and press the Tab key to focus tab One. Press Tab again and you’ll focus tab Two. Press Tab again and you’ll focus tab Three. Shift-Tab to focus on the second tab and press Enter to activate it, then Shift-Tab to focus tab One.

What is the actual behavior?

The tab One is no longer keyboard accessible; Shift-Tab leaves the document. Each time a tab is deactivated, its tabindex attribute is set to -1; the tab is no longer keyboard accessible.

What is the expected behavior?

The tabindex attribute should not change when activating or deactivating tabs; each tab should remain keyboard accessible as other tabs are selected and deselected.

Issue Analytics

State:
Created 5 years ago
Comments:5 (3 by maintainers)

Top GitHub Comments

1reaction

abhiomkarcommented, Apr 30, 2020

@patbou02 This can happen if MDC List is initialized twice on same list root element, which causes it to duplicate execution of keyboard handlers.

0reactions

patbou02commented, Apr 30, 2020

That makes sense and gives me a solid lead to follow. Thank you again! 😄

Top Results From Across the Web

Understanding Success Criterion 2.1.2: No Keyboard Trap | WAI

If keyboard focus can be moved to a component of the page using a keyboard interface, then focus can be moved away from...

Tab stops - Accessibility Insights

Many people without disabilities prefer to use a keyboard. Good tab stop design allows keyboard users to: Access all of the application's interactive...

Keyboard-navigable JavaScript widgets - Accessibility | MDN

When a custom control becomes disabled, remove it from the tab order by setting tabindex="-1" . Note that disabled items within a grouped...

Tab Bar - Material Design

Tabs organize and allow navigation between groups of content that are related and at the same level of hierarchy. The Tab Bar contains...

Keyboard accessibility on websites - University of Washington

Keyboard users must be able to access and operate all user interface elements (no mouse required). The web page must provide a clear,...