Skip to content

[Bug]: Switch has double tab behavior like the checkboxes do #143

@arazni

Description

@arazni

LumexUI Version

v1.0.0

Description

Same as #135, but for the switch this time.

When tabbing through the switches in the docs, the first tab will highlight the switch. Tabbing again will seemingly invisibly select/highlight the switch again.

  • Only one instance of the switch should be tab-navigable, so the second invisible instance should be removed.

Steps to reproduce

Visit your docs.

Reproduction 1:

Tab over to a switch. It will highlight correctly.

Then hit tab one more time.

Hitting space will check or uncheck the switch, even though you should've navigated away from it by now.

This implies there's a second instance of the switch somewhere.

Reproduction 2:

Tab over to a switch. It will highlight correctly.

Space will check it or uncheck it.

However, it will also shift to the "second instance", where it is no longer highlighted.

Expected behavior

Tabbing over a switch should only happen once and be highlighted.

This also has strange, though functioning screenreader behavior.

Tabbing onto the switch labeled "Auto Updates" for the first instance, visible highlight instance reads this way:
Auto Updates check box checked Auto Updates

Tabbing to the second instance reads this way:
Auto Updates check box checked

The second instance sounds better to me, where the first one sounds repetitive and buggy.

A good fix would manage all 3:

  • The visible highlight behavior of the first tab
  • The screenreader behavior of the second tab
  • Reduce down to a single tab to navigate

Notes

No response

Metadata

Metadata

Assignees

Type

No type

Projects

No projects

Relationships

None yet

Development

No branches or pull requests

Issue actions