Refactor Accordion Elements to Use Semantic HTML

[martyanovandrey]

Our current accordion component is implemented using <div> 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 <div> containers with <details> and <summary> elements. The <details> element acts as a native expandable container, while <summary> 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.