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:
AndreaTang123 2025-05-09 15:07:23 -04:00 committed by GitHub
parent 1ab24417b8
commit 356ec34b9c
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194

View File

@ -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);
}