search

CCALI / a2jviewer

This is the repo for the A2J Viewer
https://www.a2jauthor.org
Other
5 stars 8 forks source link

Fix the focus ring in modals #189

Closed chasenlehara closed 2 years ago

chasenlehara commented 2 years ago

In Chrome, :focus-visible is used to display an outline around buttons in the modal header:

Visible focus ring in Chrome

In Safari (Version 15.1), the focus ring is not as visible:

Almost invisible focus ring in Safari
janebitovi commented 2 years ago

I am at a loss. I have no idea why safari is showing this as blue instead of white. Everything in the dev tools is correct, it's just ignoring the CSS.... safari doesn't work

janebitovi commented 2 years ago

only a11y solution is to remove the outline in safari and use something like box-shadow to fake it instead safaribad gets the job done at least