dev: hiding buttons #2
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
| name: Accessibility check | |
| on: | |
| push: | |
| branches: [ main ] | |
| pull_request: | |
| branches: [ main ] | |
| jobs: | |
| accessibility: | |
| runs-on: ubuntu-latest | |
| steps: | |
| - name: Checkout code | |
| uses: actions/checkout@v4 | |
| - name: Setup Node.js | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: '18' | |
| - name: Install accessibility tools | |
| run: | | |
| npm install -g pa11y pa11y-ci axe-core | |
| - name: Check HTML accessibility | |
| run: | | |
| echo "Checking HTML accessibility..." | |
| # Check for basic accessibility attributes | |
| if [ -f popup.html ]; then | |
| echo "Checking popup.html..." | |
| # Check for alt attributes on images | |
| if grep -q "<img" popup.html && ! grep -q "alt=" popup.html; then | |
| echo "⚠️ Warning: Images without alt attributes found" | |
| else | |
| echo "✅ Images have alt attributes" | |
| fi | |
| # Check for proper heading structure | |
| if grep -q "<h[1-6]" popup.html; then | |
| echo "✅ Heading structure found" | |
| else | |
| echo "⚠️ Warning: No heading structure found" | |
| fi | |
| # Check for form labels | |
| if grep -q "<input\|<select\|<textarea" popup.html && ! grep -q "label\|aria-label" popup.html; then | |
| echo "⚠️ Warning: Form elements without labels found" | |
| else | |
| echo "✅ Form elements have labels" | |
| fi | |
| # Check for button accessibility | |
| if grep -q "<button" popup.html && ! grep -q "aria-label\|aria-describedby" popup.html; then | |
| echo "⚠️ Warning: Buttons without accessibility attributes" | |
| else | |
| echo "✅ Buttons have accessibility attributes" | |
| fi | |
| fi | |
| - name: Check color contrast (basic) | |
| run: | | |
| echo "Checking color contrast..." | |
| # Check for hardcoded colors that might have contrast issues | |
| if grep -r "#[0-9a-fA-F]{3,6}" *.css 2>/dev/null; then | |
| echo "⚠️ Warning: Hardcoded colors found - verify contrast ratios" | |
| else | |
| echo "✅ No obvious hardcoded colors found" | |
| fi | |
| # Check for color-only indicators | |
| if grep -r "color:" *.css 2>/dev/null && ! grep -r "border\|background\|text-decoration" *.css 2>/dev/null; then | |
| echo "⚠️ Warning: Color-only indicators found - add visual indicators" | |
| else | |
| echo "✅ Multiple visual indicators found" | |
| fi | |
| - name: Check keyboard navigation | |
| run: | | |
| echo "Checking keyboard navigation..." | |
| # Check for focusable elements | |
| if grep -r "tabindex\|focus" *.js 2>/dev/null; then | |
| echo "✅ Keyboard navigation support found" | |
| else | |
| echo "⚠️ Warning: No explicit keyboard navigation support" | |
| fi | |
| # Check for skip links | |
| if grep -r "skip\|skip-link" *.html *.css 2>/dev/null; then | |
| echo "✅ Skip links found" | |
| else | |
| echo "⚠️ Warning: No skip links found" | |
| fi | |
| - name: Check ARIA attributes | |
| run: | | |
| echo "Checking ARIA attributes..." | |
| # Check for proper ARIA usage | |
| if grep -r "aria-" *.html *.js 2>/dev/null; then | |
| echo "✅ ARIA attributes found" | |
| # Check for common ARIA patterns | |
| if grep -r "aria-label\|aria-labelledby" *.html *.js 2>/dev/null; then | |
| echo "✅ Proper labeling found" | |
| fi | |
| if grep -r "aria-expanded\|aria-hidden\|aria-selected" *.html *.js 2>/dev/null; then | |
| echo "✅ State management found" | |
| fi | |
| else | |
| echo "⚠️ Warning: No ARIA attributes found" | |
| fi | |
| - name: Check semantic HTML | |
| run: | | |
| echo "Checking semantic HTML..." | |
| # Check for semantic elements | |
| semantic_elements=("nav" "main" "section" "article" "aside" "header" "footer") | |
| found_semantic=false | |
| for element in "${semantic_elements[@]}"; do | |
| if grep -r "<$element" *.html 2>/dev/null; then | |
| echo "✅ Semantic element <$element> found" | |
| found_semantic=true | |
| fi | |
| done | |
| if [ "$found_semantic" = false ]; then | |
| echo "⚠️ Warning: No semantic HTML elements found" | |
| fi | |
| # Check for proper list usage | |
| if grep -r "<ul\|<ol" *.html 2>/dev/null; then | |
| echo "✅ Proper list usage found" | |
| else | |
| echo "⚠️ Warning: No proper list usage found" | |
| fi | |
| - name: Generate accessibility report | |
| run: | | |
| echo "Generating accessibility report..." | |
| # Create a simple accessibility checklist | |
| cat > accessibility-report.md << EOF | |
| # Accessibility Report | |
| ## Checklist | |
| ### HTML Structure | |
| - [ ] Proper heading hierarchy | |
| - [ ] Semantic HTML elements | |
| - [ ] Form labels and controls | |
| - [ ] Image alt text | |
| ### Keyboard Navigation | |
| - [ ] All interactive elements keyboard accessible | |
| - [ ] Focus indicators visible | |
| - [ ] Skip links available | |
| ### ARIA and Screen Readers | |
| - [ ] ARIA labels and descriptions | |
| - [ ] ARIA states and properties | |
| - [ ] Screen reader friendly content | |
| ### Color and Contrast | |
| - [ ] Sufficient color contrast | |
| - [ ] Color not the only indicator | |
| - [ ] High contrast mode support | |
| ### Responsive Design | |
| - [ ] Mobile accessibility | |
| - [ ] Touch target sizes | |
| - [ ] Zoom support | |
| ## Recommendations | |
| 1. Test with screen readers | |
| 2. Verify keyboard navigation | |
| 3. Check color contrast ratios | |
| 4. Test on mobile devices | |
| 5. Validate ARIA usage | |
| EOF | |
| echo "Accessibility report generated: accessibility-report.md" |