From 7a875655daf9dfa0b4803e287ae59b37ffe4f342 Mon Sep 17 00:00:00 2001
From: Armand Philippot <git@armandphilippot.com>
Date: Thu, 2 Jun 2022 18:46:59 +0200
Subject: fix: ensure radio buttons are accessible

It seems I cannot use the SVG title as label. So I removed the title
and added a visually hidden span to set the radio buttons label.
---
 src/components/molecules/forms/prism-theme-toggle.tsx | 14 ++++++++++++--
 src/components/molecules/forms/theme-toggle.tsx       | 14 ++++++++++++--
 2 files changed, 24 insertions(+), 4 deletions(-)

(limited to 'src/components')

diff --git a/src/components/molecules/forms/prism-theme-toggle.tsx b/src/components/molecules/forms/prism-theme-toggle.tsx
index 7bf5b7c..0fd9f54 100644
--- a/src/components/molecules/forms/prism-theme-toggle.tsx
+++ b/src/components/molecules/forms/prism-theme-toggle.tsx
@@ -80,13 +80,23 @@ const PrismThemeToggle: FC<PrismThemeToggleProps> = (props) => {
   const options: RadioGroupOption[] = [
     {
       id: 'code-blocks-light',
-      label: <Sun title={lightThemeLabel} />,
+      label: (
+        <>
+          <span className="screen-reader-text">{lightThemeLabel}</span>
+          <Sun />
+        </>
+      ),
       name: 'code-blocks',
       value: 'light',
     },
     {
       id: 'code-blocks-dark',
-      label: <Moon title={darkThemeLabel} />,
+      label: (
+        <>
+          <span className="screen-reader-text">{darkThemeLabel}</span>
+          <Moon />
+        </>
+      ),
       name: 'code-blocks',
       value: 'dark',
     },
diff --git a/src/components/molecules/forms/theme-toggle.tsx b/src/components/molecules/forms/theme-toggle.tsx
index b796b27..1c6481a 100644
--- a/src/components/molecules/forms/theme-toggle.tsx
+++ b/src/components/molecules/forms/theme-toggle.tsx
@@ -71,13 +71,23 @@ const ThemeToggle: FC<ThemeToggleProps> = (props) => {
   const options: RadioGroupOption[] = [
     {
       id: 'theme-light',
-      label: <Sun title={lightThemeLabel} />,
+      label: (
+        <>
+          <span className="screen-reader-text">{lightThemeLabel}</span>
+          <Sun />
+        </>
+      ),
       name: 'theme',
       value: 'light',
     },
     {
       id: 'theme-dark',
-      label: <Moon title={darkThemeLabel} />,
+      label: (
+        <>
+          <span className="screen-reader-text">{darkThemeLabel}</span>
+          <Moon />
+        </>
+      ),
       name: 'theme',
       value: 'dark',
     },
-- 
cgit v1.2.3