From 87e3d571b62fc96ae6543dd415bcbed657a0849b Mon Sep 17 00:00:00 2001 From: Jesper Pedersen Date: Thu, 11 Jun 2026 13:32:35 +0200 Subject: [PATCH] feat: improve accessibility and test new CTAs/vote in deltag-aarhus mock MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Several experiments and accessibility fixes for the Vosnæs/Uniparken hearing-detail prototypes, so the mocks read well for low-vision users and let the team trial alternative interactions. Accessibility (WCAG): - Raise card/input/dropdown/divider borders to a 1.4.11-compliant #8c8c8c (3.36:1) via --border-default/--border-subtle; repoint hardcoded --gray-200/--gray-350 separators at the semantic token - Fix muted text contrast: --text-muted -> #767676 (4.54:1); dark-footer links -> --gray-350 (9.48:1) since darkening would have failed there - Darken submission-form hint/notice text to --text-secondary and de-italicise the hint; notice info icon now follows the text colour instead of the near-invisible --gray-400 Call-to-action experiment: - Add an outline "Skriv et høringssvar" in the header (hidden when closed) and a centered primary one below the answers list, alongside the existing one; all share a js-submit-horingssvar hook - Add help text to the Kategori select, linked via aria-describedby - Add a closed-variant tip linking down to the statistics section Vote experiment: - Reframe the "synes om" like as an agreement vote: handshake icon and "{antal} er enig(e)" (singular-aware via DM.enigeLabel), sort option renamed "Flest enige"; applied to cards and detail modal across both prototypes. The likes data field is unchanged. Co-authored-by: Claude --- CHANGELOG.md | 9 +++ .../deltag-aarhus/mocks/css/footer.css | 4 +- .../deltag-aarhus/mocks/css/horingssvar.css | 65 ++++++++++++++++++- .../mocks/css/modal-decision.css | 2 +- .../mocks/css/modal-horingssvar.css | 6 +- .../mocks/css/modal-material.css | 2 +- .../mocks/css/modal-submission.css | 8 +-- .../deltag-aarhus/mocks/css/modal.css | 2 +- .../deltag-aarhus/mocks/css/related.css | 2 +- .../deltag-aarhus/mocks/css/tokens.css | 6 +- .../deltag-aarhus/mocks/css/variant.css | 16 +++++ .../projects/deltag-aarhus/mocks/index.html | 22 +++++-- .../deltag-aarhus/mocks/js/horingssvar.js | 11 +++- .../mocks/js/modal-horingssvar.js | 4 +- .../deltag-aarhus/mocks/js/variant.js | 17 +++-- .../deltag-aarhus/mocks/uniparken/index.html | 4 +- 16 files changed, 143 insertions(+), 37 deletions(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index b260ef5..2455841 100644 --- a/CHANGELOG.md +++ b/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) diff --git a/docs/public/projects/deltag-aarhus/mocks/css/footer.css b/docs/public/projects/deltag-aarhus/mocks/css/footer.css index fc2668f..6b71f7f 100644 --- a/docs/public/projects/deltag-aarhus/mocks/css/footer.css +++ b/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; } diff --git a/docs/public/projects/deltag-aarhus/mocks/css/horingssvar.css b/docs/public/projects/deltag-aarhus/mocks/css/horingssvar.css index 811faf2..d158ae3 100644 --- a/docs/public/projects/deltag-aarhus/mocks/css/horingssvar.css +++ b/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 { diff --git a/docs/public/projects/deltag-aarhus/mocks/css/modal-decision.css b/docs/public/projects/deltag-aarhus/mocks/css/modal-decision.css index 78d7b2f..0d162a0 100644 --- a/docs/public/projects/deltag-aarhus/mocks/css/modal-decision.css +++ b/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; diff --git a/docs/public/projects/deltag-aarhus/mocks/css/modal-horingssvar.css b/docs/public/projects/deltag-aarhus/mocks/css/modal-horingssvar.css index f4977e7..753ce64 100644 --- a/docs/public/projects/deltag-aarhus/mocks/css/modal-horingssvar.css +++ b/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; } diff --git a/docs/public/projects/deltag-aarhus/mocks/css/modal-material.css b/docs/public/projects/deltag-aarhus/mocks/css/modal-material.css index 8f76ed6..f0d5cf6 100644 --- a/docs/public/projects/deltag-aarhus/mocks/css/modal-material.css +++ b/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 { diff --git a/docs/public/projects/deltag-aarhus/mocks/css/modal-submission.css b/docs/public/projects/deltag-aarhus/mocks/css/modal-submission.css index dcd2dc2..441e4ff 100644 --- a/docs/public/projects/deltag-aarhus/mocks/css/modal-submission.css +++ b/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 { diff --git a/docs/public/projects/deltag-aarhus/mocks/css/modal.css b/docs/public/projects/deltag-aarhus/mocks/css/modal.css index 28bdd35..c60d863 100644 --- a/docs/public/projects/deltag-aarhus/mocks/css/modal.css +++ b/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); } diff --git a/docs/public/projects/deltag-aarhus/mocks/css/related.css b/docs/public/projects/deltag-aarhus/mocks/css/related.css index 108747e..46ddc3c 100644 --- a/docs/public/projects/deltag-aarhus/mocks/css/related.css +++ b/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); } diff --git a/docs/public/projects/deltag-aarhus/mocks/css/tokens.css b/docs/public/projects/deltag-aarhus/mocks/css/tokens.css index 588599f..b35806c 100644 --- a/docs/public/projects/deltag-aarhus/mocks/css/tokens.css +++ b/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, diff --git a/docs/public/projects/deltag-aarhus/mocks/css/variant.css b/docs/public/projects/deltag-aarhus/mocks/css/variant.css index 8060b83..4bb08c1 100644 --- a/docs/public/projects/deltag-aarhus/mocks/css/variant.css +++ b/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; diff --git a/docs/public/projects/deltag-aarhus/mocks/index.html b/docs/public/projects/deltag-aarhus/mocks/index.html index 849f5da..a968864 100644 --- a/docs/public/projects/deltag-aarhus/mocks/index.html +++ b/docs/public/projects/deltag-aarhus/mocks/index.html @@ -97,6 +97,7 @@

Forslag til Lokalplan nr. 1237 med miljøvurderingsrapport — Vindmøller ved Vosnæs

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.

+