mirror of
https://github.com/welpo/tabi.git
synced 2025-10-10 23:38:53 +02:00
♿️ feat(a11y): add skip to content link for keyboard navigation (#552)
Co-authored-by: Awiteb <a@4rs.nl>
This commit is contained in:
parent
13f88a8e86
commit
e8dcd0528e
22 changed files with 47 additions and 1 deletions
|
@ -328,3 +328,28 @@ details summary {
|
|||
flex-direction: column;
|
||||
}
|
||||
}
|
||||
|
||||
#skip-link {
|
||||
position: absolute;
|
||||
top: -40px;
|
||||
left: 0;
|
||||
transform: translateY(-100%);
|
||||
opacity: 0;
|
||||
z-index: 9999;
|
||||
transition: all 0.1s ease;
|
||||
border-radius: 0 0 5px 0;
|
||||
background-color: var(--primary-color);
|
||||
padding: 4px 8px;
|
||||
color: var(--hover-color);
|
||||
font-weight: 500;
|
||||
font-size: 0.9rem;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
#skip-link:focus {
|
||||
top: 0;
|
||||
transform: translateY(0);
|
||||
opacity: 1;
|
||||
outline: 2px solid var(--text-color);
|
||||
outline-offset: 2px;
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue