Skip to content

fix: make the dev panel toggle keyboard operable - #235

Open
Fasping wants to merge 2 commits into
react-hook-form:masterfrom
Fasping:fix-devtool-toggle-keyboard
Open

fix: make the dev panel toggle keyboard operable#235
Fasping wants to merge 2 commits into
react-hook-form:masterfrom
Fasping:fix-devtool-toggle-keyboard

Conversation

@Fasping

@Fasping Fasping commented Aug 13, 2026

Copy link
Copy Markdown

Closes #230.

The click handler that opens the panel lived on the <svg> inside the toggle button rather than on the button itself. Activating a button with Enter or Space dispatches a click on the button, which never reaches the svg, so the panel could only be opened with a pointer.

  • moves the handler to the <Button>
  • marks the logo as decorative (aria-hidden, focusable="false") and drops its aria-label, so the button keeps a single accessible name
  • adds aria-label="Show dev panel" to the button
  • moves focus to the button that replaces the one being unmounted, in both directions
  • gives the close button an accessible name; it was announcing as "✕"
  • adds a test covering keyboard activation and focus

No visual or API change.

@bluebill1049 bluebill1049 left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice, thanks.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

The trigger element which hides and shows the DevTools panel is not keyboard operable.

2 participants