Fix JavaScript error when character count ID starts with a number

CHANGELOG.md

@@ -2,6 +2,12 @@
 
 ## Unreleased
 
+### Fixes
+
+We’ve made fixes to GOV.UK Frontend in the following pull requests:
+
+- [#2080: Fix JavaScript error when character count ID starts with a number](https://github.com/alphagov/govuk-frontend/pull/2080) - thanks to [@josef-vlach](https://github.com/josef-vlach) for reporting this issue.
+
 ## 3.10.2 (Patch release)
 
 ### Fixes

app/views/macros/showExamples.njk

@@ -2,7 +2,7 @@
 
 {% macro showExamples(componentSlug, componentName, data, legacyQuery) %}
 
-{% for example in data.examples %}
+{% for example in data.examples | rejectattr('hidden') %}
   {% set exampleSlug = (example.name | replace(" ", "-")) %}
   {% set iframePathQuery = legacyQuery + '&iframe=true' if legacyQuery != '' else '?iframe=true' %}
 

lib/file-helper.js

@@ -26,13 +26,9 @@ exports.readFileContents = readFileContents
 const getComponentData = componentName => {
   try {
     const yamlPath = path.join(configPaths.components, componentName, `${componentName}.yaml`)
-    const yamlObj = yaml.safeLoad(
+    return yaml.safeLoad(
       fs.readFileSync(yamlPath, 'utf8'), { json: true }
     )
-
-    yamlObj.examples = yamlObj.examples.filter(function (example) { return !example.hidden })
-
-    return yamlObj
   } catch (error) {
     return new Error(error)
   }

src/govuk/components/character-count/character-count.js

@@ -6,7 +6,7 @@ function CharacterCount ($module) {
   this.$module = $module
   this.$textarea = $module.querySelector('.govuk-js-character-count')
   if (this.$textarea) {
-    this.$countMessage = $module.querySelector('[id=' + this.$textarea.id + '-info]')
+    this.$countMessage = $module.querySelector('[id="' + this.$textarea.id + '-info"]')
   }
 }
 

src/govuk/components/character-count/character-count.test.js

@@ -141,6 +141,16 @@ describe('Character count', () => {
           expect(ariaHidden).toBeFalsy()
         })
       })
+
+      describe('when the ID starts with a number', () => {
+        it('still works correctly', async () => {
+          await goToExample('with-id-starting-with-number')
+
+          const message = await page.$eval('.govuk-character-count__message', el => el.innerHTML.trim())
+
+          expect(message).toEqual('You have 10 characters remaining')
+        })
+      })
     })
 
     describe('when counting words', () => {

src/govuk/components/character-count/character-count.yaml

@@ -223,3 +223,11 @@ examples:
       classes: app-character-count--custom-modifier
       errorMessage:
         text: Error message
+  - name: with id starting with number
+    hidden: true
+    data:
+      name: more-detail
+      id: 1_more-detail
+      maxlength: 10
+      label:
+        text: Can you provide more detail?