Restoring focus outline on links

Browsers have a focus outline for a reason: accessibility, letting users interact with the page using just the keyboard.

We, web developers, must not remove the focus outline without providing an equivalent alternative.

* https://accessiblewebsiteservices.com/accessible-css-focus-on-the-outline/
* https://theadminbar.com/accessibility-weekly/focus-outlines/
* https://stackoverflow.com/questions/9274948/css-outline-best-practices

I considered using the same visual feedback as the mouse-over effect, but that's not possible in the current HTML/CSS. That `transform: translateY(-3px)` effect is being applied to the parent `div.card`, which is not focusable, and thus we cannot trigger the same effect. The solution would require reworking both the HTML and CSS. (It can also be argued that tiny 3px offset is too subtle to be used as a focus indicator.)

For now, I've restored the default browser focus outline, and someday in the future someone could try to provide a different focus indication.
pull/952/head
Denilson Sá Maia 2025-07-11 09:28:13 +02:00 committed by GitHub
parent c230392da8
commit 9132ba2bc1
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 0 additions and 4 deletions

View File

@ -243,10 +243,6 @@
box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.1);
transition: cubic-bezier(0.165, 0.84, 0.44, 1) 300ms;
overflow: visible;
a {
outline: none;
}
}
.card:hover {