Proposal: Improve Accessibility and Semantics of Term Representation Element

[martyanovandrey]

We currently use an <i> tag for representing terms in YFM. This tag primarily serves stylistic purposes and doesn't fully convey the semantic meaning or interactive capabilities of the element and impacting accessibility.

The current role=term does not convey the interactivity of the element, role=button would work better in this case. And in order for the terms to be selectable from the keyboard, an tabindex has already been added what is the default behavior for the button.

Proposal

I propose that we refactor our term representation element to use more semantic and accessible HTML tag such as <button> for interactive elements that trigger actions.

Current:

<i class="yfm yfm-term_title" term-key=":term" role="term" aria-describedby=":term_element" tabindex="0" id="bwzu8pkn">term</i>

Proposal:

<button class="yfm yfm-term_title" term-key=":term" aria-describedby=":term_element" id="bwzu8pkn">term</button>