Consider using :focus-visible in default CSS instead of :focus

Feature Requests / Improvements
1

To preserve accessibility, while also removing that outline that appears when users click any links/buttons in Bricks.

Changing

body.bricks-is-frontend :focus {
outline: thin dotted currentColor;
}

to

body.bricks-is-frontend :focus-visible {
outline: thin dotted currentColor;
}

in the default CSS means the keyboard users can still see the outline when tabbing through elements, but it’s not seen when clicking on links, which isn’t really needed.

14 Likes
2

I agree with this. I personally dislike the dotted outline when clicking with the mouse.

3

I can throw my hat towards this.

I especially don’t like the outline around the mobile menu toggle that flies across the screen when you click it.

4

It’s a pretty simple override to do it ourselves though. Just adding it below in case anyone else wants it:

body.bricks-is-frontend :focus {
  outline: none;
}

body.bricks-is-frontend :focus-visible {
  outline: thin dotted currentColor;
}
3 Likes
5

For sure, but I just see this question a lot about removing the outlines and then the conversations about it being needed for accessibility etc, I think by just changing this default would solve.

2 Likes
6

I don’t disagree with you. I was just providing a functional solution (hopefully temporary :crossed_fingers:).

1 Like
7

Would definitely help if this change was implemented in the builder.

8

Thumbs up for this :+1:

9

I know it’s quite late now and browser support for :focus-visible is quite good these days, still, I’d recommend using something like the following.

button:focus-visible {
    outline: 1px solid black;
}

@supports not selector(:focus-visible) {
    button:focus {
        outline: 1px solid black;
    }
}

Hoping to get that as a native feature in Bricks!

2 Likes