Tag 2216 uu fixes (#131)

# Forbedret UU

Ved brukertest kom det opp noen mangler for brukere av skjermleser.
Denne PRen er et forsøk på å forbedre de manglene som ble avdekket av brukertesten.

Følgende endringer er gjort:

* Bedre beskrivelse av hva som er valgt og hva brukeren kan gjøre i komponenten.
* Endre tabbing slik at bruker ikke blir fanget i listen og må tabbe gjennom en lang liste av bedrifter. Tab flytter nå fokus fra listen til søkefelt til lukk knapp, ikke mellom hvert element i listen.
* Navigering i listen gjøres med piltaster iht retningslinjer for navigering i tre. På denne måten er det lett å forstå for brukere med skjermleser.
* Mer lesbart org og virksomhetsnummer for skjermlesere
* Gjør søk mer forståelig for brukere med skjermleser
* fjerner role=menu og menuitemradio. Dette skaper utfordringer for søkefeltet. Skjermlesere behandler da søkefeltet annerledes, og det blir vanskelig å bruke.
* knapper får type=button slik at bedriftsmenyen fungerer i en form. 
* Det fikses også slik at knappene reflekterer tilstand på menyen slik at det er forståelig for en bruker med skjermleser
* det skilles på fokusert og valgt enhet. fokusert enhet endres ved navigering. Valgt enhet settes kun når man faktisk velger.

README.md

@@ -100,7 +100,7 @@ export default function() {
 
 ```sh
 npm install
-npm start
+npm run dev
 ```
 
 ## Publisering på NPM
@@ -114,16 +114,6 @@ Det opprettes samtidig en ny tag med det nye versjonsnummeret.
 
 Commits til master med ny versjon i `package.json` vil publiseres til NPM.
 
-## Stack
-
-### Bundling
-
-Bedriftsmenyen bygges med Webpack og Babel. Babel klarer å tolke TypeScript med `@babel/preset-typescript` og JSX med `@babel/preset-react` (se _babel.config.js_). Less kompileres til CSS og bundles sammen med JavaScript i _lib/bedriftsmeny.css_. Babel klarer ikke å generere deklarasjonsfiler for TypeScript, så vi gjør dette i et eget steg som en del av bygget.
-
-### Utvikling
-
-Under utvikling (`npm start`) bygges appen med Parcel og en egen TypeScript-konfigurasjonsfil.
-
 ## Kontakt oss
 Opprett issue i repository hvis du lurer på noe.
 

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@navikt/bedriftsmeny",
-    "version": "6.12.3",
+    "version": "6.13.0",
     "description": "Bedriftsvelger og -meny for innlogget arbeidsgiver. Laget av TAG (Tjenester for Arbeidsgivere).",
     "author": "NAVIKT",
     "license": "MIT",
@@ -56,7 +56,7 @@
         "postcss-import": "^15.1.0",
         "prettier": "2.2.1",
         "process": "^0.11.10",
-        "typescript": "^4.1.3"
+        "typescript": "^5.3.3"
     },
     "dependencies": {
         "fuzzysort": "^1.1.4",

src/bedriftsmeny/velger/JuridiskEnhet.css

@@ -70,6 +70,10 @@
     width: 100%;
     padding: var(--a-spacing-3) var(--a-spacing-4);
 }
+.navbm-virksomhetsvelger__underenhet-innhold:focus {
+    /* liten hack da programmatisk focus ikke funker på ds-react lenger. usikker på hvorfor */
+    box-shadow: inset 0 0 0 2px var(--ac-button-tertiary-focus-border, var(--a-border-action)), var(--a-shadow-focus);
+}
 .navbm-virksomhetsvelger__underenhet-innhold > span {
     width: 100%;
 }

src/bedriftsmeny/velger/JuridiskEnhet.tsx

@@ -1,55 +1,69 @@
-import React, { forwardRef, useState } from 'react';
-import { Office1, Success } from '@navikt/ds-icons';
-import { Accordion, BodyShort, Button } from '@navikt/ds-react';
-import { JuridiskEnhetMedUnderEnheterArray, Organisasjon } from '../organisasjon';
+import React, {ForwardedRef, forwardRef} from 'react';
+import {Office1, Success} from '@navikt/ds-icons';
+import {Accordion, BodyShort, Button} from '@navikt/ds-react';
+import {Organisasjon} from '../organisasjon';
+import {a11yOrgnr} from "./utils";
+import {OrganisasjonMedState} from "./useTastaturNavigasjon";
 
 type Props = {
-    juridiskEnhet: JuridiskEnhetMedUnderEnheterArray;
-    valgtOrganisasjon: Organisasjon;
+    organisasjonerMedState: OrganisasjonMedState[];
     onUnderenhetClick: (underenhet: Organisasjon) => void;
+    onHovedenhetClick: (hovedenhet: Organisasjon) => void;
+    onFocus: (enhet: Organisasjon) => void;
+    enhetRef: ForwardedRef<HTMLButtonElement>;
 };
 
-const JuridiskEnhet = forwardRef<HTMLButtonElement, Props>(({
-                                                                juridiskEnhet,
-                                                                valgtOrganisasjon,
-                                                                onUnderenhetClick
-                                                            }, ref) => {
-    const { JuridiskEnhet, Underenheter } = juridiskEnhet;
+const JuridiskEnhet = (
+    {
+        organisasjonerMedState,
+        onUnderenhetClick,
+        onHovedenhetClick,
+        enhetRef,
+        onFocus,
+    }: Props
+) => {
+    const [juridiskEnhet, ...underenheter] = organisasjonerMedState;
 
-    const juridiskEnhetErValgt = Underenheter.some(
-        (enhet: Organisasjon) => enhet.OrganizationNumber === valgtOrganisasjon.OrganizationNumber
-    );
-    const [open, setOpen] = useState(juridiskEnhetErValgt);
-
-    return (
+    const valgt = organisasjonerMedState.some(({valgt}) => valgt);
+    return juridiskEnhet && (
         <li className='navbm-virksomhetsvelger__juridisk-enhet'>
-            <Accordion.Item open={open}>
+            <Accordion.Item open={juridiskEnhet.ekspandert} role="group">
                 <Accordion.Header
+                    tabIndex={valgt ? 0 : -1}
+                    ref={juridiskEnhet.fokusert ? enhetRef : null}
                     onClick={() => {
-                        setOpen(!open);
+                        onHovedenhetClick(juridiskEnhet);
+                    }}
+                    onFocus={() => {
+                        if (!juridiskEnhet.fokusert) {
+                            onFocus(juridiskEnhet)
+                        }
                     }}
-                    style={{backgroundColor: open ? 'var(--a-surface-action-subtle' : 'transparent'}}
+                    aria-owns={`underenheter-${juridiskEnhet.OrganizationNumber}`}
+                    style={{backgroundColor: juridiskEnhet.ekspandert ? 'var(--a-surface-action-subtle' : 'transparent'}}
                 >
                     <Hovedenhet
-                        hovedenhet={JuridiskEnhet}
-                        valgt={juridiskEnhetErValgt}
-                        antallUnderenheter={Underenheter.length}
+                        hovedenhet={juridiskEnhet}
+                        valgt={valgt}
+                        antallUnderenheter={underenheter.length}
                     />
                 </Accordion.Header>
                 <Accordion.Content>
-                    <ul className='navbm-virksomhetsvelger__underenheter'>
-                        {Underenheter.map((virksomhet) => {
-                            const underenhetErValgt =
-                                valgtOrganisasjon.OrganizationNumber ===
-                                virksomhet.OrganizationNumber;
-
+                    <ul className='navbm-virksomhetsvelger__underenheter'
+                        id={`underenheter-${juridiskEnhet.OrganizationNumber}`}>
+                        {underenheter.map((underenhetMedState) => {
                             return (
-                                <li key={virksomhet.OrganizationNumber}>
+                                <li key={underenhetMedState.OrganizationNumber}>
                                     <Underenhet
-                                        underenhet={virksomhet}
-                                        valgt={underenhetErValgt}
-                                        ref={underenhetErValgt ? ref : null}
+                                        underenhet={underenhetMedState}
+                                        valgt={underenhetMedState.valgt}
+                                        ref={underenhetMedState.fokusert ? enhetRef : null}
                                         onClick={onUnderenhetClick}
+                                        onFocus={() => {
+                                            if (!underenhetMedState.fokusert) {
+                                                onFocus(underenhetMedState)
+                                            }
+                                        }}
                                     />
                                 </li>
                             );
@@ -59,30 +73,33 @@ const JuridiskEnhet = forwardRef<HTMLButtonElement, Props>(({
             </Accordion.Item>
         </li>
     );
-});
+};
 
 type UnderenhetProps = {
     valgt: boolean;
     onClick: (underenhet: Organisasjon) => void;
+    onFocus: (e: React.FocusEvent<HTMLButtonElement>) => void;
     underenhet: Organisasjon;
 }
 
-const Underenhet = forwardRef<HTMLButtonElement, UnderenhetProps>(({valgt, onClick, underenhet}, ref) =>
+const Underenhet = forwardRef<HTMLButtonElement, UnderenhetProps>(({valgt, onClick, underenhet, onFocus}, ref) =>
     <Button
+        type="button"
         ref={ref}
-        role='menuitemradio'
-        aria-checked={valgt}
+        tabIndex={valgt ? 0 : -1}
+        aria-pressed={valgt}
         variant='tertiary'
         onClick={() => onClick(underenhet)}
+        onFocus={onFocus}
         className='navbm-virksomhetsvelger__underenhet-innhold'
     >
         <div className='navbm-virksomhetsvelger__enhet'>
-            <Office1 aria-hidden={true} />
+            <Office1 aria-hidden={true}/>
             <div className='navbm-virksomhetsvelger__enhet-tekst'>
                 <BodyShort className='navbm-virksomhetsvelger__enhet-tittel'>
                     {underenhet.Name}
                 </BodyShort>
-                <BodyShort>
+                <BodyShort aria-label={`virksomhetsnummer ${a11yOrgnr(underenhet.OrganizationNumber)}`}>
                     <span>virksomhetsnr. </span>
                     <span>{underenhet.OrganizationNumber}</span>
                 </BodyShort>
@@ -112,11 +129,11 @@ const Hovedenhet = ({hovedenhet, valgt, antallUnderenheter}: HovedenhetProps) =>
             </BodyShort>
             <BodyShort>
                 <span>org.nummer </span>
-                <span>{hovedenhet.OrganizationNumber}</span>
+                <span aria-label={a11yOrgnr(hovedenhet.OrganizationNumber)}>{hovedenhet.OrganizationNumber}</span>
             </BodyShort>
-            <BodyShort className='navbm-virksomhetsvelger__enhet-beskrivelse'>
-                {antallUnderenheter} underenhet
-                {antallUnderenheter === 1 ? '' : 'er'}
+            <BodyShort className='navbm-virksomhetsvelger__enhet-beskrivelse'
+                       aria-label={`Hovedenheten har ${antallUnderenheter} ${antallUnderenheter === 1 ? 'underenhet' : 'underenheter'}`}>
+                {antallUnderenheter} {antallUnderenheter === 1 ? 'underenhet' : 'underenheter'}
                 {valgt ? ' - 1 valgt' : ''}
             </BodyShort>
         </div>

src/bedriftsmeny/velger/Virksomhetsvelger.css

@@ -61,7 +61,7 @@
 .navbm-virksomhetsvelger__popup {
     display: flex;
     flex-direction: column;
-    gap: 1rem;
+    gap: 0.5rem;
     padding: var(--a-spacing-3);
     background-color: var(--a-bg-subtle);
     border-radius: var(--a-border-radius-small);