Use buttons instead of links for proper accessibility

[laryn]

An accessibility review for a site that uses this module suggested that we should be using buttons, not links, for proper accessibility. Here is a model:

• https://www.w3.org/WAI/ARIA/apg/patterns/accordion/examples/accordion/#sc1_label

I am going to see if this is fairly quick and easy to change, and if so I will submit a PR here.

[laryn]

@yorkshire-pudding See what you think of this issue and the attached PR.

[yorkshire-pudding]

Hi @laryn I support efforts to improve accessibility. I wasn't aware that accordions like this were an accessibility issue so thanks for raising this.

My biggest reservation is that this change as it stands would break the styling for existing sites using this.

This is the patch applied to a test site (Check 2, Test3). The set above (Check 1) are using paragraphs_jquery_ui_accordion2 which doesn't have this patch (I would try to emulate this patch on that module if we can get it so it works ok). The styling here is not important as this is just a test site, but note how different it looks.

I note the example you give on w3 has the button being (a) full width (b) including the arrow icon (c) looking the same - the outline here is because the button is active

If we can find a way to address these points within the update so that people who just click update without reading release notes, will not have a surprise that their careful styling has radically changed, then I would be happy to include.

I think the ideal would be to have the button fill as much of the bar as possible and incorporate the arrow whilst not changing the existing styling. In paragraphs_jquery_ui_accordion2, users can also add a Font Awesome icon but I think if we can work out how to work it on this, applying the same to the other should be fairly straightforward.