Merge pull request #393 from alphagov/aria-selected-as-string-rebased

Aria selected as string rebased
alphagov · Nov 14, 2019 · fe3ea11 · fe3ea11
2 parents 4bebed4 + 83d7985
commit fe3ea11
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 7 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -2,6 +2,8 @@
 
 ## Unreleased
 
+- [Pull request #388: Set aria-selected as a string instead of a boolean to avoid being dropped.](https://github.com/alphagov/accessible-autocomplete/pull/388)
+
 ## 2.0.1 - 2019-10-07
 
 ### Fixes

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
@@ -535,7 +535,7 @@ export default class Autocomplete extends Component {
 
             return (
               <li
-                aria-selected={focused === index}
+                aria-selected={focused === index ? 'true' : 'false'}
                 className={`${optionClassName}${optionModifierFocused}${optionModifierOdd}`}
                 dangerouslySetInnerHTML={{ __html: this.templateSuggestion(option) + iosPosinsetHtml }}
                 id={`${id}__option--${index}`}

diff --git a/test/integration/index.js b/test/integration/index.js
@@ -69,6 +69,17 @@ const basicExample = () => {
       })
     }
 
+    it('should set aria-selected to true on selected option and false on other options', () => {
+      browser.click(input)
+      browser.setValue(input, 'ita')
+      browser.addValue(input, ['ArrowDown'])
+      expect(browser.$(firstOption).getAttribute('aria-selected')).to.equal('true')
+      expect(browser.$(secondOption).getAttribute('aria-selected')).to.equal('false')
+      browser.addValue(firstOption, ['ArrowDown'])
+      expect(browser.$(firstOption).getAttribute('aria-selected')).to.equal('false')
+      expect(browser.$(secondOption).getAttribute('aria-selected')).to.equal('true')
+    })
+
     describe('keyboard use', () => {
       it('should allow typing', () => {
         browser.click(input)