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.

5 files changed, 37 insertions, 9 deletions

diff --git a/src/components/atoms/buttons/button.tsx b/src/components/atoms/buttons/button.tsx
index 9776687..fecbcfd 100644
--- a/src/components/atoms/buttons/button.tsx
+++ b/src/components/atoms/buttons/button.tsx
@@ -8,6 +8,14 @@ import styles from './buttons.module.scss';
 
 export type ButtonProps = {
   /**
+   * Button accessible label.
+   */
+  'aria-label'?: string;
+  /**
+   * Indicates the current "pressed" state of a toggle button.
+   */
+  'aria-pressed'?: boolean | 'mixed';
+  /**
    * The button body.
    */
   children: ReactNode;
@@ -16,10 +24,6 @@ export type ButtonProps = {
    */
   className?: string;
   /**
-   * Button accessible label.
-   */
-  'aria-label'?: string;
-  /**
    * Button state. Default: false.
    */
   disabled?: boolean;
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',
     },