From b9e5ae9a5db9eda26e453841db00e0713cc84e49 Mon Sep 17 00:00:00 2001 From: Ken Gullaksen Date: Mon, 25 Nov 2024 14:52:01 +0100 Subject: [PATCH] =?UTF-8?q?fjern=20aria=20controls=20og=20owns=20som=20vir?= =?UTF-8?q?ker=20p=C3=A5virke=20mobil=20negativt?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/bedriftsmeny/velger/JuridiskEnhet.tsx | 211 +++++++++--------- src/bedriftsmeny/velger/Virksomhetsvelger.tsx | 155 +++++++------ 2 files changed, 201 insertions(+), 165 deletions(-) diff --git a/src/bedriftsmeny/velger/JuridiskEnhet.tsx b/src/bedriftsmeny/velger/JuridiskEnhet.tsx index 9208349..44743ae 100644 --- a/src/bedriftsmeny/velger/JuridiskEnhet.tsx +++ b/src/bedriftsmeny/velger/JuridiskEnhet.tsx @@ -1,8 +1,8 @@ -import React, {ForwardedRef, forwardRef} from 'react'; +import React, { ForwardedRef, forwardRef } from 'react'; import { Office2, Success } from '@navikt/ds-icons'; -import {Accordion, BodyShort, Button} from '@navikt/ds-react'; -import {Organisasjon} from '../organisasjon'; -import {OrganisasjonMedState} from "./useTastaturNavigasjon"; +import { Accordion, BodyShort, Button } from '@navikt/ds-react'; +import { Organisasjon } from '../organisasjon'; +import { OrganisasjonMedState } from './useTastaturNavigasjon'; type Props = { organisasjonerMedState: OrganisasjonMedState[]; @@ -12,65 +12,67 @@ type Props = { enhetRef: ForwardedRef; }; -const JuridiskEnhet = ( - { - organisasjonerMedState, - onUnderenhetClick, - onHovedenhetClick, - enhetRef, - onFocus, - }: Props -) => { +const JuridiskEnhet = ({ + organisasjonerMedState, + onUnderenhetClick, + onHovedenhetClick, + enhetRef, + onFocus, +}: Props) => { const [juridiskEnhet, ...underenheter] = organisasjonerMedState; - const valgt = organisasjonerMedState.some(({valgt}) => valgt); - return juridiskEnhet && ( -
  • - - { - onHovedenhetClick(juridiskEnhet); - }} - onFocus={() => { - if (!juridiskEnhet.fokusert) { - onFocus(juridiskEnhet) - } - }} - aria-owns={`underenheter-${juridiskEnhet.OrganizationNumber}`} - style={{backgroundColor: juridiskEnhet.ekspandert ? 'var(--a-surface-action-subtle' : 'transparent'}} - > - - - -
      - {underenheter.map((underenhetMedState) => { - return ( -
    • - { - if (!underenhetMedState.fokusert) { - onFocus(underenhetMedState) - } - }} - /> -
      • - ); - })} -
    -     -     -
    • + const valgt = organisasjonerMedState.some(({ valgt }) => valgt); + return ( + juridiskEnhet && ( +
  • + + { + onHovedenhetClick(juridiskEnhet); + }} + onFocus={() => { + if (!juridiskEnhet.fokusert) { + onFocus(juridiskEnhet); + } + }} + style={{ + backgroundColor: juridiskEnhet.ekspandert + ? 'var(--a-surface-action-subtle' + : 'transparent', + }} + > + + + +
      + {underenheter.map((underenhetMedState) => { + return ( +
    • + { + if (!underenhetMedState.fokusert) { + onFocus(underenhetMedState); + } + }} + /> +
      • + ); + })} +
    +     +     +
    • + ) ); }; @@ -79,63 +81,70 @@ type UnderenhetProps = { onClick: (underenhet: Organisasjon) => void; onFocus: (e: React.FocusEvent) => void; underenhet: Organisasjon; -} +}; -const Underenhet = forwardRef(({valgt, onClick, underenhet, onFocus}, ref) => - + + ) ); - type HovedenhetProps = { hovedenhet: Organisasjon; valgt: boolean; antallUnderenheter: number; -} +}; -const Hovedenhet = ({hovedenhet, valgt, antallUnderenheter}: HovedenhetProps) => -
    -
    - +const Hovedenhet = ({ hovedenhet, valgt, antallUnderenheter }: HovedenhetProps) => ( +
    +
    + {hovedenhet.Name} Org.nr. - {hovedenhet.OrganizationNumber.replace(/\B(?=(\d{3})+(?!\d))/g, " ")} + {hovedenhet.OrganizationNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')} - + {antallUnderenheter} {antallUnderenheter === 1 ? 'underenhet' : 'underenheter'} {valgt ? ' - 1 valgt' : ''}
    -
    ; - +
    +); export default JuridiskEnhet; diff --git a/src/bedriftsmeny/velger/Virksomhetsvelger.tsx b/src/bedriftsmeny/velger/Virksomhetsvelger.tsx index de87080..c5a758e 100644 --- a/src/bedriftsmeny/velger/Virksomhetsvelger.tsx +++ b/src/bedriftsmeny/velger/Virksomhetsvelger.tsx @@ -1,15 +1,20 @@ -import React, {useContext, useEffect, useRef, useState} from 'react'; -import {Accordion, BodyShort, Button, Detail, Search} from '@navikt/ds-react'; -import {Organisasjon} from '../organisasjon'; -import {Close, Collapse, Expand, Office1} from '@navikt/ds-icons'; -import {VirksomhetsvelgerContext} from './VirksomhetsvelgerProvider'; +import React, { useContext, useEffect, useRef, useState } from 'react'; +import { Accordion, BodyShort, Button, Detail, Search } from '@navikt/ds-react'; +import { Organisasjon } from '../organisasjon'; +import { Close, Collapse, Expand, Office1 } from '@navikt/ds-icons'; +import { VirksomhetsvelgerContext } from './VirksomhetsvelgerProvider'; import JuridiskEnhet from './JuridiskEnhet'; -import Dropdown from "./Dropdown"; +import Dropdown from './Dropdown'; import FocusTrap from 'focus-trap-react'; -import {useTastaturNavigasjon} from "./useTastaturNavigasjon"; +import { useTastaturNavigasjon } from './useTastaturNavigasjon'; - -const Velger = ({friKomponent, maxWidth} : {friKomponent: boolean, maxWidth: string | undefined} ) => { +const Velger = ({ + friKomponent, + maxWidth, +}: { + friKomponent: boolean; + maxWidth: string | undefined; +}) => { const buttonRef = useRef(null); const valgtEnhetRef = useRef(null); const [åpen, setÅpen] = useState(false); @@ -39,15 +44,15 @@ const Velger = ({friKomponent, maxWidth} : {friKomponent: boolean, maxWidth: str if (åpen) { valgtEnhetRef.current?.focus(); } else { - setSøketekst('') - resetState() + setSøketekst(''); + resetState(); } }, [åpen, fokusertEnhet.OrganizationNumber]); return (
    - {åpen ? : } + {åpen ? ( + + ) : ( + + )}
    { - if (buttonRef.current && e.target instanceof Node && buttonRef.current.contains(e.target)) { + clickOutsideDeactivates: (e) => { + if ( + buttonRef.current && + e.target instanceof Node && + buttonRef.current.contains(e.target) + ) { /* Knappen flipper også `åpen`. Om vi også flipper, så flippes `åpen` fram og tilbake. */ } else { - setÅpen(false) + setÅpen(false); } - return true + return true; }, escapeDeactivates: () => { - setÅpen(false) + setÅpen(false); return true; }, }} > -
    +
    { if (e.key === 'ArrowDown' || e.key === 'Down') { - fokuserFørsteEnhet() - e.preventDefault() + fokuserFørsteEnhet(); + e.preventDefault(); } }} /> setÅpen(false)} />
    - {søketekst.length > 0 && (<> - {antallTreff === 0 ? `Ingen treff på "${søketekst}"` : `${antallTreff} treff på "${søketekst}".`} - )} + {søketekst.length > 0 && ( + <> + {antallTreff === 0 + ? `Ingen treff på "${søketekst}"` + : `${antallTreff} treff på "${søketekst}".`} + + )} - +
      { if (e.key === 'Home') { fokuserFørsteEnhet(); - e.preventDefault() + e.preventDefault(); } if (e.key === 'End') { fokuserSisteEnhet(); - e.preventDefault() + e.preventDefault(); } if (e.key === 'ArrowUp' || e.key === 'Up') { pilOpp(); - e.preventDefault() + e.preventDefault(); } if (e.key === 'ArrowDown' || e.key === 'Down') { pilNed(); - e.preventDefault() + e.preventDefault(); } if (e.key === 'ArrowRight' || e.key === 'Right') { pilHøyre(); - e.preventDefault() + e.preventDefault(); } if (e.key === 'ArrowLeft' || e.key === 'Left') { pilVenstre(); - e.preventDefault() + e.preventDefault(); } }} > - {aktivtOrganisasjonstre.map(({JuridiskEnhet: HovedEnhet, Underenheter}) => { - const flatSubtreMedState = organisasjonerMedState.filter( - ({OrganizationNumber}) => - OrganizationNumber === HovedEnhet.OrganizationNumber - || Underenheter.some((underenhet) => OrganizationNumber === underenhet.OrganizationNumber) - ); - return ( - { - velgUnderenhet(virksomhet.OrganizationNumber); - setÅpen(false); - }} - onHovedenhetClick={(hovedenhet: Organisasjon) => { - toggleEkspander(hovedenhet) - }} - onFocus={(enhet: Organisasjon) => { - fokuserEnhet(enhet) - }} - /> - ); - })} + {aktivtOrganisasjonstre.map( + ({ JuridiskEnhet: HovedEnhet, Underenheter }) => { + const flatSubtreMedState = organisasjonerMedState.filter( + ({ OrganizationNumber }) => + OrganizationNumber === + HovedEnhet.OrganizationNumber || + Underenheter.some( + (underenhet) => + OrganizationNumber === + underenhet.OrganizationNumber + ) + ); + return ( + { + velgUnderenhet(virksomhet.OrganizationNumber); + setÅpen(false); + }} + onHovedenhetClick={(hovedenhet: Organisasjon) => { + toggleEkspander(hovedenhet); + }} + onFocus={(enhet: Organisasjon) => { + fokuserEnhet(enhet); + }} + /> + ); + } + )}
    @@ -186,18 +213,18 @@ const Velger = ({friKomponent, maxWidth} : {friKomponent: boolean, maxWidth: str ); }; - type CloseButtonProps = { onClick: () => void; -} -const CloseButton = ({onClick}: CloseButtonProps) => +}; +const CloseButton = ({ onClick }: CloseButtonProps) => ( +); export default Velger;