feat(SegmentedSwitch): add ariaLabel and ariaLabelledby props

Author: DSil

packages/orbit-components/src/SegmentedSwitch/README.md

@@ -30,16 +30,18 @@ const Component = () => {
 
 _Table below contains all types of the props available in the SegmentedSwitch component._
 
-| Name        | Type                                          | Default | Description                         |
-| :---------- | :-------------------------------------------- | :------ | :---------------------------------- |
-| dataTest    | `string`                                      |         | Optional prop for testing purposes. |
-| help        | `React.Node`                                  |         | Optional help message.              |
-| error       | `React.Node`                                  |         | Optional error message.             |
-| options     | [`Option[]`](#option)                         |         | Array of options.                   |
-| onChange    | `(ev: ChangeEvent<HTMLInputElement>) => void` |         | Function for handling change event. |
-| onFocus     | `(ev: FocusEvent<HTMLInputElement>) => void`  |         | Function for handling focus event.  |
-| label       | `string`                                      |         | Label of the component.             |
-| showTooltip | `boolean`                                     | `false` | Show tooltip.                       |
+| Name           | Type                                          | Default | Description                                                                                    |
+| :------------- | :-------------------------------------------- | :------ | :--------------------------------------------------------------------------------------------- |
+| dataTest       | `string`                                      |         | Optional prop for testing purposes.                                                            |
+| help           | `React.Node`                                  |         | Optional help message.                                                                         |
+| error          | `React.Node`                                  |         | Optional error message.                                                                        |
+| options        | [`Option[]`](#option)                         |         | Array of options.                                                                              |
+| onChange       | `(ev: ChangeEvent<HTMLInputElement>) => void` |         | Function for handling change event.                                                            |
+| onFocus        | `(ev: FocusEvent<HTMLInputElement>) => void`  |         | Function for handling focus event.                                                             |
+| label          | `string`                                      |         | Label of the component.                                                                        |
+| ariaLabel      | `string`                                      |         | Optional `aria-label` attribute.                                                               |
+| ariaLabelledby | `string`                                      |         | Optional `aria-labelledby` attribute. Receives an id of the element that labels the component. |
+| showTooltip    | `boolean`                                     | `false` | Show tooltip.                                                                                  |
 
 ## Option
 

packages/orbit-components/src/SegmentedSwitch/SegmentedSwitch.stories.tsx

@@ -14,7 +14,7 @@ const meta: Meta<typeof SegmentedSwitch> = {
   parameters: {
     info: "SegmentedSwitch component. Check Orbit.Kiwi for more detailed guidelines.",
     controls: {
-      exclude: ["onChange", "onFocus"],
+      exclude: ["onChange", "onFocus", "ariaLabel", "ariaLabelledby"],
     },
   },
 

packages/orbit-components/src/SegmentedSwitch/index.tsx

@@ -22,6 +22,8 @@ const SegmentedSwitch = ({
   help,
   error,
   label,
+  ariaLabel,
+  ariaLabelledby,
 }: Props) => {
   const hasTooltip = Boolean(error || help);
 
@@ -47,7 +49,8 @@ const SegmentedSwitch = ({
       )}
       style={{ maxWidth }}
       role="group"
-      aria-label={label}
+      aria-label={ariaLabel || label}
+      aria-labelledby={ariaLabelledby}
     >
       {label && (
         <FormLabel

packages/orbit-components/src/SegmentedSwitch/types.d.ts

@@ -22,4 +22,6 @@ export interface Props extends Common.Globals, Common.SpaceAfter {
   readonly help?: React.ReactNode;
   readonly label?: string;
   readonly options: Option[];
+  readonly ariaLabel?: string;
+  readonly ariaLabelledby?: string;
 }