fix: improve settings accessibility (#18)

The settings modal had some accessibility issues:
* the SVG title was not used as radio button label,
* the state of the help button was only visual.

4 files changed, 29 insertions, 5 deletions

diff --git a/src/components/molecules/buttons/help-button.tsx b/src/components/molecules/buttons/help-button.tsx
index ccf1ebd..ec89f4e 100644
--- a/src/components/molecules/buttons/help-button.tsx
+++ b/src/components/molecules/buttons/help-button.tsx
@@ -3,7 +3,10 @@ import { forwardRef, ForwardRefRenderFunction } from 'react';
 import { useIntl } from 'react-intl';
 import styles from './help-button.module.scss';
 
-export type HelpButtonProps = Pick<ButtonProps, 'className' | 'onClick'>;
+export type HelpButtonProps = Pick<
+  ButtonProps,
+  'aria-pressed' | 'className' | 'onClick'
+>;
 
 /**
  * HelpButton component
diff --git a/src/components/molecules/forms/fieldset.tsx b/src/components/molecules/forms/fieldset.tsx
index 9f46247..670cfa1 100644
--- a/src/components/molecules/forms/fieldset.tsx
+++ b/src/components/molecules/forms/fieldset.tsx
@@ -100,6 +100,7 @@ const Fieldset: FC<FieldsetProps> = ({
       {TooltipComponent && (
         <>
           <HelpButton
+            aria-pressed={isTooltipOpened}
             className={`${styles.btn} ${buttonModifier}`}
             onClick={() => setIsTooltipOpened(!isTooltipOpened)}
             ref={buttonRef}
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',
     },