fix: wcag 4.1.2 requirement, add box-shadow to trip card focus (#706)

* fix: wcag 4.1.2 requirement, add box-shadow to trip card focus

* formatting...

Author: reidzeibel

src/components/labled-input/index.tsx

@@ -25,6 +25,7 @@ export default function LabeledInput({
   const isError = typeof validationError !== 'undefined';
   const postfix = useId();
 
+  const inputId = 'input-' + postfix;
   const errorLabel = 'error-' + postfix;
 
   const validationStatusProps: React.JSX.IntrinsicElements['input'] = isError
@@ -37,8 +38,11 @@ export default function LabeledInput({
         [style['container--error']]: isError,
       })}
     >
-      <label className={style.label}>{label}</label>
+      <label className={style.label} htmlFor={inputId}>
+        {label}
+      </label>
       <input
+        id={inputId}
         className={style.input}
         type="text"
         placeholder={placeholder}

src/page-modules/assistant/trip/trip-pattern/index.tsx

@@ -109,8 +109,16 @@ export default function TripPattern({
     <div ref={ref} className={style.tripPatternContainer}>
       <motion.div
         id={`${id}-details-region`}
-        role="region"
+        role="button"
+        tabIndex={0}
         onClick={() => setIsOpen(!isOpen)}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') {
+            e.preventDefault();
+            setIsOpen(!isOpen);
+          }
+        }}
+        aria-expanded={isOpen}
         className={className}
         data-testid={testId}
         initial={{ opacity: 0, x: -10 }}
@@ -119,14 +127,14 @@ export default function TripPattern({
         transition={{
           delay, // staggerChildren on parent only works first render
         }}
-        aria-label={tripSummary(
+        aria-label={`${tripSummary(
           tripPattern,
           t,
           language,
           tripIsInPast,
           index + 1,
           isCancelled,
-        )}
+        )}. ${isOpen ? t(PageText.Assistant.trip.tripPattern.activateToCollapse) : t(PageText.Assistant.trip.tripPattern.activateToExpand)}`}
       >
         <TripPatternHeader
           tripPattern={tripPattern}
@@ -243,7 +251,7 @@ export default function TripPattern({
             </Typo.span>
           </div>
         </div>
-        <footer className={style.footer} onClick={() => setIsOpen(!isOpen)}>
+        <footer className={style.footer}>
           <div className={style.info__container}>
             {tripIsInPast && (
               <Tag
@@ -273,8 +281,8 @@ export default function TripPattern({
                 : t(PageText.Assistant.trip.tripPattern.seeMore)
             }
             buttonProps={{
-              'aria-controls': `${id}-details-region`,
-              'aria-expanded': isOpen,
+              tabIndex: -1,
+              'aria-hidden': true,
             }}
             className={style.seeMoreButton}
             size={'pill'}

src/page-modules/assistant/trip/trip-pattern/trip-pattern.module.css

@@ -14,6 +14,12 @@
 .tripPattern:hover {
   cursor: pointer;
 }
+.tripPattern:focus {
+  outline: 0;
+  box-shadow: inset 0 0 0 token('border.width.medium')
+    token('color.interactive.2.outline.background');
+  border-radius: token('border.radius.regular');
+}
 
 .header {
   display: flex;

src/translations/pages/assistant.ts

@@ -175,6 +175,16 @@ const AssistantInternal = {
       ),
       seeMore: _('Se mer', 'See more', 'Sjå meir'),
       seeLess: _('Se mindre', 'See less', 'Sjå mindre'),
+      activateToExpand: _(
+        'Trykk for å utvide',
+        'Activate to expand',
+        'Trykk for å utvide',
+      ),
+      activateToCollapse: _(
+        'Trykk for å lukke',
+        'Activate to collapse',
+        'Trykk for å lukke',
+      ),
       hasSituationsTip: _(
         'Denne reisen har driftsmeldinger. Se detaljer for mer info',
         'There are service messages affecting your journey. See details for more info ',