dequelabs / dequelabs/cauldron

"Bar" focus is sharing the same style as the "selected" state

Open
#524 1 comment 0 reactions 0 assignees View on GitHub
medium
Dominant language
TypeScript
Stars
127
Forks
31
Avg merge
2d 12h
Merged PRs (30d)
8

Description

The bar focus that we use in the application (e.g. the focus of the product logo in the top-bar) is conflicting with the selected state of items in things like the horizontal nav bar.

To remedy this we need to revert the bar focus in the following areas back to the default focus (the purple ring):

-All tabstops in the top-bar:
![image](https://user-images.githubusercontent.com/5720243/150375392-c6e01522-3c59-48a6-9ce9-bd75affa2a9f.png)

-Modal label
![image](https://user-images.githubusercontent.com/5720243/150375516-54b5ce40-fba2-4327-a545-14827d9cc505.png)

-Modal close (the x)
![image](https://user-images.githubusercontent.com/5720243/150375608-138e5978-376a-46d9-8a90-f61d99f81608.png)

-Toast text (Note: use the same color for this one that we do for the X in the toast)
![image](https://user-images.githubusercontent.com/5720243/150375827-984b2d48-e1f9-41a2-b0c4-393e7ea6a44c.png)

_We also use the bar vertically when focusing certain bodies of text. I do not want to use the default focus for this however it will need to be changed as well. This is TBD._

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.