web: make accordions keyboard-operable and fix small accessibility gaps

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"

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}

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 {