chore(docs): accordion page restructure (VIV-2078) (#1981)

* chore: wip

* chore: adds accordion new format docs page

* chore: update ui tests

* chore: adds missing api

* chore: update a11y resource list

* chore: formatting

* chore: updates guidelines for buttons

* chore: adjustments after pr comments

* chore: formatting

* chore: docs adjustments

* chore: formatting

* chore: adds use case

* chore: formating

* chore: updates accordion docs

* chore: formatting

* chore: docs adjustment

apps/docs/content/_data/components.json

@@ -1,15 +1,13 @@
 [
 	{
 		"title": "Accordion",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/accordion/README.md",
-		"children": ["Accordion Item"]
-	},
-	{
-		"title": "Accordion Item",
-		"page": "legacy",
-		"markdown": "./libs/components/src/lib/accordion-item/README.md",
-		"parent": "Accordion"
+		"description": "Accordion is an interactive element that works alongside Accordion Item to organise and display content in a collapsible and expandable way.",
+		"variations": "./libs/components/src/lib/accordion/VARIATIONS.md",
+		"guidelines": "./libs/components/src/lib/accordion/GUIDELINES.md",
+		"hideGuidelines": "true",
+		"code": "./libs/components/src/lib/accordion/README.md",
+		"accessibility": "./libs/components/src/lib/accordion/ACCESSIBILITY.md",
+		"useCases": "./libs/components/src/lib/accordion/USE-CASES.md"
 	},
 	{
 		"title": "Badge",

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

@@ -0,0 +1,23 @@
+## Implementation
+
+### Heading Levels
+
+Headings are the backbone of the content of a page. A visitor should be able to scan the webpage using headings to get a good impression of its content.
+
+Heading levels have meaning, especially for screen reader users and search engines. That means one unique first level heading per page, with the other headings representing the page content similar to the index of a book: easily scannable and semantic.
+
+#### Accordion Item Heading Level
+
+To maintain the correct heading hierarchy of your page when using the Accordion, use the [`heading-level` attribute](/components/code/#heading-level) to adjust the level of the Accordion Item heading to fit the structure of the page.
+
+## Best Practices
+
+### Avoid Hiding Essential Information
+
+**Hiding content behind navigation diminishes people’s awareness of it.** An extra step is required to see the information. Headings and titles must be descriptive and enticing enough to motivate people to “spend” clicks on them. When content is hidden, people might ignore information.
+
+## Resources
+
+- [Accordion: Manual accessibility test](https://docs.google.com/spreadsheets/d/1qyCSugoJUf2hWklnAeSYoSlDDiFTl6WFerEGIUHInAM/edit?gid=1175911860#gid=1175911860)
+- [WAI: Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)
+- [Accordions Are Not Always the Answer for Complex Content on Desktops](https://www.nngroup.com/articles/accordions-complex-content/)