Components: [Tabs] Label has focused style after clicking

[daniele-zurico]

The first time that I load the tabs by default is set the first tab correctly however the opacity of the first tab is not set to 1. After that I click on it the opacity change in the correct way.
Is that an Issue or I'm missing something?

After I click

<md-tab-group> <md-tab> <ng-template md-tab-label> All Orders <div class="bubble" #allOrdersBubble >{{allOrdersCount}}</div> </ng-template> <iag-all-orders (onPickup)="refreshItems()"></iag-all-orders> </md-tab> <md-tab> <ng-template md-tab-label style="opacity: 1"> My Orders <div class="bubble" #myOrdersBubble>{{myOrdersCount}}</div> </ng-template> <iag-my-orders (onRefresh)="refreshItems($event)"></iag-my-orders> </md-tab> </md-tab-group>

[donroyco]

Can you please use the issue template and provide a Plunker? Thanks!

[andrewseguin]

I believe you are referring to the tab label's focus, which changes its opacity and background to show focus. This is useful for knowing what tab label is focused when navigating via keyboard.

[daniele-zurico]

@andrewseguin exactly if you look on the demo: https://material.angular.io/components/tabs/overview
you see the line blu under the first tab but if you click on the first tab again you see that the word overview became black (focused)...
My opinion is that the label should be already focused

[andrewseguin]

I'm not sure it's clear, but by "focused" we are referring to the browser's focus on the element, which is very relevant to keyboard interaction and accessibility. We won't be able to support automatic focus of the first tab lab on page load.

[daniele-zurico]

But it's inconsistent! If the first tab is selected by default it should have the same look and feel of clicked

[amcdnl]

The focus state represents when the user has actively focused that individual component. By default, the focus state goes top to bottom so depending on where your tabs are it, it doesn't make sense for the tabs to steal the focus plus if there are multiple tabsets on the screen which tab should you auto focus?

a11y also states that there is some sort of indication that the focused item is focused thus the style difference.

@kara - I believe given all this, it is functioning as designed.

[ruchit07]

I was facing the same problem. @daniele-zurico You are correct. Selected tab is not showing background color and opacity 1. But when we clicked on that tab, it's showing.

But you can apply whatever design you want to apply on selected tab on class "mat-tab-label-active".

.mat-tab-label-active{
background-color: #3398dc !important;
opacity: 1 !important;
}

This might help!

[ghost]

@ruchit07 what I was looking for!

[sebastiandenis]

The solution provided by @ruchit07 works ok when you click on tabs. But if you go to next tab without clicking on it (swipe right) you need to add also:

 .mat-tab-link:not(.mat-tab-label-active):focus {
  background: none !important;
}

Do it only if you want to remove background when a tab is focused - so you don't have an inactive tab with a different background than other inactive tabs.

[nikitakuz]

I don't like using !important if I can avoid it. My issue is that the focus would remain after the tab is programmatically changed causing a confusing background on an inactive tab but a line under the active tab. I found the following works for me.

.mat-tab-group.mat-primary .mat-tab-label.cdk-focused:not(.cdk-mouse-focused):not(.cdk-tab-disabled):not(.mat-tab-label-active) {
  background: none;
}

[bolajiadeyemi]

You can just call blur on the link on click.
<a mat-tab-link> (click)="onTabClick($event)" </a>
and in your ts file

onTabClick(event) { event.target.blur(); }

[akashgill1687]

@ruchit07 solution works but is there a permanent fix to this issue ?

[jpike88]

So let's look at the logic here:

A tab is selected, which indicates it's already focused. It's not a link, it's a tab, in every sense of the word.

Clicking an already selected tab changes it to look like it is now 'active', even though it was already functionally 'active' when it was selected.

If the tab was selected on page load (which is often the case), it looks weird. It implies that the state has changed, which is incorrect.

This makes no sense. You have overwhelming likes on comments which would indicate that most people consider it to be common sense, yet a couple of maintainers continue disagree, with zero support. A classic disconnect on what a developer thinks _should_ be the case, versus what the users are all looking for. I advise the team to start considering feedback with a little more weight.

[GnafGnaf]

A tab is selected, which indicates it's already focused.

No, it does not indicate that. If a tab is focused you can navigate through the tabs using the arrow keys and enter. If you have multiple tab-groups on a page you can only navigate the focused one with your keyboard. So, there is a difference in behaviour between a focused tab (group) and an active tab.

[jpike88]

How many users percentage wise do you think would know or care to use their arrow keys to change tabs in a page? If your definition of focused implies that keyboard behaviour should be counted as such an important factor I think you’re missing my point, which is that the user does not think like the developer. We should be suiting how end users will actually use it, not how we think it should fit together based on arbitrary factors.

[GnafGnaf]

Disabled people care. People wo can not use a mouse. This is an accessibility feature and it's a good thing it's there. If you want to lock out disabled people from using your app; fine, do it. Edit your css and get rid of that feature. But I firmly believe that it is a good thing that accessibility features are activated by default because developers don't usually think about the needs of people who have different needs than they have.

[jpike88]

Alright so why is this issue still open? If accessibility is the dealbreaker, instead of us going back and forth, the team should be clear about it and close it

[GnafGnaf]

True. I can only guess but I recon that they still see this as a ux problem. As you say, there are a lot of people who seem to misunderstand this feature. Balancing accessibility and general ux is not always easy. Especially in this case, where the impact is not very high, it's easy to postpone finding a solution indefinitely. I hope that they'll find a solution that is good for everyone.

Anyway this turned into a discussion of culture that does not have much to do with the bug anymore. I'm sorry for that and will leave it at that. :)

[Nodarii]

@andrewseguin ,
Should we expect this issue to be fixed?
This is very trivial fix, isn't it? Please, let us know if it is low priority and somebody should do it for you

[lroos]

I vote keep the background fill only for cdk-keyboard-focused accessibility, and at least add a style for mat-tab-label-active to keep the label opacity at 1 after the active tab loses focus. Alternatively, think of it as setting opacity to 0.6 only if it's one of the more 'muted' tab labels. It makes it a little nicer to differentiate the "foreground tab" content from the others, apart from the big underline. Best of both worlds.

[endzis]

That worked for me:

::ng-deep.mat-tab-label.mat-tab-label-active {
opacity: 1;
}

[macaranduba]

Hi there.

I understand the focus motivation but I too was missing the stronger text color on the selected by default tab label (while user doesn't select it) and after the user select any other element on the page.

After inspecting the HTML page, I just went with...

div[role="tab"][aria-selected="true"] {
  opacity: 1;
}

...on my main styles.css Angular project file. Now, the selected tab has the bottom border line as well as a stronger text color when selected (by default or not) and after user select any other element on the page.

I'm new to css and web page programming, so any problem found with this approach witll be more than welcome.

[yuvalbl]

Thanks to @ruchit07 for the solution. like @nikitakuz I also prefer avoiding important.
I've put the following in my styles.scss (so no ng-deep is needed) and it works.

.mat-tab-label.mat-tab-label-active{
opacity: 1;
}

[gcerquant]

As you say, there are a lot of people who seem to misunderstand this feature.

(word highlighted by me).

When a feature is so often misunderstood by its users, maybe it's a sign it needs to be improved?

There might be a way to make it behave as requested by original poster + many others while still having your point respected.

Waiting for it, I went with @endzis solution:

/*
* [Tabs] Label has focused style after clicking - #5903
*  https://github.com/angular/components/issues/5903
*
* Remove this once this issue is fixed.
*
*/
::ng-deep.mat-tab-label.mat-tab-label-active {
    opacity: 1;
}