Hard to see active tab

[katjaKoppensteiner]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I have not leaked any internal/restricted information like screenshots, videos, code snippets, links etc.

What happened?

We have implemented the Tabs provided by iX but I as UX designer get very often the feedback that it is really hard to see which tab is currently active/selected.

See:

Proposal from my side: Add color-ghost--selected background color if tab is selected; I have introduced this color as selected color whenever the user selects something. I did user tests with your suggested colors (eg.: component-1--active) but the difference is too less and its not visible/recognizable. Example:

What type of frontend framework are you seeing the problem on?

Angular

Which version of iX do you use?

2.2.0

Code to produce this issue.

<ix-tabs [selected]="selectedTab">
        <ix-tab-item (click)="changeTab(0)">Tab 1</ix-tab-item>
        <ix-tab-item (click)="changeTab(1)">Tab 2</ix-tab-item>
        <ix-tab-item (click)="changeTab(2)">Tab 3</ix-tab-item>
      </ix-tabs>

[nuke-ellington]

Duplicate #1245