Skip to content

fix(Button,Pagination): activate non-native as-div/span elements on Enter/Space#632

Open
sridhar-3009 wants to merge 2 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/non-native-button-keyboard-616
Open

fix(Button,Pagination): activate non-native as-div/span elements on Enter/Space#632
sridhar-3009 wants to merge 2 commits into
vuetifyjs:masterfrom
sridhar-3009:fix/non-native-button-keyboard-616

Conversation

@sridhar-3009

Copy link
Copy Markdown
Contributor

Problem

ButtonRoot and PaginationItem render with role="button" and tabindex="0" when used as non-native elements (as="div", as="span"), but have no onKeydown handler. Native <button> activates on Enter/Space automatically; <div role="button"> does not. Keyboard-only users can focus these elements but cannot activate them.

Closes #616.

Solution

Added an onKeydown handler to each component that fires onClick()/select() on Enter or Space. The handler is only wired when as !== 'button' — native buttons keep their default behavior untouched.

function onKeydown (e: KeyboardEvent) {
  if (e.key === 'Enter' || e.key === ' ') {
    e.preventDefault()
    onClick()
  }
}
// in attrs:
'onKeydown': as === 'button' ? undefined : onKeydown,

Note: ToggleRoot already had keyboard handling and was not changed.

@github-actions

Copy link
Copy Markdown
Contributor

⚠️ No changeset found

This PR changes packages/* source but has no changeset, so it won't be in the next release's version bump or notes. Add one:

pnpm changeset

Pick the affected package(s) — @vuetify/v0 carries @vuetify/paper automatically; @paper/genesis (and other @paper/* design systems) version separately — a bump type, and a short summary, then commit the generated .changeset/*.md. Docs-only, chore, or CI PRs can ignore this.

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.

[Bug] Non-native as elements get button ARIA but dead keyboard (Button, Toggle, PaginationItem) + Atom type=button default

1 participant