1970 additional component playgrounds

GCHQ-Developer-530 commented 2 weeks ago

Summary of the changes

Add playground stories for popover menu, radio, status tag, tab, and toggle button.

Add watch to tab context appearance prop so that it passes down the correct value to tab/tab group/tab panel when appearance is toggled.

Tickets created for missing/incorrect functionality - #2017, #2018, #2022

Part of #1970

[x] Accessibility Insights FastPass performed.
[x] A11y unit test added and yields no issues.
[x] A11y plug-in on Storybook yields no issues.
[x] Manual screen reader testing performed using NVDA and VoiceOver.
[x] Manual keyboard testing for keyboard controls and logical focus order.
[x] Correct roles used and ARIA attributes used correctly where required.
[x] Logical heading structure is maintained, and the HTML elements used for headings can be changed to fit within the wider page structure.

[x] Page can be zoomed to 400% with no loss of content.
[x] Screen magnifier used with no issues.
[x] Text resized to 200% with no loss of content.
[x] Text spacing increased as per the WCAG 1.4.12 success criterion with no loss of content.

[x] Browser setting 'prefers reduced motion' tested. No animations or motion visible whilst this setting is on.
[x] Windows High Contrast mode tested with no loss of content.
[x] System light and dark mode tested with no loss of content.
[x] Browser support tested (Chrome, Safari, Firefox and Edge).

[x] Min/max content examples tested with no loss of content or overflow.
[x] All prop combinations work without issue.
[x] Tested for FOUC (Flash of Unstyled Content) in both SSR (Server-Side Rendering) and SSG (Static Site Generation) settings.
[x] Controlled and uncontrolled input components tested.