feat(theme-default): image alt option and set aria hidden on title if same as image alt (close #20)

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: '',
+    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>

themes/theme-default/src/client/components/NavbarItems.vue

@@ -178,10 +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">
+  <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"

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,10 +96,19 @@ 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">
+  <nav
+    v-if="prevNavLink || nextNavLink"
+    class="page-nav"
+    :aria-label="navbarLabel"
+  >
     <p class="inner">
       <span v-if="prevNavLink" class="prev">
         <AutoLink :item="prevNavLink" />

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
    *
@@ -98,6 +108,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, the site title rendered in the navbar will be
+   * hidden from screen readers to avoid duplication.
+   */
+  logoAlt?: null | string
+
   /**
    * Navbar repository config
    *