From 8251854492e23f2c84ab32287f02eb4a65920aef Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Tue, 29 Nov 2022 16:11:39 +0000 Subject: [PATCH 1/3] Spike using [hidden='until-found'] on Accordion component --- src/govuk/components/accordion/_index.scss | 8 +------- src/govuk/components/accordion/accordion.mjs | 20 ++++++++++++++++++++ 2 files changed, 21 insertions(+), 7 deletions(-) diff --git a/src/govuk/components/accordion/_index.scss b/src/govuk/components/accordion/_index.scss index 94226710be..c1e2b3b8c0 100644 --- a/src/govuk/components/accordion/_index.scss +++ b/src/govuk/components/accordion/_index.scss @@ -47,17 +47,11 @@ } // Hide the body of collapsed sections - .govuk-accordion__section-content { - display: none; + .govuk-accordion__section--expanded .govuk-accordion__section-content { @include govuk-responsive-padding(8, "bottom"); @include govuk-responsive-padding(3, "top"); } - // 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; diff --git a/src/govuk/components/accordion/accordion.mjs b/src/govuk/components/accordion/accordion.mjs index 454f595924..79d1c68158 100644 --- a/src/govuk/components/accordion/accordion.mjs +++ b/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) } From fa20e33deabc5867d8806b766bf075a99a68c5e0 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Wed, 30 Nov 2022 11:29:11 +0000 Subject: [PATCH 2/3] Add CSS to hide collapsed accordion sections in legacy browsers Previously, browsers that did not have a user agent style for the `hidden` attribute (such as IE 10 and below) would always show section content, regardless of whether the section was expanded or collapsed. --- src/govuk/components/accordion/_index.scss | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/govuk/components/accordion/_index.scss b/src/govuk/components/accordion/_index.scss index c1e2b3b8c0..3379649838 100644 --- a/src/govuk/components/accordion/_index.scss +++ b/src/govuk/components/accordion/_index.scss @@ -46,7 +46,18 @@ padding-top: 0; } - // Hide the body of collapsed sections + // 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; + @supports (content-visibility: hidden) { + content-visibility: hidden; + display: inherit; + } + } + + // Hide the padding of collapsed sections .govuk-accordion__section--expanded .govuk-accordion__section-content { @include govuk-responsive-padding(8, "bottom"); @include govuk-responsive-padding(3, "top"); From 42b26e147ba17ae949e82a86af0e83dcb529b054 Mon Sep 17 00:00:00 2001 From: Kimberly Grey Date: Wed, 30 Nov 2022 14:21:16 +0000 Subject: [PATCH 3/3] Add changelog entry --- CHANGELOG.md | 10 ++++++++++ 1 file changed, 10 insertions(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 468f7b00f9..edaddd5826 100644 --- a/CHANGELOG.md +++ b/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)