Remove focus outline/border on nav-link, add focus-visible override
- 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:
@@ -239,8 +239,7 @@ $header-bg-opacity: 1;
|
||||
// Enhanced accessibility styles
|
||||
.focus-visible:focus,
|
||||
.btn:focus,
|
||||
.form-control:focus,
|
||||
.nav-link:focus {
|
||||
.form-control:focus {
|
||||
outline: 3px solid #0056b3 !important;
|
||||
outline-offset: 2px !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-right-radius: 0 !important;
|
||||
color: var(--nav-font) !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
|
||||
&:hover, &:focus {
|
||||
&:hover, &:focus, &:focus-visible {
|
||||
isolation: auto;
|
||||
background-color: rgba(255, 255, 255, 0.1) !important;
|
||||
border: none !important;
|
||||
border-color: transparent !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
|
||||
&.active {
|
||||
background-color: rgba(255, 255, 255, 0.2) !important;
|
||||
border: none !important;
|
||||
border-color: transparent !important;
|
||||
border-bottom: 2px solid var(--nav-font) !important;
|
||||
outline: none !important;
|
||||
box-shadow: none !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user