mirror of
https://github.com/microsoft/autogen.git
synced 2025-11-02 10:50:03 +00:00
Fix header icons focus and hover style for better accessibility (#6409)
## Why are these changes needed? This PR improves keyboard accessibility by ensuring that header links/icons have visual feedback (underline and color change) on both hover and keyboard focus states. Also adds smooth scaling animation. ## Related issue number Related issue: #6090 ## Checks - [☑️] I've included any doc changes needed for <https://microsoft.github.io/autogen/>. See <https://github.com/microsoft/autogen/blob/main/CONTRIBUTING.md> to build and test documentation locally. - [☑️] I've added tests (if relevant) corresponding to the changes introduced in this PR. - [☑️] I've made sure all auto checks have passed. Co-authored-by: peterychang <49209570+peterychang@users.noreply.github.com>
This commit is contained in:
parent
1ab24417b8
commit
356ec34b9c
@ -32,6 +32,18 @@ html[data-theme="dark"] {
|
||||
color: white;
|
||||
text-shadow: 0.5px 0 0 currentColor;
|
||||
}
|
||||
|
||||
/* Adding header icon hover and focus effects */
|
||||
.bd-header a:hover,
|
||||
.bd-header a:focus-visible {
|
||||
color: var(--pst-color-secondary) !important;
|
||||
text-decoration: underline !important;
|
||||
text-shadow: 0.5px 0 0 currentColor;
|
||||
transform: scale(1.05);
|
||||
transition: all 0.2s ease-in-out;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
nav.bd-links .current>a {
|
||||
box-shadow: inset 1px 0 0 var(--pst-color-primary);
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user