From bbab3a9427c9ff7ca18cf1d60bd74f7e283ef052 Mon Sep 17 00:00:00 2001
From: Jonas Braathen <jonas@ponas.no>
Date: Wed, 14 Oct 2026 02:02:50 +0200
Subject: [PATCH] web: make accordions keyboard-operable and fix small
 accessibility gaps

---
 web/src/components/blocks/NeufAddressSectionBlock.tsx | 1 +
 web/src/components/general/Accordion.tsx              | 9 +++++++++
 web/src/components/search/searchContainer.module.scss | 4 +++-
 3 files changed, 13 insertions(+), 1 deletion(-)

diff --git a/web/src/components/blocks/NeufAddressSectionBlock.tsx b/web/src/components/blocks/NeufAddressSectionBlock.tsx
index e41a663..db8d9d0 100644
--- a/web/src/components/blocks/NeufAddressSectionBlock.tsx
+++ b/web/src/components/blocks/NeufAddressSectionBlock.tsx
@@ -23,6 +23,7 @@ export const NeufAddressSectionBlock = () => {
       <div className={styles.map}>
         <iframe
           src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d1999.063860494329!2d10.7136789!3d59.9310825!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x46416dc4aae9a79f%3A0xcacc32c6d9c43be6!2sChateau%20Neuf%2C%200369%20Oslo!5e0!3m2!1sen!2sno!4v1719477745808!5m2!1sen!2sno"
+          title="Kart som viser Chateau Neuf"
           width="600"
           height="360"
           loading="lazy"
diff --git a/web/src/components/general/Accordion.tsx b/web/src/components/general/Accordion.tsx
index ebee00f..9dedf67 100644
--- a/web/src/components/general/Accordion.tsx
+++ b/web/src/components/general/Accordion.tsx
@@ -14,7 +14,15 @@ export const Accordion = ({ heading, children }: any) => {
       <div
         id={labelId}
         className={styles.accordionHeader}
+        role="button"
+        tabIndex={0}
         onClick={toggleContent}
+        onKeyDown={(e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            toggleContent();
+          }
+        }}
         aria-expanded={showContent}
         aria-controls={contentId}
       >
@@ -23,6 +31,7 @@ export const Accordion = ({ heading, children }: any) => {
       <div
         id={contentId}
         className={styles.accordionContent}
+        role="region"
         aria-labelledby={labelId}
       >
         {children}
diff --git a/web/src/components/search/searchContainer.module.scss b/web/src/components/search/searchContainer.module.scss
index d1d92c3..011df07 100644
--- a/web/src/components/search/searchContainer.module.scss
+++ b/web/src/components/search/searchContainer.module.scss
@@ -56,7 +56,9 @@
   margin-top: 0.25em;
   font-family: var(--font-serif);
   font-size: var(--font-size-caption);
-  color: var(--color-chateauBlue-05);
+  // --color-chateauBlue-05 (50%) is too faint for text this small: 3.2:1
+  // against the background, where 4.5:1 is the minimum. This gives 5.8:1
+  color: rgba(10, 15, 109, .7);
 }
 
 .snippet {