Skip to content

refactor(aria/tabs): clean up tab selection and linking to panels, add direct template ref#32859

Open
adolgachev wants to merge 3 commits intoangular:mainfrom
adolgachev:aria-tabs
Open

refactor(aria/tabs): clean up tab selection and linking to panels, add direct template ref#32859
adolgachev wants to merge 3 commits intoangular:mainfrom
adolgachev:aria-tabs

Conversation

@adolgachev
Copy link
Copy Markdown
Contributor

@adolgachev adolgachev commented Feb 26, 2026

Refactors Tabs pattern to simplify how tabs are associated with their tab panels, as well as other dependent code.

This is a revision of the previous approach which swapped to use contentChildren and template references only. Instead there are 3 commits with layered changes:

  1. Clean up and re-factoring to move the value matching of Tab and TabPanel to the directive and remove extra synching of selection and linked state in favor of a more direct approach.
  2. Add in template references for linking which can be used in many cases when defining tabs declaratively and removes need to use values and ensure they match. The value matching is preserved. Examples updated. If stop here, will need to add validation as both value and panelRef are optional.
  3. Remove value matching in favor of matching Tab with its TabPanel using the panel (generated or set) Id. This moves back to a single required panel reference field. One issue is that I'm not fond of selectedTab being set with the panel id (although can also add set via template ref to the tab).

@adolgachev adolgachev changed the title Aria tabs refactor(aria/tabs): Rework to use template reference to link tabs and panels Feb 26, 2026
@adolgachev adolgachev added Accessibility This issue is related to accessibility (a11y) dev-app preview When applied, previews of the dev-app are deployed to Firebase docs: preview When applied, a preview of the documentation site is deployed to Firebase labels Feb 26, 2026
@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 26, 2026

Deployed dev-app for edf03c8 to: https://ng-dev-previews-comp--pr-angular-components-32859-dev-pxtvzh2b.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@github-actions
Copy link
Copy Markdown

github-actions bot commented Feb 26, 2026

Deployed docs-preview for edf03c8 to: https://ng-dev-previews-comp--pr-angular-components-32859-docs-58cy5tjn.web.app

Note: As new commits are pushed to this pull request, this link is updated after the preview is rebuilt.

@adolgachev adolgachev force-pushed the aria-tabs branch 6 times, most recently from 9f18364 to cb3c051 Compare March 7, 2026 01:49
@adolgachev adolgachev changed the title refactor(aria/tabs): Rework to use template reference to link tabs and panels refactor(aria/tabs): simplify code by using template references instead of user id to link tabs and panels Mar 7, 2026
@adolgachev adolgachev force-pushed the aria-tabs branch 7 times, most recently from f6c32a1 to d913ebb Compare March 11, 2026 05:29
@adolgachev adolgachev marked this pull request as ready for review March 11, 2026 05:36
@adolgachev adolgachev requested a review from ok7sai March 11, 2026 05:36
@pullapprove pullapprove bot requested review from andrewseguin and tjshiu March 11, 2026 05:36
@adolgachev adolgachev added action: review The PR is still awaiting reviews from at least one requested reviewer and removed action: review The PR is still awaiting reviews from at least one requested reviewer labels Mar 11, 2026
@adolgachev adolgachev marked this pull request as draft March 12, 2026 00:24
@adolgachev adolgachev added the target: patch This PR is targeted for the next patch release label Mar 12, 2026
@adolgachev adolgachev marked this pull request as ready for review March 12, 2026 19:55
@adolgachev adolgachev added action: review The PR is still awaiting reviews from at least one requested reviewer action: presubmit The PR is in need of a google3 presubmit labels Mar 12, 2026
@adolgachev adolgachev force-pushed the aria-tabs branch 2 times, most recently from be451be to 45041c5 Compare March 19, 2026 21:50
@adolgachev adolgachev force-pushed the aria-tabs branch 2 times, most recently from fd5f0bb to 96f2cbb Compare April 1, 2026 23:43
@adolgachev adolgachev force-pushed the aria-tabs branch 3 times, most recently from 54ee045 to fa930ac Compare April 15, 2026 00:20
@adolgachev adolgachev changed the title refactor(aria/tabs): simplify code by using template references instead of user id to link tabs and panels refactor(aria/tabs): clean up tab selection and linking to panels, add direct template ref Apr 15, 2026
@ok7sai
Copy link
Copy Markdown
Member

ok7sai commented Apr 15, 2026

We should put this change on hold for two main reasons

  • Static Id assignment is discouraged internally.
  • Unlike Accordion that a trigger-panel pair are strongly coupled in the document, tabs and panels are two separated groups so the template reference passing can easily fail due to the scoping issue. A common use case we've seen is the tablist gets wrapped into a standalone component.

value input might no be the cleanest implementation, but I also don't see a big drawback of it.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

Accessibility This issue is related to accessibility (a11y) action: presubmit The PR is in need of a google3 presubmit action: review The PR is still awaiting reviews from at least one requested reviewer area: aria/tabs dev-app preview When applied, previews of the dev-app are deployed to Firebase docs: preview When applied, a preview of the documentation site is deployed to Firebase target: patch This PR is targeted for the next patch release

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants