fix(core): add initial selected item focus handling for tabs

[coryrylan]

Summary by CodeRabbit

• New Features

  • Tabs now retain keyboard focus on the currently selected tab when opened.
  • Keyboard navigation supports choosing an initial active item.

• Bug Fixes

  • Improved tab focus behavior when no tab is selected, ensuring the first tab is accessible by keyboard.

• Documentation

  • Updated navigation with clearer Getting Started links and improved grouping for Datagrid, Forms, Media, and Monaco content.

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: Path: .coderabbit.yaml

Review profile: ASSERTIVE

Plan: Enterprise

Run ID: 95ae9e78-aca9-4b3e-a7e3-f2993a4d6972

📥 Commits

Reviewing files that changed from the base of the PR and between 993cd55 and dc1046f.

📒 Files selected for processing (6)

• projects/core/src/internal/controllers/keynav-list.controller.test.ts
• projects/core/src/internal/controllers/keynav-list.controller.ts
• projects/core/src/tabs/tabs.examples.ts
• projects/core/src/tabs/tabs.test.ts
• projects/core/src/tabs/tabs.ts
• projects/site/src/_11ty/layouts/common.js

Included review availability: Your plan provides up to 12 included reviews per hour; 11 remain after this review.

---

📝 Walkthrough

Walkthrough

The key-navigation controller now supports an initial item. Tabs pass the selected tab to this configuration and test the resulting tabindex behavior. The default tabs example selects Details. Documentation navigation updates Datagrid, Forms, Media, and Monaco group structure.

Changes

Core initial navigation

Layer / File(s)	Summary
Key-navigation initial item projects/core/src/internal/controllers/keynav-list.controller.ts, projects/core/src/internal/controllers/keynav-list.controller.test.ts	KeynavListConfig accepts initialItem. The controller activates it when it belongs to the configured items. Tests cover selecting the third button.
Tabs initial selection projects/core/src/tabs/tabs.ts, projects/core/src/tabs/tabs.examples.ts, projects/core/src/tabs/tabs.test.ts	Tabs pass the selected tab as initialItem. The default example selects Details. Tests cover selected and unselected initial states.

Site navigation structure

Layer / File(s)	Summary
Documentation navigation groups projects/site/src/_11ty/layouts/common.js	Datagrid and Forms remain expanded and gain Getting Started entries. Media and Monaco links move into expandable groups with shorter child labels.

Estimated code review effort: 3 (Moderate) | ~20 minutes

Merge Risk: ⚪ Minimal · up to dc104

This localized tabs focus-handling change is merge-ready after normal checks and review, with no actionable merge-blocking risk remaining.

Sequence Diagram(s)

sequenceDiagram
  participant Tabs
  participant KeynavListController
  participant TabItems
  Tabs->>KeynavListController: provide selected tab as initialItem
  KeynavListController->>TabItems: initialize tab items
  KeynavListController->>TabItems: set selected tab as active

Loading

Suggested reviewers: johnyanarella

🚥 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 the main change: adding initial selected-item focus handling for tabs.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.
Linked Issues check	✅ Passed	Check skipped because no linked issues were found for this pull request.
Out of Scope Changes check	✅ Passed	Check skipped because no linked issues were found for this pull request.

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch topic-tab-focus-fix

Warning

There were issues while running some tools. Please review the errors and either fix the tool's configuration or disable the tool if it's a critical failure.

🔧 ESLint

If the error stems from missing dependencies, add them to the package.json file. For unrecoverable errors (e.g., due to private dependencies), disable the tool in the CodeRabbit configuration.

projects/core/src/internal/controllers/keynav-list.controller.test.ts

ESLint skipped: missing config or dependency (missing-dependency). The ESLint configuration references a package that is not available in the sandbox.

projects/core/src/internal/controllers/keynav-list.controller.ts

ESLint skipped: the matched ESLint configuration already failed (missing-dependency).

projects/core/src/tabs/tabs.examples.ts

ESLint skipped: the matched ESLint configuration already failed (missing-dependency).

• 3 others

---

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

[coryrylan]

🎉 This issue has been resolved in version 2.3.2 🎉

Changelog

[coryrylan]

🎉 This issue has been resolved in version 2.0.1 🎉

Changelog

[coryrylan]

🎉 This issue has been resolved in version 2.1.3 🎉

Changelog