A11y improvements and style tweaks

- Use button element instead of anchors, fixes keyboard navigation and
other issues
- Disable search input until it's open, prevents being able to write
inside it while it's closed
- Use :root instead of html in CSS
- Add minimal size for separator between home button and other links
This commit is contained in:
daudix
2024-07-16 23:41:53 +03:00
parent 354b4050af
commit e8cc17a4a0
7 changed files with 35 additions and 20 deletions

View File

@ -60,7 +60,7 @@
top: -0.125rem;
right: -0.5rem;
background-color: var(--fg-muted-2);
width: 0.0625rem;
width: max(1px, 0.0625em);
height: calc(100% + 0.25rem);
content: "";
@ -81,6 +81,7 @@
}
a,
&#search button,
&#language-switcher summary {
&:hover {
box-shadow: var(--edge-highlight);
@ -130,9 +131,9 @@
}
}
&#search a,
&#feed a,
&#language-switcher summary {
&#search button,
&#language-switcher summary,
&#feed a {
padding: 0.5rem 0.625rem;
&:hover .icon {
@ -148,8 +149,17 @@
}
}
&#search {
&#search button {
-webkit-appearance: none;
appearance: none;
transition: var(--transition);
cursor: pointer;
border: none;
border-radius: 999px;
background-color: transparent;
overflow: hidden;
font-weight: bold;
font-size: 1rem;
.icon {
$icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16'%3E%3Cpath d='M6.57.063c-3.578 0-6.5 2.921-6.5 6.5 0 3.578 2.922 6.5 6.5 6.5a6.46 6.46 0 0 0 3.83-1.256l2.975 2.974c.957.938 2.363-.5 1.406-1.437l-2.96-2.961a6.46 6.46 0 0 0 1.25-3.82c0-3.579-2.923-6.5-6.5-6.5m0 2c2.5 0 4.5 2.003 4.5 4.5 0 2.5-2 4.5-4.5 4.5-2.496 0-4.5-2-4.5-4.5 0-2.497 2.004-4.5 4.5-4.5'/%3E%3C/svg%3E");