Skip to content

Add WCAG accessibility improvements#234

Merged
sushmak02 merged 3 commits intorelease-candidatefrom
feat/accessibility-improvements
Mar 10, 2026
Merged

Add WCAG accessibility improvements#234
sushmak02 merged 3 commits intorelease-candidatefrom
feat/accessibility-improvements

Conversation

@akshayurankar48
Copy link
Contributor

Summary

Closes #233

  • Add screen-reader-only CSS class (.bsf-sr-only) and focus outline styles for keyboard navigation
  • Add <fieldset>, <legend>, aria-label, and <label> elements to star rating radio buttons in both display_rating() and bsf_display_rating()
  • Replace generic image alt text ("1star", "gray", "recipe image", "product image", "event", "software image") with dynamic contextual values from post meta
  • Mark decorative star images as aria-hidden="true" with empty alt text
  • Add role="complementary" and aria-label to all #snippet-box containers
  • Add role="presentation" to the admin meta box layout table
  • Add aria-hidden state management to toggle.js show/hide logic
  • Refactor toggle.js to use lookup maps, reducing code duplication

Test plan

  • Verify star rating widget is navigable via keyboard (Tab/Shift+Tab)
  • Test with a screen reader (VoiceOver/NVDA) — star ratings should announce "1 star", "2 stars", etc.
  • Confirm snippet box images announce meaningful alt text (product name, recipe name, etc.) instead of generic labels
  • Verify focus outlines appear on all interactive elements within snippet boxes
  • Check admin meta box schema type selector — hidden sections should have aria-hidden="true", visible sections should not
  • Ensure no visual regressions in snippet box rendering across all schema types

🤖 Generated with Claude Code

- Add screen-reader-only CSS class and focus styles for keyboard navigation
- Add fieldset/legend and aria-labels to star rating radio buttons
- Replace generic image alt text with dynamic contextual values
- Mark decorative star images as aria-hidden with empty alt
- Add role="complementary" and aria-label to snippet boxes
- Add role="presentation" to admin meta box layout table
- Add aria-hidden state management to toggle.js show/hide logic
- Refactor toggle.js to use lookup maps (reduces duplication)

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@akshayurankar48 akshayurankar48 changed the base branch from master to release-candidate March 10, 2026 07:01
@sushmak02 sushmak02 merged commit 7dcd211 into release-candidate Mar 10, 2026
2 checks passed
@sushmak02 sushmak02 deleted the feat/accessibility-improvements branch March 10, 2026 08:03
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.

Add WCAG accessibility support to front-end and admin UI

2 participants