E.Noorlander/CodePress
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Remove focus outline/border on nav-link, add focus-visible override

Browse Source 
- Remove .nav-link:focus from accessibility outline rules
- Add outline: none and box-shadow: none on nav-tabs .nav-link states
- Override :focus-visible with border: none, outline: none, box-shadow: none
This commit is contained in:
E.Noorlander
2026-08-11 16:55:31 +02:00
parent 8ebf11d7e4
commit e8e3c97ccd
3 changed files with 21 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files
themes/default/assets/css_compiled/.mtime
+1 -1
View File
@@ -1 +1 @@
1786459597 1786460110
themes/default/assets/css_compiled/theme.css
+10 -3
View File
@@ -183,8 +183,7 @@
.focus-visible:focus, .focus-visible:focus,
.btn:focus, .btn:focus,
.form-control:focus, .form-control:focus {
.nav-link:focus {
outline: 3px solid #0056b3 !important; outline: 3px solid #0056b3 !important;
outline-offset: 2px !important; outline-offset: 2px !important;
box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0056b3 !important; box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0056b3 !important;
@@ -247,16 +246,24 @@
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
color: var(--nav-font) !important; color: var(--nav-font) !important;
outline: none !important;
box-shadow: none !important;
} }
.nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus { .nav-tabs .nav-link:hover, .nav-tabs .nav-link:focus, .nav-tabs .nav-link:focus-visible {
isolation: auto; isolation: auto;
background-color: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important;
border: none !important;
border-color: transparent !important; border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
} }
.nav-tabs .nav-link.active { .nav-tabs .nav-link.active {
background-color: rgba(255, 255, 255, 0.2) !important; background-color: rgba(255, 255, 255, 0.2) !important;
border: none !important;
border-color: transparent !important; border-color: transparent !important;
border-bottom: 2px solid var(--nav-font) !important; border-bottom: 2px solid var(--nav-font) !important;
outline: none !important;
box-shadow: none !important;
} }
.nav-tabs .dropdown-menu { .nav-tabs .dropdown-menu {
margin-top: 0 !important; margin-top: 0 !important;
themes/default/assets/scss/theme.scss
+10 -3
View File
@@ -239,8 +239,7 @@ $header-bg-opacity: 1;
// Enhanced accessibility styles // Enhanced accessibility styles
.focus-visible:focus, .focus-visible:focus,
.btn:focus, .btn:focus,
.form-control:focus, .form-control:focus {
.nav-link:focus {
outline: 3px solid #0056b3 !important; outline: 3px solid #0056b3 !important;
outline-offset: 2px !important; outline-offset: 2px !important;
box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0056b3 !important; box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #0056b3 !important;
@@ -312,17 +311,25 @@ $header-bg-opacity: 1;
border-bottom-left-radius: 0 !important; border-bottom-left-radius: 0 !important;
border-bottom-right-radius: 0 !important; border-bottom-right-radius: 0 !important;
color: var(--nav-font) !important; color: var(--nav-font) !important;
outline: none !important;
box-shadow: none !important;
&:hover, &:focus { &:hover, &:focus, &:focus-visible {
isolation: auto; isolation: auto;
background-color: rgba(255, 255, 255, 0.1) !important; background-color: rgba(255, 255, 255, 0.1) !important;
border: none !important;
border-color: transparent !important; border-color: transparent !important;
outline: none !important;
box-shadow: none !important;
} }
&.active { &.active {
background-color: rgba(255, 255, 255, 0.2) !important; background-color: rgba(255, 255, 255, 0.2) !important;
border: none !important;
border-color: transparent !important; border-color: transparent !important;
border-bottom: 2px solid var(--nav-font) !important; border-bottom: 2px solid var(--nav-font) !important;
outline: none !important;
box-shadow: none !important;
} }
} }