olemd/favoritter
1
0
Fork 0
Code Issues Pull requests Projects Releases 1 Packages Wiki Activity Actions

a11y: fix WCAG 2.2 AA and Uutilsynet audit findings

Browse source 
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:
Ole-Morten Duesund 2026-03-29 17:54:24 +02:00
commit a9d84a4de8
14 changed files with 171 additions and 41 deletions
Download patch file Download diff file Expand all files Collapse all files

33
web/static/css/style.css
View file

@ -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 {

122
web/static/js/app.js
View file

@ -22,18 +22,42 @@
}
});
// Focus management after HTMX content swaps for accessibility.
// Update aria-expanded and announce suggestion count after HTMX swaps.
document.body.addEventListener("htmx:afterSwap", function (event) {
var target = event.detail.target;
if (target) {
if (!target) return;
// Focus management: if swapped content has autofocus, focus it.
var autoFocus = target.querySelector("[autofocus]");
if (autoFocus) {
autoFocus.focus();
}
// Tag suggestions: update combobox state.
if (target.id === "tag-suggestions") {
var input = document.getElementById("tags");
var items = target.querySelectorAll("[role='option']");
var count = items.length;
if (input) {
input.setAttribute("aria-expanded", count > 0 ? "true" : "false");
}
// Announce suggestion count to screen readers.
var status = document.getElementById("tag-status");
if (status) {
status.textContent = count > 0
? count + " forslag tilgjengelig"
: "";
}
// Reset active descendant tracking.
activeIndex = -1;
clearActiveDescendant();
}
});
// After a successful HTMX DELETE, redirect if the element has a data-redirect attribute.
// After a successful HTMX DELETE, redirect if the element has a data-redirect.
document.body.addEventListener("htmx:afterRequest", function (event) {
if (event.detail.successful && event.detail.verb === "delete") {
var redirect = event.detail.elt.getAttribute("data-redirect");
@ -43,25 +67,97 @@
}
});
// Tag autocomplete: add a selected tag to the tag input.
// --- Tag autocomplete combobox pattern ---
var activeIndex = -1;
// Handle keyboard navigation in the tag suggestions listbox.
document.addEventListener("keydown", function (event) {
var input = document.getElementById("tags");
if (!input || document.activeElement !== input) return;
var listbox = document.getElementById("tag-suggestions");
if (!listbox) return;
var items = listbox.querySelectorAll("[role='option']");
if (items.length === 0) return;
switch (event.key) {
case "ArrowDown":
event.preventDefault();
activeIndex = Math.min(activeIndex + 1, items.length - 1);
setActiveDescendant(items);
break;
case "ArrowUp":
event.preventDefault();
activeIndex = Math.max(activeIndex - 1, 0);
setActiveDescendant(items);
break;
case "Enter":
if (activeIndex >= 0 && activeIndex < items.length) {
event.preventDefault();
var tagName = items[activeIndex].textContent.trim();
addTag(null, tagName);
}
break;
case " ":
if (activeIndex >= 0 && activeIndex < items.length) {
event.preventDefault();
var tagName2 = items[activeIndex].textContent.trim();
addTag(null, tagName2);
}
break;
case "Escape":
closeSuggestions();
break;
}
});
function setActiveDescendant(items) {
for (var i = 0; i < items.length; i++) {
items[i].setAttribute("aria-selected", i === activeIndex ? "true" : "false");
}
var input = document.getElementById("tags");
if (input && activeIndex >= 0) {
var activeItem = items[activeIndex];
if (!activeItem.id) {
activeItem.id = "tag-option-" + activeIndex;
}
input.setAttribute("aria-activedescendant", activeItem.id);
activeItem.scrollIntoView({ block: "nearest" });
}
}
function clearActiveDescendant() {
var input = document.getElementById("tags");
if (input) {
input.removeAttribute("aria-activedescendant");
}
}
function closeSuggestions() {
var listbox = document.getElementById("tag-suggestions");
if (listbox) {
while (listbox.firstChild) {
listbox.removeChild(listbox.firstChild);
}
}
var input = document.getElementById("tags");
if (input) {
input.setAttribute("aria-expanded", "false");
}
activeIndex = -1;
}
// Add a selected tag to the tag input.
window.addTag = function (element, tagName) {
var input = document.getElementById("tags");
if (!input) return;
var parts = input.value.split(",").map(function (s) { return s.trim(); });
// Replace the last (incomplete) segment with the selected tag.
parts[parts.length - 1] = tagName;
// Add a trailing separator so the user can keep typing.
input.value = parts.join(", ") + ", ";
input.focus();
// Clear suggestions by removing all child elements.
var suggestions = document.getElementById("tag-suggestions");
if (suggestions) {
while (suggestions.firstChild) {
suggestions.removeChild(suggestions.firstChild);
}
}
closeSuggestions();
};
function getCookie(name) {

2
web/templates/layouts/base.html
View file

@ -51,7 +51,7 @@
<p>
<small>
Drevet av <a href="https://kode.naiv.no/olemd/favoritter" target="_blank" rel="noopener">Favoritter</a>
— fri programvare under <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noopener">AGPL-3.0</a>
— fri programvare under <a href="https://www.gnu.org/licenses/agpl-3.0.html" target="_blank" rel="noopener" hreflang="en">AGPL-3.0</a>
</small>
</p>
</footer>

2
web/templates/pages/admin_dashboard.html
View file

@ -25,7 +25,7 @@
</article>
</div>
<nav>
<nav aria-label="Administrasjonsmeny">
<ul>
<li><a href="{{basePath}}/admin/users" role="button" class="outline">Brukere</a></li>
<li><a href="{{basePath}}/admin/tags" role="button" class="outline">Merkelapper</a></li>

2
web/templates/pages/admin_users.html
View file

@ -29,6 +29,7 @@
</article>
{{with .Data}}
<div class="table-responsive" role="region" aria-label="Brukertabell" tabindex="0">
<table role="grid">
<thead>
<tr>
@ -68,5 +69,6 @@
{{end}}
</tbody>
</table>
</div>
{{end}}
{{end}}

3
web/templates/pages/error.html
View file

@ -2,8 +2,7 @@
{{with .Data}}
<article>
<hgroup>
<h1>{{.Code}}</h1>
<p>{{.Message}}</p>
<h1>Feil {{.Code}}: {{.Message}}</h1>
</hgroup>
{{if eq .Code 404}}
<p>Siden du leter etter finnes ikke. Den kan ha blitt flyttet eller slettet.</p>

6
web/templates/pages/fave_detail.html
View file

@ -28,7 +28,7 @@
{{with .Fave}}
{{if .ImagePath}}
<img src="{{basePath}}/uploads/{{.ImagePath}}"
alt="Bilde for: {{.Description}}">
alt="{{.Description}}">
{{end}}
<header>
@ -56,7 +56,7 @@
<footer>
<small>Lagt til {{.CreatedAt.Format "02.01.2006"}}</small>
{{if $d.IsOwner}}
<nav class="fave-actions">
<div class="fave-actions" role="group" aria-label="Handlinger for favoritt">
<a href="{{basePath}}/faves/{{.ID}}/edit" role="button" class="outline">Rediger</a>
<button
hx-delete="{{basePath}}/faves/{{.ID}}"
@ -65,7 +65,7 @@
class="outline secondary"
data-redirect="{{basePath}}/faves"
>Slett</button>
</nav>
</div>
{{end}}
</footer>
{{end}}

14
web/templates/pages/fave_form.html
View file

@ -55,17 +55,21 @@
value="{{.Tags}}"
placeholder="film, sci-fi, favoritt"
autocomplete="off"
role="combobox"
aria-expanded="false"
aria-haspopup="listbox"
aria-autocomplete="list"
aria-controls="tag-suggestions"
aria-describedby="tags-help"
hx-get="{{basePath}}/tags/search"
hx-trigger="keyup changed delay:300ms"
hx-target="#tag-suggestions"
hx-params="*"
hx-vals='{"q": ""}'
aria-describedby="tags-help"
aria-autocomplete="list"
aria-controls="tag-suggestions">
<small id="tags-help">Skriv for å søke i eksisterende merkelapper. Maks {{maxTags}} stk.</small>
hx-vals='{"q": ""}'>
<small id="tags-help">Skriv for å søke i eksisterende merkelapper. Maks {{maxTags}} stk. Bruk piltaster for å velge.</small>
</label>
<ul id="tag-suggestions" role="listbox" class="tag-suggestions" aria-label="Merkelappforslag"></ul>
<div id="tag-status" class="sr-only" aria-live="polite"></div>
<fieldset>
<legend>Synlighet</legend>

2
web/templates/pages/fave_list.html
View file

@ -14,7 +14,7 @@
<article class="fave-card" role="listitem">
{{if .ImagePath}}
<img src="{{basePath}}/uploads/{{.ImagePath}}"
alt="Bilde for: {{.Description}}"
alt="{{.Description}}"
loading="lazy">
{{end}}
<header>

2
web/templates/pages/home.html
View file

@ -12,7 +12,7 @@
<article class="fave-card" role="listitem">
{{if .ImagePath}}
<img src="{{basePath}}/uploads/{{.ImagePath}}"
alt="Bilde for: {{.Description}}"
alt="{{.Description}}"
loading="lazy">
{{end}}
<header>

4
web/templates/pages/import.html
View file

@ -15,7 +15,7 @@
<details>
<summary>Forventet format</summary>
<h3>JSON</h3>
<h2>JSON</h2>
<pre><code>[
{
"description": "Blade Runner 2049",
@ -24,7 +24,7 @@
"tags": ["film", "sci-fi"]
}
]</code></pre>
<h3>CSV</h3>
<h2>CSV</h2>
<pre><code>description,url,privacy,tags
Blade Runner 2049,https://example.com,public,"film,sci-fi"</code></pre>
</details>

2
web/templates/pages/profile.html
View file

@ -57,7 +57,7 @@
<article class="fave-card" role="listitem">
{{if .ImagePath}}
<img src="{{basePath}}/uploads/{{.ImagePath}}"
alt="Bilde for: {{.Description}}"
alt="{{.Description}}"
loading="lazy">
{{end}}
<header>

2
web/templates/pages/tag_browse.html
View file

@ -11,7 +11,7 @@
<article class="fave-card" role="listitem">
{{if .ImagePath}}
<img src="{{basePath}}/uploads/{{.ImagePath}}"
alt="Bilde for: {{.Description}}"
alt="{{.Description}}"
loading="lazy">
{{end}}
<header>

10
web/templates/partials/tag_suggestions.html
View file

@ -1,6 +1,8 @@
{{range .}}<li role="option"
{{range $i, $tag := .}}<li role="option"
id="tag-option-{{$i}}"
class="tag-suggestion"
onclick="addTag(this, '{{.Name}}')"
onkeydown="if(event.key==='Enter'){addTag(this, '{{.Name}}')}"
tabindex="0">{{.Name}}</li>
aria-selected="false"
onclick="addTag(this, '{{$tag.Name}}')"
onkeydown="if(event.key==='Enter'||event.key===' '){event.preventDefault();addTag(this, '{{$tag.Name}}')}"
tabindex="-1">{{$tag.Name}}</li>
{{end}}