Skip to content

Accessibility Improvements: Premium Blocks#402

Merged
fernanDOTdo merged 3 commits into
mainfrom
enhanced-accessibility-premium-blocks
Jun 23, 2026
Merged

Accessibility Improvements: Premium Blocks#402
fernanDOTdo merged 3 commits into
mainfrom
enhanced-accessibility-premium-blocks

Conversation

@StoneMoney

@StoneMoney StoneMoney commented Jun 18, 2026

Copy link
Copy Markdown
Member

Enhances the accessibility of Engaging Networks' premium blocks by adding the following:

  • Semantics improvement for pgHeader (Now tagged as a header level 2 with aria tags)
  • Focus outline (Uses --focus_outline_color or #086ce7 as a fallback)
  • Aria radiogroup
  • Stateful selects (Selects for options on premiums, ie. T-Shirt sizes are disabled unless the premium is selected)
  • Label-linked selects (Label and select tags are linked to one-another and more accurately describe what the select is for on screen readers)

Demonstration page: https://give.nationalgeographic.org/page/187835/donate/1?mode=DEMO&assets=accessibility-premiums-demo

  • Select any gift other than "4Site Placeholder Product", attempt to change the Color/Size of "4Site Placeholder Product" -- ideally you cannot since it's disabled. Also attempt to navigate to the selects via keyboard (tabbing)
  • Switch to selecting "4Site Placeholder Product" and change the color/size, upon changing, check that the label for tags are still present on the selects
  • Switch to another gift, selects should be disabled once more and unable to navigate to via keyboard (tabbing)
  • Switch back and forth from One-Time to Monthly giving and ensure select labels are linked and properly disabled/enabled based on selection.

- Focus outline
- Aria radiogroup
- Stateful selects
- Label-linked selects
- Semantics improvement for pgHeader
@fernanDOTdo
fernanDOTdo merged commit 7455d45 into main Jun 23, 2026
2 checks passed
@fernanDOTdo
fernanDOTdo deleted the enhanced-accessibility-premium-blocks branch June 23, 2026 13:47
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.

2 participants