diplodoc-platform / diplodoc-platform/transform

Refactor Accordion Elements to Use Semantic HTML

Open
#587 0 comments 0 reactions 0 assignees View on GitHub
a11y good first issue
Dominant language
TypeScript
Stars
69
Forks
59
Avg merge
1d 21h
Merged PRs (30d)
6

Description

Our current accordion component is implemented using `

` elements, which can hinder accessibility and semantic clarity. To improve the semantic structure and accessibility of our accordions, we should refactor them to use HTML5 semantic tags.

Proposed Changes:

- Replace `

` containers with `` and `` elements. The `` element acts as a native expandable container, while `` provides a visible title for the accordion.
- Ensure that the accordion state (expanded/collapsed) is properly managed using these semantic elements.

Benefits:
- Improves semantic meaning and accessibility for assistive technology users.
- Reduces the need for additional JavaScript to manage accordion behavior.
- Enhances SEO by using proper semantic tags.

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.