Merge pull request #3095 from alphagov/accordion-default-visibility

Hide Accordion content (again) during `.js-enabled` page load

CHANGELOG.md

@@ -10,7 +10,10 @@ We've updated the Accordion component to use the new [`hidden="until-found"` att
 
 This allows the browser's native 'find in page' functionality to search within and automatically open sections of the accordion. Currently, this functionality is only supported by recent versions of Google Chrome, Microsoft Edge and Samsung Internet.
 
-This was added in [pull request #3053: Enhance the Accordion component with `hidden='until-found'`](https://github.com/alphagov/govuk-frontend/pull/3053). 
+This was added in pull requests:
+
+- [#3053: Enhance the Accordion component with `hidden='until-found'`](https://github.com/alphagov/govuk-frontend/pull/3053)
+- [#3095: Hide Accordion content (again) during `.js-enabled` page load](https://github.com/alphagov/govuk-frontend/pull/3095)
 
 #### Source maps for precompiled files
 
@@ -25,6 +28,7 @@ We've made fixes to GOV.UK Frontend in the following pull requests:
 - [#2998: Refactor back link and breadcrumb chevrons to use ems](https://github.com/alphagov/govuk-frontend/pull/2998)
 - [#3021: Printing style for current page link in header](https://github.com/alphagov/govuk-frontend/pull/3021) - thanks to [Malcolm Butler](https://github.com/MalcolmVonMoJ) for the contribution
 - [#3112: Remove unused `classList` polyfill from header component JavaScript](https://github.com/alphagov/govuk-frontend/pull/3112)
+- [#3094: Fix Accordion margin/padding inconsistencies](https://github.com/alphagov/govuk-frontend/pull/3094)
 - [#3150: Add missing `Event` polyfill to accordion component JavaScript](https://github.com/alphagov/govuk-frontend/pull/3150)
 - [Correcting incorrect closing double quotes in pagination Nunjucks](https://github.com/alphagov/govuk-frontend/pull/3156)
 

src/govuk/components/accordion/_index.scss

@@ -46,17 +46,18 @@
       padding-top: 0;
     }
 
+    // Hide the body of collapsed sections by default for browsers that lack
+    // support for `content-visibility` paired with [hidden=until-found]
     .govuk-accordion__section-content {
+      display: none;
+
       @include govuk-responsive-padding(3, "top");
       @include govuk-responsive-padding(8, "bottom");
     }
 
-    // Manually apply display: none to browsers that don't have a user agent
-    // style for it, but override it with content-visibility if the browser
-    // supports that instead.
+    // Hide the body of collapsed sections using `content-visibility` to enable
+    // page search within [hidden=until-found] regions where browser supported
     .govuk-accordion__section-content[hidden] {
-      display: none;
-
       @supports (content-visibility: hidden) {
         content-visibility: hidden;
         display: inherit;
@@ -67,6 +68,11 @@
       padding-bottom: 0;
     }
 
+    // Show the body of expanded sections
+    .govuk-accordion__section--expanded .govuk-accordion__section-content {
+      display: block;
+    }
+
     .govuk-accordion__show-all {
       @include govuk-font($size: 19);
       position: relative;