fix: Add screen reader support directory search results

[antm-rp]

fix: Add screen reader support to directory search results

Proposed changes (including videos or screenshots)

This fix adds support for screen readers to announce the number of results for the Directory search interface (containing tabs for Channels, Users and Teams). Announcements are made when changing tabs as well as when a search updates the result list.

Issue(s)

Steps to test or reproduce

• Navigate to Directory
• Click Channels, Users and Teams respectively.
• Perform a search for each tab limiting the number of results.
• Confirm that screen reader properly announce the number of results.

Further comments

This fix has been successfully tested on Linux with the Orca screen reader, in combination with Chromium and Firefox.

Summary by CodeRabbit

• Accessibility Improvements

  • Directory search result counts for channels, teams, and users are now announced via a polite live region for screen readers, giving audible feedback when search results change.

• Localization Updates

  • Added localized plural strings for channel, team, and user search result messages so announcements use correct singular/plural forms.

_{✏️ Tip: You can customize this high-level summary in your review settings.}

[changeset-bot[bot]]

⚠️ No Changeset found

Latest commit: 2f4b539d9730a7d7747d6eb07062bb36d7b2fbef

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[dionisio-bot[bot]]

Looks like this PR is not ready to merge, because of the following issues:

• This PR is missing the 'stat: QA assured' label
• This PR is missing the required milestone or project

Please fix the issues and try again

If you have any trouble, please check the PR guidelines

[coderabbitai[bot]]

Walkthrough

Three directory table components now set and render an aria-live VisuallyHidden region (aria-live="polite") announcing localized search result counts when data.total becomes available; three new English pluralized i18n keys provide the announced strings.

Changes

Cohort / File(s)	Summary
Directory Table Accessibility Enhancements apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx, apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx, apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx	Added announcementText state and a useEffect that sets it when data.total is available. Imported useEffect from React and VisuallyHidden from react-aria. Rendered a VisuallyHidden live region (role="status", aria-live="polite", aria-atomic="true") to announce the localized count using the i18n keys.
Internationalization Keys packages/i18n/src/locales/en.i18n.json	Added pluralized English keys: Search_Channels_Count, Search_Users_Count, and Teams_Search_Count with one/other forms for result counts.

Sequence Diagram

sequenceDiagram
    participant Data as Directory Data
    participant Hook as useEffect
    participant State as announcementText
    participant UI as VisuallyHidden (aria-live)

    Data->>Hook: data.total becomes defined/changes
    activate Hook
    Hook->>State: set announcementText = t(key, { count: data.total })
    deactivate Hook

    State->>UI: Render updated text in live region
    activate UI
    UI->>ScreenReader: Announce localized "Found X result(s)"
    deactivate UI

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

• Pay attention to:
  • Correctness of i18n key usage and pluralization placeholders.
  • Proper hook dependencies (data?.total and t) to avoid extra renders.
  • Accessibility attributes (role, aria-live="polite", aria-atomic) and placement to ensure announcements fire as expected.

Poem

🐰 I count the finds with careful hops,

Softly announcing through hidden props.
"Found X results" I hum, polite and clear,
So every ear can know when results appear.
A little rabbit cheering UX near.

Pre-merge checks and finishing touches

✅ Passed checks (3 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title accurately describes the main change: adding screen reader support for directory search results announcements across Channels, Users, and Teams tables.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

✨ Finishing touches

• [ ] 📝 Generate docstrings

🧪 Generate unit tests (beta)

• [ ] Create PR with unit tests
• [ ] Post copyable unit tests in a comment

---

📜 Recent review details

Configuration used: CodeRabbit UI

Review profile: CHILL

Plan: Pro

Disabled knowledge base sources:

• Jira integration is disabled by default for public repositories

You can enable these sources in your CodeRabbit configuration.

📥 Commits

Reviewing files that changed from the base of the PR and between 01b9fa8117195e8f6c153a1b02612fd56a977992 and 88199990ee7e549a7bf6f2a1530623bb46610bd4.

📒 Files selected for processing (3)

• apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx (2 hunks)
• apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx (2 hunks)
• apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx (2 hunks)

🚧 Files skipped from review as they are similar to previous changes (3)

• apps/meteor/client/views/directory/tabs/users/UsersTable/UsersTable.tsx
• apps/meteor/client/views/directory/tabs/teams/TeamsTable/TeamsTable.tsx
• apps/meteor/client/views/directory/tabs/channels/ChannelsTable/ChannelsTable.tsx

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}