From 9132ba2bc15c552c0d3f3605f60eee07120c9517 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Denilson=20S=C3=A1=20Maia?= Date: Fri, 11 Jul 2025 09:28:13 +0200 Subject: [PATCH] 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. --- src/assets/components/base.scss | 4 ---- 1 file changed, 4 deletions(-) diff --git a/src/assets/components/base.scss b/src/assets/components/base.scss index b88211e..fb159d4 100644 --- a/src/assets/components/base.scss +++ b/src/assets/components/base.scss @@ -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 {