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 @@
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.
+