govuk_publishing_components 29.9.0 → 29.10.0

data/node_modules/govuk-frontend/govuk-esm/components/error-summary/error-summary.mjs

@@ -0,0 +1,168 @@
+import '../../vendor/polyfills/Function/prototype/bind'
+import '../../vendor/polyfills/Event' // addEventListener
+import '../../vendor/polyfills/Element/prototype/closest'
+
+function ErrorSummary ($module) {
+  this.$module = $module
+}
+
+ErrorSummary.prototype.init = function () {
+  var $module = this.$module
+  if (!$module) {
+    return
+  }
+
+  this.setFocus()
+  $module.addEventListener('click', this.handleClick.bind(this))
+}
+
+/**
+ * Focus the error summary
+ */
+ErrorSummary.prototype.setFocus = function () {
+  var $module = this.$module
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  // Set tabindex to -1 to make the element programmatically focusable, but
+  // remove it on blur as the error summary doesn't need to be focused again.
+  $module.setAttribute('tabindex', '-1')
+
+  $module.addEventListener('blur', function () {
+    $module.removeAttribute('tabindex')
+  })
+
+  $module.focus()
+}
+
+/**
+* Click event handler
+*
+* @param {MouseEvent} event - Click event
+*/
+ErrorSummary.prototype.handleClick = function (event) {
+  var target = event.target
+  if (this.focusTarget(target)) {
+    event.preventDefault()
+  }
+}
+
+/**
+ * Focus the target element
+ *
+ * By default, the browser will scroll the target into view. Because our labels
+ * or legends appear above the input, this means the user will be presented with
+ * an input without any context, as the label or legend will be off the top of
+ * the screen.
+ *
+ * Manually handling the click event, scrolling the question into view and then
+ * focussing the element solves this.
+ *
+ * This also results in the label and/or legend being announced correctly in
+ * NVDA (as tested in 2018.3.2) - without this only the field type is announced
+ * (e.g. "Edit, has autocomplete").
+ *
+ * @param {HTMLElement} $target - Event target
+ * @returns {boolean} True if the target was able to be focussed
+ */
+ErrorSummary.prototype.focusTarget = function ($target) {
+  // If the element that was clicked was not a link, return early
+  if ($target.tagName !== 'A' || $target.href === false) {
+    return false
+  }
+
+  var inputId = this.getFragmentFromUrl($target.href)
+  var $input = document.getElementById(inputId)
+  if (!$input) {
+    return false
+  }
+
+  var $legendOrLabel = this.getAssociatedLegendOrLabel($input)
+  if (!$legendOrLabel) {
+    return false
+  }
+
+  // Scroll the legend or label into view *before* calling focus on the input to
+  // avoid extra scrolling in browsers that don't support `preventScroll` (which
+  // at time of writing is most of them...)
+  $legendOrLabel.scrollIntoView()
+  $input.focus({ preventScroll: true })
+
+  return true
+}
+
+/**
+ * Get fragment from URL
+ *
+ * Extract the fragment (everything after the hash) from a URL, but not including
+ * the hash.
+ *
+ * @param {string} url - URL
+ * @returns {string} Fragment from URL, without the hash
+ */
+ErrorSummary.prototype.getFragmentFromUrl = function (url) {
+  if (url.indexOf('#') === -1) {
+    return false
+  }
+
+  return url.split('#').pop()
+}
+
+/**
+ * Get associated legend or label
+ *
+ * Returns the first element that exists from this list:
+ *
+ * - The `<legend>` associated with the closest `<fieldset>` ancestor, as long
+ *   as the top of it is no more than half a viewport height away from the
+ *   bottom of the input
+ * - The first `<label>` that is associated with the input using for="inputId"
+ * - The closest parent `<label>`
+ *
+ * @param {HTMLElement} $input - The input
+ * @returns {HTMLElement} Associated legend or label, or null if no associated
+ *                        legend or label can be found
+ */
+ErrorSummary.prototype.getAssociatedLegendOrLabel = function ($input) {
+  var $fieldset = $input.closest('fieldset')
+
+  if ($fieldset) {
+    var legends = $fieldset.getElementsByTagName('legend')
+
+    if (legends.length) {
+      var $candidateLegend = legends[0]
+
+      // If the input type is radio or checkbox, always use the legend if there
+      // is one.
+      if ($input.type === 'checkbox' || $input.type === 'radio') {
+        return $candidateLegend
+      }
+
+      // For other input types, only scroll to the fieldset’s legend (instead of
+      // the label associated with the input) if the input would end up in the
+      // top half of the screen.
+      //
+      // This should avoid situations where the input either ends up off the
+      // screen, or obscured by a software keyboard.
+      var legendTop = $candidateLegend.getBoundingClientRect().top
+      var inputRect = $input.getBoundingClientRect()
+
+      // If the browser doesn't support Element.getBoundingClientRect().height
+      // or window.innerHeight (like IE8), bail and just link to the label.
+      if (inputRect.height && window.innerHeight) {
+        var inputBottom = inputRect.top + inputRect.height
+
+        if (inputBottom - legendTop < window.innerHeight / 2) {
+          return $candidateLegend
+        }
+      }
+    }
+  }
+
+  return document.querySelector("label[for='" + $input.getAttribute('id') + "']") ||
+    $input.closest('label')
+}
+
+export default ErrorSummary

data/node_modules/govuk-frontend/govuk-esm/components/header/header.mjs

@@ -0,0 +1,52 @@
+import '../../vendor/polyfills/Event'
+import '../../vendor/polyfills/Element/prototype/classList'
+import '../../vendor/polyfills/Function/prototype/bind'
+
+function Header ($module) {
+  this.$module = $module
+  this.$menuButton = $module && $module.querySelector('.govuk-js-header-toggle')
+  this.$menu = this.$menuButton && $module.querySelector(
+    '#' + this.$menuButton.getAttribute('aria-controls')
+  )
+}
+
+/**
+ * Initialise header
+ *
+ * Check for the presence of the header, menu and menu button – if any are
+ * missing then there's nothing to do so return early.
+ */
+Header.prototype.init = function () {
+  if (!this.$module || !this.$menuButton || !this.$menu) {
+    return
+  }
+
+  this.syncState(this.$menu.classList.contains('govuk-header__navigation-list--open'))
+  this.$menuButton.addEventListener('click', this.handleMenuButtonClick.bind(this))
+}
+
+/**
+ * Sync menu state
+ *
+ * Sync the menu button class and the accessible state of the menu and the menu
+ * button with the visible state of the menu
+ *
+ * @param {boolean} isVisible Whether the menu is currently visible
+ */
+Header.prototype.syncState = function (isVisible) {
+  this.$menuButton.classList.toggle('govuk-header__menu-button--open', isVisible)
+  this.$menuButton.setAttribute('aria-expanded', isVisible)
+}
+
+/**
+ * Handle menu button click
+ *
+ * When the menu button is clicked, change the visibility of the menu and then
+ * sync the accessibility state and menu button state
+ */
+Header.prototype.handleMenuButtonClick = function () {
+  var isVisible = this.$menu.classList.toggle('govuk-header__navigation-list--open')
+  this.syncState(isVisible)
+}
+
+export default Header

data/node_modules/govuk-frontend/govuk-esm/components/notification-banner/notification-banner.mjs

@@ -0,0 +1,55 @@
+import '../../vendor/polyfills/Event' // addEventListener
+
+function NotificationBanner ($module) {
+  this.$module = $module
+}
+
+/**
+ * Initialise the component
+ */
+NotificationBanner.prototype.init = function () {
+  var $module = this.$module
+  // Check for module
+  if (!$module) {
+    return
+  }
+
+  this.setFocus()
+}
+
+/**
+ * Focus the element
+ *
+ * If `role="alert"` is set, focus the element to help some assistive technologies
+ * prioritise announcing it.
+ *
+ * You can turn off the auto-focus functionality by setting `data-disable-auto-focus="true"` in the
+ * component HTML. You might wish to do this based on user research findings, or to avoid a clash
+ * with another element which should be focused when the page loads.
+ */
+NotificationBanner.prototype.setFocus = function () {
+  var $module = this.$module
+
+  if ($module.getAttribute('data-disable-auto-focus') === 'true') {
+    return
+  }
+
+  if ($module.getAttribute('role') !== 'alert') {
+    return
+  }
+
+  // Set tabindex to -1 to make the element focusable with JavaScript.
+  // Remove the tabindex on blur as the component doesn't need to be focusable after the page has
+  // loaded.
+  if (!$module.getAttribute('tabindex')) {
+    $module.setAttribute('tabindex', '-1')
+
+    $module.addEventListener('blur', function () {
+      $module.removeAttribute('tabindex')
+    })
+  }
+
+  $module.focus()
+}
+
+export default NotificationBanner

data/node_modules/govuk-frontend/govuk-esm/components/radios/radios.mjs

@@ -0,0 +1,122 @@
+import '../../vendor/polyfills/Function/prototype/bind'
+// addEventListener, event.target normalization and DOMContentLoaded
+import '../../vendor/polyfills/Event'
+import '../../vendor/polyfills/Element/prototype/classList'
+import { nodeListForEach } from '../../common'
+
+function Radios ($module) {
+  this.$module = $module
+  this.$inputs = $module.querySelectorAll('input[type="radio"]')
+}
+
+/**
+ * Initialise Radios
+ *
+ * Radios can be associated with a 'conditionally revealed' content block – for
+ * example, a radio for 'Phone' could reveal an additional form field for the
+ * user to enter their phone number.
+ *
+ * These associations are made using a `data-aria-controls` attribute, which is
+ * promoted to an aria-controls attribute during initialisation.
+ *
+ * We also need to restore the state of any conditional reveals on the page (for
+ * example if the user has navigated back), and set up event handlers to keep
+ * the reveal in sync with the radio state.
+ */
+Radios.prototype.init = function () {
+  var $module = this.$module
+  var $inputs = this.$inputs
+
+  nodeListForEach($inputs, function ($input) {
+    var target = $input.getAttribute('data-aria-controls')
+
+    // Skip radios without data-aria-controls attributes, or where the
+    // target element does not exist.
+    if (!target || !document.getElementById(target)) {
+      return
+    }
+
+    // Promote the data-aria-controls attribute to a aria-controls attribute
+    // so that the relationship is exposed in the AOM
+    $input.setAttribute('aria-controls', target)
+    $input.removeAttribute('data-aria-controls')
+  })
+
+  // When the page is restored after navigating 'back' in some browsers the
+  // state of form controls is not restored until *after* the DOMContentLoaded
+  // event is fired, so we need to sync after the pageshow event in browsers
+  // that support it.
+  if ('onpageshow' in window) {
+    window.addEventListener('pageshow', this.syncAllConditionalReveals.bind(this))
+  } else {
+    window.addEventListener('DOMContentLoaded', this.syncAllConditionalReveals.bind(this))
+  }
+
+  // Although we've set up handlers to sync state on the pageshow or
+  // DOMContentLoaded event, init could be called after those events have fired,
+  // for example if they are added to the page dynamically, so sync now too.
+  this.syncAllConditionalReveals()
+
+  // Handle events
+  $module.addEventListener('click', this.handleClick.bind(this))
+}
+
+/**
+ * Sync the conditional reveal states for all inputs in this $module.
+ */
+Radios.prototype.syncAllConditionalReveals = function () {
+  nodeListForEach(this.$inputs, this.syncConditionalRevealWithInputState.bind(this))
+}
+
+/**
+ * Sync conditional reveal with the input state
+ *
+ * Synchronise the visibility of the conditional reveal, and its accessible
+ * state, with the input's checked state.
+ *
+ * @param {HTMLInputElement} $input Radio input
+ */
+Radios.prototype.syncConditionalRevealWithInputState = function ($input) {
+  var $target = document.getElementById($input.getAttribute('aria-controls'))
+
+  if ($target && $target.classList.contains('govuk-radios__conditional')) {
+    var inputIsChecked = $input.checked
+
+    $input.setAttribute('aria-expanded', inputIsChecked)
+    $target.classList.toggle('govuk-radios__conditional--hidden', !inputIsChecked)
+  }
+}
+
+/**
+ * Click event handler
+ *
+ * Handle a click within the $module – if the click occurred on a radio, sync
+ * the state of the conditional reveal for all radio buttons in the same form
+ * with the same name (because checking one radio could have un-checked a radio
+ * in another $module)
+ *
+ * @param {MouseEvent} event Click event
+ */
+Radios.prototype.handleClick = function (event) {
+  var $clickedInput = event.target
+
+  // Ignore clicks on things that aren't radio buttons
+  if ($clickedInput.type !== 'radio') {
+    return
+  }
+
+  // We only need to consider radios with conditional reveals, which will have
+  // aria-controls attributes.
+  var $allInputs = document.querySelectorAll('input[type="radio"][aria-controls]')
+
+  nodeListForEach($allInputs, function ($input) {
+    var hasSameFormOwner = ($input.form === $clickedInput.form)
+    var hasSameName = ($input.name === $clickedInput.name)
+
+    if (hasSameName && hasSameFormOwner) {
+      this.syncConditionalRevealWithInputState($input)
+    }
+  }.bind(this))
+}
+
+export default Radios

data/node_modules/govuk-frontend/govuk-esm/components/skip-link/skip-link.mjs

@@ -0,0 +1,94 @@
+import '../../vendor/polyfills/Function/prototype/bind'
+import '../../vendor/polyfills/Element/prototype/classList'
+import '../../vendor/polyfills/Event' // addEventListener and event.target normalization
+
+function SkipLink ($module) {
+  this.$module = $module
+  this.$linkedElement = null
+  this.linkedElementListener = false
+}
+
+/**
+ * Initialise the component
+ */
+SkipLink.prototype.init = function () {
+  // Check for module
+  if (!this.$module) {
+    return
+  }
+
+  // Check for linked element
+  this.$linkedElement = this.getLinkedElement()
+  if (!this.$linkedElement) {
+    return
+  }
+
+  this.$module.addEventListener('click', this.focusLinkedElement.bind(this))
+}
+
+/**
+* Get linked element
+*
+* @returns {HTMLElement} $linkedElement - DOM element linked to from the skip link
+*/
+SkipLink.prototype.getLinkedElement = function () {
+  var linkedElementId = this.getFragmentFromUrl()
+
+  if (!linkedElementId) {
+    return false
+  }
+
+  return document.getElementById(linkedElementId)
+}
+
+/**
+ * Focus the linked element
+ *
+ * Set tabindex and helper CSS class. Set listener to remove them on blur.
+ */
+SkipLink.prototype.focusLinkedElement = function () {
+  var $linkedElement = this.$linkedElement
+
+  if (!$linkedElement.getAttribute('tabindex')) {
+    // Set the element tabindex to -1 so it can be focused with JavaScript.
+    $linkedElement.setAttribute('tabindex', '-1')
+    $linkedElement.classList.add('govuk-skip-link-focused-element')
+
+    // Add listener for blur on the focused element (unless the listener has previously been added)
+    if (!this.linkedElementListener) {
+      this.$linkedElement.addEventListener('blur', this.removeFocusProperties.bind(this))
+      this.linkedElementListener = true
+    }
+  }
+  $linkedElement.focus()
+}
+
+/**
+ * Remove the tabindex that makes the linked element focusable because the element only needs to be
+ * focusable until it has received programmatic focus and a screen reader has announced it.
+ *
+ * Remove the CSS class that removes the native focus styles.
+ */
+SkipLink.prototype.removeFocusProperties = function () {
+  this.$linkedElement.removeAttribute('tabindex')
+  this.$linkedElement.classList.remove('govuk-skip-link-focused-element')
+}
+
+/**
+ * Get fragment from URL
+ *
+ * Extract the fragment (everything after the hash symbol) from a URL, but not including
+ * the symbol.
+ *
+ * @returns {string} Fragment from URL, without the hash symbol
+ */
+SkipLink.prototype.getFragmentFromUrl = function () {
+  // Bail if the anchor link doesn't have a hash
+  if (!this.$module.hash) {
+    return false
+  }
+
+  return this.$module.hash.split('#').pop()
+}
+
+export default SkipLink