Skip to content

fix(tabs): update mat-tab-link to set aria-current when active #11409

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

Merged
merged 1 commit into from
Jun 7, 2018

Conversation

stevenyxu
Copy link
Contributor

mat-tab-header already does this:
https://github.com/angular/material2/blob/abc3d38c57146443c848d5ba26fd2fab8ca185d6/src/lib/tabs/tab-group.html#L11

And you can see aria-selected is being set properly on the main tabs demo page
https://material.angular.io/components/tabs/overview.

But mat-tab-nav-bar (on the same page, but no live demo) doesn't set aria-selected at all.

@stevenyxu stevenyxu requested a review from andrewseguin as a code owner May 18, 2018 22:25
@googlebot googlebot added the cla: yes PR author has agreed to Google's Contributor License Agreement label May 18, 2018
@tinayuangao
Copy link
Contributor

LGTM.

The tab-link should have role (#11410) and aria-selected.

@stevenyxu
Copy link
Contributor Author

Thank you! Rebased and ready for further review.

@andrewseguin andrewseguin added pr: lgtm action: merge The PR is ready for merge by the caretaker target: patch This PR is targeted for the next patch release labels May 25, 2018
@stevenyxu stevenyxu force-pushed the tab-nav-bar branch 6 times, most recently from 83043a0 to 60b8888 Compare June 4, 2018 20:47
@stevenyxu stevenyxu changed the title fix(tabs): update mat-tab-link to set aria-selected when active fix(tabs): update mat-tab-link to set aria-current when active Jun 4, 2018
@stevenyxu
Copy link
Contributor Author

Updated from aria-selected to aria-current per discussion on #11410. nav > link pattern should use aria-current to indicate the current active nav link.

@jelbourn jelbourn removed pr: lgtm action: merge The PR is ready for merge by the caretaker labels Jun 4, 2018
Copy link
Member

@jelbourn jelbourn left a comment

Choose a reason for hiding this comment

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

LGTM

@jelbourn jelbourn added pr: lgtm action: merge The PR is ready for merge by the caretaker labels Jun 4, 2018
@ngbot
Copy link

ngbot bot commented Jun 4, 2018

I see that you just added the pr: merge ready label, but the following checks are still failing:
    failure status "ci/circleci: build" is failing
    pending status "continuous-integration/travis-ci/pr" is pending

If you want your PR to be merged, it has to pass all the CI checks.

If you can't get the PR to a green state due to flakes or broken master, please try rebasing to master and/or restarting the CI job. If that fails and you believe that the issue is not due to your change, please contact the caretaker and ask for help.

@stevenyxu
Copy link
Contributor Author

Per offline discussion, Angular Material is not interested in this fix for now pending further analysis. Users are expected to implement their own indicator on which of the mat-tab-link is active. A good candidate seems to be https://www.w3.org/TR/wai-aria-1.1/#aria-current.

@stevenyxu stevenyxu closed this Jun 4, 2018
@stevenyxu stevenyxu reopened this Jun 4, 2018
@stevenyxu
Copy link
Contributor Author

Reopening since it looks like this is the way we want to go.

mat-tab-group and mat-tab use tablist and tab and sets aria-selected properly
https://material.angular.io/components/tabs/overview.

mat-tab-nav-bar and mat-tab-link use nav and link roles and are missing corresponding aria-current.
@andrewseguin andrewseguin merged commit 103acc4 into angular:master Jun 7, 2018
andrewseguin pushed a commit that referenced this pull request Jun 8, 2018
mat-tab-group and mat-tab use tablist and tab and sets aria-selected properly
https://material.angular.io/components/tabs/overview.

mat-tab-nav-bar and mat-tab-link use nav and link roles and are missing corresponding aria-current.
@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 9, 2019
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 cla: yes PR author has agreed to Google's Contributor License Agreement target: patch This PR is targeted for the next patch release
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants