feat: improve semantic nav/main tags (#17800)

feat: nav/main elements

Co-authored-by: Alex <alex.tran1502@gmail.com>

web/src/lib/components/layouts/user-page-layout.svelte

@@ -49,7 +49,7 @@
 
   {@render header?.()}
 </header>
-<main
+<div
   tabindex="-1"
   class="relative grid h-dvh grid-cols-[theme(spacing.0)_auto] overflow-hidden bg-immich-bg max-md:pt-[var(--navbar-height-md)] pt-[var(--navbar-height)] dark:bg-immich-dark-bg sidebar:grid-cols-[theme(spacing.64)_auto]"
 >
@@ -59,7 +59,7 @@
     <SideBar />
   {/if}
 
-  <section class="relative">
+  <main class="relative">
     {#if title || buttons}
       <div
         class="absolute flex h-16 w-full place-items-center justify-between border-b p-2 dark:border-immich-dark-gray dark:text-immich-dark-fg"
@@ -79,5 +79,5 @@
     <div class="{scrollbarClass} absolute {hasTitleClass} w-full overflow-y-auto" use:useActions={use}>
       {@render children?.()}
     </div>
-  </section>
+  </main>
-</main>
+</div>

web/src/lib/components/shared-components/control-app-bar.svelte

@@ -67,7 +67,7 @@
 </script>
 
 <div in:fly={{ y: 10, duration: 200 }} class="absolute top-0 w-full z-[100] bg-transparent">
-  <div
+  <nav
     id="asset-selection-app-bar"
     class={[
       'grid',
@@ -94,5 +94,5 @@
     <div class="me-4 flex place-items-center gap-1 justify-self-end">
       {@render trailing?.()}
     </div>
-  </div>
+  </nav>
 </div>

web/src/lib/components/shared-components/navigation-bar/navigation-bar.svelte

@@ -55,7 +55,7 @@
   <HelpAndFeedbackModal onClose={() => (shouldShowHelpPanel = false)} {info} />
 {/if}
 
-<section
+<nav
   id="dashboard-navbar"
   class="fixed z-[900] max-md:h-[var(--navbar-height-md)] h-[var(--navbar-height)] w-dvw text-sm"
 >
@@ -209,4 +209,4 @@
       </section>
     </div>
   </div>
-</section>
+</nav>

web/src/lib/components/shared-components/side-bar/admin-side-bar.svelte

@@ -7,14 +7,12 @@
   import { t } from 'svelte-i18n';
 </script>
 
-<SideBarSection>
+<SideBarSection ariaLabel={$t('primary')}>
-  <nav aria-label={$t('primary')}>
   <SideBarLink title={$t('users')} routeId={AppRoute.ADMIN_USER_MANAGEMENT} icon={mdiAccountMultipleOutline} />
   <SideBarLink title={$t('jobs')} routeId={AppRoute.ADMIN_JOBS} icon={mdiSync} />
   <SideBarLink title={$t('settings')} routeId={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
   <SideBarLink title={$t('external_libraries')} routeId={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
   <SideBarLink title={$t('server_stats')} routeId={AppRoute.ADMIN_STATS} icon={mdiServer} />
-  </nav>
 
   <BottomInfo />
 </SideBarSection>

web/src/lib/components/shared-components/side-bar/side-bar-section.svelte

@@ -7,10 +7,11 @@
   import { onMount, type Snippet } from 'svelte';
 
   interface Props {
+    ariaLabel?: string;
     children?: Snippet;
   }
 
-  let { children }: Props = $props();
+  let { ariaLabel, children }: Props = $props();
 
   const isHidden = $derived(!sidebarStore.isOpen && !mobileDevice.isFullSidebar);
   const isExpanded = $derived(sidebarStore.isOpen && !mobileDevice.isFullSidebar);
@@ -30,8 +31,9 @@
   };
 </script>
 
-<section
+<nav
   id="sidebar"
+  aria-label={ariaLabel}
   tabindex="-1"
   class="immich-scrollbar relative z-10 w-0 sidebar:w-[16rem] overflow-y-auto overflow-x-hidden bg-immich-bg pt-8 transition-all duration-200 dark:bg-immich-dark-bg"
   class:shadow-2xl={isExpanded}
@@ -46,4 +48,4 @@
   <div class="pe-6 flex flex-col gap-1 h-max min-h-full">
     {@render children?.()}
   </div>
-</section>
+</nav>

web/src/lib/components/shared-components/side-bar/side-bar.svelte

@@ -42,8 +42,7 @@
   let isUtilitiesSelected: boolean = $state(false);
 </script>
 
-<SideBarSection>
+<SideBarSection ariaLabel={$t('primary')}>
-  <nav aria-label={$t('primary')}>
   <SideBarLink
     title={$t('photos')}
     routeId="/(user)/photos"
@@ -137,7 +136,6 @@
       icon={isTrashSelected ? mdiTrashCan : mdiTrashCanOutline}
     ></SideBarLink>
   {/if}
-  </nav>
 
   <BottomInfo />
 </SideBarSection>