diff --git a/CHANGELOG.md b/CHANGELOG.md index 4e05e5053..1f49a3adf 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -11,6 +11,7 @@ - Transactional header defaults to wrapping underneath the logo without the need for a modifier ([Issue 720](https://github.com/nhsuk/nhsuk-frontend/issues/720)). - Add width, height, stroke and fill attributes to inline SVGs in order that they render at appropriate sizes when viewed with disabled/broken/missing CSS ([PR 761](https://github.com/nhsuk/nhsuk-frontend/pull/761)). - Search input focus state style (desktop) – fix border width ([Issue 768](https://github.com/nhsuk/nhsuk-frontend/issues/768), [PR 771](https://github.com/nhsuk/nhsuk-frontend/pull/771)). +- Stop polyfilling details elements in browsers that support it natively since the polyfill was causing issues with JAWS/Firefox ([Issue 754](https://github.com/nhsuk/nhsuk-frontend/issues/754), [PR 773](https://github.com/nhsuk/nhsuk-frontend/pull/773)) ## 5.1.0 - 14 May 2021 diff --git a/packages/components/details/details.js b/packages/components/details/details.js index bb9dacaae..d6e777a80 100644 --- a/packages/components/details/details.js +++ b/packages/components/details/details.js @@ -8,6 +8,10 @@ import { toggleAttribute } from '../../common'; export default () => { // Does the browser support details component const nativeSupport = typeof document.createElement('details').open === 'boolean'; + if (nativeSupport) { + return; + } + // Nodelist of all details elements const allDetails = document.querySelectorAll('details'); @@ -41,21 +45,18 @@ export default () => { } else { summary.setAttribute('aria-expanded', 'false'); content.setAttribute('aria-hidden', 'true'); - // Hide content on browsers without native details support - if (!nativeSupport) content.style.display = 'none'; + content.style.display = 'none'; } const toggleDetails = () => { toggleAttribute(summary, 'aria-expanded'); toggleAttribute(content, 'aria-hidden'); - if (!nativeSupport) { - content.style.display = content.getAttribute('aria-hidden') === 'true' ? 'none' : ''; - if (element.hasAttribute('open')) { - element.removeAttribute('open'); - } else { - element.setAttribute('open', 'open'); - } + content.style.display = content.getAttribute('aria-hidden') === 'true' ? 'none' : ''; + if (element.hasAttribute('open')) { + element.removeAttribute('open'); + } else { + element.setAttribute('open', 'open'); } };