feat(Tabs): add ariaLabel and ariaLabelledby to improve accessibility

BREAKING CHANGE: TabList component no longer sets the default aria-label value.
You can provide the value via ariaLabel or ariaLabelledby prop.

Author: domihustinova

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

@@ -42,13 +42,15 @@ Table below contains all types of the props available in Tabs component.
 
 Table below contains all types of the props available in TabList component.
 
-| Name      | Type            | Default | Description                                                                          |
-| :-------- | :-------------- | :------ | :----------------------------------------------------------------------------------- |
-| dataTest  | `string`        |         | Optional prop for testing purposes.                                                  |
-| children  | `React.node`    |         | Required prop that should contain the `Tab` components.                              |
-| compact   | `boolean`       | `false` | Optional prop that responsible for `Tab`size, if provided, the Tabs will be smaller. |
-| spacing   | [`enum`](#enum) | `none`  | Optional prop to set gap between `Tab` elements.                                     |
-| fullWidth | `boolean`       | `false` | Optional prop to set `TabList` to full width.                                        |
+| Name           | Type            | Default | Description                                                                          |
+| :------------- | :-------------- | :------ | :----------------------------------------------------------------------------------- |
+| dataTest       | `string`        |         | Optional prop for testing purposes.                                                  |
+| children       | `React.node`    |         | Required prop that should contain the `Tab` components.                              |
+| compact        | `boolean`       | `false` | Optional prop that responsible for `Tab`size, if provided, the Tabs will be smaller. |
+| spacing        | [`enum`](#enum) | `none`  | Optional prop to set gap between `Tab` elements.                                     |
+| fullWidth      | `boolean`       | `false` | Optional prop to set `TabList` to full width.                                        |
+| ariaLabel      | `string`        |         | Optional prop for `aria-label`.                                                      |
+| ariaLabelledBy | `string`        |         | Optional prop for `aria-labelledby`.                                                 |
 
 ### Tab
 

packages/orbit-components/src/Tabs/components/TabList/index.tsx

@@ -15,6 +15,8 @@ const TabList = ({
   margin,
   dataTest,
   fullWidth,
+  ariaLabel,
+  ariaLabelledby,
 }: Props) => {
   const cssVars = {
     "--tab-list-padding": typeof padding === "string" ? padding : undefined,
@@ -45,7 +47,8 @@ const TabList = ({
         cssVars["--tab-list-margin-left"] && "ms-[var(--tab-list-margin-left)]",
       )}
       role="tablist"
-      aria-label="tabs"
+      aria-label={ariaLabel}
+      aria-labelledby={ariaLabelledby}
       data-test={dataTest}
       style={cssVars}
     >

packages/orbit-components/src/Tabs/components/TabList/types.d.ts

@@ -10,4 +10,6 @@ export interface Props extends Globals {
   compact?: boolean;
   margin?: React.CSSProperties["margin"] | ObjectProperty;
   padding?: React.CSSProperties["padding"] | ObjectProperty;
+  ariaLabel?: string;
+  ariaLabelledby?: string;
 }