fix: missing aria label in nav elements

apps/ui/locales/en.json

@@ -33,6 +33,14 @@
     "moreInformation": "More information",
     "bestValue": "Best value"
   },
+  "landmarks": {
+    "main": "Main",
+    "blogCategories": "Blog categories",
+    "tableOfContents": "On this page",
+    "pageContents": "On this page",
+    "footerSection": "Footer: {title}",
+    "footerIndexed": "Footer {index}"
+  },
   "plans": {
     "planFeatureCategory": {
       "cloud": "Cloud",

apps/ui/src/app/[locale]/dev/component-library/page.tsx

@@ -1,4 +1,5 @@
 import type { Data } from "@repo/strapi-types"
+import { useTranslations } from "next-intl"
 
 import { BlogPostHeader } from "@/components/blog/BlogPostHeader"
 import { AppLink } from "@/components/elementary/AppLink"
@@ -1130,11 +1131,13 @@ const newsListMockItems: readonly PopulatedNewsItem[] = [
 // ---------------------------------------------------------------------------
 
 export default function ComponentLibraryPage() {
+  const t = useTranslations("landmarks")
+
   return (
     <div className="space-y-16">
       <div>
         <h1 className="mb-4 text-3xl font-bold">Component Library</h1>
-        <nav className="flex flex-wrap gap-2">
+        <nav aria-label={t("pageContents")} className="flex flex-wrap gap-2">
           {TOC.map(({ id, label }) => (
             <a
               key={id}

apps/ui/src/components/blog/BlogNavbar.tsx

@@ -1,4 +1,5 @@
 import type { Locale } from "next-intl"
+import { getTranslations } from "next-intl/server"
 
 import {
   getBlogNewsletterHubspot,
@@ -10,6 +11,7 @@ import { BlogNavbarTabs } from "./BlogNavbarTabs"
 import { BlogNewsletterPopover } from "./BlogNewsletterPopover"
 
 export async function BlogNavbar({ locale }: { readonly locale: Locale }) {
+  const t = await getTranslations("landmarks")
   const response = await fetchBlog(locale)
   const data = response?.data
 
@@ -22,7 +24,10 @@ export async function BlogNavbar({ locale }: { readonly locale: Locale }) {
   const hubspotForm = getBlogNewsletterHubspot(response)
 
   return (
-    <nav className="border-strapi-neutral-800 px-4 py-3 sm:px-6 sm:py-4 lg:border-b">
+    <nav
+      aria-label={t("blogCategories")}
+      className="border-strapi-neutral-800 px-4 py-3 sm:px-6 sm:py-4 lg:border-b"
+    >
       <div className="flex items-center justify-between gap-3">
         <BlogNavbarTabs categories={categories} />
 

apps/ui/src/components/blog/BlogTableOfContents.tsx

@@ -1,5 +1,6 @@
 "use client"
 
+import { useTranslations } from "next-intl"
 import { useCallback, useEffect, useMemo, useRef, useState } from "react"
 
 import type { TocHeading } from "@/lib/blog-utils"
@@ -30,6 +31,7 @@ export function BlogTableOfContents({
 }: {
   readonly headings: TocHeading[]
 }) {
+  const t = useTranslations("landmarks")
   const [activeId, setActiveId] = useState<string | null>(null)
   const [offset, setOffset] = useState(TOC_OFFSET_FALLBACK)
   const rafRef = useRef(0)
@@ -138,7 +140,11 @@ export function BlogTableOfContents({
   }
 
   return (
-    <nav className="sticky" style={{ top: offset }}>
+    <nav
+      aria-label={t("tableOfContents")}
+      className="sticky"
+      style={{ top: offset }}
+    >
       <ul className="flex list-none flex-col gap-2">
         {h2Headings.map((heading) => (
           <li key={heading.id}>

apps/ui/src/components/page-builder/components/navigation/navbar/StrapiNavbar.tsx

@@ -1,4 +1,5 @@
 import type { Data } from "@repo/strapi-types"
+import { getTranslations } from "next-intl/server"
 
 import { Container } from "@/components/elementary/Container"
 import { fetchGithubStars } from "@/lib/github"
@@ -12,6 +13,7 @@ export async function StrapiNavbar({
 }: {
   readonly component: Data.Component<"navigation.navbar">
 }) {
+  const t = await getTranslations("landmarks")
   const githubUrl = component.githubUrl
   const githubStars =
     component.githubStars && githubUrl
@@ -20,6 +22,7 @@ export async function StrapiNavbar({
 
   return (
     <nav
+      aria-label={t("main")}
       data-navbar
       className={cn(
         "relative sticky top-0 z-40 flex h-16 w-full items-center",

apps/ui/src/components/page-builder/single-types/footer/StrapiFooterMain.tsx

@@ -1,5 +1,6 @@
 import type { Data } from "@repo/strapi-types"
 import Image from "next/image"
+import { useTranslations } from "next-intl"
 import { Fragment } from "react"
 
 import { Container } from "@/components/elementary/Container"
@@ -14,6 +15,7 @@ export function StrapiFooterMain({
 }: {
   readonly component: Data.Component<"footer.footer-main">
 }) {
+  const t = useTranslations("landmarks")
   const copyRight = component.copyRight?.replace?.(
     "{YEAR}",
     new Date().getFullYear().toString()
@@ -51,26 +53,36 @@ export function StrapiFooterMain({
             )}
           </div>
 
-          {component.sections?.map((section) => (
-            <div className="flex flex-col gap-6 sm:gap-8" key={section.id}>
-              <p className="text-base font-semibold uppercase">
-                {section.title}
-              </p>
+          {component.sections?.map((section, index) => {
+            const title = section.title?.trim()
 
-              <nav>
-                <ul className="flex list-none flex-col gap-3 leading-none">
-                  {section.links?.map((link) => (
-                    <li key={link.id}>
-                      <StrapiLinkText
-                        component={link}
-                        className="text-strapi-neutral-700 animate-spring-sm inline-block text-sm leading-[1.2]"
-                      />
-                    </li>
-                  ))}
-                </ul>
-              </nav>
-            </div>
-          ))}
+            return (
+              <div className="flex flex-col gap-6 sm:gap-8" key={section.id}>
+                <p className="text-base font-semibold uppercase">
+                  {section.title}
+                </p>
+
+                <nav
+                  aria-label={
+                    title
+                      ? t("footerSection", { title })
+                      : t("footerIndexed", { index: index + 1 })
+                  }
+                >
+                  <ul className="flex list-none flex-col gap-3 leading-none">
+                    {section.links?.map((link) => (
+                      <li key={link.id}>
+                        <StrapiLinkText
+                          component={link}
+                          className="text-strapi-neutral-700 animate-spring-sm inline-block text-sm leading-[1.2]"
+                        />
+                      </li>
+                    ))}
+                  </ul>
+                </nav>
+              </div>
+            )
+          })}
         </div>
 
         <div className="border-border flex flex-col-reverse gap-4 border-t pt-8 text-sm md:flex-row md:items-center md:justify-between">