Skip to content

Commit ce0e302

Browse files
AlexGaardAlexGaard
authored
Merge pull request #23 from navikt/uu-fixes
UU fixes
2 parents 35c82f6 + a0448d6 commit ce0e302

File tree

11 files changed

+44
-38
lines changed

11 files changed

+44
-38
lines changed

‎src/components/filters/bruker-filter/bruker-filter.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const BrukerFilter = () => {
1515
<div className="bruker-filter">
1616
<Element>Bruker</Element>
1717
<Checkbox
18+
aria-label="Filtrer mine brukere"
1819
label="Mine brukere"
1920
className="bruker-filter__checkbox"
2021
checked={filters.visMineBrukere}

‎src/components/filters/status-dropwdown/status-dropdown.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -30,6 +30,7 @@ export const StatusDropdown = () => {
3030
<div className="status-dropdown">
3131
<Element>Status</Element>
3232
<Select
33+
aria-label="Filtrer på status"
3334
inputId="status-filter"
3435
placeholder="Filtrer på status"
3536
value={value}

‎src/components/pagination-bar/pagination-bar.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ export function PaginationBar() {
4949
<div className="pagination-bar">
5050
<div>
5151
<Show if={hasData(brukereFetcher)}>
52-
<Element>
52+
<Element aria-live="polite">
5353
Viser {fraBruker}-{tilBruker} av totalt {totaltBrukere} brukere
5454
</Element>
5555
</Show>
@@ -67,7 +67,7 @@ export function PaginationBar() {
6767
<PagineringKnapp aria-label="Første side" onClick={() => handlePageChanged(1)}>1</PagineringKnapp>
6868
</Show>
6969

70-
<PagineringKnapp aria-label="Valgt side">
70+
<PagineringKnapp aria-live="polite" aria-label="Valgt side">
7171
<strong>{currentPage}</strong>
7272
</PagineringKnapp>
7373

‎src/components/user-table/body/user-table-body.less‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@
2222
display: grid;
2323
.column-template();
2424
justify-items: start;
25-
padding: 1.5rem 2rem;
25+
padding: 1rem 2rem;
2626
cursor: pointer;
2727
text-align: center;
2828
align-items: end;

‎src/components/user-table/body/user-table-body.tsx‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -11,8 +11,8 @@ interface UserTableBodyProps {
1111

1212
export const UserTableBody = (props: UserTableBodyProps) => {
1313
return (
14-
<ul className="user-table-body">
15-
{props.brukere.map((bruker, idx) => <UserRow bruker={bruker} aktivEnhet={props.aktivEnhet} key={idx} />)}
16-
</ul>
14+
<div role="rowgroup" className="user-table-body">
15+
{props.brukere.map((bruker, idx) => <UserRow idx={idx} bruker={bruker} aktivEnhet={props.aktivEnhet} key={idx} />)}
16+
</div>
1717
);
1818
};

‎src/components/user-table/body/user-table-row.tsx‎

Lines changed: 11 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -10,7 +10,7 @@ import trengerTilbakemeldingIcon from './status/trenger_tilbakemelding.svg';
1010
import venterPaResponsIcon from './status/venter_pa_respons.svg';
1111
import { OrNothing } from '../../../utils/types/ornothing';
1212

13-
export const UserRow = (props: { bruker: Bruker, aktivEnhet: OrNothing<string> }) => {
13+
export const UserRow = (props: { idx: number, bruker: Bruker, aktivEnhet: OrNothing<string> }) => {
1414
const {
1515
brukerFnr, brukerFornavn, brukerEtternavn, statusEndret,
1616
brukerOppfolgingsenhetNavn, vedtakStartet,
@@ -31,18 +31,18 @@ export const UserRow = (props: { bruker: Bruker, aktivEnhet: OrNothing<string> }
3131
const alignStart: CSSProperties = { textAlign: 'start' };
3232

3333
return (
34-
<li className="user-table-row">
34+
<div role="row" aria-rowindex={props.idx} className="user-table-row">
3535
<a className={cls('user-table-row__innhold', {'user-table-row__innhold--maskert': erMaskert})} href={lagBrukerUrl()}>
36-
<Normaltekst style={alignStart}>{lagBrukerNavn(brukerFornavn, brukerEtternavn)}</Normaltekst>
37-
<Element>{brukerFnr}</Element>
38-
<Normaltekst>{formatDateStr(vedtakStartet)}</Normaltekst>
36+
<Normaltekst tag="span" role="cell" style={alignStart}>{lagBrukerNavn(brukerFornavn, brukerEtternavn)}</Normaltekst>
37+
<Element tag="span" role="cell">{brukerFnr}</Element>
38+
<Normaltekst tag="span" role="cell">{formatDateStr(vedtakStartet)}</Normaltekst>
3939
<UtkastStatusData status={status}/>
40-
<Element style={alignStart}>{beslutterNavn || '-'}</Element>
41-
<Normaltekst style={alignStart}>{veilederNavn}</Normaltekst>
42-
<Normaltekst>{formatDateTime(statusEndret)}</Normaltekst>
43-
<Normaltekst>{fjernNavFraEnhetNavn(brukerOppfolgingsenhetNavn)}</Normaltekst>
40+
<Element tag="span" role="cell" style={alignStart}>{beslutterNavn || '-'}</Element>
41+
<Normaltekst tag="span" role="cell" style={alignStart}>{veilederNavn}</Normaltekst>
42+
<Normaltekst tag="span" role="cell">{formatDateTime(statusEndret)}</Normaltekst>
43+
<Normaltekst tag="span" role="cell">{fjernNavFraEnhetNavn(brukerOppfolgingsenhetNavn)}</Normaltekst>
4444
</a>
45-
</li>
45+
</div>
4646
);
4747
};
4848

@@ -65,7 +65,7 @@ const UtkastStatusData = (props: { status: UtkastStatus }) => {
6565
}
6666

6767
return (
68-
<span className={'status'}>
68+
<span role="cell" className={'status'}>
6969
<img className={'status_ikon'} src={statusIkon} alt={'status ikon'}/>
7070
<Normaltekst>{mapBrukerStatusTilTekst(props.status)}</Normaltekst>
7171
</span>

‎src/components/user-table/header/user-table-header.tsx‎

Lines changed: 17 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,6 @@
11
import React from 'react';
22
import cls from 'classnames';
3-
import {
4-
INITIAL_DIRECTION,
5-
OnOrderByChanged,
6-
OrderByData,
7-
toggleOrderByDirection
8-
} from '../table-utils';
3+
import { INITIAL_DIRECTION, OnOrderByChanged, OrderByData, toggleOrderByDirection } from '../table-utils';
94
import Show from '../../felles/show';
105
import arrowDownIcon from './arrow-down.svg';
116
import './user-table-header.less';
@@ -33,15 +28,17 @@ export const UserTableHeader = (props: UserTableHeaderProps) => {
3328
}
3429

3530
return (
36-
<div className="user-table-header">
37-
<HeaderField name={HeaderFieldName.BRUKER_ETTERNAVN} text="Etternavn, Fornavn" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
38-
<HeaderField name={HeaderFieldName.BRUKER_FNR} text="Fødselsnummer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
39-
<HeaderField name={HeaderFieldName.VEDTAK_STARTET} text="Vedtak startet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
40-
<HeaderField name={HeaderFieldName.STATUS} text="Status" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
41-
<HeaderField name={HeaderFieldName.BESLUTTER_NAVN} text="Kvalitetssikrer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
42-
<HeaderField name={HeaderFieldName.VEILEDER_NAVN} text="Veileder" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
43-
<HeaderField name={HeaderFieldName.STATUS_ENDRET} text="Status endret" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
44-
<HeaderField name={HeaderFieldName.BRUKER_OPPFOLGINGSENHET_NAVN} text="Enhet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
31+
<div role="rowgroup">
32+
<div role="row" className="user-table-header">
33+
<HeaderField name={HeaderFieldName.BRUKER_ETTERNAVN} text="Etternavn, Fornavn" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
34+
<HeaderField name={HeaderFieldName.BRUKER_FNR} text="Fødselsnummer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
35+
<HeaderField name={HeaderFieldName.VEDTAK_STARTET} text="Vedtak startet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
36+
<HeaderField name={HeaderFieldName.STATUS} text="Status" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
37+
<HeaderField name={HeaderFieldName.BESLUTTER_NAVN} text="Kvalitetssikrer" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
38+
<HeaderField name={HeaderFieldName.VEILEDER_NAVN} text="Veileder" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
39+
<HeaderField name={HeaderFieldName.STATUS_ENDRET} text="Status endret" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
40+
<HeaderField name={HeaderFieldName.BRUKER_OPPFOLGINGSENHET_NAVN} text="Enhet" orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
41+
</div>
4542
</div>
4643
);
4744
};
@@ -60,8 +57,12 @@ const HeaderField = (props: HeaderFieldProps) => {
6057
'table-header-field__order-icon--asc': orderByData.direction === OrderByDirection.ASC
6158
});
6259

60+
const ariaSort = name === orderByData.field && orderByData.direction
61+
? (orderByData.direction === OrderByDirection.ASC ? 'ascending' : 'descending')
62+
: 'none';
63+
6364
return (
64-
<button onClick={() => onOrderByChanged(name)} className="table-header-field">
65+
<button role="columnheader" aria-sort={ariaSort} onClick={() => onOrderByChanged(name)} className="table-header-field">
6566
{text}
6667
<Show if={orderByData.field === name && orderByData.direction !== undefined}>
6768
<img className={iconClasses} src={arrowDownIcon} alt={alt} />

‎src/components/user-table/user-table.less‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,8 @@
22

33
.user-table {
44
width: 100%;
5+
min-width: 950px;
6+
overflow-x: auto;
57

68
&__no-users {
79
margin: 2rem auto 0 auto;

‎src/components/user-table/user-table.tsx‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -26,21 +26,20 @@ export const UserTable = () => {
2626
}
2727

2828
return (
29-
<section className="user-table">
29+
<div role="table" aria-label="Brukere som trenger kvalitetssikring" aria-rowcount={tableBrukere.length} className="user-table">
3030
<UserTableHeader orderByData={orderByData} onOrderByChanged={handleOnOrderByChanged} />
3131
<Show if={isNotStartedOrPending(brukereFetcher)}>
3232
<Spinner />
3333
</Show>
34-
3534
{
3635
tableBrukere.length === 0 && hasFinished(brukereFetcher)
3736
? (
3837
<AlertStripeInfo className="user-table__no-users">
39-
Fant ingen brukere
38+
<span role="alert" aria-live="polite">Fant ingen brukere</span>
4039
</AlertStripeInfo>
4140
)
4241
: <UserTableBody brukere={tableBrukere} aktivEnhet={aktivEnhet} />
4342
}
44-
</section>
43+
</div>
4544
);
4645
};

‎src/hovedside/hovedside.less‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44
flex-direction: column;
55

66
&__table {
7+
max-width: 1900px;
78
margin: 2rem 2.5rem;
89
}
910

0 commit comments

Comments
 (0)