scania-digital-design-system/sdds

[Bug report]: UI Focus on Navigation Tabs

Closed this issue · 1 comments

Requirements before reporting

  • No duplicated issue reported.
  • I have read the contribution guidelines.
  • I have checked the lastest version if the bug exist there. See all avaliable packages at npmJS.com
  • I have made sure that the issue comes from SDDS packages by removing SDDS from my project as a test.
  • I have followed the installation guide.

Package

@scania/components

Package versions

"@scania/components": "4.9.3"

Browser

Chrome

Framework

Angular

Version

Angular 14.2

Reproduction steps

  1. Add component navigation-tabs
  2. create multiple tabs
  3. Click any other tab than current focused tab to change focused tab
    ...

Code example

Tab 1 Tab 2 Tab 3

Screenshots

Add/Copy sc
Screenshot 2022-10-14 at 13 50 26
reenshot here

Expected behaviour

Text is outlined when you change the focus of tab.

There should be better UI representation of focused UI tab than just outlining text.

maybe, default Background color for focused and unfocused tabs?

If outline is here to stay for accessability maybe something similar to Ibm's carbon tabs? https://carbondesignsystem.com/components/tabs/usage

e.g not outlining just text, but outlining the tab.

Console errors

Add warning/error message

Contact information

gokberk.nur@scania.com

AB#2433

This appearance is in line with our current design specification.

However, good feedback. I have forwarded it to the design team, and they will have a look at this and decide how we should move forward.

Thanks for the input @gokberknur !