diff options
| author | Armand Philippot <git@armandphilippot.com> | 2022-06-02 18:46:59 +0200 |
|---|---|---|
| committer | Armand Philippot <git@armandphilippot.com> | 2022-06-02 18:46:59 +0200 |
| commit | 7a875655daf9dfa0b4803e287ae59b37ffe4f342 (patch) | |
| tree | 985f9542a07205038bcc45ae80bfd9606cb9f3e2 /src/components/molecules | |
| parent | 329d5ab3f49d663f40a965af4d29eaa38b9a4a86 (diff) | |
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.
Diffstat (limited to 'src/components/molecules')
| -rw-r--r-- | src/components/molecules/forms/prism-theme-toggle.tsx | 14 | ||||
| -rw-r--r-- | src/components/molecules/forms/theme-toggle.tsx | 14 |
2 files changed, 24 insertions, 4 deletions
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', }, |