feat: deltag-aarhus mock — WCAG fixes, new CTAs, and "Enig" vote

CHANGELOG.md

@@ -6,6 +6,15 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 
 ## [Unreleased]
 
+### Changed — Accessibility and call-to-action experiment in Vosnæs hearing detail mock (deltag-aarhus)
+- Raised card, input, dropdown and divider borders to a WCAG 1.4.11-compliant `#8c8c8c` (3.36:1 on white, up from ~1.2:1) via the `--border-default`/`--border-subtle` tokens; repointed the structural separator borders that hardcoded `--gray-200`/`--gray-350` at `--border-subtle`
+- Fixed muted text contrast: `--text-muted` now `#767676` (4.54:1 on white); the dark-footer bottom links use `--gray-350` (9.48:1 on `#333`) instead of the failing `--gray-600` (3.42:1)
+- Added an outline "Skriv et høringssvar" button in the hearing header (hidden on the closed variant) and a centered primary one below the answers list, in addition to the existing one above; all three share a `js-submit-horingssvar` hook wired in `variant.js`
+- Added help text "Vælg hvilken kategori dit høringssvar passer til" to the Kategori select, linked via `aria-describedby`
+- Added a tip on the closed ("Afsluttet") variant linking down to the statistics section: "Se længere nede hvordan høringssvarene har fordelt sig"
+- Submission-form hint and notice text darkened to `--text-secondary` (gray-700, ~7:1) and the hint de-italicised for readability at the small size; the notice info icon now follows the text colour (`currentColor`) instead of the near-invisible `--gray-400`
+- Reframed the per-answer "synes om" like as an agreement vote: handshake icon (`fa-regular fa-handshake`) and the text "{antal} er enig(e)" (singular-aware), with the sort option renamed "Flest enige". Applied to both cards and the detail modal across the Vosnæs and Uniparken prototypes (shared JS); the underlying `likes` data field is unchanged
+
 ### Changed — Design system: flatter, white-first look (v1)
 - Surfaces go white: `--ds-bg-page` and `--ds-bg-subtle` are now `#ffffff`, with a light `--ds-bg-muted` (`#f4f6f6`) reserved for hover/disabled/neutral fills
 - Subtler hairline borders (`--ds-border-default` `#e3e8e8`, `--ds-border-subtle` `#edf0f0`) and tighter radii (`md` 4→3px, `lg` 6→4px, `xl` 10→5px, `2xl` 14→6px)

docs/public/projects/deltag-aarhus/mocks/css/footer.css

@@ -58,11 +58,11 @@
 
 .footer__bottom-links {
   font-size: var(--fs-small);
-  color: var(--gray-600);
+  color: var(--gray-350); /* WCAG 1.4.3: 9.48:1 on dark footer (was --gray-600 #858585, 3.42:1) */
 }
 
 .footer__bottom-links a {
-  color: var(--gray-600);
+  color: var(--gray-350);
   text-decoration: none;
 }
 

docs/public/projects/deltag-aarhus/mocks/css/horingssvar.css

@@ -29,6 +29,29 @@
   margin-bottom: 32px;
 }
 
+/* Tip linking to the statistics section (shown only on the closed variant — see variant.css) */
+.horingssvar-tip {
+  margin: 0 0 32px;
+  padding: 12px 16px;
+  background: var(--petroleum-100);
+  border-left: 3px solid var(--petroleum);
+  border-radius: 4px;
+  color: var(--petroleum-800);
+  font-family: var(--font-family-inter);
+  font-size: var(--fs-small);
+  text-decoration: none;
+  transition: background var(--transition-fast);
+}
+
+.horingssvar-tip:hover {
+  background: var(--petroleum-200);
+}
+
+.horingssvar-tip:focus-visible {
+  outline: 2px solid var(--petroleum);
+  outline-offset: 2px;
+}
+
 /* Dropdown */
 .dropdown {
   position: relative;
@@ -116,6 +139,42 @@
   color: var(--white);
 }
 
+/* Outline variant — used as a header call-to-action */
+.btn-outline {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  background: transparent;
+  color: var(--petroleum-800); /* WCAG 1.4.3: 5.0:1 on white */
+  font-family: var(--font-family-inter);
+  font-size: var(--fs-base);
+  font-weight: var(--fw-regular);
+  padding: 8px 24px;
+  border: 1px solid var(--petroleum);
+  border-radius: 4px;
+  text-decoration: none;
+  cursor: pointer;
+  transition: background var(--transition-fast), color var(--transition-fast);
+  line-height: 24px;
+}
+
+.btn-outline:hover {
+  background: var(--petroleum);
+  color: var(--white);
+}
+
+/* Second submit button placed below the answers list */
+.btn-primary-wrapper--below {
+  margin: 24px auto 0;
+  display: flex;
+  justify-content: center;
+}
+
+/* Reset the auto-left margin the base .btn-primary uses above the list */
+.btn-primary-wrapper--below .btn-primary {
+  margin-left: 0;
+}
+
 /* Card Grid */
 .horingssvar-grid {
   display: grid;
@@ -127,7 +186,7 @@
 /* Horingssvar Card */
 .horingssvar-card {
   background: var(--white);
-  border: 1px solid var(--gray-200);
+  border: 1px solid var(--border-subtle);
   border-radius: 4px;
   padding: 24px 20px;
   min-height: 240px;
@@ -215,7 +274,7 @@
 
 .horingssvar-card__divider {
   height: 1px;
-  background: var(--gray-200);
+  background: var(--border-subtle);
   margin-top: auto;
 }
 
@@ -229,7 +288,7 @@
   font-size: 18px;
   font-weight: var(--fw-semibold);
   padding-bottom: 16px;
-  border-bottom: 1px solid var(--gray-200);
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .horingssvar-pagination__count {

docs/public/projects/deltag-aarhus/mocks/css/modal-decision.css

@@ -1,7 +1,7 @@
 /* Modal Decision — decision modal with related document links */
 
 .decision-modal__links {
-  border-top: 1px solid var(--gray-200);
+  border-top: 1px solid var(--border-subtle);
   padding-top: 24px;
   display: flex;
   flex-direction: column;

docs/public/projects/deltag-aarhus/mocks/css/modal-horingssvar.css

@@ -4,7 +4,7 @@
   display: flex;
   gap: 24px;
   padding-top: 16px;
-  border-top: 1px solid var(--gray-200);
+  border-top: 1px solid var(--border-subtle);
   font-family: var(--font-family-inter);
   font-size: var(--fs-small);
   color: var(--text-primary);
@@ -30,7 +30,7 @@
 }
 
 .modal__comments-section {
-  border-top: 1px solid var(--gray-200);
+  border-top: 1px solid var(--border-subtle);
   padding-top: 24px;
   display: flex;
   flex-direction: column;
@@ -93,7 +93,7 @@
   flex-direction: column;
   gap: 10px;
   padding-top: 16px;
-  border-top: 1px solid var(--gray-200);
+  border-top: 1px solid var(--border-subtle);
   margin-top: 8px;
 }
 

docs/public/projects/deltag-aarhus/mocks/css/modal-material.css

@@ -4,7 +4,7 @@
   display: flex;
   gap: 12px;
   padding-bottom: 16px;
-  border-bottom: 1px solid var(--gray-200);
+  border-bottom: 1px solid var(--border-subtle);
 }
 
 .material-modal__action-btn {

docs/public/projects/deltag-aarhus/mocks/css/modal-submission.css

@@ -53,8 +53,7 @@
 .submission-form__hint {
   font-family: var(--font-family-inter);
   font-size: var(--fs-xs);
-  color: var(--gray-650);
-  font-style: italic;
+  color: var(--text-secondary); /* gray-700, 7.81:1 — readable at this small size (was --gray-650 italic) */
 }
 
 .submission-form__notice {
@@ -66,13 +65,14 @@
   font-family: var(--font-family-inter);
   font-size: var(--fs-xs);
   line-height: 1.5;
-  color: var(--gray-650);
+  color: var(--text-secondary); /* gray-700, 7.17:1 on the notice background */
 }
 
+/* Icon follows the notice text color instead of the near-invisible gray */
 .submission-form__notice i {
   flex-shrink: 0;
   margin-top: 2px;
-  color: var(--gray-400);
+  color: inherit;
 }
 
 .submission-form__actions {

docs/public/projects/deltag-aarhus/mocks/css/modal.css

@@ -109,7 +109,7 @@
   display: flex;
   justify-content: space-between;
   padding: 16px 40px;
-  border-top: 1px solid var(--gray-200);
+  border-top: 1px solid var(--border-subtle);
   background: var(--gray-100);
 }
 

docs/public/projects/deltag-aarhus/mocks/css/related.css

@@ -123,7 +123,7 @@
   align-items: center;
   gap: 13px;
   padding: 10px 0;
-  border-bottom: 1px solid var(--gray-350);
+  border-bottom: 1px solid var(--border-subtle);
   font-size: var(--fs-small);
 }
 

docs/public/projects/deltag-aarhus/mocks/css/tokens.css

@@ -53,7 +53,7 @@
   /* Semantic */
   --text-primary: var(--gray-900);
   --text-secondary: var(--gray-700);
-  --text-muted: var(--gray-500);
+  --text-muted: #767676; /* WCAG 1.4.3: 4.54:1 on white (was --gray-500 #9d9d9d, 2.71:1) */
   --text-inverse: var(--white);
   --text-link: var(--petroleum);
   --text-link-hover: var(--petroleum-800);
@@ -62,9 +62,9 @@
   --bg-secondary: var(--gray-50);
   --bg-tertiary: var(--gray-200);
 
-  --border-default: var(--gray-300);
+  --border-default: #8c8c8c; /* WCAG 1.4.11: 3.36:1 on white (was --gray-300 #e6e6e6, 1.25:1) */
   --border-strong: var(--gray-900);
-  --border-subtle: var(--gray-200);
+  --border-subtle: #8c8c8c; /* WCAG 1.4.11: 3.36:1 on white (was --gray-200 #eaeaea, 1.20:1) */
 
   /* Typography */
   --font-family: arial, -apple-system, blinkmacsystemfont, "Segoe UI", roboto,

docs/public/projects/deltag-aarhus/mocks/css/variant.css

@@ -55,6 +55,22 @@ body.variant--open .hearing-header {
   display: block;
 }
 
+/* Header call-to-action only appears while the hearing accepts answers */
+body.variant--closed .hearing-header .btn-outline {
+  display: none;
+}
+
+/* Tip pointing to the statistics — only meaningful once answers are in */
+.horingssvar-tip {
+  display: none;
+}
+
+body.variant--closed .horingssvar-tip {
+  display: inline-flex;
+  align-items: center;
+  gap: 8px;
+}
+
 @media (max-width: 640px) {
   .btn-primary-wrapper {
     margin-left: 0;

docs/public/projects/deltag-aarhus/mocks/index.html

@@ -97,6 +97,7 @@
       <div class="hearing-header__main">
         <h1 class="hearing-header__title">Forslag til Lokalplan nr. 1237 med miljøvurderingsrapport — Vindmøller ved Vosnæs</h1>
         <p class="hearing-header__lead">Planen udlægger området til tekniske anlæg og giver mulighed for opstilling af tre vindmøller med en totalhøjde på op til 150 meter samt tilhørende arbejdsarealer, veje og nettilslutningsanlæg.</p>
+        <button class="btn-outline js-submit-horingssvar">Skriv et høringssvar</button>
       </div>
       <aside class="hearing-header__sidebar" aria-label="Høringsdetaljer">
         <div class="hearing-header__meta-item">
@@ -223,7 +224,7 @@ <h2 class="horingssvar-section__title">Høringssvar (<span id="horingssvar-count
           <i class="fa-solid fa-chevron-down" aria-hidden="true"></i>
         </button>
         <div class="dropdown__menu" role="listbox">
-          <button class="dropdown__item" role="option" data-value="likes">Flest synes om</button>
+          <button class="dropdown__item" role="option" data-value="likes">Flest enige</button>
           <button class="dropdown__item" role="option" data-value="newest">Nyeste først</button>
           <button class="dropdown__item" role="option" data-value="oldest">Ældste først</button>
           <button class="dropdown__item dropdown__item--active" role="option" aria-selected="true" data-value="comments">Flest kommentarer</button>
@@ -245,11 +246,16 @@ <h2 class="horingssvar-section__title">Høringssvar (<span id="horingssvar-count
       </div>
 
       <div class="btn-primary-wrapper">
-        <button class="btn-primary" id="submit-horingssvar-btn" disabled aria-describedby="submit-tooltip">Skriv et høringssvar</button>
+        <button class="btn-primary js-submit-horingssvar" id="submit-horingssvar-btn" disabled aria-describedby="submit-tooltip">Skriv et høringssvar</button>
         <span class="btn-primary__tooltip" id="submit-tooltip" role="tooltip">Svarfristen er overskredet — der kan ikke længere indsendes høringssvar eller kommentarer.</span>
       </div>
     </div>
 
+    <a class="horingssvar-tip" href="#statistik">
+      <i class="fa-regular fa-lightbulb" aria-hidden="true"></i>
+      <span>Tip: Se længere nede hvordan høringssvarene har fordelt sig.</span>
+    </a>
+
     <div class="horingssvar-grid" id="horingssvar-grid" aria-label="Liste af høringssvar">
       <!-- Cards inserted by JS -->
     </div>
@@ -258,10 +264,15 @@ <h2 class="horingssvar-section__title">Høringssvar (<span id="horingssvar-count
       <span class="horingssvar-pagination__count" id="pagination-count">Viser 1 - 16</span>
       <button class="horingssvar-pagination__show-all" id="show-all-btn">Vis alle</button>
     </div>
+
+    <div class="btn-primary-wrapper btn-primary-wrapper--below">
+      <button class="btn-primary js-submit-horingssvar" disabled aria-describedby="submit-tooltip-below">Skriv et høringssvar</button>
+      <span class="btn-primary__tooltip" id="submit-tooltip-below" role="tooltip">Svarfristen er overskredet — der kan ikke længere indsendes høringssvar eller kommentarer.</span>
+    </div>
   </section>
 
   <!-- Statistics -->
-  <section class="statistics-section" aria-label="Statistik">
+  <section class="statistics-section" id="statistik" aria-label="Statistik">
     <h2 class="statistics-section__heading">Statistik</h2>
     <div class="statistics">
       <div class="statistics__header">
@@ -503,7 +514,7 @@ <h2 class="modal__title" id="modal-title"></h2>
             <span id="modal-comments-count"></span>
           </span>
           <span class="modal__stat">
-            <i class="fa-regular fa-thumbs-up" aria-hidden="true"></i>
+            <i class="fa-regular fa-handshake" aria-hidden="true"></i>
             <span id="modal-likes-count"></span>
           </span>
         </div>
@@ -662,13 +673,14 @@ <h2 class="modal__title" id="submission-modal-title">Indsend høringssvar</h2>
         <form class="submission-form" id="submission-form">
           <div class="submission-form__field">
             <label for="submission-category" class="submission-form__label">Kategori</label>
-            <select id="submission-category" class="submission-form__select" required>
+            <select id="submission-category" class="submission-form__select" aria-describedby="submission-category-hint" required>
               <option value="">Vælg kategori...</option>
               <option value="miljoe">Miljø/Natur</option>
               <option value="stoej">Støj/Sundhed</option>
               <option value="landskab">Landskab/Visuel</option>
               <option value="proces">Proces/Andet</option>
             </select>
+            <span class="submission-form__hint" id="submission-category-hint">Vælg hvilken kategori dit høringssvar passer til</span>
           </div>
           <div class="submission-form__field">
             <label for="submission-name" class="submission-form__label">Dit navn</label>

docs/public/projects/deltag-aarhus/mocks/js/horingssvar.js

@@ -33,6 +33,11 @@ DM.formatNumber = function(num) {
   return num.toLocaleString("da-DK");
 };
 
+/* "Enig" vote label — singular "enig" for one, plural "enige" otherwise */
+DM.enigeLabel = function(num) {
+  return DM.formatNumber(num) + (num === 1 ? " er enig" : " er enige");
+};
+
 function createCard(item, index) {
   var card = document.createElement("article");
   card.className = "horingssvar-card";
@@ -54,8 +59,9 @@ function createCard(item, index) {
         DM.formatNumber(item.comments) + ' kommentarer' +
       '</span>' +
       '<' + likeTag + ' class="' + likeClass + '" data-item-id="' + item.id + '">' +
-        '<i class="fa-regular fa-thumbs-up" aria-hidden="true"></i> ' +
-        '<span class="horingssvar-card__like-count">' + DM.formatNumber(item.likes) + '</span> synes om' +
+        '<i class="fa-regular fa-handshake" aria-hidden="true"></i> ' +
+        '<span class="horingssvar-card__like-count">' + DM.formatNumber(item.likes) + '</span>' +
+        ' <span class="horingssvar-card__like-suffix">' + (item.likes === 1 ? "er enig" : "er enige") + '</span>' +
       '</' + likeTag + '>' +
     '</div>';
 
@@ -65,6 +71,7 @@ function createCard(item, index) {
       e.stopPropagation();
       item.likes++;
       likeBtn.querySelector(".horingssvar-card__like-count").textContent = DM.formatNumber(item.likes);
+      likeBtn.querySelector(".horingssvar-card__like-suffix").textContent = item.likes === 1 ? "er enig" : "er enige";
       likeBtn.classList.add("horingssvar-card__like-btn--liked");
       likeBtn.disabled = true;
     });

docs/public/projects/deltag-aarhus/mocks/js/modal-horingssvar.js

@@ -16,7 +16,7 @@ DM.updateModalContent = function() {
   document.getElementById("modal-comments-count").textContent = DM.formatNumber(item.comments) + " kommentarer";
 
   var likesEl = document.getElementById("modal-likes-count");
-  likesEl.textContent = DM.formatNumber(item.likes) + " synes om";
+  likesEl.textContent = DM.enigeLabel(item.likes);
 
   /* Make the likes stat clickable in the open variant */
   var likeStat = likesEl.parentElement;
@@ -29,7 +29,7 @@ DM.updateModalContent = function() {
     var likeHandler = function(e) {
       e.preventDefault();
       item.likes++;
-      likesEl.textContent = DM.formatNumber(item.likes) + " synes om";
+      likesEl.textContent = DM.enigeLabel(item.likes);
       likeStat.classList.add("modal__stat--liked");
       likeStat.removeEventListener("click", likeHandler);
       likeStat.removeEventListener("keydown", likeKeyHandler);