Merge pull request #773 from nhsuk/feature/fix-details-element-in-fir…

…efox-nvda

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
 

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');
       }
     };