Update: Accessibility drop-down labels use translated labels.

Author: shibomb

src/components/AccessibilitySettings/index.tsx

@@ -2,6 +2,7 @@ import { useEffect, useState } from "preact/hooks";
 import { Dropdown, type DropdownOption } from "../Dropdown";
 
 type AccessibilitySettingsProps = {
+  dropdownLabel: string;
   options: DropdownOption[];
 };
 
@@ -12,6 +13,7 @@ type PossibleA11ySettings =
   | "reduced-motion";
 
 export const AccessibilitySettings = ({
+  dropdownLabel,
   options,
 }: AccessibilitySettingsProps) => {
   const [selectedSettings, setSelectedSettings] = useState<
@@ -51,7 +53,7 @@ export const AccessibilitySettings = ({
   return (
     <Dropdown
       options={options}
-      dropdownLabel="Accessibility"
+      dropdownLabel={dropdownLabel}
       onChange={(option) => toggleSetting(option.value as PossibleA11ySettings)}
       iconKind="settings"
       variant="radio"

src/components/Settings/index.astro

@@ -51,6 +51,8 @@ const localeOptionProps = localeOptions.map(({ locale, label, url }) => ({
 
 const t = await getUiTranslator(currentLocale);
 
+const dropdownLabel = t("Accessibility") as string;
+
 const a11ySettingsProps = [
   {
     value: "dark-theme",
@@ -85,7 +87,7 @@ const { hideSearch } = Astro.props;
       />
     </div>
     <div class={styles.a11yselect}>
-      <AccessibilitySettings options={a11ySettingsProps} client:load />
+      <AccessibilitySettings dropdownLabel={dropdownLabel} options={a11ySettingsProps} client:load />
     </div>
     {
       !hideSearch && (