Repository navigation
fix(button): use measurable backgrounds in all states - #2452
Merged
Merged
Conversation
✅ Deploy Preview for stacks-svelte ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
🦋 Changeset detectedLatest commit: a18832f The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for stackoverflow-email ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
✅ Deploy Preview for stacks ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
dancormier
changed the title
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
https://stackoverflow.atlassian.net/browse/STACKS-939
Summary
Give buttons solid backgrounds so
apca-checkcan measure base contrast in every state. Keep selected-state gradients on an inner::beforelayer, with separate checks against both visible colors. The slight solid-color rim at transparent borders was reviewed and accepted locally. No changes toapca-checkor SST assertions are needed.Changes
@stackoverflow/stacks. Selected buttons now use::before; their approved CSS is unchanged by the test consolidation.How to test
npm ci,npm run build:dependencies -w packages/stacks-svelte, andnpm run storybook -w packages/stacks-svelte. Openhttp://localhost:6006/?path=/docs/components-button--docs.::before. The slight rim has already passed local visual review. Default borders remain the intended design.npm run test:a11y -w packages/stacks-classic(2,593 passed, 155 skipped),npm run test:unit -w packages/stacks-classic(32 passed per browser),npm run test:less -w packages/stacks-classic(40 passed),npm run lint -w packages/stacks-classic, andnpm run build -w packages/stacks-classic. All passed; the button accessibility file also passed all 808 cases in Chromium, Firefox, and WebKit.npm run test:visual -w packages/stacks-classicwith Docker, PowerShell, and Git LFS available. Chromium and Firefox passed all 2,840 cases. WebKit passed 2,696 cases before a page crash in the unrelated bling fixture; all 144 bling cases passed on an isolated retry. Local visual verification used the repository's Docker image/config with--shm-size=1gand one test session per browser.Focused accessibility-test type-checking passed. The broader Classic test-source typecheck still has existing errors. The unchanged runtime previously passed the Svelte suite (594 browser tests and 29 tooling tests). No dependencies or type configuration changed.
Axe's built-in WCAG rules still report selected pseudo-element backgrounds as incomplete; direct checks of both decorative colors provide the high-contrast AAA coverage.
Preview: Stacks docs · Svelte Storybook. Both deployments are ready for this PR head and respond with HTTP 200.
Success criteria
@stackoverflow/stacksand document that selected-state contrast remains incomplete. The changeset is included; ticket wording still needs alignment: selected APCA checks complete, native WCAG checks remain incomplete, and separate tests verify both visible colors.Screenshots
Screenshots coming soon. Compact selected-state grids are included in the visual baselines.