carbon-design-system / carbon-design-system/carbon-components-angular

Tabs container receives visual focus indicator when clicking in the container

Open
#770 1 comment 0 reactions 0 assignees View on GitHub
component: Tabs
Dominant language
TypeScript
Stars
566
Forks
318
PR merge metrics
No merged PRs in 30d

Description

https://angular-step-6-carbon-tutorial.netlify.com

Clicking on "What is Carbon?" or anywhere in the tab container that doesn't have its own focus puts visible focus on the tab container, resulting in an unexpected browser focus indication on the tab container. See blue in this screenshot:

![image](https://user-images.githubusercontent.com/1691245/65527067-af1ff780-deb7-11e9-8db0-6e6966a90fcc.png)

This is a discrepancy with the React implementation, e.g.:

https://react-step-6--carbon-tutorial.netlify.com/#/

Contributor guide

Open the contributing guide

Research direction

Reproduce the behavior using the Angular tutorial link and compare it with the linked React implementation. Trace the tabs container and its focus behavior from the relevant Angular component files; done means clicking non-focusable space in the container no longer shows an unexpected focus indicator while actual tab focus remains visible.

Written by the indexing model from the issue text.

Assessment

Tech stack
angular, typescript
Domain
accessibility, frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
45/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.