From 664478b81678e9c24afcd5a3b7d266189828e7e6 Mon Sep 17 00:00:00 2001
From: perolavm <per.olav.mariussen@nav.no>
Date: Tue, 3 Jun 2025 13:39:26 +0200
Subject: [PATCH 1/3] nav -> section

---
 .../_common/lenkeliste/Lenkeliste.tsx         | 12 +---
 .../OverViewFilterBase/OverviewFilterBase.tsx | 45 ++++++-------
 .../front-page/FrontPageAreaNavigation.tsx    | 66 +++++++++----------
 .../FrontpageShortcutsPart.tsx                |  8 +--
 4 files changed, 56 insertions(+), 75 deletions(-)

diff --git a/packages/nextjs/src/components/_common/lenkeliste/Lenkeliste.tsx b/packages/nextjs/src/components/_common/lenkeliste/Lenkeliste.tsx
index 142478cfb0..d14ab99d19 100644
--- a/packages/nextjs/src/components/_common/lenkeliste/Lenkeliste.tsx
+++ b/packages/nextjs/src/components/_common/lenkeliste/Lenkeliste.tsx
@@ -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';
 
@@ -25,8 +23,6 @@ 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) {
@@ -34,11 +30,7 @@ export const Lenkeliste = ({ tittel, lenker, listType, className }: Props) => {
     }
 
     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}
@@ -60,6 +52,6 @@ export const Lenkeliste = ({ tittel, lenker, listType, className }: Props) => {
                     </WrapLI>
                 ))}
             </WrapUL>
-        </nav>
+        </section>
     );
 };
diff --git a/packages/nextjs/src/components/_common/overview-filters/OverViewFilterBase/OverviewFilterBase.tsx b/packages/nextjs/src/components/_common/overview-filters/OverViewFilterBase/OverviewFilterBase.tsx
index 0b03502f9a..c2d5c3908d 100644
--- a/packages/nextjs/src/components/_common/overview-filters/OverViewFilterBase/OverviewFilterBase.tsx
+++ b/packages/nextjs/src/components/_common/overview-filters/OverViewFilterBase/OverviewFilterBase.tsx
@@ -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>
     );
 };
diff --git a/packages/nextjs/src/components/layouts/index-page/front-page/FrontPageAreaNavigation.tsx b/packages/nextjs/src/components/layouts/index-page/front-page/FrontPageAreaNavigation.tsx
index 6ddb900f50..52db395348 100644
--- a/packages/nextjs/src/components/layouts/index-page/front-page/FrontPageAreaNavigation.tsx
+++ b/packages/nextjs/src/components/layouts/index-page/front-page/FrontPageAreaNavigation.tsx
@@ -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>
     );
 };
diff --git a/packages/nextjs/src/components/parts/frontpage-shortcuts/FrontpageShortcutsPart.tsx b/packages/nextjs/src/components/parts/frontpage-shortcuts/FrontpageShortcutsPart.tsx
index dc07530bea..c3d5063f9f 100644
--- a/packages/nextjs/src/components/parts/frontpage-shortcuts/FrontpageShortcutsPart.tsx
+++ b/packages/nextjs/src/components/parts/frontpage-shortcuts/FrontpageShortcutsPart.tsx
@@ -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';
@@ -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={
                 {
@@ -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}>
@@ -94,6 +90,6 @@ export const FrontpageShortcutsPart = ({
                     );
                 })}
             </ul>
-        </nav>
+        </section>
     );
 };

From 38de06488df9273853a885c0dde334bea9e695c6 Mon Sep 17 00:00:00 2001
From: perolavm <per.olav.mariussen@nav.no>
Date: Tue, 3 Jun 2025 13:52:11 +0200
Subject: [PATCH 2/3] aria-justeringer sections

---
 .../_common/relatedSituations/RelatedSituations.tsx           | 4 ++--
 .../src/components/parts/filters-menu/FiltersMenuPart.tsx     | 4 ++--
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/packages/nextjs/src/components/_common/relatedSituations/RelatedSituations.tsx b/packages/nextjs/src/components/_common/relatedSituations/RelatedSituations.tsx
index eaaf800b5d..7127d14b74 100644
--- a/packages/nextjs/src/components/_common/relatedSituations/RelatedSituations.tsx
+++ b/packages/nextjs/src/components/_common/relatedSituations/RelatedSituations.tsx
@@ -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}>
diff --git a/packages/nextjs/src/components/parts/filters-menu/FiltersMenuPart.tsx b/packages/nextjs/src/components/parts/filters-menu/FiltersMenuPart.tsx
index 3486f55ab3..07493745fa 100644
--- a/packages/nextjs/src/components/parts/filters-menu/FiltersMenuPart.tsx
+++ b/packages/nextjs/src/components/parts/filters-menu/FiltersMenuPart.tsx
@@ -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

From 1359190e94a15aa73ca31b57dadf75d4fc852357 Mon Sep 17 00:00:00 2001
From: perolavm <per.olav.mariussen@nav.no>
Date: Tue, 3 Jun 2025 14:08:35 +0200
Subject: [PATCH 3/3] aria-justeringer sections (2) + analytics-justeringer

---
 .../FrontpagePersonShortcutsPart.tsx          | 40 ++++++++-----------
 .../FrontpageShortcutsPart.tsx                |  1 +
 2 files changed, 18 insertions(+), 23 deletions(-)

diff --git a/packages/nextjs/src/components/parts/frontpage-person-shortcuts/FrontpagePersonShortcutsPart.tsx b/packages/nextjs/src/components/parts/frontpage-person-shortcuts/FrontpagePersonShortcutsPart.tsx
index ecf1223b6a..f51f9466f1 100644
--- a/packages/nextjs/src/components/parts/frontpage-person-shortcuts/FrontpagePersonShortcutsPart.tsx
+++ b/packages/nextjs/src/components/parts/frontpage-person-shortcuts/FrontpagePersonShortcutsPart.tsx
@@ -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';
@@ -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}
@@ -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>
diff --git a/packages/nextjs/src/components/parts/frontpage-shortcuts/FrontpageShortcutsPart.tsx b/packages/nextjs/src/components/parts/frontpage-shortcuts/FrontpageShortcutsPart.tsx
index c3d5063f9f..2c4a604efa 100644
--- a/packages/nextjs/src/components/parts/frontpage-shortcuts/FrontpageShortcutsPart.tsx
+++ b/packages/nextjs/src/components/parts/frontpage-shortcuts/FrontpageShortcutsPart.tsx
@@ -78,6 +78,7 @@ export const FrontpageShortcutsPart = ({
                             <LinkPanelNavnoSimple
                                 href={href}
                                 analyticsLinkGroup={sectionTitle}
+                                analyticsComponent="FrontpageShortcutsPart"
                                 icon={<IllustrationStatic illustration={illustration} />}
                                 className={classNames(
                                     style.item,