Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

fix(material/tabs): allow for tablist aria-label and aria-labelledby to be set #29562

Merged
merged 1 commit into from
Aug 14, 2024

Conversation

crisbeto
Copy link
Member

@crisbeto crisbeto commented Aug 9, 2024

According to the W3C reference implementation, the inner tablist can be labelled using aria-label or aria-labelledby. These changes add an input to allow them to be set.

Fixes #29486.

…to be set

According to the [W3C reference implementation](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/), the inner `tablist` can be labelled using `aria-label` or `aria-labelledby`. These changes add an input to allow them to be set.

Fixes angular#29486.
@crisbeto crisbeto added the target: patch This PR is targeted for the next patch release label Aug 9, 2024
@crisbeto crisbeto requested a review from a team as a code owner August 9, 2024 11:58
@crisbeto crisbeto requested review from amysorto and andrewseguin and removed request for a team August 9, 2024 11:58
@@ -242,6 +242,12 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes

private _backgroundColor: ThemePalette;

/** Aria label of the inner `tablist` of the group. */
@Input('aria-label') ariaLabel: string;
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I'm a bit on the fence if this should be aria-label or something like tabListAriaLabel. I went with the shorter one, because the mat-tab-group doesn't have a role.

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It also seems some of out other components (like autocomplete) follow the same too with just calling the input ariaLabel

@@ -242,6 +242,12 @@ export class MatTabGroup implements AfterContentInit, AfterContentChecked, OnDes

private _backgroundColor: ThemePalette;

/** Aria label of the inner `tablist` of the group. */
@Input('aria-label') ariaLabel: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It also seems some of out other components (like autocomplete) follow the same too with just calling the input ariaLabel

@crisbeto crisbeto removed the request for review from andrewseguin August 14, 2024 13:08
@crisbeto crisbeto added the action: merge The PR is ready for merge by the caretaker label Aug 14, 2024
@crisbeto crisbeto merged commit 1968cc4 into angular:main Aug 14, 2024
23 of 25 checks passed
crisbeto added a commit that referenced this pull request Aug 14, 2024
…to be set (#29562)

According to the [W3C reference implementation](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/), the inner `tablist` can be labelled using `aria-label` or `aria-labelledby`. These changes add an input to allow them to be set.

Fixes #29486.

(cherry picked from commit 1968cc4)
crisbeto added a commit that referenced this pull request Aug 14, 2024
…to be set (#29562)

According to the [W3C reference implementation](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/), the inner `tablist` can be labelled using `aria-label` or `aria-labelledby`. These changes add an input to allow them to be set.

Fixes #29486.

(cherry picked from commit 1968cc4)
@angular-automatic-lock-bot
Copy link

This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.

Read more about our automatic conversation locking policy.

This action has been performed automatically by a bot.

@angular-automatic-lock-bot angular-automatic-lock-bot bot locked and limited conversation to collaborators Sep 14, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Labels
action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

feat(MatTab): MatTabGroup
2 participants