Proposal: Refactor Cut plugin to use <detail> Tag - Githubissues

diplodoc-platform / transform

Simple transformer YFM (Yandex Flavored Markdown) to HTML.

MIT License

56 stars 36 forks source link

Proposal: Refactor Cut plugin to use <detail> Tag #405

Closed martyanovandrey closed 2 months ago

martyanovandrey commented 5 months ago

We currently use <div> tags for collapsible content sections.

<div class="yfm-cut open">
    <div class="yfm-cut-title">Cut header</div>
    <div class="yfm-cut-content">
        <p>Content displayed when clicked.</p>
    </div>
</div>

I propose refactoring these to use HTML's <details> tag to enhance accessibility, usability, and maintainability.

<details>
  <summary>Cut header</summary>
  Content displayed when clicked.
</details>

Justification:

Accessibility: <details> provides built-in keyboard and screen reader support, aligning with WCAG standards.
Native Functionality: Reduces JavaScript reliance, enhancing load times and reducing UI bugs with browser-handled collapsible features.
Usability & User Experience: Offers a standardized interaction model for users.
Maintenance: Simplifies code and guards against deprecation with standard HTML5.

martyanovandrey commented 2 months ago

done https://github.com/diplodoc-platform/transform/pull/476