fix(a11y): Navigation items missing aria props

[juliajforesti]

WA-80

Proposed changes (including videos or screenshots)

• add role tab
• add aria-current to pages navigation items
• adjust test locators

Issue(s)

Steps to test or reproduce

Further comments

Summary by CodeRabbit

• Bug Fixes

  • Improved accessibility across navigation, sidebar, and sidepanel items by switching to semantic ARIA usage to indicate the current/active page and selection state.

• Tests

  • Updated end-to-end tests and page object locators to assert the new accessibility semantics (role and current-page attributes) for navigation and sidebar filters.

[dionisio-bot]

Looks like this PR is ready to merge! 🎉
If you have any trouble, please check the PR guidelines

[coderabbitai]

Walkthrough

Accessibility attributes were updated across navigation and sidebar components: active items now use aria-current="page", some aria-selected usages were replaced or retained depending on context, role="tab" was added to filter items, and E2E tests/selectors were adjusted to match these ARIA changes.

Changes

Cohort / File(s)	Summary
Sidebar nav item apps/meteor/client/components/Sidebar/SidebarNavigationItem.tsx	Compute active state via currentPath?.includes(path) and pass aria-current="page" when active.
NavBar Omnichannel items apps/meteor/client/navbar/NavBarOmnichannelGroup/NavBarItemOmnichannelContact.tsx, apps/meteor/client/navbar/NavBarOmnichannelGroup/NavBarItemOmnichannelQueue.tsx	Conditionally set aria-current="page" when isPressed is truthy; JSX expanded to multiline returns.
NavBar pages apps/meteor/client/navbar/NavBarPagesGroup/NavBarItemDirectoryPage.tsx, apps/meteor/client/navbar/NavBarPagesGroup/NavBarItemHomePage.tsx	Compute route-match booleans (directoryRoute, homeRoute) and set pressed and aria-current="page" based on route inclusion.
Sidebar list items apps/meteor/client/sidebar/RoomList/SidebarItemTemplateWithData.tsx, apps/meteor/client/views/navigation/sidebar/RoomList/SidebarItem.tsx	Add conditional aria-current="page" for selected items; SidebarItem now forwards aria-selected={props.selected} (selection prop preserved).
Sidepanel item apps/meteor/client/views/navigation/sidepanel/SidepanelItem/SidepanelItem.tsx	Replaced aria-selected={selected} with aria-current={selected ? 'page' : undefined}; selected prop still used for state/behavior.
Room list filters (tabs) apps/meteor/client/views/navigation/sidebar/RoomList/RoomListFiltersItem.tsx	Add role="tab" to filter items (establish tab semantics) while keeping aria-label/selected and button behavior.
E2E tests apps/meteor/tests/e2e/feature-preview.spec.ts	Updated assertions to expect aria-current="page" for active items and absence of aria-current for inactive items (replacing previous aria-selected checks).
E2E page object selectors apps/meteor/tests/e2e/page-objects/fragments/sidebar.ts	Changed team-collaboration filter locators to query role='tab' instead of role='button' for All, Favorites, Discussions.

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

🚥 Pre-merge checks | ✅ 4 | ❌ 1

❌ Failed checks (1 inconclusive)

Check name	Status	Explanation	Resolution
Linked Issues check	❓ Inconclusive	The PR partially implements WA-80 requirements: aria-current is added to navigation items, role='tab' is added to filters, but aria-selected is not consistently used for tabs as required.	Verify whether aria-current usage for pages and aria-selected for tabs align with WCAG standards and WA-80's intent. Clarify if aria-current replaces or supplements aria-selected for navigation items.

✅ Passed checks (4 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Out of Scope Changes check	✅ Passed	All changes are scoped to accessibility improvements on navigation items as described in WA-80, including adding roles, ARIA attributes, and updating related tests.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Title check	✅ Passed	The title directly describes the main changes: adding missing ARIA properties to navigation items for accessibility compliance.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

---

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.}

[codecov]

Codecov Report

❌ Patch coverage is 78.57143% with 3 lines in your changes missing coverage. Please review.
✅ Project coverage is 70.21%. Comparing base (4a834b5) to head (c10ea9e).
⚠️ Report is 10 commits behind head on develop.

Additional details and impacted files

@@             Coverage Diff             @@
##           develop   #40157      +/-   ##
===========================================
+ Coverage    70.17%   70.21%   +0.03%     
===========================================
  Files         3280     3280              
  Lines       116852   116861       +9     
  Branches     20695    20675      -20     
===========================================
+ Hits         82005    82053      +48     
+ Misses       31556    31526      -30     
+ Partials      3291     3282       -9     

Flag	Coverage Δ
e2e	59.69% <78.57%> (+0.03%)	⬆️
e2e-api	46.58% <ø> (+0.05%)	⬆️
unit	71.05% <ø> (+0.02%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

🚀 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.

[changeset-bot]

⚠️ No Changeset found

Latest commit: c10ea9e

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

[cubic-dev-ai]

No issues found across 11 files

[cubic-dev-ai]

1 issue found across 1 file (changes from recent commits).

Prompt for AI agents (unresolved issues)

Check if these issues are valid — if so, understand the root cause of each and fix them. If appropriate, use sub-agents to investigate and fix each issue separately.


<file name="apps/meteor/client/views/navigation/sidebar/RoomList/SidebarItem.tsx">

<violation number="1" location="apps/meteor/client/views/navigation/sidebar/RoomList/SidebarItem.tsx:29">
P2: `aria-selected` is not the right state for current-page navigation links here; this should continue to expose the active route with `aria-current='page'`.</violation>
</file>

_{Reply with feedback, questions, or to request a fix. Tag @cubic-dev-ai to re-run a review.}