fix(a11y): add correct aria-label on ThemeToggle button

apps/site/components/withNavBar.tsx

@@ -11,6 +11,7 @@ import type { SimpleLocaleConfig } from '@node-core/ui-components/types';
 import dynamic from 'next/dynamic';
 import { useLocale, useTranslations } from 'next-intl';
 import { useTheme } from 'next-themes';
+import { useState, useEffect } from 'react';
 import type { FC } from 'react';
 
 import Link from '#site/components/Link';
@@ -35,10 +36,19 @@ const WithNavBar: FC = () => {
   const t = useTranslations();
 
   const locale = useLocale();
+  const [mounted, setMounted] = useState(false);
+
+  useEffect(() => setMounted(true), []);
 
   const toggleCurrentTheme = () =>
     setTheme(resolvedTheme === 'dark' ? 'light' : 'dark');
 
+  const themeToggleAriaLabel = !mounted
+    ? t('components.common.themeToggle.loading')
+    : resolvedTheme === 'dark'
+      ? t('components.common.themeToggle.light')
+      : t('components.common.themeToggle.dark');
+
   const changeLanguage = (locale: SimpleLocaleConfig) =>
     replace(pathname!, { locale: locale.code });
 
@@ -63,7 +73,7 @@ const WithNavBar: FC = () => {
 
         <ThemeToggle
           onClick={toggleCurrentTheme}
-          aria-label={t('components.common.themeToggle.label')}
+          aria-label={themeToggleAriaLabel}
         />
 
         <LanguageDropdown

apps/site/tests/e2e/general-behavior.spec.ts

@@ -13,16 +13,22 @@ const locators = {
   navLinksLocator: `[aria-label="${englishLocale.components.containers.navBar.controls.toggle}"] + div`,
   // Global UI controls
   languageDropdownName: englishLocale.components.common.languageDropdown.label,
-  themeToggleName: englishLocale.components.common.themeToggle.label,
-
+  // Initially, the themeToggle's name will be the light mode i18n.
+  themeToggleName: englishLocale.components.common.themeToggle.loading,
+  themeToggleAriaLabels: {
+    light: englishLocale.components.common.themeToggle.light,
+    dark: englishLocale.components.common.themeToggle.dark,
+  },
   // Search components (from Orama library)
   searchButtonTag: 'orama-button',
   searchInputTag: 'orama-input',
   searchResultsTag: 'orama-search-results',
 };
 
 const getTheme = (page: Page) =>
-  page.evaluate(() => document.documentElement.dataset.theme);
+  page.evaluate(
+    () => document.documentElement.dataset.theme as 'light' | 'dark'
+  );
 
 const openLanguageMenu = async (page: Page) => {
   const button = page.getByRole('button', {
@@ -70,11 +76,20 @@ test.describe('Node.js Website', () => {
       await expect(themeToggle).toBeVisible();
 
       const initialTheme = await getTheme(page);
+      const initialAriaLabel = await themeToggle.getAttribute('aria-label');
+      expect(initialAriaLabel).toBe(
+        locators.themeToggleAriaLabels[initialTheme]
+      );
+
       await themeToggle.click();
 
       const newTheme = await getTheme(page);
-      expect(newTheme).not.toEqual(initialTheme);
+      const newAriaLabel = await themeToggle.getAttribute('aria-label');
+
+      expect(newTheme).not.toBe(initialTheme);
       expect(['light', 'dark']).toContain(newTheme);
+
+      expect(newAriaLabel).toBe(locators.themeToggleAriaLabels[newTheme]);
     });
 
     test('should persist theme across page navigation', async ({ page }) => {

packages/i18n/src/locales/en.json

@@ -229,7 +229,9 @@
         "label": "Choose Language"
       },
       "themeToggle": {
-        "label": "Toggle Dark Mode"
+        "loading": "Loading theme label...",
+        "light": "Switch to Light Mode",
+        "dark": "Switch to Dark Mode"
       }
     },
     "metabar": {