search

saas-js / saas-ui

The React component library for startups, built with Chakra UI.
https://saas-ui.dev
MIT License
1.36k stars 131 forks source link

StructuredList: Keyboard Accessibility #218

Closed bhainesva closed 7 months ago

bhainesva commented 7 months ago

Description

When I made a StructuredListItem interactive by specifying an href or onClick property, I expected to be able to navigate to and trigger those items using the keyboard but it seems like they only become accessible via keyboard if they're first interacted with using the mouse.

Link to Reproduction

https://codesandbox.io/p/sandbox/elegant-microservice-8sjlcy

Steps to reproduce

  1. Go to https://codesandbox.io/p/sandbox/elegant-microservice-8sjlcy
  2. Click to focus on the preview pane
  3. Use tab, shift+tab to navigate the document with the keyboard, notice that list items cannot receive focus
  4. Click on one of the list items (triggering its onclick)
  5. Try using keyboard navigation again, see that the items can now receive focus.

Saas UI Version

2.7.4

Chakra UI Version

2.8.2

Browser

Firefox 124.0.2 (64-bit), Chrome Version 123.0.6312.124 (Official Build) (x86_64), Safari Version 15.4 (17613.1.17.1.6)

Operating System

Additional Information

slist

linear[bot] commented 7 months ago

SUI-454 StructuredList: Keyboard Accessibility

Pagebakers commented 7 months ago

Thanks for the reproduction. It seems like the tab indexes on the items are set incorrectly. Will look for a fix tomorrow.

Pagebakers commented 7 months ago

@bhainesva Fixed keyboard navigation in the PR above. This will be released shortly.