Skip to content

test(Collapsible): add keyboard toggle tests for non-native activator elements#641

Open
sridhar-3009 wants to merge 2 commits into
vuetifyjs:masterfrom
sridhar-3009:test/collapsible-non-native-keyboard-toggle
Open

test(Collapsible): add keyboard toggle tests for non-native activator elements#641
sridhar-3009 wants to merge 2 commits into
vuetifyjs:masterfrom
sridhar-3009:test/collapsible-non-native-keyboard-toggle

Conversation

@sridhar-3009

@sridhar-3009 sridhar-3009 commented Jul 18, 2026

Copy link
Copy Markdown
Contributor

Summary

  • CollapsibleActivator correctly handles Enter/Space in onKeydown and sets role='button' for non-native elements, but every existing keyboard test uses the default as='button' element
  • The non-button activator describe block already covers role='button'/tag/no-type-attribute and a click-based toggle, but nothing verified that a non-native activator actually toggles on Enter/Space
  • Adds two tests mounting with activatorAs: 'div': Enter opens, Space opens

What changed

  • index.browser.test.ts: two new tests in the existing non-button activator block, matching the style already used by the open via keyboard block — a real keydown DOM event via @vue/test-utils, not a captured render-prop handler

Rebase note

Rebased onto master's post-#655 test layout: index.test.ts was consolidated into index.browser.test.ts as part of the 1.0 component-spine promotion, and the test style moved from capturing render-prop handlers to triggering real DOM events. Rewrote both new tests in that style rather than reintroducing the old pattern — the role='button' coverage I originally added is no longer needed since it already exists on master (should expose role=button and no native type when rendered as a div).

Test plan

  • Enter key with activatorAs: 'div' toggles collapsible open
  • Space key with activatorAs: 'div' toggles collapsible open
  • All 23 Collapsible tests pass (pnpm test:run --project v0:browser)

@github-actions

github-actions Bot commented Jul 18, 2026

Copy link
Copy Markdown
Contributor

Changeset found — this change will be included in the next release. Thanks!

@johnleider

Copy link
Copy Markdown
Member

This PR currently has merge conflicts with its base branch (master) and can't be merged as-is. Could you rebase onto the latest master and resolve the conflicts when you get a chance?

Context: we're adopting a git-flow branch model — master for fixes/patches, dev for features (minor), next for breaking changes (major). This PR is correctly targeting master; it just needs a rebase to clear the conflicts. Thanks!

… elements

CollapsibleActivator correctly implements onKeydown for Enter/Space and
sets role=button when as is not 'button'. The 'non-button activator'
describe block already covers role=button/tag/no-type-attribute and a
click-based toggle, but nothing verified that a non-native activator
actually toggles on Enter/Space — only the default button activator had
keyboard coverage.

Add two tests to the existing 'non-button activator' block, matching
the style already used by the 'open via keyboard' block: mount with
activatorAs: 'div', trigger a real keydown event on the role=button
element, and assert the content unhides.

Rebased onto master's post-vuetifyjs#655 test layout: index.test.ts was
consolidated into index.browser.test.ts as part of the 1.0 promotion,
and the test style moved from capturing render-prop handlers to
triggering real DOM events via @vue/test-utils. Rewrote both new tests
in that style rather than reintroducing the old render-prop pattern.
@sridhar-3009
sridhar-3009 force-pushed the test/collapsible-non-native-keyboard-toggle branch from c256024 to 9d0a051 Compare July 24, 2026 15:50
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.

2 participants