Enhance the Accordion component with hidden='until-found'

CHANGELOG.md

@@ -2,6 +2,16 @@
 
 ## Unreleased
 
+### New features
+
+#### Search within accordion content on supporting browsers
+
+We've updated the Accordion component to use the new [`hidden="until-found"` attribute value](https://developer.chrome.com/articles/hidden-until-found/).
+
+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). 
+
 ### Fixes
 
 - [#2998: Refactor back link and breadcrumb chevrons to use ems](https://github.com/alphagov/govuk-frontend/pull/2998)

src/govuk/components/accordion/_index.scss

@@ -46,16 +46,21 @@
       padding-top: 0;
     }
 
-    // Hide the body of collapsed sections
-    .govuk-accordion__section-content {
+    // 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.
+    .govuk-accordion__section-content[hidden] {
       display: none;
-      @include govuk-responsive-padding(8, "bottom");
-      @include govuk-responsive-padding(3, "top");
+      @supports (content-visibility: hidden) {
+        content-visibility: hidden;
+        display: inherit;
+      }
     }
 
-    // Show the body of expanded sections
+    // Hide the padding of collapsed sections
     .govuk-accordion__section--expanded .govuk-accordion__section-content {
-      display: block;
+      @include govuk-responsive-padding(8, "bottom");
+      @include govuk-responsive-padding(3, "top");
     }
 
     .govuk-accordion__show-all {

src/govuk/components/accordion/accordion.mjs

@@ -3,6 +3,7 @@ import { normaliseDataset } from '../../common/normalise-dataset.mjs'
 import { I18n } from '../../i18n.mjs'
 import '../../vendor/polyfills/Function/prototype/bind.mjs'
 import '../../vendor/polyfills/Element/prototype/classList.mjs'
+import '../../vendor/polyfills/Element/prototype/closest.mjs'
 import '../../vendor/polyfills/String/prototype/trim.mjs'
 
 /**
@@ -55,6 +56,7 @@ function Accordion ($module, config) {
   this.showAllClass = 'govuk-accordion__show-all'
   this.showAllTextClass = 'govuk-accordion__show-all-text'
 
+  this.sectionClass = 'govuk-accordion__section'
   this.sectionExpandedClass = 'govuk-accordion__section--expanded'
   this.sectionButtonClass = 'govuk-accordion__section-button'
   this.sectionHeaderClass = 'govuk-accordion__section-header'
@@ -70,6 +72,7 @@ function Accordion ($module, config) {
 
   this.sectionSummaryClass = 'govuk-accordion__section-summary'
   this.sectionSummaryFocusClass = 'govuk-accordion__section-summary-focus'
+  this.sectionContentClass = 'govuk-accordion__section-content'
 }
 
 // Initialize component
@@ -113,6 +116,11 @@ Accordion.prototype.initControls = function () {
 
   // Handle click events on the show/hide all button
   this.$showAllButton.addEventListener('click', this.onShowOrHideAllToggle.bind(this))
+
+  // Handle 'beforematch' events, if the user agent supports them
+  if ('onbeforematch' in document) {
+    document.addEventListener('beforematch', this.onBeforeMatch.bind(this))
+  }
 }
 
 // Initialise section headers
@@ -229,6 +237,14 @@ Accordion.prototype.constructHeaderMarkup = function ($headerWrapper, index) {
   $heading.appendChild($button)
 }
 
+// When a section is opened by the user agent via the 'beforematch' event
+Accordion.prototype.onBeforeMatch = function (event) {
+  var $section = event.target.closest('.' + this.sectionClass)
+  if ($section) {
+    this.setExpanded(true, $section)
+  }
+}
+
 // When section toggled, set and store state
 Accordion.prototype.onSectionToggle = function ($section) {
   var expanded = this.isExpanded($section)
@@ -258,6 +274,8 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
   var $icon = $section.querySelector('.' + this.upChevronIconClass)
   var $showHideText = $section.querySelector('.' + this.sectionShowHideTextClass)
   var $button = $section.querySelector('.' + this.sectionButtonClass)
+  var $sectionContent = $section.querySelector('.' + this.sectionContentClass)
+
   var newButtonText = expanded
     ? this.i18n.t('hideSection')
     : this.i18n.t('showSection')
@@ -288,9 +306,11 @@ Accordion.prototype.setExpanded = function (expanded, $section) {
 
   // Swap icon, change class
   if (expanded) {
+    $sectionContent.removeAttribute('hidden')
     $section.classList.add(this.sectionExpandedClass)
     $icon.classList.remove(this.downChevronIconClass)
   } else {
+    $sectionContent.setAttribute('hidden', 'until-found')
     $section.classList.remove(this.sectionExpandedClass)
     $icon.classList.add(this.downChevronIconClass)
   }