Details component announces its default and expanded state 1 time but not subsequent times using NVDA

[mcheung-nhs]

Bug Report

What is the issue?

When using the details component with NVDA, expanding the summary text announces the 'expanded' state and when closing it, the 'collapsed' state is announced. However, subsequent opening and closing does not get announced.

What steps are required to reproduce the issue?

1. Go to a page with the details component, eg. https://www.nhs.uk/medicines/paracetamol-for-children/
2. Go to section 10, Common Questions
3. Enable NVDA and listen when expanding and collapsing any of the common questions details/summary components.
4. Observe that the first time you expand and collapse, it is announced. However, on subsequent time, it is not announced.

What was the environment where this issue occurred?

• Device: Windows Surface Pro 4
• Operating System: Windows 10
• Browser:Firefox
• Browser version: 89.0.2
• NVDA version 2020.4

Is there anything else you think would be useful in recreating the issue?

No

[andymantell]

I can reproduce this, on NVDA 2020.4 and 2021.1 in Firefox.
It doesn't occur in Chrome.
And crucially, it doesn't occur when I made a codepen with a really basic details element, so there's something uniquely wrong with the nhsuk-frontend one.

Will investigate...

[andymantell]

It appears that the JS polyfill that we are using and applying regardless of the presence of native details/summary support is actually making it worse in Firefox. When I disable this JS, Firefox starts behaving properly.

Speaking to @tomdoughty - this polyfill was put in at a time when even browsers that did support it, didn't support it well, and screenreaders were not announcing the state correctly.

However, it appears time has moved on, and support for the native element and assistive tech is better than it was. I feel therefore that we should only initialise the polyfill when support for the native element is not present.

This is backed up by this commit from govuk-frontend:
alphagov/govuk-frontend@f5cfa5f

At the moment, we do still need the polyfill for IE11 however so we cannot yet remove it entirely.

[andymantell]

Weirdly I seem to no longer be able to reproduce this issue! I could do this morning, but NVDA has updated itself since and now I can't get back to a broken state.

Nevertheless, I think the fix in the attached pull request is sensible anyway.