Skip to content

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

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

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

Conversation

@adolgachev
Copy link
Copy Markdown
Contributor

@adolgachev adolgachev commented Apr 21, 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).

However, discussed and currently in agreement that we will not move forward with this PR for the following main reasons:

  • Using both template reference and values is confusing and prevents us from making the inputs directly required. Having two sources of truth is also not advisable.
  • Using ID matching does not help that much compared to using value. Also, while value can not be unique, id has to be, so enforcing that will complicate issues. Finally, it is confusing to reference the tab panel id for the selected tab, but referencing the tab id as well will make it even more complicated.
  • Using just template references can cause issues if the tab directives are nested inside of other components, so just using that approach can not be relied up on in this case.

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

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant