Add details js enhancement

packages/govuk-frontend/src/govuk/all.mjs

@@ -3,6 +3,7 @@ export { Accordion } from './components/accordion/accordion.mjs'
 export { Button } from './components/button/button.mjs'
 export { CharacterCount } from './components/character-count/character-count.mjs'
 export { Checkboxes } from './components/checkboxes/checkboxes.mjs'
+export { Details } from './components/details/details.mjs'
 export { ErrorSummary } from './components/error-summary/error-summary.mjs'
 export { ExitThisPage } from './components/exit-this-page/exit-this-page.mjs'
 export { Header } from './components/header/header.mjs'

packages/govuk-frontend/src/govuk/all.puppeteer.test.js

@@ -54,6 +54,7 @@ describe('GOV.UK Frontend', () => {
         'Button',
         'CharacterCount',
         'Checkboxes',
+        'Details',
         'ErrorSummary',
         'ExitThisPage',
         'Header',

packages/govuk-frontend/src/govuk/components/details/details.mjs

@@ -0,0 +1,66 @@
+import { ElementError } from '../../errors/index.mjs'
+import { GOVUKFrontendComponent } from '../../govuk-frontend-component.mjs'
+
+/**
+ * Details component
+ *
+ * @preserve
+ */
+export class Details extends GOVUKFrontendComponent {
+  /** @private */
+  $module
+
+  /**
+   * @param {Element | null} $module - HTML element to use for skip link
+   * @throws {ElementError} when $module is not set or the wrong type
+   * @throws {ElementError} when no summary element is present
+   */
+  constructor($module) {
+    super()
+
+    if (!($module instanceof HTMLDetailsElement)) {
+      throw new ElementError({
+        componentName: 'Details',
+        element: $module,
+        expectedType: 'HTMLAnchorElement',
+        identifier: 'Root element (`$module`)'
+      })
+    }
+
+    this.$module = $module
+    this.$summary = this.$module.querySelector('.govuk-details__summary')
+
+    if (!this.$summary) {
+      throw new ElementError({
+        componentName: 'Details',
+        identifier:
+          'Summary element (`<summary class="govuk-details__summary">`)'
+      })
+    }
+
+    // Give the summary a button role so that dragon recognises it.
+    // This is a known issue with dragon and the details element and ideally would
+    // be fixed at the vendor level.
+    this.$summary.setAttribute('role', 'button')
+    this.setSummaryExpandedState()
+
+    this.$module.addEventListener('click', () => this.setSummaryExpandedState())
+  }
+
+  /**
+   * Set `aria-expanded` state of summary element
+   *
+   * @private
+   */
+  setSummaryExpandedState() {
+    this.$summary.setAttribute(
+      'aria-expanded',
+      this.$module.open ? 'true' : 'false'
+    )
+  }
+
+  /**
+   * Name for the component used when initialising using data-module attributes.
+   */
+  static moduleName = 'govuk-details'
+}

packages/govuk-frontend/src/govuk/components/details/template.njk

@@ -1,9 +1,9 @@
 {% from "../../macros/attributes.njk" import govukAttributes -%}
 
-<details {%- if params.id %} id="{{ params.id }}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}"
+<details {%- if params.id %} id="{{ params.id }}"{% endif %} data-module="govuk-details" class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}"
   {{- govukAttributes(params.attributes) -}}
   {{- " open" if params.open }}>
-  <summary class="govuk-details__summary" role="button">
+  <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       {{ params.summaryHtml | safe | trim | indent(6) if params.summaryHtml else params.summaryText }}
     </span>

packages/govuk-frontend/src/govuk/init.mjs

@@ -1,3 +1,5 @@
+import { Details } from 'govuk-frontend'
+
 import { isSupported } from './common/index.mjs'
 import { Accordion } from './components/accordion/accordion.mjs'
 import { Button } from './components/button/button.mjs'
@@ -13,6 +15,7 @@ import { ServiceNavigation } from './components/service-navigation/service-navig
 import { SkipLink } from './components/skip-link/skip-link.mjs'
 import { Tabs } from './components/tabs/tabs.mjs'
 import { SupportError } from './errors/index.mjs'
+export { Details } from './components/details/details.mjs'
 
 /**
  * Initialise all components
@@ -36,6 +39,7 @@ function initAll(config) {
     [Button, config.button],
     [CharacterCount, config.characterCount],
     [Checkboxes],
+    [Details],
     [ErrorSummary, config.errorSummary],
     [ExitThisPage, config.exitThisPage],
     [Header],