teams: add team access using keyboard navigation (fixes #10249)

[RyanS4]

Fixes #10249

• Adds click, space, and enter event handlers for navigation to specific teams
• Makes team titles tabbable

Summary by CodeRabbit

• Accessibility Improvements
  • Team names can now be activated using a mouse, Space, or Enter key.
  • Added visible focus styling to help keyboard users identify the selected team.
  • Improved screen reader support with descriptive labels and selection state.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Repository UI

Review profile: QUIET

Plan: Pro Plus

Run ID: f9e3ab73-b52b-47d4-b12e-c3f2a7bca1f1

📥 Commits

Reviewing files that changed from the base of the PR and between 6c3ea09 and 45f4d34.

📒 Files selected for processing (2)

• src/app/teams/teams.component.html
• src/app/teams/teams.scss

---

📝 Walkthrough

Walkthrough

Team names now use keyboard-accessible button-like links. Mouse, Space, and Enter activation invoke teamClick. ARIA attributes expose the team label and dialog selection state. Focused links display a primary-color outline.

Changes

Team accessibility

Layer / File(s)	Summary
Keyboard team activation and focus state src/app/teams/teams.component.html, src/app/teams/teams.scss	Team names use a button-role anchor with mouse and keyboard activation, event propagation prevention, accessible ARIA attributes, and visible :focus-visible styling.

Estimated code review effort: 2 (Simple) | ~10 minutes

Possibly related PRs

• open-learning-exchange/planet#10169: Adds similar keyboard-accessible interactive elements with Enter/Space handlers and event propagation prevention.

Suggested labels: review requested

Suggested reviewers: mutugiii

🚥 Pre-merge checks | ✅ 5

✅ Passed checks (5 passed)

Check name	Status	Explanation
Description Check	✅ Passed	Check skipped - CodeRabbit’s high-level summary is enabled.
Title check	✅ Passed	The title clearly describes adding keyboard navigation for team access and references issue #10249.
Linked Issues check	✅ Passed	The changes make team items tabbable and support Enter and Space activation, satisfying issue #10249.
Out of Scope Changes check	✅ Passed	The HTML and SCSS changes directly support keyboard access and visible focus styling for team items.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

---

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