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.

Keyboard nav on Safari broken for scrolling list of checkboxes

See original GitHub issue

Environment

Operating system

MacOS 10.15.5

Browser

Safari 13.1.1

Assistive technology used to verify

Keyboard navigation

Detailed description

What version of the Carbon Design System are you using?

10.15

What did you expect to happen?

Able to TAB through a list of checkbox items and see currently focused item.

What happened instead?

In Safari, the list scrolling goes haywire and currently focused item is not shown.

Steps to reproduce the issue

Load https://codesandbox.io/s/red-cookies-vmkou?file=/src/index.js in Safari
Click on each heading and then try to TAB through each list
Notice that tabbing in the first two lists works fine for some of the first items, but then list scrolls excessively and the focused item is no longer shown.
Notice that it works as expected for the 3rd list, where position: relative has been added to .bx--checkbox-wrapper

Issue Analytics

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

Top GitHub Comments

1reaction

sjarvacommented, Oct 10, 2020

@dakahn apparently this is a “feature” on Safari, as they have a setting in Safari > Preferences > Advanced: Accessibility: [checkbox] Press tab to highlight each item on web page

Safari Preferences, Press tab to highlight each item on web page checkbox

If you haven’t checked it, by using Tab Safari will only highlight text and lists that can get focus. By using Option + Tab you will see the focus in all controls (buttons, checkboxes etc).

@avigil06 wrote a blog post about trying to code around this in Safari.

There is also an OS level control to change this (System Preferences > Keyboard > Shortcuts:

[radio button on bottom] Full Keyboard Access: in windows and dialogs, press Tab to move keyboard focus between:

[default option] Text boxes and lists only [option] All controls.

Mac OS System preferences Full keyboard access setting

No idea why Mac OS and Safari are making these the default setting, but I guess that users who use Mac, Safari and want to navigate by keyboard, know this 🤷 But, I do agree with @avigil06 that these behaviours should be consistent across all browsers.

0reactions

dakahncommented, Oct 19, 2020

I think we’re all clear here. Something to note moving forward. Great find @sjarva! Thank you so much!