Rett opp i aria-labels på Tjenestebokser

navikt · Dec 16, 2024 · 70e3348 · 70e3348
1 parent b60b5b8
commit 70e3348
Show file tree

Hide file tree

Showing 7 changed files with 42 additions and 39 deletions.
diff --git a/src/Pages/Hovedside/Tjenestebokser/Arbeidsforhold/Arbeidsforhold.tsx b/src/Pages/Hovedside/Tjenestebokser/Arbeidsforhold/Arbeidsforhold.tsx
@@ -19,7 +19,7 @@ const Arbeidsforhold = () => {
             ikon={arbeidsforholdikon}
             href={href}
             tittel="Arbeidsforhold"
-            aria-label="Arbeidsforhold. Se arbeidsforhold rapportert til Arbeidsgiver- og arbeidstakerregisteret (Aa-registeret)"
+            aria-label={`Arbeidsforhold, ${antallArbeidsforhold > 0 ? antallArbeidsforhold : 'Ingen'} arbeidsforhold (aktive og avsluttede). Se arbeidsforhold rapportert til Arbeidsgiver- og arbeidstakerregisteret (Aa-registeret)`}
         >
             <div>
                 <span>

diff --git a/src/Pages/Hovedside/Tjenestebokser/Arbeidsplassen/Arbeidsplassen.tsx b/src/Pages/Hovedside/Tjenestebokser/Arbeidsplassen/Arbeidsplassen.tsx
@@ -20,8 +20,8 @@ const Arbeidsplassen = () => {
             aria-label={
                 'Rekruttere på arbeidsplassen.no, ' +
                 (antallAnnonser > 0
-                    ? `Stillingsannonser ( ${antallAnnonser} aktive)`
-                    : 'Lag ny stillingsannonse')
+                    ? `${antallAnnonser} Stillingsannonser aktive`
+                    : 'Lag en stillingsannonse')
             }
         >
             {antallAnnonser > 0 ? (

diff --git a/src/Pages/Hovedside/Tjenestebokser/ForebyggeFravær/ForebyggeFravær.tsx b/src/Pages/Hovedside/Tjenestebokser/ForebyggeFravær/ForebyggeFravær.tsx
@@ -14,21 +14,7 @@ const ForebyggeFravR = () => {
         return orgnr === '' ? '' : `?bedrift=${orgnr}`;
     };
 
-    return (
-        <Tjenesteboks
-            ikon={ForebyggeFraværIkon}
-            href={lenkeTilForebyggefravar + valgtbedrift()}
-            tittel="Forebygge fravær"
-            aria-label={beskrivelse}
-        >
-            <Beskrivelse />
-        </Tjenesteboks>
-    );
-};
-
-const beskrivelse = 'Verktøy for å forebygge fravær i din virksomhet.';
-
-const Beskrivelse = () => {
+    const sykefravær = useSykefravær();
     const statistikktype = (type: string) => {
         switch (type) {
             case 'NÆRING':
@@ -39,21 +25,30 @@ const Beskrivelse = () => {
         }
     };
 
-    const sykefravær = useSykefravær();
+    const beskrivelse = 'Verktøy for å forebygge fravær i din virksomhet.';
+    const aria_label = sykefravær !== undefined ? `${sykefravær.prosent.toString()} % legemeldt sykefravær i din ${statistikktype(sykefravær.type)}. Lag en plan for å redusere fraværet.` : beskrivelse;
 
-    if (sykefravær !== undefined) {
-        return (
-            <span>
-                <StortTall>{sykefravær.prosent.toString()} %</StortTall>
-                <>
-                    {' '}
-                    legemeldt sykefravær i din {statistikktype(sykefravær.type)}. Lag en plan for å
-                    redusere fraværet.{' '}
-                </>
-            </span>
-        );
-    }
-    return <span>{beskrivelse}</span>;
+    return (
+        <Tjenesteboks
+            ikon={ForebyggeFraværIkon}
+            href={lenkeTilForebyggefravar + valgtbedrift()}
+            tittel="Forebygge fravær"
+            aria-label={"Forebygge Fravær, " + aria_label}
+        >
+            {sykefravær !== undefined ? (
+                <span>
+                    <StortTall>{sykefravær.prosent.toString()} %</StortTall>
+                    <>
+                        {' '}
+                        legemeldt sykefravær i din {statistikktype(sykefravær.type)}. Lag en plan
+                        for å redusere fraværet.{' '}
+                    </>
+                </span>
+            ) : (
+                <span>{beskrivelse}</span>
+            )}
+        </Tjenesteboks>
+    );
 };
 
 export default ForebyggeFravR;
diff --git a/src/Pages/Hovedside/Tjenestebokser/Kandidatlister/Kandidatlister.tsx b/src/Pages/Hovedside/Tjenestebokser/Kandidatlister/Kandidatlister.tsx
@@ -20,7 +20,7 @@ const Kandidatlister = () => {
             ikon={ikon}
             href={href}
             tittel="Kandidater til dine stillinger"
-            aria-label="Kandidater til dine stillinger. Se CV til personer NAV har sendt deg."
+            aria-label={`Kandidater til dine stillinger (${antallKandidater} kandidater). Se CV til personer NAV har sendt deg.`}
         >
             <div className="kandidatlisteboks">
                 <span>

diff --git a/src/Pages/Hovedside/Tjenestebokser/Sykmeldte/Sykmeldte.tsx b/src/Pages/Hovedside/Tjenestebokser/Sykmeldte/Sykmeldte.tsx
@@ -14,7 +14,7 @@ const Sykmeldte = () => {
             ikon={syfoikon}
             href={url}
             tittel="Sykmeldte"
-            aria-label="Se sykmeldte du har ansvar for å følge opp"
+            aria-label={`Sykemeldte, ${antallSykmeldte} ${antallSykmeldte === 1 ? 'sykmeldt' : 'sykmeldte'}. Se sykmeldte du har ansvar for å følge opp`}
         >
             {antallSykmeldte == 0 ? null : (
                 <>

diff --git a/src/Pages/Hovedside/Tjenestebokser/TiltakAvtaler/TiltakAvtaler.tsx b/src/Pages/Hovedside/Tjenestebokser/TiltakAvtaler/TiltakAvtaler.tsx
@@ -45,15 +45,18 @@ const TiltakAvtaler = () => {
             : [];
     });
 
+    const aria_label =
+        'Avtaler om Tiltak.' +
+        displayorder.flatMap((avtaletype) => {
+            const antall = avtaler[avtaletype];
+            return antall > 0 ? ` ${antall} ${displayname[avtaletype]}` : '';
+        });
     return (
         <Tjenesteboks
             ikon={tiltakikon}
             href={tiltakUrl}
             tittel={'Avtaler om tiltak'}
-            aria-label={
-                'Tiltak. Arbeidstrening, lønnstilskudd, mentortilskudd, inkluderingstilskudd og sommerjobb. ' +
-                'De ulike tiltakene krever egne tilganger i Altinn'
-            }
+            aria-label={aria_label}
         >
             <div className={'tiltakboks'}>
                 {tallElems.length > 0 ? (

diff --git a/src/Pages/Hovedside/Tjenestebokser/TiltakRefusjoner/TiltakRefusjoner.tsx b/src/Pages/Hovedside/Tjenestebokser/TiltakRefusjoner/TiltakRefusjoner.tsx
@@ -17,12 +17,17 @@ const TiltakRefusjoner = () => {
 
     const klareForInnsending = valgtOrganisasjon.refusjonstatus['KLAR_FOR_INNSENDING'];
 
+    const aria_label = klareForInnsending === undefined ?
+        "Søk og se refusjon for lønnstilskudd og sommerjobb" :
+        `${klareForInnsending} refusjoner klare for innsending.` + " Søk og se refusjon"
+
+    console.log(aria_label)
     return (
         <Tjenesteboks
             ikon={tiltakrefusjonikon}
             href={url}
             tittel="Refusjon for lønnstilskudd og sommerjobb"
-            aria-label="Refusjon for lønnstilskudd og sommerjobb. Søk og se refusjon for lønnstilskudd og sommerjobb"
+            aria-label={"Refusjon for lønnstilskudd og sommerjobb, " + aria_label}
         >
             {klareForInnsending === undefined ? null : (
                 <>