Merge pull request #1470 from navikt/forbedre-driftsmelding-for-skjer…

…mleser Forbedre synligheten til driftsmelding for skjermlesere
navikt · Aug 17, 2023 · ffe4afe · ffe4afe
2 parents 195c61b + 6fe33b4
commit ffe4afe
Show file tree

Hide file tree

Showing 4 changed files with 52 additions and 23 deletions.
diff --git a/.env b/.env
@@ -2,7 +2,7 @@ ENV=localhost
 XP_BASE_URL=http://localhost:8080
 APP_BASE_URL=http://localhost:8088
 APP_BASE_PATH=/dekoratoren
-API_XP_SERVICES_URL=https://www.nav.no/_/service
+API_XP_SERVICES_URL=http://localhost:8080/_/service
 API_DEKORATOREN_URL=http://localhost:8095/nav-dekoratoren-api
 MINSIDE_ARBEIDSGIVER_URL=https://arbeidsgiver.nav.no/min-side-arbeidsgiver/
 MIN_SIDE_URL=https:/www.nav.no/minside/

diff --git a/src/komponenter/header/common/driftsmeldinger/Driftsmeldinger.module.scss b/src/komponenter/header/common/driftsmeldinger/Driftsmeldinger.module.scss
@@ -51,3 +51,11 @@
     margin-right: 0.5rem;
     color: var(--a-white);
 }
+
+.srOnly {
+    width: 0;
+    height: 0;
+    overflow: hidden;
+    opacity: 0;
+    display: block;
+}
diff --git a/src/komponenter/header/common/driftsmeldinger/Driftsmeldinger.tsx b/src/komponenter/header/common/driftsmeldinger/Driftsmeldinger.tsx
@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { useEffect, useState } from 'react';
 import { useSelector } from 'react-redux';
+import Cookies from 'js-cookie';
 import { AppState } from 'store/reducers';
 import { DriftsmeldingerState } from 'store/reducers/driftsmeldinger-duck';
 import { LenkeMedSporing } from 'komponenter/common/lenke-med-sporing/LenkeMedSporing';
@@ -35,26 +36,47 @@ const getCurrentDriftsmeldinger = (driftsmeldinger: DriftsmeldingerState) => {
 
 export const Driftsmeldinger = () => {
     const { language } = useSelector((state: AppState) => state.language);
+    const [shouldDisplayForScreenreader, setShouldDisplayForScreenreader] = useState<boolean>(false);
     const { driftsmeldinger, environment } = useSelector((state: AppState) => state);
     const { XP_BASE_URL } = environment;
     const currentDriftsmeldinger = getCurrentDriftsmeldinger(driftsmeldinger);
 
+    // Make sure not to read out Driftsmelding to screen readers on every page reload. Therefore
+    // check when screen readers was presented with Driftsmelding last and display again if
+    // more than X minutes.
+    useEffect(() => {
+        const lastShownDriftsmelding = Cookies.get('nav-driftsmelding-last-display-time')?.toString();
+        const secondsSindeLastDisplay = Date.now() - Number.parseInt(lastShownDriftsmelding ?? '0', 10);
+        const hasTimeLimitPassed = secondsSindeLastDisplay > 1000 * 60 * 30; // 30;
+        if (hasTimeLimitPassed && currentDriftsmeldinger.length > 0) {
+            setShouldDisplayForScreenreader(true);
+            Cookies.set('nav-driftsmelding-last-display-time', Date.now().toString(), { expires: 30 });
+        }
+    }, [currentDriftsmeldinger.length]);
+
     return currentDriftsmeldinger.length > 0 ? (
-        <section className={style.driftsmeldinger} aria-label={finnTekst('driftsmeldinger',language)}>
-            {currentDriftsmeldinger.map((melding) => (
-                <LenkeMedSporing
-                    key={melding.heading}
-                    href={`${XP_BASE_URL}${melding.url}`}
-                    classNameOverride={style.message}
-                    analyticsEventArgs={{
-                        category: AnalyticsCategory.Header,
-                        action: 'driftsmeldinger',
-                    }}
-                >
-                    <span className={style.messageIcon}>{melding.type && <Icon type={melding.type} />}</span>
-                    <BodyLong>{melding.heading}</BodyLong>
-                </LenkeMedSporing>
-            ))}
+        <section className={style.driftsmeldinger}>
+            {currentDriftsmeldinger.map((melding) => {
+                const srRoleProp = shouldDisplayForScreenreader && { role: melding.type === 'info' ? 'status' : 'alert' };
+                return (
+                    <LenkeMedSporing
+                        key={melding.heading}
+                        href={`${XP_BASE_URL}${melding.url}`}
+                        classNameOverride={style.message}
+                        analyticsEventArgs={{
+                            category: AnalyticsCategory.Header,
+                            action: 'driftsmeldinger',
+                        }}
+                        {...srRoleProp}
+                    >
+                        <span className={style.messageIcon}>{melding.type && <Icon type={melding.type} />}</span>
+                        <BodyLong>
+                            <span className={style.srOnly}>{finnTekst('driftsmeldinger', language)}</span>
+                            {melding.heading}
+                        </BodyLong>
+                    </LenkeMedSporing>
+                );
+            })}
         </section>
     ) : null;
 };
@@ -65,8 +87,8 @@ interface IconProps {
 
 const Icon = (props: IconProps) => (
     <>
-        {props.type === 'prodstatus' && <StatusSvg/>}
-        {props.type === 'info' && <InfoSvg/>}
+        {props.type === 'prodstatus' && <StatusSvg />}
+        {props.type === 'info' && <InfoSvg />}
     </>
 );
 

diff --git a/src/tekster/ledetekster.ts b/src/tekster/ledetekster.ts
@@ -334,8 +334,7 @@ export const ledetekster = {
     'arkiver-se': 'Arkiver',
 
     //Driftsmeldinger
-    'driftsmeldinger': 'Viktig informasjon',
-    'driftsmeldinger-en': 'Important information',
-    'driftsmeldinger-se': 'Viktig informasjon',
-
+    driftsmeldinger: 'Viktig informasjon: ',
+    'driftsmeldinger-en': 'Important information: ',
+    'driftsmeldinger-se': 'Viktig informasjon: ',
 } as const;