Add support for localisation of aria-label specific text for show all…

[shieldo]

… button in Accordion component

This change follows on from #2818 and #2826 and adds two new options for the accordion component, being showAllSectionsAriaLabel and hideAllSectionsAriaLabel. These are applied as text for the 'show all sections' action buttons to be used by screen readers and assistive technologies.

The reason that this is desirable is that, if multiple accordions are shown on one page, the effect of clicking/activating one button may have an effect that is not obvious in the context - being able to get screen readers to access more descriptive text (such as "Show all sections relating to domestic certificates" rather than just "Show all sections") would be beneficial in orienting users of these technologies.

NB. The current implementation creates an aria-label attribute for the "show all" button even if its text does not diverge from e.g. the showAllSections text used as the default value. If this is not ideal, I can of course change it.

[colinrotherham]

Thanks @shieldo, we'll take a look at our next PR triage session 🎉

Did you find that screen reader users missed the context provided by a heading above the Accordion? For example, it wasn't something that could be fixed by giving more descriptive text to all users instead?

Show all sections
Show all sections relating to domestic certificates

(Rather than for assistive software only)

[shieldo]

Thanks @colinrotherham for queuing it for a look 🎉

I'll discuss it when others in my team are available - the use case I have in mind is here:

https://find-energy-certificate.service.gov.uk/service-performance

While I'm sure there are scenarios where one could elect to have more descriptive text for all users (rather than specialised text for assistive software) I expect there is a case to be made that users that experience a visual representation of the accordion may expect the renderings of the "show all" buttons to be consistent with each other (to help with affordance) for the same reason that the buttons for the individual sections of an accordion would want consistent renderings - when somebody sees this button text they may see it in the context of a heading, and for the same reason one mightn't wish to render more descriptive text for the "show" buttons on individual sections (it's duplicating information and may be less easy to visually scan), I think the same principle could apply for the "show all" buttons.

I have performed no research however - the above argument is based purely on consistency with the existing approach for the individual "show" buttons.

As I say, though, I'll discuss with my team to see if they have anything additional to add!

[shieldo]

I've checked with my team on this - I think we're unconvinced that a "show all" button would be useful for screen readers, though this would need some research! So perhaps, in actuality, this could be something one might wish to hide from assistive technologies. The PR remains though on the principle of consistency with the individual "show" buttons.

[colinrotherham]

Hi @shieldo I've rebased your branch as we'd caused you quite a few conflicts (not your fault)

I've put this PR into our "Needs review 🔍" column 👍

[CharlotteDowns]

Hi @shieldo, I've looked at this with some other members of the team.

Thank you for sharing the link to the use case, this has really helped us understand what your team are trying to achieve.

I've checked with my team on this - I think we're unconvinced that a "show all" button would be useful for screen readers, though this would need some research! So perhaps, in actuality, this could be something one might wish to hide from assistive technologies. The PR remains though on the principle of consistency with the individual "show" buttons.

Your comment brings up a gap in our guidance that we will review, we don’t seem to explain why the ‘show all’ button is essential in our content. The ‘show all sections’ action is intended to show all sections across the whole page. The reason that we may not have it in the guidance is we are trying not to encourage using multiple accordions on a page.

Did you test your content without an accordion first? Our accordion guidance does encourage avoiding using accordions, tabs or details within one another.

Do let us know if you have noted a particular user need that this change looks to resolve. If it helps, we might be able to advise on what might be a more appropriate solution.

Thanks again for suggesting this addition and for being patient whilst we review it :).

[dav-idc]

Hi again @shieldo! I've done a bit of info-gathering to help answer your comment about the unclear value of the 'Show all' accordion feature, when it comes to their usefulness for screen reader users.

This is to answer the underlying question in this previous comment:

I've checked with my team on this - I think we're unconvinced that a "show all" button would be useful for screen readers, though this would need some research! So perhaps, in actuality, this could be something one might wish to hide from assistive technologies. The PR remains though on the principle of consistency with the individual "show" buttons.

I'll use this sample from our GOV.UK Design System accordion guidance as an example: https://design-system.service.gov.uk/components/accordion/with-summary-section/index.html

'Show all' benefit to screen reader users

I tested that above example in VoiceOver:

• When the accordions are closed initially, VoiceOver only gives a list of 4 headings, and no additional lists for body content.
• When I select ‘show all’ to expand all the accordions, now VoiceOver can offer a list of all the links on the page, in addition to the headings.

So the value is that many screen reader tools offer a list of the different categories of content available on a page. When accordions are collapsed, then screen readers can't list any of the content inside the closed accordions. The 'Show all' feature should expand all accordions across the entire page, so that screen reader user can then see lists of all the links, headings, tables and other elements across the whole page.

'Show all' benefit to other users

I also tested that above example with the built-in page search function (ctrl+f or cmd+f):

• When the accordions are closed initially, searching for ‘principles’ returns 1 result.
• When the accordions are expanded using ‘show all’ to expand all the accordions, searching for ‘principles’ now returns 3 results.

So the value to all users is that a page-wide 'Show all' feature allows a user to navigate all the content on the page at once, using the in-page search function.

[shieldo]

Hi @CharlotteDowns and @davidc-gds - thank you both so much for taking the time to review this!

Getting a steer about the appropriateness of the accordion component for our use case is very useful for us - this page is subject to some upcoming review and we will reflect on this guidance when determining how best to convey the data.

The information in terms of screen readers and the utility of a show all button (that is, to reveal all hidden elements within a page, or at least the local section) is also very useful. We appreciate not wishing to implicitly encourage use of this component in a manner not intended.

Thanks again :)