View accordion titles use <div role="button"> as base markup
Context
We can mark up the accordion block template according to the ARIA pattern, using a semantic element for the control. Drupal's text filter in views won't allow markup though, which strips it out from the rendered content. This makes the default accordion pattern in views less usable since the JS depends on the button.
Originally, the patch used link markup, which was overridden with a role of button and additional button functionality through JS. However, this requires overriding default link behavior and semantics, which is discouraged by the ARIA in HTML guidelines.
Decision
If accordion displays are wanted in a view, the element acting as the accordion button must be marked up as one of the following options:
Option 1
<div class="expand" role="button" tabindex="0">
<span class="material-icons" aria-hidden="true">add</span>
{{ title }}
</div>
Option 2
The accordion JS will automatically add the role and tab index attributes if not detected. Adding them through option 1 allows the JS to skip this step, saving a bit of time from running functions.
<div class="expand">
<span class="material-icons" aria-hidden="true">add</span>
{{ title }}
</div>
Final rendered markup for accordion buttons:
<hx class="title">
<div class="expand" role="button" tabindex="0" aria-expanded="false" aria-controls="accordion-content-0">
<span class="material-icons" aria-hidden="true">add</span>
[ title text ]
</div>
</hx>
Status
Consequences
All current view accordions Siteimprove could find are updated with the new markup. Doing this, we'll be using ARIA in valid ways and limiting the risk of mismatched semantics/behavior coming from links.
We can also remove a line of JS permanently, since we won't need to prevent default behavior of links (clicking an accordion button would otherwise scroll the page up). Work to remove the link-specific code can start and shouldn't break existing view accordions.
This approach is still less preferred than using true elements because we need to add keyboard behavior, semantics, forced color support, etc., that we'd otherwise get for free with the element. Ideally, Drupal would support the element in the text filter so we can use the default pattern markup. We should comment/add a patch on the text filter Drupal ticket to see if can be an allowed tag.