Skip to content

Commit

Permalink
fjern aria controls og owns som virker påvirke mobil negativt
Browse files Browse the repository at this point in the history
  • Loading branch information
@kenglxn
kenglxn committed Nov 25, 2024
1 parent 50f670c commit b9e5ae9
Show file tree
Hide file tree
Showing 2 changed files with 201 additions and 165 deletions.
211 changes: 110 additions & 101 deletions src/bedriftsmeny/velger/JuridiskEnhet.tsx
View file
Original file line number Diff line number Diff line change
@@ -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[];
Expand All @@ -12,65 +12,67 @@ type Props = {
enhetRef: ForwardedRef<HTMLButtonElement>;
};

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 && (
<li className='navbm-virksomhetsvelger__juridisk-enhet'>
<Accordion.Item open={juridiskEnhet.ekspandert} role="group">
<Accordion.Header
tabIndex={valgt ? 0 : -1}
ref={juridiskEnhet.fokusert ? enhetRef : null}
onClick={() => {
onHovedenhetClick(juridiskEnhet);
}}
onFocus={() => {
if (!juridiskEnhet.fokusert) {
onFocus(juridiskEnhet)
}
}}
aria-owns={`underenheter-${juridiskEnhet.OrganizationNumber}`}
style={{backgroundColor: juridiskEnhet.ekspandert ? 'var(--a-surface-action-subtle' : 'transparent'}}
>
<Hovedenhet
hovedenhet={juridiskEnhet}
valgt={valgt}
antallUnderenheter={underenheter.length}
/>
</Accordion.Header>
<Accordion.Content>
<ul className='navbm-virksomhetsvelger__underenheter'
id={`underenheter-${juridiskEnhet.OrganizationNumber}`}>
{underenheter.map((underenhetMedState) => {
return (
<li key={underenhetMedState.OrganizationNumber}>
<Underenhet
underenhet={underenhetMedState}
valgt={underenhetMedState.valgt}
ref={underenhetMedState.fokusert ? enhetRef : null}
onClick={onUnderenhetClick}
onFocus={() => {
if (!underenhetMedState.fokusert) {
onFocus(underenhetMedState)
}
}}
/>
</li>
);
})}
</ul>
</Accordion.Content>
</Accordion.Item>
</li>
const valgt = organisasjonerMedState.some(({ valgt }) => valgt);
return (
juridiskEnhet && (
<li className="navbm-virksomhetsvelger__juridisk-enhet">
<Accordion.Item open={juridiskEnhet.ekspandert} role="group">
<Accordion.Header
tabIndex={valgt ? 0 : -1}
ref={juridiskEnhet.fokusert ? enhetRef : null}
onClick={() => {
onHovedenhetClick(juridiskEnhet);
}}
onFocus={() => {
if (!juridiskEnhet.fokusert) {
onFocus(juridiskEnhet);
}
}}
style={{
backgroundColor: juridiskEnhet.ekspandert
? 'var(--a-surface-action-subtle'
: 'transparent',
}}
>
<Hovedenhet
hovedenhet={juridiskEnhet}
valgt={valgt}
antallUnderenheter={underenheter.length}
/>
</Accordion.Header>
<Accordion.Content>
<ul className="navbm-virksomhetsvelger__underenheter">
{underenheter.map((underenhetMedState) => {
return (
<li key={underenhetMedState.OrganizationNumber}>
<Underenhet
underenhet={underenhetMedState}
valgt={underenhetMedState.valgt}
ref={underenhetMedState.fokusert ? enhetRef : null}
onClick={onUnderenhetClick}
onFocus={() => {
if (!underenhetMedState.fokusert) {
onFocus(underenhetMedState);
}
}}
/>
</li>
);
})}
</ul>
</Accordion.Content>
</Accordion.Item>
</li>
)
);
};

Expand All @@ -79,63 +81,70 @@ type UnderenhetProps = {
onClick: (underenhet: Organisasjon) => void;
onFocus: (e: React.FocusEvent<HTMLButtonElement>) => void;
underenhet: Organisasjon;
}
};

const Underenhet = forwardRef<HTMLButtonElement, UnderenhetProps>(({valgt, onClick, underenhet, onFocus}, ref) =>
<Button
type="button"
ref={ref}
tabIndex={valgt ? 0 : -1}
aria-pressed={valgt}
variant='tertiary'
onClick={() => onClick(underenhet)}
onFocus={onFocus}
className='navbm-virksomhetsvelger__underenhet-innhold'
>
<div className='navbm-virksomhetsvelger__enhet'>
<div className='navbm-virksomhetsvelger__enhet-tekst'>
<BodyShort className='navbm-virksomhetsvelger__enhet-tittel'>
{underenhet.Name}
</BodyShort>
<BodyShort>
<span>Org.nr. </span>
<span>{underenhet.OrganizationNumber.replace(/\B(?=(\d{3})+(?!\d))/g, " ")}</span>
</BodyShort>
const Underenhet = forwardRef<HTMLButtonElement, UnderenhetProps>(
({ valgt, onClick, underenhet, onFocus }, ref) => (
<Button
type="button"
ref={ref}
tabIndex={valgt ? 0 : -1}
aria-pressed={valgt}
variant="tertiary"
onClick={() => onClick(underenhet)}
onFocus={onFocus}
className="navbm-virksomhetsvelger__underenhet-innhold"
>
<div className="navbm-virksomhetsvelger__enhet">
<div className="navbm-virksomhetsvelger__enhet-tekst">
<BodyShort className="navbm-virksomhetsvelger__enhet-tittel">
{underenhet.Name}
</BodyShort>
<BodyShort>
<span>Org.nr. </span>
<span>
{underenhet.OrganizationNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')}
</span>
</BodyShort>
</div>
{valgt && (
<Success
aria-hidden={true}
className="navbm-virksomhetsvelger__underenhet-valgt-ikon"
/>
)}
</div>
{valgt && (
<Success
aria-hidden={true}
className='navbm-virksomhetsvelger__underenhet-valgt-ikon'
/>
)}
</div>
</Button>
</Button>
)
);


type HovedenhetProps = {
hovedenhet: Organisasjon;
valgt: boolean;
antallUnderenheter: number;
}
};

const Hovedenhet = ({hovedenhet, valgt, antallUnderenheter}: HovedenhetProps) =>
<div className='navbm-virksomhetsvelger__enhet navbm-virksomhetsvelger__enhet--juridisk'>
<div className='navbm-virksomhetsvelger__enhet-tekst'>
<BodyShort className='navbm-virksomhetsvelger__enhet-tittel'>
const Hovedenhet = ({ hovedenhet, valgt, antallUnderenheter }: HovedenhetProps) => (
<div className="navbm-virksomhetsvelger__enhet navbm-virksomhetsvelger__enhet--juridisk">
<div className="navbm-virksomhetsvelger__enhet-tekst">
<BodyShort className="navbm-virksomhetsvelger__enhet-tittel">
{hovedenhet.Name}
</BodyShort>
<BodyShort>
<span>Org.nr. </span>
<span>{hovedenhet.OrganizationNumber.replace(/\B(?=(\d{3})+(?!\d))/g, " ")}</span>
<span>{hovedenhet.OrganizationNumber.replace(/\B(?=(\d{3})+(?!\d))/g, ' ')}</span>
</BodyShort>
<BodyShort className='navbm-virksomhetsvelger__enhet-beskrivelse'
aria-label={`Hovedenheten har ${antallUnderenheter} ${antallUnderenheter === 1 ? 'underenhet' : 'underenheter'}`}>
<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>
</div>;

</div>
);

export default JuridiskEnhet;
Loading

0 comments on commit b9e5ae9

Please sign in to comment.