Fix/better-landmarks (#3595)

* remove aside element as it becomes redundant with the nav landmark within it

* removes skiplink from landmarks as it is not itself a landmark

* removes "navigation" from text since it becomes redundant with screenreader on nav

* change wording of form navigation text

* remove redundand aria-label

* update navbar test

* make sidebarnavigation use a nav landmark as wrapper

* move skiplink into header for party-selection

Author: Magnusrm

src/components/LandmarkShortcuts.tsx

@@ -27,7 +27,7 @@ export function LandmarkShortcuts({ shortcuts }: ILandmarkShortcutsProps) {
   };
 
   return (
-    <nav aria-label='Til hovedinnhold'>
+    <div>
       {shortcuts.map((shortcut) => (
         <button
           key={shortcut.id}
@@ -38,6 +38,6 @@ export function LandmarkShortcuts({ shortcuts }: ILandmarkShortcutsProps) {
           {shortcut.text}
         </button>
       ))}
-    </nav>
+    </div>
   );
 }

src/components/presentation/NavBar.test.tsx

@@ -31,7 +31,7 @@ describe('NavBar', () => {
     await render({
       hideCloseButton: true,
     });
-    screen.getByRole('navigation', { name: /Appnavigasjon/i });
+    screen.getByRole('navigation', { name: /Overordnet/i });
   });
 
   it('should render close button', async () => {

src/features/instantiate/instantiateHeader/InstantiateHeader.tsx

@@ -22,15 +22,15 @@ export const InstantiateHeader = ({ profile }: InstantiateHeaderProps) => {
       className={classes.appBarWrapper}
       data-testid='InstantiateHeader'
     >
-      <LandmarkShortcuts
-        shortcuts={[
-          {
-            id: 'main-content',
-            text: <Lang id='navigation.to_main_content' />,
-          },
-        ]}
-      />
       <header className={classes.appBar}>
+        <LandmarkShortcuts
+          shortcuts={[
+            {
+              id: 'main-content',
+              text: <Lang id='navigation.to_main_content' />,
+            },
+          ]}
+        />
         <AltinnLogo
           color={LogoColor.blueDark}
           className={classes.logo}

src/features/navigation/SidebarNavigation.module.css

@@ -1,4 +1,4 @@
-.sidebar-container {
+.sidebarContainer {
   --max-sidebar-width: 320px;
 
   position: absolute;

src/features/navigation/SidebarNavigation.tsx

@@ -16,11 +16,12 @@ export function SideBarNavigation() {
   }
 
   return (
-    <aside className={classes.sidebarContainer}>
+    <nav
+      className={classes.sidebarContainer}
+      aria-labelledby={appNavigationHeadingId}
+    >
       <AppNavigationHeading />
-      <nav aria-labelledby={appNavigationHeadingId}>
-        <AppNavigation />
-      </nav>
-    </aside>
+      <AppNavigation />
+    </nav>
   );
 }

src/language/texts/en.ts

@@ -114,8 +114,8 @@ export function en() {
     'form_filler.person_lookup_name': 'name',
     'form_filler.organisation_lookup_orgnr': 'organisation number',
     'form_filler.organisation_lookup_name': 'organisation name',
-    'navigation.main': 'App navigation',
-    'navigation.form': 'Form navigation',
+    'navigation.main': 'Primary',
+    'navigation.form': 'Form pages',
     'navigation.to_main_content': 'Go to main content',
     'navigation.go_to_task': 'Navigate to {0}',
     'navigation.form_pages': 'Form pages',

src/language/texts/nb.ts

@@ -115,8 +115,8 @@ export function nb() {
     'form_filler.person_lookup_name': 'navn',
     'form_filler.organisation_lookup_orgnr': 'organisasjonsnummer',
     'form_filler.organisation_lookup_name': 'organisasjonsnavn',
-    'navigation.main': 'Appnavigasjon',
-    'navigation.form': 'Skjemanavigasjon',
+    'navigation.main': 'Overordnet',
+    'navigation.form': 'Skjemasider',
     'navigation.to_main_content': 'Hopp til hovedinnholdet',
     'navigation.go_to_task': 'Gå til {0}',
     'navigation.form_pages': 'Skjemasider',

src/language/texts/nn.ts

@@ -115,8 +115,8 @@ export function nn() {
     'form_filler.person_lookup_name': 'namn',
     'form_filler.organisation_lookup_orgnr': 'organisasjonsnummer',
     'form_filler.organisation_lookup_name': 'organisasjonsnamn',
-    'navigation.main': 'Appnavigasjon',
-    'navigation.form': 'Skjemanavigasjon',
+    'navigation.main': 'Overordnet',
+    'navigation.form': 'Skjemasider',
     'navigation.to_main_content': 'Hopp til hovedinnholdet',
     'navigation.go_to_task': 'Gå til {0}',
     'navigation.form_pages': 'Skjemasider',