From e485be966e15dc2a6b6d4d7c34024779281dcbc7 Mon Sep 17 00:00:00 2001
From: Nicholas Ruffing <nicholasruffing70@gmail.com>
Date: Sun, 21 Jan 2024 13:52:43 -0500
Subject: [PATCH 1/7] feat(theme-default): image alt option and set aria hidden
 on title if same as image alt (close #20)

---
 .../src/client/components/NavbarBrand.vue             | 11 ++++++++++-
 themes/theme-default/src/shared/options.ts            |  8 ++++++++
 2 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/themes/theme-default/src/client/components/NavbarBrand.vue b/themes/theme-default/src/client/components/NavbarBrand.vue
index c28ef229bb..b77a171cab 100644
--- a/themes/theme-default/src/client/components/NavbarBrand.vue
+++ b/themes/theme-default/src/client/components/NavbarBrand.vue
@@ -24,12 +24,20 @@ const navbarBrandLogo = computed(() => {
   }
   return themeLocale.value.logo
 })
+const navbarBrandLogoAlt = computed(
+  () => themeLocale.value.logoAlt ?? navbarBrandTitle.value,
+)
+const navBarLogoAltMatchesTitle = computed(
+  () =>
+    navbarBrandTitle.value.toLocaleUpperCase().trim() ===
+    navbarBrandLogoAlt.value.toLocaleUpperCase().trim(),
+)
 const NavbarBrandLogo: FunctionalComponent = () => {
   if (!navbarBrandLogo.value) return null
   const img = h('img', {
     class: 'logo',
     src: withBase(navbarBrandLogo.value),
-    alt: navbarBrandTitle.value,
+    alt: navbarBrandLogoAlt.value,
   })
   if (themeLocale.value.logoDark === undefined) {
     return img
@@ -48,6 +56,7 @@ const NavbarBrandLogo: FunctionalComponent = () => {
       v-if="navbarBrandTitle"
       class="site-name"
       :class="{ 'can-hide': navbarBrandLogo }"
+      :aria-hidden="navBarLogoAltMatchesTitle"
     >
       {{ navbarBrandTitle }}
     </span>
diff --git a/themes/theme-default/src/shared/options.ts b/themes/theme-default/src/shared/options.ts
index 49c2c7d73c..dfd1434a68 100644
--- a/themes/theme-default/src/shared/options.ts
+++ b/themes/theme-default/src/shared/options.ts
@@ -98,6 +98,14 @@ export interface DefaultThemeLocaleData extends LocaleData {
    */
   logoDark?: null | string
 
+  /**
+   * The alt text of navbar logo.
+   * Defaults to the site title if not specified.
+   * If the value is the same as the site title and the site title is displayed (i.e not mobile)
+   * the alt attribute will still be rendered but with an empty value to not be read twice by screen readers.
+   */
+  logoAlt?: null | string
+
   /**
    * Navbar repository config
    *

From a68600f4378a37d5173b5e0799afe9817f55c029 Mon Sep 17 00:00:00 2001
From: Nicholas Ruffing <nicholasruffing70@gmail.com>
Date: Sun, 21 Jan 2024 14:24:14 -0500
Subject: [PATCH 2/7] feat(theme-default): add labels to differ nav landmarks
 (close #21)

---
 themes/theme-default/src/client/components/NavbarItems.vue | 6 +++++-
 themes/theme-default/src/client/components/PageNav.vue     | 6 +++++-
 2 files changed, 10 insertions(+), 2 deletions(-)

diff --git a/themes/theme-default/src/client/components/NavbarItems.vue b/themes/theme-default/src/client/components/NavbarItems.vue
index 5965ee5f85..221664201b 100644
--- a/themes/theme-default/src/client/components/NavbarItems.vue
+++ b/themes/theme-default/src/client/components/NavbarItems.vue
@@ -176,7 +176,11 @@ useUpdateDeviceStatus(
 </script>
 
 <template>
-  <nav v-if="navbarLinks.length" class="navbar-items">
+  <nav
+    v-if="navbarLinks.length"
+    class="navbar-items"
+    aria-label="site navigation"
+  >
     <div v-for="item in navbarLinks" :key="item.text" class="navbar-item">
       <NavbarDropdown
         v-if="item.children"
diff --git a/themes/theme-default/src/client/components/PageNav.vue b/themes/theme-default/src/client/components/PageNav.vue
index 4e416b7c74..adee2bcb78 100644
--- a/themes/theme-default/src/client/components/PageNav.vue
+++ b/themes/theme-default/src/client/components/PageNav.vue
@@ -89,7 +89,11 @@ const nextNavLink = computed(() => {
 </script>
 
 <template>
-  <nav v-if="prevNavLink || nextNavLink" class="page-nav">
+  <nav
+    v-if="prevNavLink || nextNavLink"
+    class="page-nav"
+    aria-label="page navigation"
+  >
     <p class="inner">
       <span v-if="prevNavLink" class="prev">
         <AutoLink :item="prevNavLink" />

From 9047b0fd416db16b15840ea91f97fe6d4b3c466d Mon Sep 17 00:00:00 2001
From: Nicholas Ruffing <nicholasruffing70@gmail.com>
Date: Sat, 27 Jan 2024 10:36:44 -0500
Subject: [PATCH 3/7] feat(theme-default): allow nav labels to be set per
 language (closes: 21)

---
 .../src/client/components/NavbarItems.vue             | 11 ++++++-----
 .../theme-default/src/client/components/PageNav.vue   |  9 +++++++--
 themes/theme-default/src/shared/options.ts            | 10 ++++++++++
 3 files changed, 23 insertions(+), 7 deletions(-)

diff --git a/themes/theme-default/src/client/components/NavbarItems.vue b/themes/theme-default/src/client/components/NavbarItems.vue
index 0ab36adb14..7e60e4ed7f 100644
--- a/themes/theme-default/src/client/components/NavbarItems.vue
+++ b/themes/theme-default/src/client/components/NavbarItems.vue
@@ -178,14 +178,15 @@ useUpdateDeviceStatus(
     }
   },
 )
+
+const navbarLabel = computed(() => {
+  const themeLocale = useThemeLocaleData()
+  return themeLocale.value.navbarLabel ?? 'site navigation'
+})
 </script>
 
 <template>
-  <nav
-    v-if="navbarLinks.length"
-    class="navbar-items"
-    aria-label="site navigation"
-  >
+  <nav v-if="navbarLinks.length" class="navbar-items" :aria-label="navbarLabel">
     <div v-for="item in navbarLinks" :key="item.text" class="navbar-item">
       <NavbarDropdown
         v-if="item.children"
diff --git a/themes/theme-default/src/client/components/PageNav.vue b/themes/theme-default/src/client/components/PageNav.vue
index c956be487e..485a0a1488 100644
--- a/themes/theme-default/src/client/components/PageNav.vue
+++ b/themes/theme-default/src/client/components/PageNav.vue
@@ -10,7 +10,7 @@ import type {
   NavLink,
   ResolvedSidebarItem,
 } from '../../shared/index.js'
-import { useSidebarItems } from '../composables/index.js'
+import { useSidebarItems, useThemeLocaleData } from '../composables/index.js'
 import { getNavLink } from '../utils/index.js'
 
 /**
@@ -96,13 +96,18 @@ const nextNavLink = computed(() => {
 
   return resolveFromSidebarItems(sidebarItems.value, route.path, 1)
 })
+
+const navbarLabel = computed(() => {
+  const themeLocale = useThemeLocaleData()
+  return themeLocale.value.pageNavbarLabel ?? 'page navigation'
+})
 </script>
 
 <template>
   <nav
     v-if="prevNavLink || nextNavLink"
     class="page-nav"
-    aria-label="page navigation"
+    :aria-label="navbarLabel"
   >
     <p class="inner">
       <span v-if="prevNavLink" class="prev">
diff --git a/themes/theme-default/src/shared/options.ts b/themes/theme-default/src/shared/options.ts
index 08262875e7..22c7a2fb94 100644
--- a/themes/theme-default/src/shared/options.ts
+++ b/themes/theme-default/src/shared/options.ts
@@ -84,6 +84,16 @@ export interface DefaultThemeLocaleData extends LocaleData {
    */
   navbar?: false | NavbarConfig
 
+  /**
+   * Navbar label used for screen readers using the `aria-label` attribute
+   */
+  navbarLabel?: null | string
+
+  /**
+   * Page navbar label used for screen readers using the `aria-label` attribute
+   */
+  pageNavbarLabel?: null | string
+
   /**
    * Navbar logo config
    *

From 9e608d7eea1f5676f2972b57a9156361bfe7d9cc Mon Sep 17 00:00:00 2001
From: Nicholas Ruffing <nicholasruffing70@gmail.com>
Date: Sat, 27 Jan 2024 10:39:17 -0500
Subject: [PATCH 4/7] fix(theme-default): lint format fix

---
 tsconfig.json | 12 ++++++------
 1 file changed, 6 insertions(+), 6 deletions(-)

diff --git a/tsconfig.json b/tsconfig.json
index bd325eb8ac..999bd64088 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -5,14 +5,14 @@
     "jsx": "preserve",
     "paths": {
       "@internal/searchIndex": [
-        "./plugins/plugin-search/src/client/searchIndex.d.ts"
+        "./plugins/plugin-search/src/client/searchIndex.d.ts",
       ],
       "@internal/themeData": [
-        "./plugins/plugin-theme-data/src/client/themeData.d.ts"
+        "./plugins/plugin-theme-data/src/client/themeData.d.ts",
       ],
-      "@theme/*": ["./themes/theme-default/src/client/components/*"]
+      "@theme/*": ["./themes/theme-default/src/client/components/*"],
     },
-    "types": ["vuepress/client-types", "webpack-env", "vite/client"]
+    "types": ["vuepress/client-types", "webpack-env", "vite/client"],
   },
   "include": [
     "**/.vuepress/**/*",
@@ -20,7 +20,7 @@
     "plugins/**/*",
     "themes/**/*",
     "tools/**/*",
-    "vitest.config.ts"
+    "vitest.config.ts",
   ],
-  "exclude": ["node_modules", ".temp", "lib", "dist"]
+  "exclude": ["node_modules", ".temp", "lib", "dist"],
 }

From 425090354edce05bdcda72161dda922f90625ff0 Mon Sep 17 00:00:00 2001
From: Nicholas Ruffing <nicholasruffing70@gmail.com>
Date: Sun, 28 Jan 2024 10:13:07 -0500
Subject: [PATCH 5/7] feat(theme-default): remove ari-hidden on title and use
 an empty alt on brand image if not specified

---
 .../src/client/components/NavbarBrand.vue              | 10 +---------
 1 file changed, 1 insertion(+), 9 deletions(-)

diff --git a/themes/theme-default/src/client/components/NavbarBrand.vue b/themes/theme-default/src/client/components/NavbarBrand.vue
index 9928e72a84..5a1a3e3c1a 100644
--- a/themes/theme-default/src/client/components/NavbarBrand.vue
+++ b/themes/theme-default/src/client/components/NavbarBrand.vue
@@ -24,14 +24,7 @@ const navbarBrandLogo = computed(() => {
   }
   return themeLocale.value.logo
 })
-const navbarBrandLogoAlt = computed(
-  () => themeLocale.value.logoAlt ?? navbarBrandTitle.value,
-)
-const navBarLogoAltMatchesTitle = computed(
-  () =>
-    navbarBrandTitle.value.toLocaleUpperCase().trim() ===
-    navbarBrandLogoAlt.value.toLocaleUpperCase().trim(),
-)
+const navbarBrandLogoAlt = computed(() => themeLocale.value.logoAlt ?? '')
 const NavbarBrandLogo: FunctionalComponent = () => {
   if (!navbarBrandLogo.value) return null
   const img = h('img', {
@@ -56,7 +49,6 @@ const NavbarBrandLogo: FunctionalComponent = () => {
       v-if="navbarBrandTitle"
       class="site-name"
       :class="{ 'can-hide': navbarBrandLogo }"
-      :aria-hidden="navBarLogoAltMatchesTitle"
     >
       {{ navbarBrandTitle }}
     </span>

From 6d62835de6c3830437764bcb61dcfde924f419ec Mon Sep 17 00:00:00 2001
From: Nicholas Ruffing <nicholasruffing70@gmail.com>
Date: Sun, 28 Jan 2024 10:33:12 -0500
Subject: [PATCH 6/7] Revert "feat(theme-default): remove ari-hidden on title
 and use an empty alt on brand image if not specified"

This reverts commit 425090354edce05bdcda72161dda922f90625ff0.
---
 .../src/client/components/NavbarBrand.vue              | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/themes/theme-default/src/client/components/NavbarBrand.vue b/themes/theme-default/src/client/components/NavbarBrand.vue
index 5a1a3e3c1a..9928e72a84 100644
--- a/themes/theme-default/src/client/components/NavbarBrand.vue
+++ b/themes/theme-default/src/client/components/NavbarBrand.vue
@@ -24,7 +24,14 @@ const navbarBrandLogo = computed(() => {
   }
   return themeLocale.value.logo
 })
-const navbarBrandLogoAlt = computed(() => themeLocale.value.logoAlt ?? '')
+const navbarBrandLogoAlt = computed(
+  () => themeLocale.value.logoAlt ?? navbarBrandTitle.value,
+)
+const navBarLogoAltMatchesTitle = computed(
+  () =>
+    navbarBrandTitle.value.toLocaleUpperCase().trim() ===
+    navbarBrandLogoAlt.value.toLocaleUpperCase().trim(),
+)
 const NavbarBrandLogo: FunctionalComponent = () => {
   if (!navbarBrandLogo.value) return null
   const img = h('img', {
@@ -49,6 +56,7 @@ const NavbarBrandLogo: FunctionalComponent = () => {
       v-if="navbarBrandTitle"
       class="site-name"
       :class="{ 'can-hide': navbarBrandLogo }"
+      :aria-hidden="navBarLogoAltMatchesTitle"
     >
       {{ navbarBrandTitle }}
     </span>

From b5699f02096ba7c218aaf74fb09b822002e6dd6c Mon Sep 17 00:00:00 2001
From: Nicholas Ruffing <nicholasruffing70@gmail.com>
Date: Sun, 28 Jan 2024 10:36:49 -0500
Subject: [PATCH 7/7] chore: tweaks

---
 themes/theme-default/src/shared/options.ts | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/themes/theme-default/src/shared/options.ts b/themes/theme-default/src/shared/options.ts
index 22c7a2fb94..dfd069d050 100644
--- a/themes/theme-default/src/shared/options.ts
+++ b/themes/theme-default/src/shared/options.ts
@@ -111,8 +111,8 @@ export interface DefaultThemeLocaleData extends LocaleData {
   /**
    * The alt text of navbar logo.
    * Defaults to the site title if not specified.
-   * If the value is the same as the site title and the site title is displayed (i.e not mobile)
-   * the alt attribute will still be rendered but with an empty value to not be read twice by screen readers.
+   * If the value is the same as the site title, the site title rendered in the navbar will be
+   * hidden from screen readers to avoid duplication.
    */
   logoAlt?: null | string