From a9d84a4de8c3684e7430befa6ab6f12cf04d791c Mon Sep 17 00:00:00 2001
From: Ole-Morten Duesund <olemd@glemt.net>
Date: Sun, 29 Mar 2026 17:54:24 +0200
Subject: [PATCH] a11y: fix WCAG 2.2 AA and Uutilsynet audit findings
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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>
---
 web/static/css/style.css                    |  33 ++++-
 web/static/js/app.js                        | 128 +++++++++++++++++---
 web/templates/layouts/base.html             |   2 +-
 web/templates/pages/admin_dashboard.html    |   2 +-
 web/templates/pages/admin_users.html        |   2 +
 web/templates/pages/error.html              |   3 +-
 web/templates/pages/fave_detail.html        |   6 +-
 web/templates/pages/fave_form.html          |  14 ++-
 web/templates/pages/fave_list.html          |   2 +-
 web/templates/pages/home.html               |   2 +-
 web/templates/pages/import.html             |   4 +-
 web/templates/pages/profile.html            |   2 +-
 web/templates/pages/tag_browse.html         |   2 +-
 web/templates/partials/tag_suggestions.html |  10 +-
 14 files changed, 171 insertions(+), 41 deletions(-)

diff --git a/web/static/css/style.css b/web/static/css/style.css
index ec1901c..9648be4 100644
--- a/web/static/css/style.css
+++ b/web/static/css/style.css
@@ -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 {
diff --git a/web/static/js/app.js b/web/static/js/app.js
index 8d2ad83..828dbf3 100644
--- a/web/static/js/app.js
+++ b/web/static/js/app.js
@@ -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) {
-            var autoFocus = target.querySelector("[autofocus]");
-            if (autoFocus) {
-                autoFocus.focus();
+        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) {
diff --git a/web/templates/layouts/base.html b/web/templates/layouts/base.html
index ac4c0df..c08d892 100644
--- a/web/templates/layouts/base.html
+++ b/web/templates/layouts/base.html
@@ -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>
diff --git a/web/templates/pages/admin_dashboard.html b/web/templates/pages/admin_dashboard.html
index 3acba2c..ad422be 100644
--- a/web/templates/pages/admin_dashboard.html
+++ b/web/templates/pages/admin_dashboard.html
@@ -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>
diff --git a/web/templates/pages/admin_users.html b/web/templates/pages/admin_users.html
index c2817c4..bedcd70 100644
--- a/web/templates/pages/admin_users.html
+++ b/web/templates/pages/admin_users.html
@@ -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}}
diff --git a/web/templates/pages/error.html b/web/templates/pages/error.html
index 78f7d3f..6cfe8fd 100644
--- a/web/templates/pages/error.html
+++ b/web/templates/pages/error.html
@@ -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>
diff --git a/web/templates/pages/fave_detail.html b/web/templates/pages/fave_detail.html
index ae428df..ea671b5 100644
--- a/web/templates/pages/fave_detail.html
+++ b/web/templates/pages/fave_detail.html
@@ -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}}
diff --git a/web/templates/pages/fave_form.html b/web/templates/pages/fave_form.html
index c86bf75..d1e08d8 100644
--- a/web/templates/pages/fave_form.html
+++ b/web/templates/pages/fave_form.html
@@ -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>
diff --git a/web/templates/pages/fave_list.html b/web/templates/pages/fave_list.html
index add8846..155445f 100644
--- a/web/templates/pages/fave_list.html
+++ b/web/templates/pages/fave_list.html
@@ -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>
diff --git a/web/templates/pages/home.html b/web/templates/pages/home.html
index 937970a..9d28f9e 100644
--- a/web/templates/pages/home.html
+++ b/web/templates/pages/home.html
@@ -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>
diff --git a/web/templates/pages/import.html b/web/templates/pages/import.html
index 296a693..510ab2a 100644
--- a/web/templates/pages/import.html
+++ b/web/templates/pages/import.html
@@ -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>
diff --git a/web/templates/pages/profile.html b/web/templates/pages/profile.html
index f29d0d2..0cf2f4b 100644
--- a/web/templates/pages/profile.html
+++ b/web/templates/pages/profile.html
@@ -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>
diff --git a/web/templates/pages/tag_browse.html b/web/templates/pages/tag_browse.html
index 561edbd..2502082 100644
--- a/web/templates/pages/tag_browse.html
+++ b/web/templates/pages/tag_browse.html
@@ -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>
diff --git a/web/templates/partials/tag_suggestions.html b/web/templates/partials/tag_suggestions.html
index 8da9612..86c25aa 100644
--- a/web/templates/partials/tag_suggestions.html
+++ b/web/templates/partials/tag_suggestions.html
@@ -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}}