Skip to content

Fix: accessible community cloud screen#374

Merged
rami-elementor merged 1 commit intocore-betafrom
a11y-community
May 5, 2026
Merged

Fix: accessible community cloud screen#374
rami-elementor merged 1 commit intocore-betafrom
a11y-community

Conversation

@rami-elementor
Copy link
Copy Markdown
Contributor

@rami-elementor rami-elementor commented May 1, 2026

This pull request focuses on improving accessibility across the community cloud and snippets management UI, particularly for screen readers. The changes add ARIA roles, labels, and screen-reader-only text to various interactive elements and status indicators. Additionally, some minor code cleanups and enhancements to user feedback are included.

Accessibility improvements:

  • Added aria-current="page" to navigation tabs and status filters to indicate the current selection for assistive technologies in CommunityCloud.tsx, SnippetsListTable.tsx, and SnippetsTable.tsx.
  • Improved live region announcements and roles for search status, error, and no-results banners in CloudSearch.tsx, ensuring screen readers are notified of dynamic content changes.
  • Enhanced the snippets table with a live region announcing the number of found snippets, added ARIA labels for the table and checkboxes, and improved the tag filter with labels and ARIA attributes in SnippetsListTable.tsx.
  • Updated interactive controls such as switches and buttons to use appropriate roles, ARIA attributes, and screen-reader text, including the "Run Once" button and activation switch in TableColumns.tsx.
  • Improved the display of vote counts and tooltips for screen readers in SearchResults.tsx and TableColumns.tsx.

Code and usability enhancements:

  • Added missing imports (_n, getSnippetDisplayName) to support pluralization and improved ARIA labeling in SnippetsListTable.tsx.
  • Fixed list rendering in status filters to ensure proper markup in SnippetsListTable.tsx.

@rami-elementor rami-elementor requested a review from a team May 3, 2026 06:24
<span>{snippet.vote_count}</span>
<span>
{snippet.vote_count}
<span className="screen-reader-text">{` ${__('votes', 'code-snippets')}`}</span>
Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

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

should this be interpolated with sprintf? 'votes' by itself doesn't really make sense without the number attached. Also, this code as-is will not include a space between the numeral and the text (e.g. it'll appear as 4votes).

Copy link
Copy Markdown
Contributor Author

Choose a reason for hiding this comment

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

No, we should not use sprintf() here because the number is visible and the text is not.

image

@rami-elementor rami-elementor merged commit 126674a into core-beta May 5, 2026
8 checks passed
@rami-elementor rami-elementor deleted the a11y-community branch May 5, 2026 05:17
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