Automatic Syncing Updates: Accessibility Remediations in Coach page

[marcellamaki]

Overview

This issue is a frontend issue that updates the report and plan tabs in the Coach plugin with improved accessibility features. The pages should:

• Include the new TabGroup component created in KDS
• Have new visually hidden h2 tags that will use semantic HTML to group the information architecture of the page that is currently only grouped visually

Specifications

Figma

Please see complete figma spec for all relevant screens and details. Below is just one example:

Acceptance Criteria

• Reports Page has been refactored to include the new KDS TabGroup component
• Plan Page has been refactored to include the new KDS TabGroup component
• When viewing a lesson or quiz, the side panel has a visually-hidden h2: “General information”
• When viewing a lesson or quiz, the main content has a visually-hidden h2: “Details”
• THIS MUST pass accessibility QA from @radinamatic before it can get merged. Her approval is blocking.

References

• Notion project page
• Figma spec
• Gherkin scenarios