SelectOption: add accessibility label (#412)

Cambly · May 10, 2024 · 32b60b7 · 32b60b7
1 parent 16c2da7
commit 32b60b7
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 1 deletion.
diff --git a/.changeset/mean-lions-smash.md b/.changeset/mean-lions-smash.md
@@ -0,0 +1,5 @@
+---
+"@cambly/syntax-core": minor
+---
+
+SelectOption: For language picker, we need accessibility label to show the translated variation
diff --git a/packages/syntax-core/src/SelectList/SelectOption.tsx b/packages/syntax-core/src/SelectList/SelectOption.tsx
@@ -5,13 +5,20 @@ const SelectOption = ({
   value,
   label,
   disabled = false,
+  accessibilityLabel,
 }: {
+  accessibilityLabel?: string;
   "data-testid"?: string;
   value: string;
   label: string;
   disabled?: boolean;
 }): ReactElement => (
-  <option data-testid={dataTestId} value={value} disabled={disabled}>
+  <option
+    aria-label={accessibilityLabel}
+    data-testid={dataTestId}
+    value={value}
+    disabled={disabled}
+  >
     {label}
   </option>
 );