search

porsche-design-system / porsche-design-system

Find all the fundamental UXI guidelines and pattern-based web components to build brand driven, consistent and intuitive designs for digital Porsche products.
https://designsystem.porsche.com
Other
457 stars 22 forks source link

[BUG] - Focus management of `Tabs Bar` is broken when it's scrollable #3342

Open o-hook opened 2 weeks ago

o-hook commented 2 weeks ago

Bug Description

Focus management is broken after tabbing through the scrollable container of Tabs Bar component. This might be due that the p-scroller component get's an tabindex="-1" if the inner "scroll-area" get's blurred.

Example video: https://github.com/porsche-design-system/porsche-design-system/assets/40788023/7e413822-167a-4851-9ff3-8216bb1e93c0

Contact Details

Slack: https://porschedev.slack.com/archives/CT7AVHTTQ/p1718177906400209

JS Framework

all

Porsche Design System version

3.16.0-rc.0

On which device(s) you can see the bug?

all

In which browsers you can see the bug?

all

Browser version

all

Reproduction Example

Storefront: https://designsystem.porsche.com/latest/components/tabs-bar/examples#gradient-color

Steps to reproduce the behavior

  1. Go to https://designsystem.porsche.com/latest/components/tabs-bar/examples#gradient-color
  2. Tab through the tab-bar example forwards and backwards
  3. after first focus of scrollable container, it is not possible to focus this container again. Therefor also the tab-items can't get focus state

Expected behavior

Focus management should always work

Relevant log output

No response

CorinnaGen commented 47 minutes ago

Hello! This issue also happening in DWAAS team