chore(tabs): docs page (VIV-2108)

apps/docs/content/_data/components.json

@@ -264,15 +264,13 @@
 	},
 	{
 		"title": "Tabs",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/tabs/README.md",
-		"children": ["Tab"]
-	},
-	{
-		"title": "Tab",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/tab/README.md",
-		"parent": "Tabs"
+		"description": "Tabs are interactive elements that work alongside Tab and Tab Panel to organise content into separate sections or views.",
+		"variations": "./libs/components/src/lib/tabs/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/tabs/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/tabs/README.md",
+		"accessibility": "./libs/components/src/lib/tabs/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/tabs/USE-CASES.md"
 	},
 	{
 		"title": "Combobox",

libs/components/src/lib/accordion/README.md

@@ -435,14 +435,15 @@ Use the `--accordion-item-meta-inline-size` to control the width of the `meta-da
 
 <div class="table-wrapper">
 
-| Name              | Type                                   | Description                                                      |
-| ----------------- | -------------------------------------- | ---------------------------------------------------------------- |
-| **heading**       | `string`                               | Determines if multiple items or a single item can opened at once |
-| **heading-level** | `1`, `2` (default), `3`, `4`, `5`, `6` | Determines the heading level                                     |
-| **expanded**      | `boolean`                              | Sets the open state                                              |
-| **meta**          | `string`                               | Sets the meta text for the heading                               |
-| **no-indicator**  | `boolean`                              | Hides the open state indicator icon (chevron)                    |
-| **size**          | `normal` (default), `condensed`        | Sets the size                                                    |
+| Name              | Type                                   | Description                                                                                                     |
+| ----------------- | -------------------------------------- | --------------------------------------------------------------------------------------------------------------- |
+| **heading**       | `string`                               | Determines if multiple items or a single item can opened at once                                                |
+| **heading-level** | `1`, `2` (default), `3`, `4`, `5`, `6` | Determines the heading level                                                                                    |
+| **icon**          | Enum: `[icon-name]`                    | A decorative icon the custom element should have. See the Vivid Icon Gallery for available icons and icon-names |
+| **expanded**      | `boolean`                              | Sets the open state                                                                                             |
+| **meta**          | `string`                               | Sets the meta text for the heading                                                                              |
+| **no-indicator**  | `boolean`                              | Hides the open state indicator icon (chevron)                                                                   |
+| **size**          | `normal` (default), `condensed`        | Sets the size                                                                                                   |
 
 </div>
 

libs/components/src/lib/tabs/ACCESSIBILITY.md

@@ -0,0 +1,14 @@
+## Implementation
+
+- **Icons:** ideally the [icon should be accompanied by a label](https://www.nngroup.com/articles/icon-usability/), but if this is not the case, be sure to supply the **Tab** component with an `aria-label` attribute so that screen reader user will know the purpose of the tab.
+
+## Best Practice
+
+- **Write short, descriptive tab labels**. Tab labels should usually be 1-2 words. Short labels are more scannable; if you need longer labels, it’s a sign that the choices are too complicated for tabs and maybe an [Accordion](/components/accordion/) is a better choice.
+- **Avoid tab list scrolling**. Make sure there is enough horizontal space to encorporate the amount of tabs you are presenting.
+
+## Resources
+
+- [Vivid Tabs: Manual accessibility test](https://docs.google.com/spreadsheets/d/1otYxVmPqu2YcPHWBNIJg73W7xNXF4amoTZBuN_6D8C0/edit?gid=1175911860#gid=1175911860)
+- We follow the [W3C Tabs Pattern](https://www.w3.org/WAI/ARIA/apg/patterns/tabs/)
+- [Tabs used right](https://www.nngroup.com/articles/tabs-used-right/)