Add screen reader support to several form inputs (#766)

- Add screen reader support to RadioButtonWithLabel, CheckboxWithLabel and SwitchWithLabel.
StenaIT · Aug 16, 2024 · 4253238 · 4253238
1 parent 8e565cd
commit 4253238
Show file tree

Hide file tree

Showing 3 changed files with 51 additions and 11 deletions.
diff --git a/packages/forms/src/components/ui/checkbox/CheckboxWithLabel.tsx b/packages/forms/src/components/ui/checkbox/CheckboxWithLabel.tsx
@@ -1,10 +1,16 @@
-import { Row, Space, Text } from "@stenajs-webui/core";
+import { Row, ScreenReaderOnlyText, Space, Text } from "@stenajs-webui/core";
 import * as React from "react";
 import { Ref } from "react";
 import { Checkbox, CheckboxProps } from "./Checkbox";
 
 export interface CheckboxWithLabelProps extends CheckboxProps {
-  label?: string;
+  label: string;
+  /**
+   * If set, this label is used by screen readers instead of label prop.
+   * For example, label could be "male", while screenReaderLabel is "Gender male".
+   * If not set, screen readers will use label prop.
+   */
+  screenReaderLabel?: string;
   textColor?: string;
   wrapperRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
@@ -16,6 +22,7 @@ export const CheckboxWithLabel: React.FC<CheckboxWithLabelProps> = ({
   inputRef,
   wrapperRef,
   textColor,
+  screenReaderLabel,
   ...checkboxProps
 }) => {
   return (
@@ -24,11 +31,16 @@ export const CheckboxWithLabel: React.FC<CheckboxWithLabelProps> = ({
         <Row alignItems={"center"}>
           <Checkbox {...checkboxProps} ref={inputRef} />
           <Space />
-          {label && (
-            <Text userSelect={"none"} color={textColor}>
-              {label}
-            </Text>
-          )}
+          {screenReaderLabel ? (
+            <ScreenReaderOnlyText>{screenReaderLabel}</ScreenReaderOnlyText>
+          ) : null}
+          <Text
+            color={textColor}
+            aria-hidden={Boolean(screenReaderLabel)}
+            userSelect={"none"}
+          >
+            {label}
+          </Text>
           {children}
         </Row>
       </label>

diff --git a/packages/forms/src/components/ui/radio/RadioButtonWithLabel.tsx b/packages/forms/src/components/ui/radio/RadioButtonWithLabel.tsx
@@ -1,10 +1,16 @@
-import { Row, Space, Text } from "@stenajs-webui/core";
+import { Row, ScreenReaderOnlyText, Space, Text } from "@stenajs-webui/core";
 import * as React from "react";
 import { Ref } from "react";
 import { RadioButton, RadioButtonProps } from "./RadioButton";
 
 export interface RadioButtonWithLabelProps extends RadioButtonProps {
   label: string;
+  /**
+   * If set, this label is used by screen readers instead of label prop.
+   * For example, label could be "male", while screenReaderLabel is "Gender male".
+   * If not set, screen readers will use label prop.
+   */
+  screenReaderLabel?: string;
   textColor?: string;
   wrapperRef?: Ref<HTMLDivElement>;
   inputRef?: Ref<HTMLInputElement>;
@@ -15,6 +21,7 @@ export const RadioButtonWithLabel: React.FC<RadioButtonWithLabelProps> = ({
   inputRef,
   wrapperRef,
   textColor,
+  screenReaderLabel,
   ...radioButtonProps
 }) => {
   return (
@@ -23,7 +30,14 @@ export const RadioButtonWithLabel: React.FC<RadioButtonWithLabelProps> = ({
         <Row alignItems={"center"}>
           <RadioButton ref={inputRef} {...radioButtonProps} />
           <Space />
-          <Text color={textColor} userSelect={"none"}>
+          {screenReaderLabel ? (
+            <ScreenReaderOnlyText>{screenReaderLabel}</ScreenReaderOnlyText>
+          ) : null}
+          <Text
+            color={textColor}
+            aria-hidden={Boolean(screenReaderLabel)}
+            userSelect={"none"}
+          >
             {label}
           </Text>
         </Row>

diff --git a/packages/forms/src/components/ui/switch/SwitchWithLabel.tsx b/packages/forms/src/components/ui/switch/SwitchWithLabel.tsx
@@ -1,9 +1,15 @@
-import { Box, Space, Text } from "@stenajs-webui/core";
+import { Box, ScreenReaderOnlyText, Space, Text } from "@stenajs-webui/core";
 import * as React from "react";
 import { Switch, SwitchProps } from "./Switch";
 
 export interface SwitchWithLabelProps extends SwitchProps {
   label: string;
+  /**
+   * If set, this label is used by screen readers instead of label prop.
+   * For example, label could be "male", while screenReaderLabel is "Gender male".
+   * If not set, screen readers will use label prop.
+   */
+  screenReaderLabel?: string;
   textColor?: string;
 }
 
@@ -12,6 +18,7 @@ export const SwitchWithLabel: React.FC<SwitchWithLabelProps> = ({
   disabled,
   textColor,
   wrapperRef,
+  screenReaderLabel,
   ...switchProps
 }) => {
   return (
@@ -20,7 +27,14 @@ export const SwitchWithLabel: React.FC<SwitchWithLabelProps> = ({
         <Box row alignItems={"center"}>
           <Switch disabled={disabled} {...switchProps} />
           <Space />
-          <Text userSelect={"none"} color={textColor}>
+          {screenReaderLabel ? (
+            <ScreenReaderOnlyText>{screenReaderLabel}</ScreenReaderOnlyText>
+          ) : null}
+          <Text
+            color={textColor}
+            aria-hidden={Boolean(screenReaderLabel)}
+            userSelect={"none"}
+          >
             {label}
           </Text>
         </Box>