Skip to content

E0d/fix actionrow a11y#4270

Open
e0d wants to merge 2 commits into
release-23.xfrom
e0d/fix-actionrow-a11y
Open

E0d/fix actionrow a11y#4270
e0d wants to merge 2 commits into
release-23.xfrom
e0d/fix-actionrow-a11y

Conversation

@e0d
Copy link
Copy Markdown

@e0d e0d commented May 2, 2026

Description

Include a description of your changes here, along with a link to any relevant Jira tickets and/or Github issues.

Deploy Preview

Include a direct link to your changes in this PR's deploy preview here (e.g., a specific component page).

Merge Checklist

  • If your update includes visual changes, have they been reviewed by a designer? Send them a link to the Netlify deploy preview, if applicable.
  • Does your change adhere to the documented style conventions?
  • Do any prop types have missing descriptions in the Props API tables in the documentation site (check deploy preview)?
  • Were your changes tested using all available themes (see theme switcher in the header of the deploy preview, under the "Settings" icon)?
  • Were your changes tested in the example app?
  • Is there adequate test coverage for your changes?
  • Consider whether this change needs to reviewed/QA'ed for accessibility (a11y). If so, please request an a11y review for the PR in the #wg-paragon Open edX Slack channel.

Post-merge Checklist

  • Verify your changes were released to NPM at the expected version.
  • If you'd like, share your contribution in #show-and-tell.
  • 🎉 🙌 Celebrate! Thanks for your contribution.

@netlify
Copy link
Copy Markdown

netlify Bot commented May 2, 2026

Deploy Preview for paragon-openedx-v23 ready!

Name Link
🔨 Latest commit c15a33d
🔍 Latest deploy log https://app.netlify.com/projects/paragon-openedx-v23/deploys/69fa3a389895ca0008dc3232
😎 Deploy Preview https://deploy-preview-4270--paragon-openedx-v23.netlify.app
📱 Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.
🤖 Make changes Run an agent on this branch

To edit notification comments on pull requests, go to your Netlify project configuration.

@e0d e0d force-pushed the e0d/fix-actionrow-a11y branch from 8e8f365 to e108851 Compare May 2, 2026 19:53
The spacer is a purely decorative flex-grow element with no semantic
meaning; hiding it from the accessibility tree is more precise than
relying on AT heuristics for empty spans.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@e0d e0d force-pushed the e0d/fix-actionrow-a11y branch from e108851 to a49114b Compare May 2, 2026 20:03
@codecov
Copy link
Copy Markdown

codecov Bot commented May 2, 2026

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 94.40%. Comparing base (51702d5) to head (c15a33d).

Additional details and impacted files
@@              Coverage Diff              @@
##           release-23.x    #4270   +/-   ##
=============================================
  Coverage         94.40%   94.40%           
=============================================
  Files               242      242           
  Lines              4309     4309           
  Branches           1020     1021    +1     
=============================================
  Hits               4068     4068           
+ Misses              237      233    -4     
- Partials              4        8    +4     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@e0d e0d force-pushed the e0d/fix-actionrow-a11y branch from a49114b to a5f1ac2 Compare May 2, 2026 20:50
Comment thread src/ActionRow/_index.scss
…usage

Without guidance, consumers using ActionRow to group interactive controls
have no nudge to add ARIA grouping semantics. Adds a README Accessibility
section with the recommended pattern (role="group" + aria-label) and a
live code example. Also adds interface-level JSDoc in index.tsx pointing
TypeScript consumers to the same pattern.

Addresses WCAG 4.1.2 Name, Role, Value and 1.3.1 Info and Relationships.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
@e0d e0d force-pushed the e0d/fix-actionrow-a11y branch from a5f1ac2 to c15a33d Compare May 5, 2026 18:43
Comment thread src/ActionRow/index.tsx
* distinguish multiple ActionRows on the same page:
*
* ```jsx
* <ActionRow role="toolbar" aria-label="Form actions">
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is using role="toolbar" but the README example has role="group"

@kblemel any thoughts on which we should be recommending (or the cases in which we should recommend one vs the other)?

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