Beans default focus styling issue on Safari

[itsdanreed]

The default :focus styling in tm-beans/lib/assets/less/style.less (snippet included) causes outline when clicking elements in article, aside and the navigation on Safari 11.1.2.

Source:

/* Display outline on focus */
:focus {
    color: #333;
    outline: 1px #ccc solid;
}

Screenshot:

[ibes]

Hm - for accessability reasons there should be outlines.

Focus is for tabbing through the page. Without outline people with vision won't know where they are.

I agree that outlines look shitty - but as far as I know they are best practise.

[itsdanreed]

@ibes I would agree that it seems intentional, but it seems except the same issue does not exist on Chrome?

[christophherr]

Just to confirm, this is intentional. The outline appears in Chrome, too. It actually overrides the Chrome user agent outline styles which are thicker and blue :focus { outline: -webkit-focus-ring-color auto 5px; } You can change the styles in your child theme's stylesheet.

[christophherr]

Closing this issue because the addition was intentional to improve accessibility and the :focus styles can be changed in a child theme's stylesheet.