Merge pull request #1892 from navikt/Tilgjengelighetserklæring-saksov…

…ersikt Fikser uu ved å fjerne unødvendige lag og linker Labels
navikt · Dec 17, 2024 · 0fe8ee3 · 0fe8ee3
2 parents 70e3348 + 67bc358
commit 0fe8ee3
Show file tree

Hide file tree

Showing 5 changed files with 63 additions and 62 deletions.
diff --git a/src/Pages/Saksoversikt/Saksfilter/Saksfilter.tsx b/src/Pages/Saksoversikt/Saksfilter/Saksfilter.tsx
@@ -6,7 +6,12 @@ import { Filter } from '../useOversiktStateTransitions';
 import { Ekspanderbartpanel } from '../../../GeneriskeElementer/Ekspanderbartpanel';
 import { BodyShort, Checkbox, CheckboxGroup, Heading, Label } from '@navikt/ds-react';
 import { Filter as FilterIkon } from '@navikt/ds-icons';
-import { OppgaveTilstand, OppgaveTilstandInfo, Sakstype, SakstypeOverordnet } from '../../../api/graphql-types';
+import {
+    OppgaveTilstand,
+    OppgaveTilstandInfo,
+    Sakstype,
+    SakstypeOverordnet,
+} from '../../../api/graphql-types';
 import { capitalize, sorted, splittListe } from '../../../utils/util';
 import { Set } from 'immutable';
 import { OrganisasjonerOgTilgangerContext } from '../../OrganisasjonerOgTilgangerProvider';
@@ -45,7 +50,7 @@ const KollapsHvisMobil: FC<KollapsHvisMobilProps> = ({
 }: KollapsHvisMobilProps) => {
     if (width < 730) {
         return (
-            <Ekspanderbartpanel tittel="Filtrering" ikon={<FilterIkon />}>
+            <Ekspanderbartpanel tittel="Filtrering" ikon={<FilterIkon aria-hidden="true" />}>
                 {children}
             </Ekspanderbartpanel>
         );
@@ -82,10 +87,12 @@ function sakstyperMedAntall(
                       ?.antall ?? 0,
     }));
 
-    const [sakstyperMedInntektsmeldingSykepenger, sakstyperUtenInntektsmeldingSykepenger] = splittListe(
-        sakstyperForFilter,
-        (filter) => filter.navn === 'Inntektsmelding' || filter.navn === 'Inntektsmelding sykepenger'
-    );
+    const [sakstyperMedInntektsmeldingSykepenger, sakstyperUtenInntektsmeldingSykepenger] =
+        splittListe(
+            sakstyperForFilter,
+            (filter) =>
+                filter.navn === 'Inntektsmelding' || filter.navn === 'Inntektsmelding sykepenger'
+        );
 
     const antallInntektsmeldingSykepenger = sakstyperForFilter
         .filter(({ navn }) => navn === 'Inntektsmelding' || navn === 'Inntektsmelding sykepenger')
@@ -120,7 +127,6 @@ const InntektsmeldingGruppe = (
         navn.includes('Inntektsmelding')
     );
 
-
     if (inntektsmeldingAlleValgtAvBruker) {
         valgteInntektsmeldingtyper = ['Inntektsmelding_gruppe'];
     } else if (andreInntektsmeldingerValgt) {
@@ -231,7 +237,10 @@ export const Saksfilter = ({
 
     const sakstyperForFilter = sakstyperMedAntall(alleSakstyper, sakstypeinfo);
 
-    const [inntektsmeldingSakstyper, sakstyperUtenInntektsmelding] = splittListe(sakstyperForFilter, (filter) => filter.navn.includes('Inntektsmelding'));
+    const [inntektsmeldingSakstyper, sakstyperUtenInntektsmelding] = splittListe(
+        sakstyperForFilter,
+        (filter) => filter.navn.includes('Inntektsmelding')
+    );
 
     const sakstyper = [
         ...sakstyperUtenInntektsmelding,
@@ -303,12 +312,11 @@ export const Saksfilter = ({
                     </CheckboxGroup>
                 )}
 
-                <CheckboxGroup legend="Virksomheter" className="saksfilter_virksomhetsmeny">
-                    <Virksomhetsmeny
-                        valgteEnheter={valgteVirksomheter}
-                        setValgteEnheter={setValgteVirksomheter}
-                    />
-                </CheckboxGroup>
+                <Virksomhetsmeny
+                    valgteEnheter={valgteVirksomheter}
+                    setValgteEnheter={setValgteVirksomheter}
+                />
+
                 <OpprettInntektsmelding />
             </div>
         </KollapsHvisMobil>
@@ -333,23 +341,29 @@ const OpprettInntektsmelding = () => {
     }, []);
 
     if (tilgangInntektsmelding) {
-        return <div
-            ref={ref}
-            style={{
-                display: 'flex',
-                flexDirection: 'column',
-                gap: '4px',
-                paddingBottom: '32px',
-            }}
-        >
-            <Label children="Opprett inntektsmelding manuelt" />
-            <LenkeMedLogging
-                loggLenketekst={'Opprett inntektsmelding manuelt'}
-                href={opprettInntektsmeldingURL}
+        return (
+            <div
+                ref={ref}
+                style={{
+                    display: 'flex',
+                    flexDirection: 'column',
+                    gap: '4px',
+                    paddingBottom: '32px',
+                }}
             >
-                Opprett inntektsmelding for sykepenger
-            </LenkeMedLogging>
-        </div>
+                <Label
+                    htmlFor="opprett-inntektsmelding-lenke-id"
+                    children="Opprett inntektsmelding manuelt"
+                />
+                <LenkeMedLogging
+                    id="opprett-inntektsmelding-lenke-id"
+                    loggLenketekst={'Opprett inntektsmelding manuelt'}
+                    href={opprettInntektsmeldingURL}
+                >
+                    Opprett inntektsmelding for sykepenger
+                </LenkeMedLogging>
+            </div>
+        );
     } else {
         return null;
     }

diff --git a/src/Pages/Saksoversikt/Saksfilter/Virksomhetsmeny/HovedenhetCheckbox.css b/src/Pages/Saksoversikt/Saksfilter/Virksomhetsmeny/HovedenhetCheckbox.css
diff --git a/src/Pages/Saksoversikt/Saksfilter/Virksomhetsmeny/HovedenhetCheckbox.tsx b/src/Pages/Saksoversikt/Saksfilter/Virksomhetsmeny/HovedenhetCheckbox.tsx
@@ -1,6 +1,5 @@
 import { BodyShort, Checkbox } from '@navikt/ds-react';
 import React from 'react';
-import './HovedenhetCheckbox.css';
 import { Set } from 'immutable';
 import { Organisasjon } from '../../../../altinn/organisasjon';
 import { amplitudeFilterKlikk } from '../Saksfilter';
@@ -14,22 +13,19 @@ export const HovedenhetCheckbox = ({ hovedenhet, valgteOrgnr }: HovedenhetCheckb
     const valgt = valgteOrgnr.has(hovedenhet.OrganizationNumber);
 
     return (
-        <div role="button" aria-expanded={valgt}>
-            <div className="hovedenhet">
-                <Checkbox
-                    size="small"
-                    value={hovedenhet.OrganizationNumber}
-                    id={`${hovedenhet.OrganizationNumber}_Virksomhetsmeny_checkbox`}
-                    key={`${hovedenhet.OrganizationNumber}_Virksomhetsmeny_list_key`}
-                    style={{ display: 'flex', alignItems: 'center' }}
-                    description={`Org.nr. ${hovedenhet.OrganizationNumber}`}
-                    onClick={(e) => amplitudeFilterKlikk('organisasjon', 'hovedenhet', e.target)}
-                >
-                    <BodyShort size="medium" as="span">
-                        {hovedenhet.Name}
-                    </BodyShort>
-                </Checkbox>
-            </div>
-        </div>
+        <Checkbox
+            aria-expanded={valgt}
+            size="small"
+            value={hovedenhet.OrganizationNumber}
+            id={`${hovedenhet.OrganizationNumber}_Virksomhetsmeny_checkbox`}
+            key={`${hovedenhet.OrganizationNumber}_Virksomhetsmeny_list_key`}
+            style={{ display: 'flex', alignItems: 'center' }}
+            description={`Org.nr. ${hovedenhet.OrganizationNumber}`}
+            onClick={(e) => amplitudeFilterKlikk('organisasjon', 'hovedenhet', e.target)}
+        >
+            <BodyShort size="medium" as="span">
+                {hovedenhet.Name}
+            </BodyShort>
+        </Checkbox>
     );
 };
diff --git a/src/Pages/Saksoversikt/Saksfilter/Virksomhetsmeny/UnderenhetCheckboks.tsx b/src/Pages/Saksoversikt/Saksfilter/Virksomhetsmeny/UnderenhetCheckboks.tsx
@@ -11,11 +11,6 @@ type UnderenhetCheckboksProps = {
 
 export const UnderenhetCheckboks = ({ underenhet, valgteOrgnr }: UnderenhetCheckboksProps) => {
     return (
-        <div
-            className="sak_virksomhetsmeny_underenhet"
-            role="menuitemcheckbox"
-            aria-checked={valgteOrgnr.has(underenhet.OrganizationNumber)}
-        >
             <Checkbox
                 value={underenhet.OrganizationNumber}
                 size="small"
@@ -29,6 +24,6 @@ export const UnderenhetCheckboks = ({ underenhet, valgteOrgnr }: UnderenhetCheck
                     {underenhet.Name}{' '}
                 </BodyShort>
             </Checkbox>
-        </div>
+
     );
 };
diff --git a/src/Pages/Saksoversikt/Saksfilter/Virksomhetsmeny/Virksomhetsmeny.tsx b/src/Pages/Saksoversikt/Saksfilter/Virksomhetsmeny/Virksomhetsmeny.tsx
@@ -1,5 +1,5 @@
 import React, { forwardRef, ReactNode, useContext, useMemo, useState } from 'react';
-import { CheckboxGroup, Search } from '@navikt/ds-react';
+import { CheckboxGroup, Label, Search } from '@navikt/ds-react';
 import './Virksomhetsmeny.css';
 import { UnderenhetCheckboks } from './UnderenhetCheckboks';
 import { HovedenhetCheckbox } from './HovedenhetCheckbox';
@@ -116,8 +116,10 @@ export const Virksomhetsmeny = ({
 
     return (
         <>
+            <Label htmlFor="virksomheter_checkbox_group_id"> Virksomheter </Label>
             <Søkeboks onChange={onSearchChange} />
             <CheckboxGroup
+                id="virksomheter_checkbox_group_id"
                 legend="Velg virksomheter"
                 hideLegend
                 value={valgteEnheter.toArray()}
@@ -153,7 +155,7 @@ export const Virksomhetsmeny = ({
                                             }
 
                                             return [
-                                                <li key={underenhet.OrganizationNumber}>
+                                                <li key={underenhet.OrganizationNumber} className="sak_virksomhetsmeny_underenhet">
                                                     <UnderenhetCheckboks
                                                         valgteOrgnr={valgteEnheter}
                                                         underenhet={underenhet}