test(infield-button): add complete test suites for Phase 6 - #6502
Conversation
|
📚 Branch Preview Links🔍 Gen1 Visual Regression Test ResultsWhen a visual regression test fails (or has previously failed while working on this branch), its results can be found in the following URLs:
Deployed to Azure Blob Storage: If the changes are expected, update the |
9303195 to
8375937
Compare
Rajdeepc
changed the title
37d81f7 to
ecb2ac1
Compare
Rajdeepc
added
the
gen2
9340367 to
0ac6722
Compare
c9b6906 to
e003b59
Compare
9f5d5c8 to
0856170
Compare
e003b59 to
80b74be
Compare
| ).not.toBe('swc-infield-button'); | ||
| }); | ||
|
|
||
| test('inner button should not be in tab order — tabindex="-1"', async ({ |
There was a problem hiding this comment.
nit
This test duplicates the preceding should NOT receive focus via Tab — button is pointer-only test. Its name says it verifies the inner button, but it only checks document.activeElement, so both tests currently check host focus. Could we either remove this test or inspect shadowRoot.activeElement to confirm that the inner button doesn’t receive focus?
There was a problem hiding this comment.
+1 i think its not needed here
| for (const size of INFIELD_BUTTON_VALID_SIZES) { | ||
| const button = canvasElement.querySelector( | ||
| `swc-infield-button[size="${size}"]` | ||
| ) as InfieldButton; | ||
| await button.updateComplete; | ||
| expect(button.size, `size="${size}" is reflected`).toBe(size); |
There was a problem hiding this comment.
can we use getComponent/getComponents here instead of canvasElement.querySelector + type cast like we do in all other places?
| ).not.toBe('swc-infield-button'); | ||
| }); | ||
|
|
||
| test('inner button should not be in tab order — tabindex="-1"', async ({ |
There was a problem hiding this comment.
+1 i think its not needed here
Adds infield-button.test.ts (13 Storybook/Vitest play-function stories covering defaults, property reflection, slots, sizes, quiet variant, states, behaviors, and dev-mode warnings) and infield-button.a11y.spec.ts (Playwright ARIA snapshots + keyboard and pointer interaction tests). Updates the Quiet story to render both default and quiet variants side-by-side so QuietTest and the ARIA snapshot can compare them. Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
- Remove duplicate tab-order test in a11y spec (same assertion as the preceding test; both reviewers agreed it adds no coverage) - Replace canvasElement.querySelector + cast with getComponent<InfieldButton> in SizesTest to match the project's test utility pattern Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Per review feedback: infield buttons are only ever used inside a form field, so examples should model that real-world pattern accessibly. - Overview: picker field (Country text input + chevron button) - Anatomy: three field types (picker, search/clear, number stepper) - Accessibility: same three field types for accurate a11y tree coverage Field wrappers use a native <label>/<input> pair so axe and ARIA snapshot tests can verify label association alongside button labels. Updated ARIA snapshots in infield-button.a11y.spec.ts to match the new DOM (textbox/searchbox/spinbutton roles from the native inputs). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
ffa4a9c to
67e745c
Compare
…yTest render ARIA snapshots: - Reorder Anatomy and Accessibility snapshots so button "Decrement quantity" comes before spinbutton "Quantity" — matching actual DOM order in the stepper (decrement button is the first child, input is second) AccessibilityTest: - Give it a standalone render instead of spreading from the docs Accessibility story; the docs story now uses a field-context render whose first button has accessible-label="Open country picker", breaking the 'Open picker' assertion that checks attribute forwarding behavior Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
91a253a
into
rajdeepc/feat-infield-button-migration-phase-5
3 participants
Description
Adds the Phase 6 test suite for the 2nd-gen
swc-infield-buttoncomponent. This PR contains only test and story files; the component implementation ships in the Phase 5 PR and must be merged intoswc-2105/infield-buttonbefore this branch is rebased.Files added:
stories/infield-button.stories.ts— Storybook stories with the Quiet story updated to render both default and quiet variants side-by-side for test comparisontest/infield-button.test.ts— 13 Storybook/Vitest play-function stories covering: defaults, property reflection (size, quiet, disabled, accessible-label), anatomy slots, sizes, quiet variant, states, click suppression, focus delegation, and dev-mode warningstest/infield-button.a11y.spec.ts— Playwright ARIA snapshot tests for all 6 stories plus keyboard (Tab does not focus the button) and pointer interaction tests (click fires when enabled, suppressed when disabled)Motivation and context
Phase 6 of the infield-button 2nd-gen migration. Establishes automated coverage for the full
InfieldButtonAPI surface so regressions can be caught during future refactors and dependency bumps.Depends on: Phase 5 PR must merge into
swc-2105/infield-buttonbefore this branch can be rebased and run independently.Related issue(s)
Screenshots (if appropriate)
N/A — test-only PR.
Author's checklist
Reviewer's checklist
patch,minor, ormajorfeaturesManual review test cases
Vitest play functions pass
2nd-gen/packages/swc/, runyarn vitest --project storybook infield-buttonOverviewTest,PropertyMutationTest,AccessibleLabelTest,AnatomyTest,SizesTest,QuietTest,StatesTest,DisabledBehaviorTest,ClickBehaviorTest,FocusDelegationTest,AccessibilityTest,IconOnlyMissingLabelWarningTest,IconOnlyWithLabelNoWarningTestPlaywright a11y spec passes
2nd-gen/packages/swc/, runyarn playwright test infield-button.a11y.spec.tsStorybook stories render correctly
yarn storybookfrom2nd-gen/packages/swc/No regressions in Action Button
yarn vitest --project storybook action-buttonButtonBaselogic)Device review
Accessibility testing checklist
Required: Complete each applicable item and document your testing steps.
Keyboard (infield buttons are pointer-only; Tab must not focus them)
swc-infield-button— the component is intentionally excluded from the tab order (tabindex="-1"on the inner button,delegatesFocus: falseon the shadow root). Keyboard activation is the responsibility of the parent field.Screen reader (button role and accessible name must be announced)
swc-infield-buttonelementbuttonand theaccessible-labelvalue are correctly forwarded viaaria-labelon the inner<button>elementdisabledattribute on the inner<button>provides the state without requiringaria-disabled