[IONIC 4 rc.0] tabs --background-focused variable not working

[vali-de-man]

Bug Report

Ionic version:

[x] 4.x

Current behavior:
The background of ion-tab-button elements remains unchanged when they receive focus, even though the --background-focused CCS4 variable for ion-tab-button elements is set.

Expected behavior:
I expected the ion-tab-button elements' background to get the background color I set in the --background-focused variable.
This is supposed to happen if I understand the docs correctly, see
https://beta.ionicframework.com/docs/api/tab-button

Steps to reproduce:

1. Create an Ionic tabs starter.
2. In the tabs.page.scss file paste:

ion-tab-bar {
  --background: grey;
}
ion-tab-button {
  --color: blue;
  --color-selected: red;
  --background-focused: orange;
}

3. Run ionic serve, and preview in Firefox (don't see it working in other browsers either).
4. Move along the tab buttons by using the physical "Tab" key on the keyboard.
5. Observe that when a tab button receives focus its background remains unchanged.

Related code:

Other information:

Ionic info:

Ionic:

   ionic (Ionic CLI)             : 4.5.0
   Ionic Framework               : @ionic/angular 4.0.0-rc.0
   @angular-devkit/build-angular : 0.8.7
   @angular-devkit/schematics    : 7.1.2
   @angular/cli                  : 6.2.8
   @ionic/angular-toolkit        : 1.1.0

System:

   NodeJS : v8.11.2 (C:\Program Files\nodejs\node.exe)
   npm    : 5.6.0
   OS     : Windows 10

[brandyscarney]

Thanks for the issue! I can reproduce this. The tab button is applying the following CSS:

a:focus-visible {
  background: var(--background-focused);
}

It likely needs to be updated to match button/fab:

:host(.focused) .button-native {
  background: var(--background-focused);
  color: var(--color-focused);
}

[SimonBrazell]

@vali-de-man I've found a work around for this, seems to work when you create the following class on the tabs component:

.tab-selected {
  --background: var(--ion-color-primary); // Or whatever you want to set it to.
}

[vali-de-man]

@SimonBrazell thanks for sharing!

Does this set the color when the tab receives focus though? The class name implies it determines the color of the tab when selected. Will try it out!

[carlosnewmusic]

this also happens with ionic-button, since the effect does not apply
`ion-button {
--background-focused : #961300;

}`

[liamdebeasi]

Hi everyone,

This issue has been resolved via #17502 and will be in the next version of Ionic.

I have published a nightly build of Ionic if you would like to test this fix out (npm i @ionic/angular@dev).

Thanks for using Ionic!

[ionitron-bot]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.