vuejs / vitepress

Vite & Vue powered static site generator.
https://vitepress.dev
MIT License
11.48k stars 1.86k forks source link

interactive controls are not nested [#3517] #3802

Closed olets closed 2 weeks ago

olets commented 4 weeks ago

Fixes #3517

Before

Sidebar items group's headings are focusable, and so are their child carets. The focusable child carets are an accessibility problem (as described in the linked issue) and add no value (focusing and clicking on the caret has the same effect as focusing and clicking on the heading).

After

Collapsible sidebar items' caret not focusable. Clicking on caret still toggles the group, because a click on caret is a click on the group heading.

Testing

  1. On a Vitepress site using the released version, on any page with a collapsible sidebar item group
    • use the keyboard Tab key to navigate to the collapsible group's header. Note that the focus ring contains the caret. Type Enter and Confirm that the group toggles.
    • Advance one more Tab stop to select the caret. Type Enter and Confirm that the group toggles.
    • Use the mouse to click on the caret. Confirm that it toggles the group.
  2. On that page, run axe DevTools. Confirm the error described in the linked issue
  3. Repeat on this branch.
    • Confirm that the error is gone
    • Confirm that the group header can be focused with the keyboard
    • Confirm that Enter when the group header is focused toggles the group
    • Confirm that clicking the caret with the mouse toggles the group
brc-dd commented 2 weeks ago

superseded by #3806