Merge pull request #379 from alphagov/fix-fixed-ids

Ensure multiple autocompletes on one page do not have conflicting id attributes
alphagov · Sep 27, 2019 · 896dd9e · 896dd9e
2 parents 35b5556 + 0a112a1
commit 896dd9e
Show file tree

Hide file tree

Showing 11 changed files with 23 additions and 14 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## Unreleased
+
+## Fixes
+
+- [Pull request #379: Ensure multiple autocompletes on one page do not have conflicting id attributes](https://github.com/alphagov/accessible-autocomplete/pull/379)
+
 ## 2.0.0 - 2019-09-26
 
 We recommend you update to the latest release using npm:

diff --git a/dist/accessible-autocomplete.min.js b/dist/accessible-autocomplete.min.js
diff --git a/dist/accessible-autocomplete.min.js.map b/dist/accessible-autocomplete.min.js.map
diff --git a/dist/lib/accessible-autocomplete.preact.min.js b/dist/lib/accessible-autocomplete.preact.min.js
diff --git a/dist/lib/accessible-autocomplete.preact.min.js.map b/dist/lib/accessible-autocomplete.preact.min.js.map
diff --git a/dist/lib/accessible-autocomplete.react.min.js b/dist/lib/accessible-autocomplete.react.min.js
diff --git a/dist/lib/accessible-autocomplete.react.min.js.map b/dist/lib/accessible-autocomplete.react.min.js.map
diff --git a/src/autocomplete.js b/src/autocomplete.js
@@ -455,8 +455,9 @@ export default class Autocomplete extends Component {
       : ''
     const showHint = hasPointerEvents && hintValue
 
+    const assistiveHintID = id + '__assistiveHint'
     const ariaDescribedProp = (ariaHint) ? {
-      'aria-describedby': 'assistiveHint'
+      'aria-describedby': assistiveHintID
     } : null
 
     let dropdownArrow
@@ -474,6 +475,7 @@ export default class Autocomplete extends Component {
     return (
       <div className={wrapperClassName} onKeyDown={this.handleKeyDown}>
         <Status
+          id={id}
           length={options.length}
           queryLength={query.length}
           minQueryLength={minLength}
@@ -555,7 +557,7 @@ export default class Autocomplete extends Component {
           )}
         </ul>
 
-        <span id='assistiveHint' style={{ display: 'none' }}>{tAssistiveHint()}</span>
+        <span id={assistiveHintID} style={{ display: 'none' }}>{tAssistiveHint()}</span>
 
       </div>
     )

diff --git a/src/status.js b/src/status.js
@@ -53,6 +53,7 @@ export default class Status extends Component {
 
   render () {
     const {
+      id,
       length,
       queryLength,
       minQueryLength,
@@ -98,14 +99,14 @@ export default class Status extends Component {
           width: '1px'
         }}>
         <div
-          id='ariaLiveA'
+          id={id + '__status--A'}
           role='status'
           aria-atomic='true'
           aria-live='polite'>
           {(!silenced && debounced && bump) ? content : ''}
         </div>
         <div
-          id='ariaLiveB'
+          id={id + '__status--B'}
           role='status'
           aria-atomic='true'
           aria-live='polite'>

diff --git a/test/functional/index.js b/test/functional/index.js
@@ -80,12 +80,12 @@ describe('Autocomplete', () => {
       })
 
       it('renders with an aria-describedby attribute', () => {
-        render(<Autocomplete required />, scratch)
+        render(<Autocomplete id='autocomplete-default' />, scratch)
 
         let wrapperElement = scratch.getElementsByClassName('autocomplete__wrapper')[0]
         let inputElement = wrapperElement.getElementsByTagName('input')[0]
 
-        expect(inputElement.getAttribute('aria-describedby')).to.equal('assistiveHint')
+        expect(inputElement.getAttribute('aria-describedby')).to.equal('autocomplete-default__assistiveHint')
       })
 
       describe('renders with an aria-autocomplete attribute', () => {

diff --git a/test/integration/index.js b/test/integration/index.js
@@ -43,8 +43,8 @@ const basicExample = () => {
     // in Chrome
     if (isChrome) {
       it('should announce status changes using two alternately updated aria live regions', () => {
-        const flip = browser.$('div#ariaLiveA')
-        const flop = browser.$('div#ariaLiveB')
+        const flip = browser.$('#autocomplete-default__status--A')
+        const flop = browser.$('#autocomplete-default__status--B')
 
         browser.click(input)
         browser.setValue(input, 'a')