Fix accessibility issues to achieve WCAG 2.2 Level AA compliance#1
Merged
Conversation
This commit resolves 5 accessibility issues identified in the Lighthouse audit and manual review, plus 1 additional improvement for screen readers. ## Accessibility Fixes 1. **Color Contrast (CRITICAL - WCAG AA violation)** - Changed text-primary/40 to text-primary/60 on timestamp text - Now meets 4.5:1 contrast ratio requirement - Files: islands-demo.liquid, islands-demo-card.liquid 2. **Product Card Link Labels** - Moved aria-labelledby from <article> to <a> element - Screen readers now announce product link names correctly - File: product-card.liquid 3. **Variant Radio Focus Indicators** - Added peer-focus-visible:outline-* utilities - Keyboard users can now see which variant option has focus - File: variant-picker.liquid 4. **Search Input Labels** - Added aria-label to all search inputs (mobile, desktop, search page) - Screen readers now properly identify search fields - Files: header.liquid, search-input.liquid 5. **Header Drawer ARIA Controls** - Added aria-controls="menu-drawer" to menu button - Assistive tech now understands button-drawer relationship - File: header-drawer.liquid ## Additional Improvements 6. **Search Button Text - Reduced Screen Reader Repetition** - Changed button text from "Search" to "Search products" - Inputs say "Search", buttons say "Search products" - Less repetitive for screen reader users - Files: en.default.json, header.liquid 7. **Prettier Configuration** - Added *.md, theme/templates/*.json to .prettierignore - Prevents unwanted formatting of docs and template configs - File: .prettierignore ## Expected Impact - Lighthouse accessibility score: 96 → 100 - WCAG 2.2 Level AA: All critical violations resolved - Zero visual regressions (attribute/class changes only) - Improved keyboard navigation and screen reader experience Co-Authored-By: Claude Sonnet 4.5 <noreply@anthropic.com>
✅ Deploy Preview for kona-theme ready!
To edit notification comments on pull requests, go to your Netlify project configuration. |
Contributor
Preview theme deployedTheme: PR #1 - accessibility-fixes
|
jonathanmoore
force-pushed
the
accessibility-fixes
branch
from
3363905 to
09ab1cf
Compare
- Skip builds when only theme/translations/workflows change - Only rebuild when docs/, package.json, or pnpm-lock.yaml change - Reduces unnecessary Netlify builds and PR noise
Use external script for better control and debugging: - Only build PRs when docs/, package.json, or pnpm-lock.yaml change - Always build production/branch deploys - Better logging for troubleshooting
Switch from netlify.toml ignore logic to GitHub Actions-based builds: - Only trigger Netlify when docs/, package.json, or pnpm-lock.yaml change - Requires Netlify admin setup: stop auto-builds, create build hook - Cleaner approach with better visibility in PR checks See setup instructions in PR comments
Owner
Author
📦 Netlify Build OptimizationThis PR now includes optimizations to prevent unnecessary Netlify builds and reduce PR noise. What ChangedReplaced Netlify automatic builds with GitHub Actions selective triggering:
How It Works Nowgraph LR
A[Push to PR] --> B{docs/ changed?}
B -->|Yes| C[GitHub Actions triggers Netlify]
B -->|No| D[Skip Netlify build]
C --> E[Netlify builds & deploys]
E --> F[Preview link in PR]
Triggers Netlify build when:
Skips Netlify build when:
Netlify Admin ConfigurationCompleted the following in Netlify admin:
Expected Behavior
DocumentationBased on Netlify Build Hooks and GitHub Actions path filtering. |
jonathanmoore
force-pushed
the
accessibility-fixes
branch
from
640c8e6 to
60ca09d
Compare
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.
Summary
This PR resolves 5 accessibility issues identified in Lighthouse audits and manual WCAG 2.2 review, plus 1 additional improvement to reduce screen reader repetition. These fixes move the theme from 96/100 to 100/100 on Lighthouse accessibility score.
Update: This PR now also includes path filtering for GitHub Actions workflows to optimize CI/CD performance.
What Changed
1. Color Contrast (CRITICAL - WCAG AA Violation) ✅
Issue: Timestamp text used
text-primary/40providing only 3.57:1 contrast ratioFix: Changed to
text-primary/60to meet 4.5:1 WCAG AA requirementFiles:
islands-demo.liquid,islands-demo-card.liquidImpact: All text now meets minimum contrast standards
2. Product Card Link Accessible Names ✅
Issue:
aria-labelledbywas on<article>instead of<a>, leaving links without namesFix: Moved attribute to the link element
File:
product-card.liquidImpact: Screen readers now announce "The Minimal Snowboard, link" instead of unlabeled link
3. Variant Radio Focus Indicators ✅
Issue: Keyboard users couldn't see which variant option had focus (radio input hidden with
sr-only)Fix: Added
peer-focus-visible:outline-*utilities andmotion-reduce:transition-noneFile:
variant-picker.liquidImpact: 2px primary-colored outline visible when tabbing through variant options
4. Search Input Labels ✅
Issue: Three search inputs lacked proper labels for screen readers
Fix: Added
aria-label="{{ 'general.search.search' | t }}"to all search inputsFiles:
header.liquid(mobile + desktop),search-input.liquidImpact: Screen readers announce "Search" when focused on search fields
5. Header Drawer ARIA Controls ✅
Issue: Mobile menu button didn't declare relationship to the drawer it controls
Fix: Added
aria-controls="menu-drawer"to summary elementFile:
header-drawer.liquidImpact: Assistive tech announces "controls menu-drawer" relationship
6. Search Button Text - Reduced Repetition ✅
Issue: Screen readers heard "Search" 3x (form landmark, input label, button text)
Fix: Changed button text from "Search" to "Search products"
Files:
en.default.json,header.liquidImpact: Less repetitive experience - inputs say "Search", buttons say "Search products"
7. Prettier Configuration ✅
Issue:
pnpm formatwas reformatting docs, skills, and template JSON filesFix: Added
*.md,theme/templates/*.json, config files to.prettierignoreFile:
.prettierignoreImpact: Prettier now only formats theme Liquid/JS/CSS files
8. GitHub Actions Path Filtering ✅
Issue: PR preview and deploy workflows ran on ALL changes, including docs-only updates
Fix: Added
pathsfilter to both workflows to only run when theme files changeFiles:
.github/workflows/pr-preview.yml,.github/workflows/deploy.ymlImpact: No unnecessary Shopify theme creation for docs-only PRs; faster CI feedback
Testing: See PR #2 for verification test
Testing Checklist
Expected Results
Breaking Changes
None. All changes are progressive enhancements.
Translation Note
Only English (
en.default.json) was modified. The CI workflow should automatically sync to all 30 languages using the Anthropic API during this PR check.Rollback Plan
Each fix is independent. Can be reverted individually by reverting specific file changes.
Related: Lighthouse accessibility audit, WCAG 2.2 Level AA compliance, GitHub Actions optimization
Co-Authored-By: Claude Sonnet 4.5 noreply@anthropic.com