Skip to content

UU: section/nav opprydding #2318

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 3 commits into from
Jun 10, 2025
Merged

UU: section/nav opprydding #2318

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
664478b
nav -> section
PerOlavM Jun 3, 2025
38de064
aria-justeringer sections
PerOlavM Jun 3, 2025
1359190
aria-justeringer sections (2) + analytics-justeringer
PerOlavM Jun 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 2 additions & 10 deletions packages/nextjs/src/components/_common/lenkeliste/Lenkeliste.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,6 @@ import { LinkProps } from 'types/link-props';
import { LenkeStandalone } from 'components/_common/lenke/lenkeStandalone/LenkeStandalone';
import { EditorHelp } from 'components/_editor-only/editorHelp/EditorHelp';
import { classNames } from 'utils/classnames';
import { usePageContentProps } from 'store/pageContext';
import { translator } from 'translations';

import style from './Lenkeliste.module.scss';

Expand All @@ -25,20 +23,14 @@ type Props = {
};

export const Lenkeliste = ({ tittel, lenker, listType, className }: Props) => {
const { language } = usePageContentProps();
const getLabel = translator('linkList', language);
const headingId = `heading-linklist-${useId()}`;

if (!lenker || lenker.length === 0) {
return <EditorHelp text={'Tom lenkeliste'} />;
}

return (
<nav
className={classNames(className, style.lenker)}
aria-labelledby={tittel ? headingId : undefined}
aria-label={tittel ? undefined : getLabel('label')}
>
<section className={classNames(className, style.lenker)}>
{tittel && (
<Heading className={style.tittel} id={headingId} size="small" level="2">
{tittel}
Expand All @@ -60,6 +52,6 @@ export const Lenkeliste = ({ tittel, lenker, listType, className }: Props) => {
</WrapLI>
))}
</WrapUL>
</nav>
</section>
);
};
45 changes: 21 additions & 24 deletions .../nextjs/src/components/_common/overview-filters/OverViewFilterBase/OverviewFilterBase.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -29,36 +29,33 @@ export const OverviewFilterBase = <Type extends FilterOptions>({
options,
}: Props<Type>) => {
const { language } = usePageContentProps();

const translations = translator('overview', language)(type);
const optionsTranslations = translator(type, language) as (key: Type) => string;

return (
<div className={styles.overviewFilter}>
<section className={styles.overviewFilter}>
<Heading size={'xsmall'} level={'3'}>
{translations['choose']}
</Heading>
<nav aria-label={translations['ariaExplanation']}>
<Chips className={styles.filterWrapper}>
{options.map((option) => {
const optionLabel = optionsTranslations(option);

return (
<Chips.Toggle
type={'button'}
onClick={() => selectionCallback(option)}
aria-label={`${translations['ariaItemExplanation']} ${optionLabel}`}
className={styles.filterButton}
checkmark={false}
selected={selected === option}
key={option}
>
{optionLabel}
</Chips.Toggle>
);
})}
</Chips>
</nav>
</div>
<Chips className={styles.filterWrapper}>
{options.map((option) => {
const optionLabel = optionsTranslations(option);

return (
<Chips.Toggle
type={'button'}
onClick={() => selectionCallback(option)}
aria-label={`${translations['ariaItemExplanation']} ${optionLabel}`}
className={styles.filterButton}
checkmark={false}
selected={selected === option}
key={option}
>
{optionLabel}
</Chips.Toggle>
);
})}
</Chips>
</section>
);
};
4 changes: 2 additions & 2 deletions packages/nextjs/src/components/_common/relatedSituations/RelatedSituations.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,14 +37,14 @@ export const RelatedSituations = ({ relatedSituations, title, description }: Pro
<section
className={classNames(style.relatedSituations, editorView === 'edit' && style.noMargin)}
id={getAnchorId(actualTitle)}
aria-label={actualTitle || actualDescription}
aria-describedby="related-situations-description"
>
{actualTitle && (
<Heading level="3" size="medium" spacing>
{actualTitle}
</Heading>
)}
<BodyLong className={style.description}>
<BodyLong className={style.description} id="related-situations-description">
{actualDescription}
</BodyLong>
<ul className={style.situationsList}>
Expand Down
66 changes: 31 additions & 35 deletions packages/nextjs/src/components/layouts/index-page/front-page/FrontPageAreaNavigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,53 +34,49 @@ type Props = {

export const FrontPageAreaNavigation = ({ content }: Props) => {
const { areasHeader, navigationRefs = [] } = content.data;

const audience = getAudience(content.data.audience);

const cardType = audienceCardType[audience];

return (
<div className={classNames(style.wrapper, audience && style[audience])}>
<section className={classNames(style.wrapper, audience && style[audience])}>
<Heading level={'2'} size={'large'} className={style.header}>
{areasHeader}
</Heading>
<nav aria-label="Velg område">
<ul
className={classNames(
style.cards,
navigationRefs.length === 2 ? style.twocols : style.threecols
)}
>
{navigationRefs.map((page) => {
if (page.type === ContentType.AreaPage) {
return (
<li key={page._id}>
<AreaCard
path={page._path}
title={page.data.header}
area={page.data.area}
linkGroup={areasHeader}
/>
</li>
);
}

const illustration = getIllustrationFromProps(page);

<ul
className={classNames(
style.cards,
navigationRefs.length === 2 ? style.twocols : style.threecols
)}
>
{navigationRefs.map((page) => {
if (page.type === ContentType.AreaPage) {
return (
<li key={page._id}>
<FrontPageCard
illustration={illustration}
<AreaCard
path={page._path}
title={page.data?.title || page.displayName}
type={cardType}
tryFallbackIllustration={!illustration}
title={page.data.header}
area={page.data.area}
linkGroup={areasHeader}
/>
</li>
);
})}
</ul>
</nav>
</div>
}

const illustration = getIllustrationFromProps(page);

return (
<li key={page._id}>
<FrontPageCard
illustration={illustration}
path={page._path}
title={page.data?.title || page.displayName}
type={cardType}
tryFallbackIllustration={!illustration}
/>
</li>
);
})}
</ul>
</section>
);
};
4 changes: 2 additions & 2 deletions packages/nextjs/src/components/parts/filters-menu/FiltersMenuPart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -101,13 +101,13 @@ export const FiltersMenuPart = ({ config, path }: PartComponentProps<PartType.Fi
const defaultExpandableTitle = getLabel('customizeContent');

return (
<section className={style.filtersMenu} aria-describedby="description">
<section className={style.filtersMenu} aria-describedby="filters-menu-description">
{title && (
<Heading level="2" size="large">
{title}
</Heading>
)}
<BodyLong className={style.introduction} id="description">
<BodyLong className={style.introduction} id="filters-menu-description">
{description || ''}
</BodyLong>
<ExpandableComponentWrapper
Expand Down
40 changes: 17 additions & 23 deletions ...s/nextjs/src/components/parts/frontpage-person-shortcuts/FrontpagePersonShortcutsPart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,6 @@ import {
TasklistStartIcon,
WalletIcon,
} from '@navikt/aksel-icons';
import { translator } from 'translations';
import { usePageContentProps } from 'store/pageContext';
import { Heading } from 'components/_common/headers/Heading';
import { EditorHelp } from 'components/_editor-only/editorHelp/EditorHelp';
import { PartComponentProps, PartType } from 'types/component-props/parts';
Expand Down Expand Up @@ -35,15 +33,13 @@ export const FrontpagePersonShortcutsPart = ({
config,
}: PartComponentProps<PartType.FrontpagePersonShortcuts>) => {
const { shortcuts, title: sectionTitle } = config;
const { language } = usePageContentProps();

if (!shortcuts || shortcuts.length === 0) {
return <EditorHelp text={'Velg minst en snarvei'} />;
}
const getLabel = translator('frontPage', language);

return (
<section className={style.personShortcuts} aria-label={getLabel('shortcuts')}>
<section className={style.personShortcuts}>
{sectionTitle && (
<Heading size="large" level="2">
{sectionTitle}
Expand All @@ -64,31 +60,29 @@ export const FrontpagePersonShortcutsPart = ({
<LenkeBase
href={href}
className={style.linkPanel}
analyticsComponent="Lenkepanel navno enkel"
analyticsComponent="FrontpagePersonShortcutsPart"
analyticsLinkGroup={sectionTitle}
>
<div className={style.icon}>
{
// Hardkoder ikonene istedenfor å legge de inn i Enonic da det
// kun er her vi bruker ikoner
<>
{href.includes('saksbehandlingstider') && (
<BriefcaseClockIcon title="Koffert med klokke" />
)}
{href.includes('utbetalingsdatoer') && (
<CalendarIcon title="Kalender" />
)}
{href.includes('satser') && (
<WalletIcon title="Lommebok" />
)}
{href.includes('soknader') && (
<TasklistStartIcon title="Oppgaveliste start" />
)}
{href.includes('ettersende') && (
<FolderFileIcon title="Mappefil" />
)}
</>
}
{href.includes('saksbehandlingstider') && (
<BriefcaseClockIcon title="Koffert med klokke" />
)}
{href.includes('utbetalingsdatoer') && (
<CalendarIcon title="Kalender" />
)}
{href.includes('satser') && (
<WalletIcon title="Lommebok" />
)}
{href.includes('soknader') && (
<TasklistStartIcon title="Oppgaveliste start" />
)}
{href.includes('ettersende') && (
<FolderFileIcon title="Mappefil" />
)}
</div>
<span className={style.text}>{title}</span>
</LenkeBase>
Expand Down
9 changes: 3 additions & 6 deletions packages/nextjs/src/components/parts/frontpage-shortcuts/FrontpageShortcutsPart.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,5 +1,4 @@
import React from 'react';
import { translator } from 'translations';
import { Heading } from 'components/_common/headers/Heading';
import { EditorHelp } from 'components/_editor-only/editorHelp/EditorHelp';
import { classNames } from 'utils/classnames';
Expand Down Expand Up @@ -44,13 +43,11 @@ export const FrontpageShortcutsPart = ({
return <EditorHelp text={'Velg minst en snarvei'} />;
}

const language = pageProps.language;
const audience = getAudience(pageProps.data?.audience);
const threeCols = shortcuts.length % 3 === 0;
const getLabel = translator('frontPage', language);

return (
<nav
<section
className={classNames(style.shortcuts, audience && style[audience])}
style={
{
Expand All @@ -59,7 +56,6 @@ export const FrontpageShortcutsPart = ({
'--hover-color': hoverColor,
} as React.CSSProperties
}
aria-label={getLabel('shortcuts')}
>
{sectionTitle && (
<Heading size="large" level="2" className={style.header}>
Expand All @@ -82,6 +78,7 @@ export const FrontpageShortcutsPart = ({
<LinkPanelNavnoSimple
href={href}
analyticsLinkGroup={sectionTitle}
analyticsComponent="FrontpageShortcutsPart"
icon={<IllustrationStatic illustration={illustration} />}
className={classNames(
style.item,
Expand All @@ -94,6 +91,6 @@ export const FrontpageShortcutsPart = ({
);
})}
</ul>
</nav>
</section>
);
};
Loading