a11y: fix WCAG 2.2 AA and Uutilsynet audit findings
Tag autocomplete combobox pattern (WCAG 2.1.1, 4.1.2, 4.1.3): - Add role="combobox", aria-expanded, aria-haspopup to tag input - Implement arrow key navigation (up/down) through suggestions - Add Space key support alongside Enter for selecting tags - Manage aria-activedescendant to track highlighted option - Add Escape to close suggestions - Add aria-live="polite" status region announcing suggestion count - Add aria-selected state on options - Tag suggestions now have stable IDs for activedescendant Focus visibility (WCAG 2.4.7): - Remove outline:none on tag suggestions, replace with visible 2px solid outline on :focus-visible Contrast (WCAG 1.4.3): - Replace opacity:0.5 on disabled rows with muted text color and strikethrough on username (maintains 4.5:1 ratio) Structure and semantics (WCAG 1.3.1): - Fix heading hierarchy H1→H3 skip in import.html (now H2) - Replace <nav> misuse for fave actions with div[role="group"] - Add aria-label="Administrasjonsmeny" to admin dashboard nav - Wrap admin users table in responsive scrollable region - Remove redundant "Bilde for:" prefix from image alt text - Make error page H1 descriptive: "Feil 404: Ikke funnet" - Add .sr-only utility class for screen-reader-only content - Add hreflang="en" to English-language external link Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
parent
3a3b526a95
commit
a9d84a4de8
14 changed files with 171 additions and 41 deletions
|
|
@ -1,5 +1,18 @@
|
|||
/* Favoritter — custom styles on top of Pico CSS */
|
||||
|
||||
/* Visually hidden, accessible to screen readers */
|
||||
.sr-only {
|
||||
position: absolute;
|
||||
width: 1px;
|
||||
height: 1px;
|
||||
padding: 0;
|
||||
margin: -1px;
|
||||
overflow: hidden;
|
||||
clip: rect(0, 0, 0, 0);
|
||||
white-space: nowrap;
|
||||
border: 0;
|
||||
}
|
||||
|
||||
/* Skip navigation link for accessibility */
|
||||
.skip-link {
|
||||
position: absolute;
|
||||
|
|
@ -143,9 +156,14 @@
|
|||
}
|
||||
|
||||
.tag-suggestion:hover,
|
||||
.tag-suggestion:focus {
|
||||
.tag-suggestion:focus-visible {
|
||||
background: var(--pico-primary-focus);
|
||||
outline: 2px solid var(--pico-primary);
|
||||
outline-offset: -2px;
|
||||
}
|
||||
|
||||
.tag-suggestion[aria-selected="true"] {
|
||||
background: var(--pico-primary-focus);
|
||||
outline: none;
|
||||
}
|
||||
|
||||
/* Fave detail actions */
|
||||
|
|
@ -177,7 +195,11 @@
|
|||
}
|
||||
|
||||
.disabled-row {
|
||||
opacity: 0.5;
|
||||
color: var(--pico-muted-color);
|
||||
}
|
||||
|
||||
.disabled-row td:first-child {
|
||||
text-decoration: line-through;
|
||||
}
|
||||
|
||||
.inline-input {
|
||||
|
|
@ -188,6 +210,11 @@
|
|||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Responsive admin tables */
|
||||
.table-responsive {
|
||||
overflow-x: auto;
|
||||
}
|
||||
|
||||
/* Respect reduced motion preference */
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*, *::before, *::after {
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue