search

alphagov / govuk-frontend

GOV.UK Frontend contains the code you need to start building a user interface for government platforms and services.
https://frontend.design-system.service.gov.uk/
MIT License
1.16k stars 319 forks source link

Accordion: Deep links to an anchor in another section do not work if the section is not expanded. #1581

Open NickColley opened 4 years ago

NickColley commented 4 years ago

Hi folks,

A colleague has noticed what appears to be an issue with the accordion pattern: deep links to an anchor in another section do not work if the section is not expanded.

We've encountered the issue specifically on our HMRC content style guide, which uses the GOV.UK Accordion pattern. See, for example, the entry for "duty" linking through to "capitalisation of taxes, duties and levies".

jennifer-hodgson's original comment

NickColley commented 4 years ago

I've had a look at how GOV.UK's Manuals deal with this and they look detect when a link inside a section is focused, then open the section if it is:

https://github.com/alphagov/manuals-frontend/blob/165027be5e39ab84daf9846577389fca32840f33/app/assets/javascripts/modules/collapsible.js#L12

Update: Actually that's not related but will leave this comment for reference.

NickColley commented 4 years ago

Is this also going to be an issue with Details, Tabs, Conditional Reveals etc?

NickColley commented 4 years ago

I've noticed we do something similar on the design system website to show content:

http://localhost:3000/components/error-message/#options-error-message-example

We should consider making sure that users can disable this code, perhaps by preventDefault() or something?

It may be that we can remove some custom code in the design system website.

NickColley commented 4 years ago

It looks like the original team has managed to work around this for now.

We think this could be a complicated fix so we're going to pause our investigation and see if anyone else runs into this issue before prioritising it.

36degrees commented 1 year ago

This is something that GOV.UK are currently adding in their additional accordion JavaScript:

I've added this for consideration for a future 5.x release. I'd suggest we could implement by listening for the hashchange event instead, which would hopefully be performant enough we could enable it by default.

kelliedesigner commented 3 months ago

There is a need for this in my current prototype at DfE.

We are working on https://www.find-postgraduate-teacher-training.service.gov.uk/

This service allows users to find postgraduate teaching courses in England if they want to teach in a state primary or secondary school, or in further education.

The user need we are exploring is to allow candidates to easily compare courses. This is something which is currently very difficult, as the course pages are long and overwhelming, and contain a lot of duplicate information.

We are currently exploring the use of an accordion to help users navigate the information.

As part of this, we wanted to provide users with a deep link from two sections at the top of the page, one on 'Fees and financial support', and one on 'How placements work'.

We are unable to do this in the current prototype, I can anchor to the accordion section id, but I cannot open the section.

Screenshot 2024-05-22 at 15 28 34 Screenshot 2024-05-22 at 15 28 40

github-actions[bot] commented 3 months ago

Uh oh! @kelliedesigner, the image you shared is missing helpful alt text. Check https://github.com/alphagov/govuk-frontend/issues/1581#issuecomment-2124947179.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

🤖 Beep boop! This comment was added automatically by github/accessibility-alt-text-bot.

36degrees commented 3 months ago

I think there are two slightly separate things being discussed here:

Opening sections when following a link to a target within a section.

I think this should now 'just work' in Chromium-based browsers because of the use of hidden="until-found" which covers fragment navigation as well as find-in-page:

When an element has the hidden attribute in the hidden until found state, it indicates that the element is hidden like the hidden state but the content inside the element will be accessible to find-in-page and fragment navigation. When these features attempt to scroll to a target which is in the element's subtree, the user agent will remove the hidden attribute in order to reveal the content before scrolling to it.

However, this remains a Chromium-exclusive feature although both Webkit and Mozilla have shown positive signals towards implementing it:

Opening sections by linking directly to a section

I think this is what @kelliedesigner is requesting. This isn't covered by hidden="until-found" and would require us to make changes to the accordion JavaScript to expand sections on page load / hash change.

GOV.UK Publishing Components continue to include additional JavasScript which covers both of these features.