Ensure GOV.UK Frontend component selectors cannot conflict when initialised

app/full-page-examples.test.js

@@ -66,7 +66,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($.html()).toContain('Send your feedback')
 
           // Check that the error summary is not visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeFalsy()
           done(err)
         })
@@ -83,7 +83,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($('title').text()).toContain('Error:')
 
           // Check that the error summary is visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeTruthy()
           done(err)
         })
@@ -100,7 +100,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($.html()).toContain('Have you changed your name?')
 
           // Check that the error summary is not visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeFalsy()
           done(err)
         })
@@ -117,7 +117,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($('title').text()).toContain('Error:')
 
           // Check that the error summary is visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeTruthy()
           done(err)
         })
@@ -134,7 +134,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($.html()).toContain('Passport details')
 
           // Check that the error summary is not visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeFalsy()
           done(err)
         })
@@ -151,7 +151,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($('title').text()).toContain('Error:')
 
           // Check that the error summary is visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeTruthy()
           done(err)
         })
@@ -168,7 +168,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($.html()).toContain('Update your account details')
 
           // Check that the error summary is not visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeFalsy()
           done(err)
         })
@@ -185,7 +185,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($('title').text()).toContain('Error:')
 
           // Check that the error summary is visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeTruthy()
           done(err)
         })
@@ -202,7 +202,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($.html()).toContain('Upload your photo')
 
           // Check that the error summary is not visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeFalsy()
           done(err)
         })
@@ -219,7 +219,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($('title').text()).toContain('Error:')
 
           // Check that the error summary is visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeTruthy()
           done(err)
         })
@@ -236,7 +236,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($.html()).toContain('How do you want to sign in?')
 
           // Check that the error summary is not visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeFalsy()
           done(err)
         })
@@ -253,7 +253,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($('title').text()).toContain('Error:')
 
           // Check that the error summary is visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeTruthy()
           done(err)
         })
@@ -270,7 +270,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($.html()).toContain('What is your nationality?')
 
           // Check that the error summary is not visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeFalsy()
           done(err)
         })
@@ -287,7 +287,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($('title').text()).toContain('Error:')
 
           // Check that the error summary is visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeTruthy()
           done(err)
         })
@@ -304,7 +304,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($.html()).toContain('What is your address?')
 
           // Check that the error summary is not visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeFalsy()
           done(err)
         })
@@ -321,7 +321,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($('title').text()).toContain('Error:')
 
           // Check that the error summary is visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeTruthy()
           done(err)
         })
@@ -338,7 +338,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($.html()).toContain('What is your home postcode?')
 
           // Check that the error summary is not visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeFalsy()
           done(err)
         })
@@ -355,7 +355,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($('title').text()).toContain('Error:')
 
           // Check that the error summary is visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeTruthy()
           done(err)
         })
@@ -399,7 +399,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($.html()).toContain('What was the last country you visited?')
 
           // Check that the error summary is not visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeFalsy()
           done(err)
         })
@@ -416,7 +416,7 @@ describe(`http://localhost:${PORT}/full-page-examples/`, () => {
           expect($('title').text()).toContain('Error:')
 
           // Check that the error summary is visible
-          let $errorSummary = $('[data-module="error-summary"]')
+          let $errorSummary = $('[data-module="govuk-error-summary"]')
           expect($errorSummary.length).toBeTruthy()
           done(err)
         })

docs/installation/installing-with-npm.md

@@ -179,7 +179,7 @@ To initialise the first radio component on a page, use:
 
 ```js
 var Radios = window.GOVUKFrontend.Radios
-var $radio = document.querySelector('[data-module="radios"]')
+var $radio = document.querySelector('[data-module="govuk-radios"]')
 if ($radio) {
   new Radios($radio).init()
 }
@@ -229,7 +229,7 @@ You can use this attribute to initialise the component manually, this may be use
 To initialise the first radio component on a page, use:
 
 ```js
-var $radio = document.querySelector('[data-module="radios"]')
+var $radio = document.querySelector('[data-module="govuk-radios"]')
 if ($radio) {
   new Radios($radio).init()
 }

src/all.js

@@ -17,45 +17,45 @@ function initAll (options) {
   // Defaults to the entire document if nothing is set.
   var scope = typeof options.scope !== 'undefined' ? options.scope : document
 
-  // Find all buttons with [role=button] on the scope to enhance.
-  new Button(scope).init()
+  var $buttons = scope.querySelectorAll('[data-module="govuk-button"]')
+  nodeListForEach($buttons, function ($button) {
+    new Button($button).init()
+  })
 
-  // Find all global accordion components to enhance.
-  var $accordions = scope.querySelectorAll('[data-module="accordion"]')
+  var $accordions = scope.querySelectorAll('[data-module="govuk-accordion"]')
   nodeListForEach($accordions, function ($accordion) {
     new Accordion($accordion).init()
   })
 
-  // Find all global details elements to enhance.
-  var $details = scope.querySelectorAll('details')
+  var $details = scope.querySelectorAll('[data-module="govuk-details"]')
   nodeListForEach($details, function ($detail) {
     new Details($detail).init()
   })
 
-  var $characterCount = scope.querySelectorAll('[data-module="character-count"]')
-  nodeListForEach($characterCount, function ($characterCount) {
+  var $characterCounts = scope.querySelectorAll('[data-module="govuk-character-count"]')
+  nodeListForEach($characterCounts, function ($characterCount) {
     new CharacterCount($characterCount).init()
   })
 
-  var $checkboxes = scope.querySelectorAll('[data-module="checkboxes"]')
+  var $checkboxes = scope.querySelectorAll('[data-module="govuk-checkboxes"]')
   nodeListForEach($checkboxes, function ($checkbox) {
     new Checkboxes($checkbox).init()
   })
 
   // Find first error summary module to enhance.
-  var $errorSummary = scope.querySelector('[data-module="error-summary"]')
+  var $errorSummary = scope.querySelector('[data-module="govuk-error-summary"]')
   new ErrorSummary($errorSummary).init()
 
   // Find first header module to enhance.
-  var $toggleButton = scope.querySelector('[data-module="header"]')
+  var $toggleButton = scope.querySelector('[data-module="govuk-header"]')
   new Header($toggleButton).init()
 
-  var $radios = scope.querySelectorAll('[data-module="radios"]')
+  var $radios = scope.querySelectorAll('[data-module="govuk-radios"]')
   nodeListForEach($radios, function ($radio) {
     new Radios($radio).init()
   })
 
-  var $tabs = scope.querySelectorAll('[data-module="tabs"]')
+  var $tabs = scope.querySelectorAll('[data-module="govuk-tabs"]')
   nodeListForEach($tabs, function ($tabs) {
     new Tabs($tabs).init()
   })

src/components/accordion/template.njk

@@ -1,7 +1,7 @@
 {% set id = params.id %}
 {% set headingLevel = params.headingLevel if params.headingLevel else 2 %}
 
-<div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif -%}"  data-module="accordion" id="{{ id }}"
+<div class="govuk-accordion {%- if params.classes %} {{ params.classes }}{% endif -%}" data-module="govuk-accordion" id="{{ id }}"
 {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   {% for item in params.items %}
     <div class="govuk-accordion__section {% if item.expanded %}govuk-accordion__section--expanded{% endif %}">

src/components/button/button.js

@@ -1,13 +1,3 @@
-/**
- * JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
- *
- * Created since some Assistive Technologies (for example some Screenreaders)
- * will tell a user to press space on a 'button', so this functionality needs to be shimmed
- * See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
- *
- * Usage instructions:
- * the 'shim' will be automatically initialised
- */
 import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation
 
 var KEY_SPACE = 32
@@ -19,8 +9,12 @@ function Button ($module) {
 }
 
 /**
-* if the event target element has a role='button' and the event is key space pressed
-* then it prevents the default event and triggers a click event
+* JavaScript 'shim' to trigger the click event of element(s) when the space key is pressed.
+*
+* Created since some Assistive Technologies (for example some Screenreaders)
+* will tell a user to press space on a 'button', so this functionality needs to be shimmed
+* See https://github.com/alphagov/govuk_elements/pull/272#issuecomment-233028270
+*
 * @param {object} event event
 */
 Button.prototype.handleKeyDown = function (event) {

src/components/button/template.njk

@@ -33,7 +33,7 @@ treat it as an interactive element - without this it will be
 
 {#- Define common attributes that we can use across all element types #}
 
-{%- set commonAttributes %} class="{{ classNames }}"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
+{%- set commonAttributes %} class="{{ classNames }}" data-module="govuk-button"{% for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}{% endset %}
 
 {#- Define common attributes we can use for both button and input types #}
 

src/components/character-count/template.njk

@@ -1,6 +1,6 @@
 {% from "../textarea/macro.njk" import govukTextarea %}
 
-<div class="govuk-character-count" data-module="character-count"
+<div class="govuk-character-count" data-module="govuk-character-count"
 {%- if params.maxlength %} data-maxlength="{{ params.maxlength }}"{% endif %}
 {%- if params.threshold %} data-threshold="{{ params.threshold }}"{% endif %}
 {%- if params.maxwords %} data-maxwords="{{ params.maxwords }}"{% endif %}>

src/components/checkboxes/template.njk

@@ -48,7 +48,7 @@
 {% endif %}
   <div class="govuk-checkboxes {%- if params.classes %} {{ params.classes }}{% endif %}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
-    {%- if isConditional %} data-module="checkboxes"{% endif -%}>
+    {%- if isConditional %} data-module="govuk-checkboxes"{% endif -%}>
     {% for item in params.items %}
     {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
     {%- if item.id -%}

src/components/details/details.js

@@ -3,9 +3,6 @@
  * and 'shim' to add accessiblity enhancements for all browsers
  *
  * http://caniuse.com/#feat=details
- *
- * Usage instructions:
- * the 'polyfill' will be automatically initialised
  */
 import '../../vendor/polyfills/Function/prototype/bind'
 import '../../vendor/polyfills/Event' // addEventListener and event.target normaliziation

src/components/details/template.njk

@@ -1,4 +1,4 @@
-<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
+<details {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-details {%- if params.classes %} {{ params.classes }}{% endif %}" data-module="govuk-details" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} {{- " open" if params.open }}>
   <summary class="govuk-details__summary">
     <span class="govuk-details__summary-text">
       {{ params.summaryHtml | safe if params.summaryHtml else params.summaryText }}

src/components/error-summary/error-summary.test.js

@@ -10,7 +10,7 @@ describe('Error Summary', () => {
     await page.goto(`${baseUrl}/components/error-summary/preview`, { waitUntil: 'load' })
 
     const moduleName = await page.evaluate(() => document.activeElement.dataset.module)
-    expect(moduleName).toBe('error-summary')
+    expect(moduleName).toBe('govuk-error-summary')
   })
 
   let inputTypes = [

src/components/error-summary/template.njk

@@ -1,6 +1,6 @@
 <div class="govuk-error-summary
   {%- if params.classes %} {{ params.classes }}{% endif %}" aria-labelledby="error-summary-title" role="alert" tabindex="-1"
-  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="error-summary">
+  {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %} data-module="govuk-error-summary">
   <h2 class="govuk-error-summary__title" id="error-summary-title">
     {{ params.titleHtml | safe if params.titleHtml else params.titleText }}
   </h2>

src/components/header/template.njk

@@ -1,4 +1,4 @@
-<header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="header"
+<header class="govuk-header {{ params.classes if params.classes }}" role="banner" data-module="govuk-header"
         {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %}>
   <div class="govuk-header__container {{ params.containerClasses | default('govuk-width-container') }}">
     <div class="govuk-header__logo">

src/components/radios/template.njk

@@ -45,7 +45,7 @@
 {% endif %}
   <div class="govuk-radios {%- if params.classes %} {{ params.classes }}{% endif %}{%- if isConditional %} govuk-radios--conditional{% endif -%}"
     {%- for attribute, value in params.attributes %} {{ attribute }}="{{ value }}"{% endfor %}
-    {%- if isConditional %} data-module="radios"{% endif -%}>
+    {%- if isConditional %} data-module="govuk-radios"{% endif -%}>
     {% for item in params.items %}
     {#- If the user explicitly sets an id, use this instead of the regular idPrefix -#}
     {%- if item.id -%}

src/components/tabs/template.njk

@@ -2,7 +2,7 @@
    instead. We need this for error messages and hints as well -#}
 {% set idPrefix = params.idPrefix if params.idPrefix -%}
 
-<div {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="tabs">
+<div {%- if params.id %} id="{{params.id}}"{% endif %} class="govuk-tabs {%- if params.classes %} {{ params.classes }}{% endif %}" {%- for attribute, value in params.attributes %} {{attribute}}="{{value}}"{% endfor %} data-module="govuk-tabs">
   <h2 class="govuk-tabs__title">
     {{ params.title | default ("Contents") }}
   </h2>