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.

[yorkshire-pudding]

@laryn - I wonder if CSS would be enough to implement this without breaking the appearance for existing sites?

[laryn]

@yorkshire-pudding I think we could make it look out of the box like it used to with CSS, but maybe the bigger issue would be if anyone had updated their styling in their custom CSS -- that's uncontrollable.

Spitballing, maybe this could be a module setting? Or a separately named field formatter, leaving the legacy version alone for old sites?

[yorkshire-pudding]

I think CSS and a setting would work well. The settings could be on the same area as the title and text are set. We could set it by default for new sites but not have an update hook to set it for existing sites.

If we can avoid a separately named field formatter, that would be preferable to reduce the chance for confusion, whereas settings gives an opportunity for explanatory text.

Thanks