WAIT: Focus Border Showing When it isn't Supposed too

Feature Requests / Improvements
1

The focus border keeps showing by default even when not using keyboard navigation. Especialy evadent when using mobile. There have been several people posting this same issue on the FB Group. It can be solved by setting focus outline to none but then we have to compromise the accessabilty of the site.

3

Hi Tristan,
Thanks so much for your report!

Your suggestion is an improvement and not a bug, so I will move the thread. If I understand correctly, you are suggesting to use :focus-visible instead of :focus, right?

The browser support for :focus-visible has reached a point where we can think about it. I will address the issue within the team.

Best regards,
timmse

4

Is there any news on this topic?

5

Not yet :disappointed: but here is some code you can add to fix it for now. The second part is for the styling of your choice.

body.bricks-is-frontend :focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
body.bricks-is-frontend :focus-visible {
outline-style: solid;
outline-color: #ffffff;
outline-width: .2rem;
outline-offset: .2rem;
}

6

Hi Tristan

Just today I solved it aswell! I set in Theme Styles > Typography > Misc the Focus outline to none

Then I added to the global CSS this code:

:focus-visible {
outline: 1px dotted currentColor!important;
}

works like a charm :wink: