├── .nvmrc
├── Procfile
├── preact.js
├── react.js
├── .gitignore
├── .github
    ├── dependabot.yml
    └── workflows
    │   ├── integration_tests.yaml
    │   └── test.yaml
├── app.json
├── src
    ├── dropdown-arrow-down.js
    ├── wrapper.js
    ├── status.js
    ├── autocomplete.css
    └── autocomplete.js
├── scripts
    └── check-staged.mjs
├── .babelrc.js
├── test
    ├── karma.config.js
    ├── functional
    │   ├── dropdown-arrow-down.js
    │   └── wrapper.js
    ├── wdio.config.js
    └── integration
    │   └── index.js
├── LICENSE.txt
├── accessibility-criteria.md
├── dist
    ├── accessible-autocomplete.min.css
    └── lib
    │   └── accessible-autocomplete.react.min.js
├── package.json
├── webpack.config.babel.js
├── examples
    ├── multiselect.html
    ├── preact
    │   └── index.html
    ├── react
    │   └── index.html
    ├── form-single.html
    └── index.html
├── CONTRIBUTING.md
├── CHANGELOG.md
└── README.md


/.nvmrc:
--------------------------------------------------------------------------------
1 | 14.18.2
2 | 


--------------------------------------------------------------------------------
/Procfile:
--------------------------------------------------------------------------------
1 | web: python -m SimpleHTTPServer $PORT
2 | 


--------------------------------------------------------------------------------
/preact.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./dist/lib/accessible-autocomplete.preact.min')
2 | 


--------------------------------------------------------------------------------
/react.js:
--------------------------------------------------------------------------------
1 | module.exports = require('./dist/lib/accessible-autocomplete.react.min')
2 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | /node_modules
 2 | /npm-debug.log
 3 | /build
 4 | .DS_Store
 5 | /coverage
 6 | /.idea
 7 | *.log
 8 | /screenshots
 9 | .env
10 | 


--------------------------------------------------------------------------------
/.github/dependabot.yml:
--------------------------------------------------------------------------------
1 | version: 2
2 | updates:
3 |   - package-ecosystem: npm
4 |     directory: /
5 |     schedule:
6 |       interval: daily
7 |     open-pull-requests-limit: 0
8 | 


--------------------------------------------------------------------------------
/app.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "accessible-autocomplete",
 3 |   "scripts": {
 4 |   },
 5 |   "env": {
 6 |   },
 7 |   "formation": {
 8 |   },
 9 |   "addons": [
10 | 
11 |   ],
12 |   "buildpacks": [
13 | 
14 |   ]
15 | }
16 | 


--------------------------------------------------------------------------------
/src/dropdown-arrow-down.js:
--------------------------------------------------------------------------------
 1 | import { createElement } from 'preact' /** @jsx createElement */
 2 | 
 3 | const DropdownArrowDown = ({ className }) => (
 4 |   <svg version='1.1' xmlns='http://www.w3.org/2000/svg' className={className} focusable='false'>
 5 |     <g stroke='none' fill='none' fill-rule='evenodd'>
 6 |       <polygon fill='#000000' points='0 0 22 0 11 17' />
 7 |     </g>
 8 |   </svg>
 9 | )
10 | 
11 | export default DropdownArrowDown
12 | 


--------------------------------------------------------------------------------
/scripts/check-staged.mjs:
--------------------------------------------------------------------------------
 1 | import chalk from 'chalk'
 2 | import * as cp from 'child_process'
 3 | 
 4 | cp.exec('git diff --name-only dist/', (err, stdout) => {
 5 |   if (err) {
 6 |     console.log(chalk.red('ERROR:'), err)
 7 |     return process.exit(1)
 8 |   }
 9 |   if (stdout.toString().length) {
10 |     console.log(chalk.red('ERROR:'), 'There are unstaged changes in `dist/` after running `npm run build`. Please commit them.')
11 |     return process.exit(1)
12 |   }
13 |   process.exit()
14 | })
15 | 


--------------------------------------------------------------------------------
/.babelrc.js:
--------------------------------------------------------------------------------
 1 | module.exports = {
 2 |   presets: [
 3 |     ['@babel/preset-env', {
 4 |       shippedProposals: true,
 5 |       useBuiltIns: 'usage',
 6 |       loose: true
 7 |     }]
 8 |   ],
 9 |   plugins: [
10 |     ['@babel/plugin-proposal-class-properties', { loose: true }],
11 |     ['@babel/plugin-proposal-decorators', { legacy: true }],
12 |     ['@babel/plugin-transform-react-jsx', { pragma: 'h' }],
13 | 
14 |     // Improve legacy IE compatibility
15 |     ['@babel/plugin-transform-modules-commonjs', { loose: true }],
16 |     '@babel/plugin-transform-member-expression-literals',
17 |     '@babel/plugin-transform-property-literals'
18 |   ],
19 |   env: {
20 |     test: {
21 |       plugins: [
22 |         'istanbul'
23 |       ]
24 |     }
25 |   }
26 | };
27 | 


--------------------------------------------------------------------------------
/test/karma.config.js:
--------------------------------------------------------------------------------
 1 | require('@babel/register')({
 2 |   cwd: require('path').resolve(__dirname, '../')
 3 | })
 4 | var puppeteer = require('puppeteer')
 5 | var webpack = require('../webpack.config.babel.js')[0]
 6 | 
 7 | // Use Chrome headless
 8 | process.env.CHROME_BIN = puppeteer.executablePath()
 9 | 
10 | module.exports = function (config) {
11 |   config.set({
12 |     basePath: '../',
13 |     frameworks: ['mocha', 'chai-sinon'],
14 |     reporters: ['mocha'],
15 | 
16 |     browsers: ['ChromeHeadless'],
17 | 
18 |     files: [
19 |       'test/functional/**/*.js'
20 |     ],
21 | 
22 |     preprocessors: {
23 |       'test/**/*.js': ['webpack'],
24 |       'src/**/*.js': ['webpack'],
25 |       '**/*.js': ['sourcemap']
26 |     },
27 | 
28 |     webpack: webpack,
29 |     webpackMiddleware: {
30 |       logLevel: 'error',
31 |       stats: 'errors-only'
32 |     }
33 |   })
34 | }
35 | 


--------------------------------------------------------------------------------
/.github/workflows/integration_tests.yaml:
--------------------------------------------------------------------------------
 1 | name: Integration tests
 2 | 
 3 | on: [push, pull_request]
 4 | 
 5 | 
 6 | jobs:
 7 |   test-saucelabs:
 8 |     name: Build & test
 9 |     runs-on: ubuntu-latest
10 | 
11 |     steps:
12 |       - uses: actions/checkout@v2
13 | 
14 |       - name: Read node version from .nvmrc
15 |         id: nvm
16 |         run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
17 | 
18 |       - name: "Setup Node v${{ steps.nvm.outputs.NVMRC }}"
19 |         uses: actions/setup-node@v2
20 |         with:
21 |           node-version: "${{ steps.nvm.outputs.NVMRC }}"
22 |           cache: 'npm'
23 | 
24 |       - name: Install dependencies
25 |         run: npm ci
26 | 
27 |       - name: Build
28 |         run: npm run build
29 | 
30 |       - name: "Run integration tests"
31 |         run: npm run wdio:test
32 |         env:
33 |           SAUCE_ENABLED: "false"  # ensure we don't use Sauce Labs
34 | 


--------------------------------------------------------------------------------
/.github/workflows/test.yaml:
--------------------------------------------------------------------------------
 1 | name: Test
 2 | 
 3 | on: [pull_request, push]
 4 | 
 5 | jobs:
 6 |   build:
 7 |     name: Build & basic tests
 8 |     runs-on: ubuntu-latest
 9 | 
10 |     steps:
11 |       - uses: actions/checkout@v2
12 | 
13 |       - name: Read node version from .nvmrc
14 |         id: nvm
15 |         run: echo "##[set-output name=NVMRC;]$(cat .nvmrc)"
16 | 
17 |       - name: "Setup Node v${{ steps.nvm.outputs.NVMRC }}"
18 |         uses: actions/setup-node@v2
19 |         with:
20 |           node-version: "${{ steps.nvm.outputs.NVMRC }}"
21 |           cache: 'npm'
22 | 
23 |       - name: Install dependencies
24 |         run: npm ci
25 | 
26 |       - name: Build
27 |         run: npm run build
28 | 
29 |       - name: Functional tests (Chromium)
30 |         run: npm run karma
31 | 
32 |       # Run linter last so other tests run even if there is a code formatting error
33 |       - name: Lint
34 |         run: npm run standard
35 | 


--------------------------------------------------------------------------------
/LICENSE.txt:
--------------------------------------------------------------------------------
 1 | The MIT License (MIT)
 2 | 
 3 | Copyright (c) 2017 Crown Copyright (Government Digital Service)
 4 | 
 5 | Permission is hereby granted, free of charge, to any person obtaining a copy of
 6 | this software and associated documentation files (the "Software"), to deal in
 7 | the Software without restriction, including without limitation the rights to
 8 | use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of
 9 | the Software, and to permit persons to whom the Software is furnished to do so,
10 | subject to the following conditions:
11 | 
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 | 
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS
17 | FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR
18 | COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER
19 | IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN
20 | CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
21 | 


--------------------------------------------------------------------------------
/test/functional/dropdown-arrow-down.js:
--------------------------------------------------------------------------------
 1 | /* global before, beforeEach, after, describe, expect, it */
 2 | import { createElement, render } from 'preact' /** @jsx createElement */
 3 | import DropdownArrowDown from '../../src/dropdown-arrow-down'
 4 | 
 5 | describe('DropdownArrowDown', () => {
 6 |   describe('rendering', () => {
 7 |     let scratch
 8 | 
 9 |     before(() => {
10 |       scratch = document.createElement('div');
11 |       (document.body || document.documentElement).appendChild(scratch)
12 |     })
13 | 
14 |     beforeEach(() => {
15 |       scratch.innerHTML = ''
16 |     })
17 | 
18 |     after(() => {
19 |       scratch.parentNode.removeChild(scratch)
20 |       scratch = null
21 |     })
22 | 
23 |     describe('basic usage', () => {
24 |       it('renders an svg', () => {
25 |         render(<DropdownArrowDown />, scratch)
26 | 
27 |         expect(scratch.innerHTML).to.contain('svg')
28 |       })
29 | 
30 |       it('renders with a given custom class', () => {
31 |         render(<DropdownArrowDown className='foo' />, scratch)
32 | 
33 |         expect(scratch.innerHTML).to.contain('class="foo"')
34 |       })
35 | 
36 |       // IE issue so the dropdown svg is not focusable (tabindex won't work for this)
37 |       it('renders an svg where focusable attribute is false', () => {
38 |         render(<DropdownArrowDown />, scratch)
39 | 
40 |         expect(scratch.innerHTML).to.contain('focusable="false"')
41 |       })
42 |     })
43 |   })
44 | })
45 | 


--------------------------------------------------------------------------------
/accessibility-criteria.md:
--------------------------------------------------------------------------------
 1 | # Accessibility Acceptance Criteria
 2 | 
 3 | Authors: [Theodor Vararu](https://github.com/tvararu), [Léonie Watson](https://github.com/LJWatson), [Ed Horsford](https://github.com/edwardhorsford).
 4 | 
 5 | ## What's this?
 6 | 
 7 | This describes the necessary behaviours that an autocomplete needs to meet to be usable by assistive technologies.
 8 | 
 9 | They are useful if you are evaluating `accessible-autocomplete`, or a different autocomplete solution.
10 | 
11 | ## User story
12 | 
13 | > As an Assistive Technology (AT) user, I want to be able to search using autocomplete, so I can find and choose a matching result easily and accurately.
14 | 
15 | ## Acceptance criteria
16 | 
17 | The field with autocomplete must:
18 | 
19 | 1. Be focusable with a keyboard
20 | 1. Indicate when it has keyboard focus
21 | 1. Inform the user that it is an editable field
22 | 1. Inform the user if there is a pre-filled value
23 | 1. Inform the user that autocomplete is available
24 | 1. Explain how to use autocomplete
25 | 1. Inform the user that content has been expanded
26 | 1. Inform the user when there are matches, or if there are no matches
27 | 1. (Optional) Inform the user how many matches are currently available
28 | 1. Inform the user as the number of matches changes
29 | 1. Enable the user to navigate the available matches using touch or keyboard
30 | 1. Inform the user when a match is selected
31 | 1. (Optional) Inform the user which number the currently selected match is (1 of 3 for example)
32 | 1. Inform the user if a match is pre-selected
33 | 1. Enable the user to confirm the selected match
34 | 1. Inform the user when a match is confirmed
35 | 1. Return focus to the editable field when a selected match is confirmed
36 | 
37 | Helpful definitions:
38 | 
39 | - `navigate`: When the user selects between matches
40 | - `selected`: When one of the matches is highlighted, and ready to be confirmed, for example by pressing `enter`
41 | - `pre-selected`: When an item is selected on the user's behalf without them navigating to it
42 | - `confirmed`: When one of the matches has been confirmed, and will be submitted as a value of the parent form
43 | 


--------------------------------------------------------------------------------
/test/wdio.config.js:
--------------------------------------------------------------------------------
 1 | require('dotenv').config()
 2 | const puppeteer = require('puppeteer')
 3 | const staticServerPort = process.env.PORT || 4567
 4 | const services = [
 5 |   ['static-server', {
 6 |     folders: [
 7 |       { mount: '/', path: './examples' },
 8 |       { mount: '/dist/', path: './dist' }
 9 |     ],
10 |     port: staticServerPort
11 |   }]
12 | ]
13 | 
14 | const sauceEnabled = process.env.SAUCE_ENABLED === 'true'
15 | const sauceUser = process.env.SAUCE_USERNAME
16 | const sauceKey = process.env.SAUCE_ACCESS_KEY
17 | const buildNumber = process.env.SAUCE_BUILD_NUMBER
18 | const sauceConfig = {
19 |   user: sauceUser,
20 |   key: sauceKey,
21 |   capabilities: [
22 |     {
23 |       browserName: 'chrome',
24 |       platformName: 'Windows 10',
25 |       'sauce:options': {
26 |         build: buildNumber
27 |       }
28 |     },
29 |     {
30 |       browserName: 'firefox',
31 |       browserVersion: '55',
32 |       platformName: 'Windows 10',
33 |       'sauce:options': {
34 |         build: buildNumber
35 |       }
36 |     },
37 |     {
38 |       browserName: 'internet explorer',
39 |       browserVersion: '11.285',
40 |       platformName: 'Windows 10',
41 |       'sauce:options': {
42 |         build: buildNumber
43 |       }
44 |     },
45 |     {
46 |       browserName: 'internet explorer',
47 |       browserVersion: '10',
48 |       platformName: 'Windows 7',
49 |       'sauce:options': {
50 |         build: buildNumber
51 |       }
52 |     },
53 |     /* IE9 on Sauce Labs needs to use legacy JSON Wire Protocol */
54 |     {
55 |       browserName: 'internet explorer',
56 |       version: '9',
57 |       platform: 'Windows 7',
58 |       build: buildNumber
59 |     }
60 |   ],
61 |   services: services.concat([['sauce', { sauceConnect: true }]])
62 | }
63 | 
64 | const puppeteerConfig = {
65 |   automationProtocol: 'devtools',
66 |   capabilities: [
67 |     // { browserName: 'firefox' },
68 |     {
69 |       browserName: 'chrome',
70 |       'goog:chromeOptions': {
71 |         args: ['--headless'],
72 |         binary: puppeteer.executablePath()
73 |       }
74 |     }
75 |   ],
76 |   services: services
77 | }
78 | 
79 | exports.config = Object.assign({
80 |   outputDir: './logs/',
81 |   specs: ['./test/integration/**/*.js'],
82 |   baseUrl: 'http://localhost:' + staticServerPort,
83 |   screenshotPath: './screenshots/',
84 |   reporters: ['spec'],
85 |   framework: 'mocha',
86 |   mochaOpts: { timeout: 30 * 1000 }
87 | }, sauceEnabled ? sauceConfig : puppeteerConfig)
88 | 


--------------------------------------------------------------------------------
/dist/accessible-autocomplete.min.css:
--------------------------------------------------------------------------------
1 | .autocomplete__wrapper{position:relative}.autocomplete__hint,.autocomplete__input{-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;font-weight:400;box-sizing:border-box;width:100%;height:40px;border:2px solid #0b0c0c;border-radius:0;-webkit-appearance:none;-moz-appearance:none;appearance:none;margin-bottom:0}.autocomplete__input{padding:5px;background-color:transparent;position:relative}.autocomplete__hint{color:#b1b4b6;position:absolute}.autocomplete__input--default{padding:5px}.autocomplete__input--focused,.autocomplete__input:focus{outline-offset:0;box-shadow:inset 0 0 0 2px}.autocomplete__input--show-all-values{padding:5px 34px 5px 5px;cursor:pointer}.autocomplete__dropdown-arrow-down{z-index:-1;display:inline-block;position:absolute;right:8px;width:24px;height:24px;top:10px}.autocomplete__menu{background-color:#fff;border:2px solid #0b0c0c;border-top:0;color:#0b0c0c;margin:0;max-height:342px;overflow-x:hidden;padding:0;width:100%;width:calc(100% - 4px)}.autocomplete__menu--visible{display:block}.autocomplete__menu--hidden{display:none}.autocomplete__menu--overlay{box-shadow:rgba(0,0,0,.256863) 0 2px 6px;left:0;position:absolute;top:100%;z-index:100}.autocomplete__menu--inline{position:relative}.autocomplete__option{border-bottom:solid #b1b4b6;border-width:1px 0;cursor:pointer;display:block;position:relative}.autocomplete__option>*{pointer-events:none}.autocomplete__option:first-of-type{border-top-width:0}.autocomplete__option:last-of-type{border-bottom-width:0}.autocomplete__option--odd{background-color:#fafafa}.autocomplete__option--focused,.autocomplete__option:hover{background-color:#1d70b8;border-color:#1d70b8;color:#fff;outline:0}@media (-ms-high-contrast:active),(forced-colors:active){.autocomplete__menu{border-color:FieldText}.autocomplete__option{background-color:Field;color:FieldText}.autocomplete__option--focused,.autocomplete__option:hover{forced-color-adjust:none;background-color:SelectedItem;border-color:SelectedItem;color:SelectedItemText;outline-color:SelectedItemText}}.autocomplete__option--no-results{background-color:#fafafa;color:#646b6f;cursor:not-allowed}.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:16px;line-height:1.25}.autocomplete__hint,.autocomplete__option{padding:5px}@media (min-width:641px){.autocomplete__hint,.autocomplete__input,.autocomplete__option{font-size:19px;line-height:1.31579}}.autocomplete__list{list-style-type:none;padding:0;margin:20px 0 0}.autocomplete__list .autocomplete__selected-option,.autocomplete__list .autocomplete__selected-option:hover{cursor:inherit;color:#0b0c0c;margin:5px 0}.autocomplete__list .autocomplete__remove-option{cursor:pointer;color:#005ea5;text-decoration:underline;background:0 0;border:0;font-size:inherit;margin-left:5px}.autocomplete__list .autocomplete__remove-option:hover{color:#2b8cc4}.autocomplete__list .autocomplete__remove-option:focus{color:#0b0c0c;outline:3px solid #ffbf47;outline-offset:0;background-color:#ffbf47}.autocomplete__list .autocomplete__remove-option:before{content:'× ';color:inherit}.autocomplete__list-item-description{display:none}


--------------------------------------------------------------------------------
/src/wrapper.js:
--------------------------------------------------------------------------------
 1 | import { createElement, render } from 'preact' /** @jsx createElement */
 2 | import Autocomplete from './autocomplete'
 3 | 
 4 | function accessibleAutocomplete (options) {
 5 |   if (!options.element) { throw new Error('element is not defined') }
 6 |   if (!options.id) { throw new Error('id is not defined') }
 7 |   if (!options.source) { throw new Error('source is not defined') }
 8 |   if (Array.isArray(options.source)) {
 9 |     options.source = createSimpleEngine(options.source)
10 |   }
11 |   render(<Autocomplete {...options} />, options.element)
12 | }
13 | 
14 | const createSimpleEngine = (values) => (query, syncResults) => {
15 |   var matches = values.filter(r => r.toLowerCase().indexOf(query.toLowerCase()) !== -1)
16 |   syncResults(matches)
17 | }
18 | 
19 | accessibleAutocomplete.enhanceSelectElement = (configurationOptions) => {
20 |   if (!configurationOptions.selectElement) { throw new Error('selectElement is not defined') }
21 | 
22 |   const selectElement = configurationOptions.selectElement
23 |   const selectableOptions = [].filter.call(selectElement.options, option => (option.value || configurationOptions.preserveNullOptions))
24 | 
25 |   // Set defaults.
26 |   if (!configurationOptions.source) {
27 |     configurationOptions.source = selectableOptions.map(option => option.textContent || option.innerText)
28 |   }
29 | 
30 |   if (selectElement.multiple) {
31 |     configurationOptions.multiple = true
32 |     configurationOptions.confirmOnBlur = false
33 |     configurationOptions.showNoOptionsFound = false
34 |     configurationOptions.selectedOptions = selectableOptions.filter(option => option.selected).map(option => option.textContent)
35 |     configurationOptions.onRemove = configurationOptions.onRemove || (value => {
36 |       const optionToRemove = [].filter.call(configurationOptions.selectElement.options, option => (option.textContent || option.innerText) === value)[0]
37 |       if (optionToRemove) { optionToRemove.selected = false }
38 |     })
39 |   }
40 | 
41 |   configurationOptions.onConfirm = configurationOptions.onConfirm || (query => {
42 |     let options = configurationOptions.selectElement.options
43 |     let matchingOption
44 |     if (query) {
45 |       matchingOption = [].filter.call(options, option => (option.textContent || option.innerText) === query)[0]
46 |     } else {
47 |       matchingOption = [].filter.call(options, option => option.value === '')[0]
48 |     }
49 |     if (matchingOption) { matchingOption.selected = true }
50 |   })
51 | 
52 |   if (!configurationOptions.multiple && (selectElement.value || configurationOptions.defaultValue === undefined)) {
53 |     const option = selectElement.options[selectElement.options.selectedIndex]
54 |     if (option.textContent || option.innerText) {
55 |       configurationOptions.defaultValue = option.textContent || option.innerText
56 |     }
57 |   }
58 | 
59 |   if (configurationOptions.name === undefined) configurationOptions.name = ''
60 |   if (configurationOptions.id === undefined) {
61 |     if (selectElement.id === undefined) {
62 |       configurationOptions.id = ''
63 |     } else {
64 |       configurationOptions.id = selectElement.id
65 |     }
66 |   }
67 |   if (configurationOptions.autoselect === undefined) configurationOptions.autoselect = true
68 | 
69 |   const element = document.createElement('div')
70 | 
71 |   selectElement.parentNode.insertBefore(element, selectElement)
72 | 
73 |   accessibleAutocomplete({
74 |     ...configurationOptions,
75 |     element: element
76 |   })
77 | 
78 |   selectElement.style.display = 'none'
79 |   selectElement.id = selectElement.id + '-select'
80 | }
81 | 
82 | export default accessibleAutocomplete
83 | 


--------------------------------------------------------------------------------
/src/status.js:
--------------------------------------------------------------------------------
  1 | import { createElement, Component } from 'preact' /** @jsx createElement */
  2 | 
  3 | const debounce = function (func, wait, immediate) {
  4 |   var timeout
  5 |   return function () {
  6 |     var context = this
  7 |     var args = arguments
  8 |     var later = function () {
  9 |       timeout = null
 10 |       if (!immediate) func.apply(context, args)
 11 |     }
 12 |     var callNow = immediate && !timeout
 13 |     clearTimeout(timeout)
 14 |     timeout = setTimeout(later, wait)
 15 |     if (callNow) func.apply(context, args)
 16 |   }
 17 | }
 18 | const statusDebounceMillis = 1400
 19 | 
 20 | export default class Status extends Component {
 21 |   static defaultProps = {
 22 |     tQueryTooShort: (minQueryLength) => `Type in ${minQueryLength} or more characters for results`,
 23 |     tNoResults: () => 'No search results',
 24 |     tSelectedOption: (selectedOption, length, index) => `${selectedOption} ${index + 1} of ${length} is highlighted`,
 25 |     tResults: (length, contentSelectedOption) => {
 26 |       const words = {
 27 |         result: (length === 1) ? 'result' : 'results',
 28 |         is: (length === 1) ? 'is' : 'are'
 29 |       }
 30 | 
 31 |       return `${length} ${words.result} ${words.is} available. ${contentSelectedOption}`
 32 |     }
 33 |   };
 34 | 
 35 |   state = {
 36 |     bump: false,
 37 |     debounced: false
 38 |   }
 39 | 
 40 |   componentWillMount () {
 41 |     const that = this
 42 |     this.debounceStatusUpdate = debounce(function () {
 43 |       if (!that.state.debounced) {
 44 |         const shouldSilence = !that.props.isInFocus || that.props.validChoiceMade
 45 |         that.setState(({ bump }) => ({ bump: !bump, debounced: true, silenced: shouldSilence }))
 46 |       }
 47 |     }, statusDebounceMillis)
 48 |   }
 49 | 
 50 |   componentWillReceiveProps ({ queryLength }) {
 51 |     this.setState({ debounced: false })
 52 |   }
 53 | 
 54 |   render () {
 55 |     const {
 56 |       id,
 57 |       length,
 58 |       queryLength,
 59 |       minQueryLength,
 60 |       selectedOption,
 61 |       selectedOptionIndex,
 62 |       tQueryTooShort,
 63 |       tNoResults,
 64 |       tSelectedOption,
 65 |       tResults
 66 |     } = this.props
 67 |     const { bump, debounced, silenced } = this.state
 68 | 
 69 |     const queryTooShort = queryLength < minQueryLength
 70 |     const noResults = length === 0
 71 | 
 72 |     const contentSelectedOption = selectedOption
 73 |       ? tSelectedOption(selectedOption, length, selectedOptionIndex)
 74 |       : ''
 75 | 
 76 |     let content = null
 77 |     if (queryTooShort) {
 78 |       content = tQueryTooShort(minQueryLength)
 79 |     } else if (noResults) {
 80 |       content = tNoResults()
 81 |     } else {
 82 |       content = tResults(length, contentSelectedOption)
 83 |     }
 84 | 
 85 |     this.debounceStatusUpdate()
 86 | 
 87 |     return (
 88 |       <div
 89 |         style={{
 90 |           border: '0',
 91 |           clip: 'rect(0 0 0 0)',
 92 |           height: '1px',
 93 |           marginBottom: '-1px',
 94 |           marginRight: '-1px',
 95 |           overflow: 'hidden',
 96 |           padding: '0',
 97 |           position: 'absolute',
 98 |           whiteSpace: 'nowrap',
 99 |           width: '1px'
100 |         }}>
101 |         <div
102 |           id={id + '__status--A'}
103 |           role='status'
104 |           aria-atomic='true'
105 |           aria-live='polite'>
106 |           {(!silenced && debounced && bump) ? content : ''}
107 |         </div>
108 |         <div
109 |           id={id + '__status--B'}
110 |           role='status'
111 |           aria-atomic='true'
112 |           aria-live='polite'>
113 |           {(!silenced && debounced && !bump) ? content : ''}
114 |         </div>
115 |       </div>
116 |     )
117 |   }
118 | }
119 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
  1 | {
  2 |   "name": "accessible-autocomplete",
  3 |   "version": "2.0.4",
  4 |   "main": "dist/accessible-autocomplete.min.js",
  5 |   "style": "dist/accessible-autocomplete.min.css",
  6 |   "description": "An autocomplete component, built to be accessible.",
  7 |   "repository": "alphagov/accessible-autocomplete",
  8 |   "author": "Government Digital Service (https://www.gov.uk/government/organisations/government-digital-service)",
  9 |   "license": "MIT",
 10 |   "keywords": [
 11 |     "a11y",
 12 |     "accessibility",
 13 |     "autocomplete",
 14 |     "component",
 15 |     "plugin",
 16 |     "typeahead",
 17 |     "widget"
 18 |   ],
 19 |   "scripts": {
 20 |     "build:css": "csso src/autocomplete.css -o dist/accessible-autocomplete.min.css",
 21 |     "build:js": "cross-env NODE_ENV=production webpack --progress --display-modules",
 22 |     "build": "run-s 'build:js' 'build:css'",
 23 |     "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --progress",
 24 |     "karma:dev": "cross-env NODE_ENV=test karma start test/karma.config.js",
 25 |     "karma": "npm run karma:dev -- --single-run",
 26 |     "preversion": "npm test",
 27 |     "standard": "standard",
 28 |     "test": "run-p standard karma wdio",
 29 |     "version": "npm run build && git add -A dist",
 30 |     "wdio:test": "cross-env NODE_ENV=test wdio test/wdio.config.js",
 31 |     "wdio": "npm run build wdio:test && git checkout dist/"
 32 |   },
 33 |   "husky": {
 34 |     "hooks": {
 35 |       "pre-push": "npm run build && node scripts/check-staged.mjs"
 36 |     }
 37 |   },
 38 |   "dependencies": {
 39 |     "preact": "^8.3.1"
 40 |   },
 41 |   "devDependencies": {
 42 |     "@babel/core": "^7.1.5",
 43 |     "@babel/plugin-proposal-class-properties": "^7.1.0",
 44 |     "@babel/plugin-proposal-decorators": "^7.1.2",
 45 |     "@babel/plugin-transform-member-expression-literals": "^7.0.0",
 46 |     "@babel/plugin-transform-modules-commonjs": "^7.1.0",
 47 |     "@babel/plugin-transform-property-literals": "^7.0.0",
 48 |     "@babel/plugin-transform-react-jsx": "^7.0.0",
 49 |     "@babel/preset-env": "^7.1.5",
 50 |     "@babel/register": "^7.0.0",
 51 |     "@wdio/cli": "^7.16.13",
 52 |     "@wdio/local-runner": "^7.16.13",
 53 |     "@wdio/mocha-framework": "^7.16.13",
 54 |     "@wdio/sauce-service": "^7.16.13",
 55 |     "@wdio/spec-reporter": "^7.16.13",
 56 |     "@wdio/static-server-service": "^7.16.13",
 57 |     "@wdio/sync": "^7.16.13",
 58 |     "babel-eslint": "^10.0.1",
 59 |     "babel-loader": "^8.2.3",
 60 |     "babel-plugin-istanbul": "^5.1.0",
 61 |     "chai": "^4.2.0",
 62 |     "chalk": "^2.4.1",
 63 |     "copy-webpack-plugin": "^6.4.1",
 64 |     "cross-env": "^5.2.0",
 65 |     "csso-cli": "^3.0.0",
 66 |     "dotenv": "^6.1.0",
 67 |     "husky": "^1.1.3",
 68 |     "karma": "^6.3.9",
 69 |     "karma-chai": "^0.1.0",
 70 |     "karma-chai-sinon": "^0.1.5",
 71 |     "karma-chrome-launcher": "^3.1.0",
 72 |     "karma-mocha": "^1.0.1",
 73 |     "karma-mocha-reporter": "^2.2.5",
 74 |     "karma-sourcemap-loader": "^0.3.7",
 75 |     "karma-webpack": "^4.0.2",
 76 |     "mocha": "^10.2.0",
 77 |     "npm-run-all": "^4.1.5",
 78 |     "puppeteer": "^13.3.1",
 79 |     "replace-bundle-webpack-plugin": "^1.0.0",
 80 |     "sinon": "^6.3.5",
 81 |     "sinon-chai": "^3.2.0",
 82 |     "source-map-loader": "^1.1.3",
 83 |     "standard": "^12.0.1",
 84 |     "uglifyjs-webpack-plugin": "^2.0.1",
 85 |     "webdriverio": "^7.16.13",
 86 |     "webpack": "^4.46.0",
 87 |     "webpack-cli": "^3.3.12",
 88 |     "webpack-dev-server": "^4.15.1"
 89 |   },
 90 |   "browserslist": [
 91 |     ">0.1%",
 92 |     "last 2 Chrome versions",
 93 |     "last 2 Firefox versions",
 94 |     "last 2 Edge versions",
 95 |     "last 2 Samsung versions",
 96 |     "Safari >= 9",
 97 |     "ie 8-11",
 98 |     "iOS >= 9"
 99 |   ],
100 |   "standard": {
101 |     "parser": "babel-eslint"
102 |   }
103 | }
104 | 


--------------------------------------------------------------------------------
/webpack.config.babel.js:
--------------------------------------------------------------------------------
  1 | import webpack from 'webpack'
  2 | import path from 'path'
  3 | import CopyWebpackPlugin from 'copy-webpack-plugin'
  4 | import UglifyJsPlugin from 'uglifyjs-webpack-plugin'
  5 | const ENV = process.env.NODE_ENV || 'development'
  6 | 
  7 | const plugins = [
  8 |   new webpack.NoEmitOnErrorsPlugin(),
  9 |   new webpack.DefinePlugin({
 10 |     'process.env.NODE_ENV': JSON.stringify(ENV)
 11 |   })
 12 | ]
 13 | 
 14 | const developmentPlugins = [
 15 |   new CopyWebpackPlugin({ patterns: [
 16 |     { from: './autocomplete.css', to: 'accessible-autocomplete.min.css' }
 17 |   ] })
 18 | ]
 19 | 
 20 | const config = {
 21 |   context: path.resolve(__dirname, 'src'),
 22 | 
 23 |   optimization: {
 24 |     minimize: ENV === 'production',
 25 |     minimizer: [new UglifyJsPlugin({
 26 |       cache: true,
 27 |       parallel: true,
 28 |       sourceMap: true,
 29 |       uglifyOptions: {
 30 |         compress: {
 31 |           negate_iife: false,
 32 |           properties: false,
 33 |           ie8: true
 34 |         },
 35 |         mangle: {
 36 |           ie8: true
 37 |         },
 38 |         output: {
 39 |           comments: false,
 40 |           ie8: true
 41 |         }
 42 |       }
 43 |     })]
 44 |   },
 45 | 
 46 |   resolve: {
 47 |     extensions: ['.js'],
 48 |     modules: [
 49 |       path.resolve(__dirname, 'node_modules'),
 50 |       'node_modules'
 51 |     ]
 52 |   },
 53 | 
 54 |   module: {
 55 |     rules: [
 56 |       {
 57 |         test: /\.js$/,
 58 |         include: path.resolve(__dirname, 'src'),
 59 |         enforce: 'pre',
 60 |         loader: 'source-map-loader'
 61 |       },
 62 |       {
 63 |         test: /\.js$/,
 64 |         exclude: /node_modules/,
 65 |         loader: 'babel-loader'
 66 |       }
 67 |     ]
 68 |   },
 69 | 
 70 |   stats: { colors: true },
 71 | 
 72 |   node: {
 73 |     global: true,
 74 |     process: false,
 75 |     Buffer: false,
 76 |     __filename: false,
 77 |     __dirname: false,
 78 |     setImmediate: false
 79 |   },
 80 | 
 81 |   mode: ENV === 'production' ? 'production' : 'development',
 82 |   devtool: ENV === 'production' ? 'source-map' : 'cheap-module-eval-source-map',
 83 | 
 84 |   devServer: {
 85 |     setup (app) {
 86 |       // Grab potential subdirectory with :dir*?
 87 |       app.get('/dist/:dir*?/:filename', (request, response) => {
 88 |         if (!request.params.dir || request.params.dir === undefined) {
 89 |           response.redirect('/' + request.params.filename)
 90 |         } else {
 91 |           response.redirect('/' + request.params.dir + '/' + request.params.filename)
 92 |         }
 93 |       })
 94 |     },
 95 |     port: process.env.PORT || 8080,
 96 |     host: '0.0.0.0',
 97 |     publicPath: '/dist/',
 98 |     contentBase: ['./examples', './src'],
 99 |     historyApiFallback: true,
100 |     open: true,
101 |     watchContentBase: true,
102 |     disableHostCheck: true
103 |   }
104 | }
105 | 
106 | const bundleStandalone = {
107 |   ...config,
108 |   entry: {
109 |     'accessible-autocomplete.min': './wrapper.js'
110 |   },
111 |   output: {
112 |     path: path.resolve(__dirname, 'dist'),
113 |     publicPath: '/',
114 |     filename: '[name].js',
115 |     library: 'accessibleAutocomplete',
116 |     libraryExport: 'default',
117 |     libraryTarget: 'umd'
118 |   },
119 |   plugins: plugins
120 |     .concat([new webpack.DefinePlugin({
121 |       'process.env.COMPONENT_LIBRARY': '"PREACT"'
122 |     })])
123 |     .concat(ENV === 'development'
124 |       ? developmentPlugins
125 |       : []
126 |     )
127 | }
128 | 
129 | const bundlePreact = {
130 |   ...config,
131 |   entry: {
132 |     'lib/accessible-autocomplete.preact.min': './autocomplete.js'
133 |   },
134 |   output: {
135 |     path: path.resolve(__dirname, 'dist'),
136 |     publicPath: '/',
137 |     filename: '[name].js',
138 |     library: 'Autocomplete',
139 |     libraryTarget: 'umd'
140 |   },
141 |   externals: {
142 |     preact: {
143 |       amd: 'preact',
144 |       commonjs: 'preact',
145 |       commonjs2: 'preact',
146 |       root: 'preact'
147 |     }
148 |   },
149 |   plugins: plugins
150 |     .concat([new webpack.DefinePlugin({
151 |       'process.env.COMPONENT_LIBRARY': '"PREACT"'
152 |     })])
153 |     .concat(ENV === 'development'
154 |       ? developmentPlugins
155 |       : []
156 |     )
157 | }
158 | 
159 | const bundleReact = {
160 |   ...config,
161 |   entry: {
162 |     'lib/accessible-autocomplete.react.min': './autocomplete.js'
163 |   },
164 |   output: {
165 |     path: path.resolve(__dirname, 'dist'),
166 |     publicPath: '/',
167 |     filename: '[name].js',
168 |     library: 'Autocomplete',
169 |     libraryTarget: 'umd',
170 |     globalObject: 'this'
171 |   },
172 |   externals: {
173 |     preact: {
174 |       amd: 'react',
175 |       commonjs: 'react',
176 |       commonjs2: 'react',
177 |       root: 'React'
178 |     }
179 |   },
180 |   plugins: plugins
181 |     .concat([new webpack.DefinePlugin({
182 |       'process.env.COMPONENT_LIBRARY': '"REACT"'
183 |     })])
184 |     .concat(ENV === 'development'
185 |       ? developmentPlugins
186 |       : []
187 |     )
188 | }
189 | 
190 | module.exports = [
191 |   bundleStandalone,
192 |   bundlePreact,
193 |   bundleReact
194 | ]
195 | 


--------------------------------------------------------------------------------
/src/autocomplete.css:
--------------------------------------------------------------------------------
  1 | .autocomplete__wrapper {
  2 |   position: relative;
  3 | }
  4 | 
  5 | .autocomplete__hint,
  6 | .autocomplete__input {
  7 |   -webkit-font-smoothing: antialiased;
  8 |   -moz-osx-font-smoothing: grayscale;
  9 |   font-weight: 400;
 10 |   font-size: 16px;
 11 |   line-height: 1.25;
 12 |   box-sizing: border-box;
 13 |   width: 100%;
 14 |   height: 40px;
 15 |   padding: 5px;
 16 |   border: 2px solid #0b0c0c;
 17 |   border-radius: 0;
 18 |   -webkit-appearance: none;
 19 |   -moz-appearance: none;
 20 |   appearance: none;
 21 |   margin-bottom: 0;
 22 | }
 23 | 
 24 | .autocomplete__input {
 25 |   background-color: transparent;
 26 |   position: relative;
 27 | }
 28 | 
 29 | .autocomplete__hint {
 30 |   color: #b1b4b6;
 31 |   position: absolute;
 32 | }
 33 | 
 34 | .autocomplete__input--default {
 35 |   padding: 5px;
 36 | }
 37 | 
 38 | .autocomplete__input--focused,
 39 | .autocomplete__input:focus {
 40 |   outline-offset: 0;
 41 |   box-shadow: inset 0 0 0 2px;
 42 | }
 43 | 
 44 | .autocomplete__input--show-all-values {
 45 |   padding: 5px 34px 5px 5px; /* Space for arrow. Other padding should match .autocomplete__input--default. */
 46 |   cursor: pointer;
 47 | }
 48 | 
 49 | .autocomplete__dropdown-arrow-down{
 50 |   z-index: -1;
 51 |   display: inline-block;
 52 |   position: absolute;
 53 |   right: 8px;
 54 |   width: 24px;
 55 |   height: 24px;
 56 |   top: 10px;
 57 | }
 58 | 
 59 | .autocomplete__menu {
 60 |   background-color: #fff;
 61 |   border: 2px solid #0B0C0C;
 62 |   border-top: 0;
 63 |   color: #0B0C0C;
 64 |   margin: 0;
 65 |   max-height: 342px;
 66 |   overflow-x: hidden;
 67 |   padding: 0;
 68 |   width: 100%;
 69 |   width: calc(100% - 4px);
 70 | }
 71 | 
 72 | .autocomplete__menu--visible {
 73 |   display: block;
 74 | }
 75 | 
 76 | .autocomplete__menu--hidden {
 77 |   display: none;
 78 | }
 79 | 
 80 | .autocomplete__menu--overlay {
 81 |   box-shadow: rgba(0, 0, 0, 0.256863) 0px 2px 6px;
 82 |   left: 0;
 83 |   position: absolute;
 84 |   top: 100%;
 85 |   z-index: 100;
 86 | }
 87 | 
 88 | .autocomplete__menu--inline {
 89 |   position: relative;
 90 | }
 91 | 
 92 | .autocomplete__option {
 93 |   border-bottom: solid #b1b4b6;
 94 |   border-width: 1px 0;
 95 |   cursor: pointer;
 96 |   display: block;
 97 |   position: relative;
 98 | }
 99 | 
100 | .autocomplete__option > * {
101 |   pointer-events: none;
102 | }
103 | 
104 | .autocomplete__option:first-of-type {
105 |   border-top-width: 0;
106 | }
107 | 
108 | .autocomplete__option:last-of-type {
109 |   border-bottom-width: 0;
110 | }
111 | 
112 | .autocomplete__option--odd {
113 |   background-color: #FAFAFA;
114 | }
115 | 
116 | .autocomplete__option--focused,
117 | .autocomplete__option:hover {
118 |   background-color: #1d70b8;
119 |   border-color: #1d70b8;
120 |   color: white;
121 |   outline: none;
122 | }
123 | 
124 | @media (-ms-high-contrast: active), (forced-colors: active) {
125 |   .autocomplete__menu {
126 |     border-color: FieldText;
127 |   }
128 | 
129 |   .autocomplete__option {
130 |     background-color: Field;
131 |     color: FieldText;
132 |   }
133 | 
134 |   .autocomplete__option--focused,
135 |   .autocomplete__option:hover {
136 |     forced-color-adjust: none; /* prevent backplate from obscuring text */
137 |     background-color: Highlight;
138 |     border-color: Highlight;
139 |     color: HighlightText;
140 | 
141 |     /* Prefer SelectedItem / SelectedItemText in browsers that support it */
142 |     background-color: SelectedItem;
143 |     border-color: SelectedItem;
144 |     color: SelectedItemText;
145 |     outline-color: SelectedItemText;
146 |   }
147 | }
148 | 
149 | .autocomplete__option--no-results {
150 |   background-color: #FAFAFA;
151 |   color: #646b6f;
152 |   cursor: not-allowed;
153 | }
154 | 
155 | .autocomplete__hint,
156 | .autocomplete__input,
157 | .autocomplete__option {
158 |   font-size: 16px;
159 |   line-height: 1.25;
160 | }
161 | 
162 | .autocomplete__hint,
163 | .autocomplete__option {
164 |   padding: 5px;
165 | }
166 | 
167 | @media (min-width: 641px) {
168 |   .autocomplete__hint,
169 |   .autocomplete__input,
170 |   .autocomplete__option {
171 |     font-size: 19px;
172 |     line-height: 1.31579;
173 |   }
174 | }
175 | 
176 | .autocomplete__list {
177 |   list-style-type: none;
178 |   padding: 0;
179 |   margin: 20px 0 0;
180 | }
181 | 
182 | .autocomplete__list .autocomplete__selected-option,
183 | .autocomplete__list .autocomplete__selected-option:hover {
184 |   cursor: inherit;
185 |   color: #0b0c0c;
186 |   margin: 5px 0;
187 | }
188 | 
189 | .autocomplete__list .autocomplete__remove-option {
190 |   cursor: pointer;
191 |   color: #005ea5;
192 |   text-decoration: underline;
193 |   background: transparent;
194 |   border: none;
195 |   font-size: inherit;
196 |   margin-left: 5px;
197 | }
198 | 
199 | .autocomplete__list .autocomplete__remove-option:hover{
200 |   color: #2b8cc4;
201 | }
202 | 
203 | .autocomplete__list .autocomplete__remove-option:focus{
204 |   color: #0b0c0c;
205 |   outline: 3px solid #ffbf47;
206 |   outline-offset: 0;
207 |   background-color: #ffbf47;
208 | }
209 | 
210 | .autocomplete__list .autocomplete__remove-option:before {
211 |   content: '× ';
212 |   color: inherit;
213 | }
214 | 
215 | .autocomplete__list-item-description {
216 |   display: none;
217 | }
218 | 


--------------------------------------------------------------------------------
/examples/multiselect.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |     <title>Accessible Autocomplete examples</title>
  7 |     <style>
  8 |       /* Example page specific styling. */
  9 |       html {
 10 |         color: #111;
 11 |         background: #FFF;
 12 |         font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
 13 |         font-size: 16px;
 14 |         line-height: 1.5;
 15 |       }
 16 | 
 17 |       body {
 18 |         padding-left: 1rem;
 19 |         padding-right: 1rem;
 20 |       }
 21 | 
 22 |       h1, h2, h3, h4, h5, h6 {
 23 |         line-height: normal;
 24 |       }
 25 | 
 26 |       label {
 27 |         display: block;
 28 |         margin-bottom: .5rem;
 29 |       }
 30 | 
 31 |       code {
 32 |         padding-left: .5em;
 33 |         padding-right: .5em;
 34 |         background: #EFEFEF;
 35 |         font-weight: normal;
 36 |         font-family: monospace;
 37 |       }
 38 | 
 39 |       main {
 40 |         max-width: 40em;
 41 |         margin-left: auto;
 42 |         margin-right: auto;
 43 |       }
 44 | 
 45 |       .autocomplete-wrapper {
 46 |         max-width: 20em;
 47 |         margin-bottom: 4rem;
 48 |       }
 49 |     </style>
 50 |     <link rel="stylesheet" href="../dist/accessible-autocomplete.min.css">
 51 |   </head>
 52 |   <body>
 53 |     <main>
 54 |       <h1>Accessible Autocomplete examples</h1>
 55 | 
 56 |       <p><a href="form.html">Example in a real HTML form that you can submit</a></p>
 57 | 
 58 |       <h3>Multiselect</h3>
 59 |       <p>
 60 |         This example demonstrates how to use the autocomplete on a multiselect <code>&lt;select multiple&gt;</code> element
 61 |         Turn off JavaScript to see the <code>&lt;select multiple&gt;</code> element.
 62 |       </p>
 63 |       <p>Uses <code>accessibleAutocomplete.enhanceSelectElement</code>.</p>
 64 |       <label for="multiselect-progressiveEnhancement">Select your country</label>
 65 |       <div class="autocomplete-wrapper">
 66 |         <select multiple id="multiselect-progressiveEnhancement">
 67 |           <option value="fr">France</option>
 68 |           <option value="de">Germany</option>
 69 |           <option value="gb">United Kingdom</option>
 70 |           <option value="ae">United Arab Emirates</option>
 71 |         </select>
 72 |       </div>
 73 | 
 74 |       <h3>Multiselect with pre-selected values</h3>
 75 |       <p>
 76 |         This example demonstrates how to use the autocomplete on a multiselect <code>&lt;select multiple&gt;</code> element
 77 |         Turn off JavaScript to see the <code>&lt;select multiple&gt;</code> element.
 78 |       </p>
 79 |       <p>Uses <code>accessibleAutocomplete.enhanceSelectElement</code>.</p>
 80 |       <label for="multiselect-preselected-progressiveEnhancement">Select your country</label>
 81 |       <div class="autocomplete-wrapper">
 82 |         <select multiple id="multiselect-preselected-progressiveEnhancement">
 83 |           <option value="fr">France</option>
 84 |           <option value="de" selected>Germany</option>
 85 |           <option value="gb" selected>United Kingdom</option>
 86 |           <option value="ae">United Arab Emirates</option>
 87 |         </select>
 88 |       </div>
 89 | 
 90 |       <h3>Multiselect with empty option</h3>
 91 |       <p>
 92 |         This example demonstrates how to use the autocomplete on a multiselect <code>&lt;select multiple&gt;</code> element
 93 |         Turn off JavaScript to see the <code>&lt;select multiple&gt;</code> element.
 94 |       </p>
 95 |       <p>Uses <code>accessibleAutocomplete.enhanceSelectElement</code>.</p>
 96 |       <label for="multiselect-empty-option-progressiveEnhancement">Select your country</label>
 97 |       <div class="autocomplete-wrapper">
 98 |         <select multiple id="multiselect-empty-option-progressiveEnhancement">
 99 |           <option value=""></option>
100 |           <option value="fr">France</option>
101 |           <option value="de">Germany</option>
102 |           <option value="gb">United Kingdom</option>
103 |           <option value="ae">United Arab Emirates</option>
104 |         </select>
105 |       </div>
106 | 
107 |     </main>
108 | 
109 |     <script type="text/javascript" src="../dist/accessible-autocomplete.min.js"></script>
110 | 
111 |     <script type="text/javascript">
112 |       element = document.querySelector('#multiselect-progressiveEnhancement')
113 |       accessibleAutocomplete.enhanceSelectElement({
114 |         selectElement: element
115 |       })
116 |     </script>
117 | 
118 |     <script type="text/javascript">
119 |       element = document.querySelector('#multiselect-preselected-progressiveEnhancement')
120 |       accessibleAutocomplete.enhanceSelectElement({
121 |         selectElement: element
122 |       })
123 |     </script>
124 | 
125 |     <script type="text/javascript">
126 |       element = document.querySelector('#multiselect-empty-option-progressiveEnhancement')
127 |       accessibleAutocomplete.enhanceSelectElement({
128 |         showAllValues: true,
129 |         selectElement: element
130 |       })
131 |     </script>
132 | 
133 |   </body>
134 | </html>
135 | 


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
  1 | # Contributing
  2 | 
  3 | Contributions welcome, please raise a pull request.
  4 | 
  5 | If you want to help and want to get more familiar with the codebase, try starting with the ["good for beginners"](https://github.com/alphagov/accessible-autocomplete/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+for+beginners%22) issues. Feel free to request more guidance in the issue comments.
  6 | 
  7 | ## Requirements
  8 | 
  9 | You will need a recent version of Node and npm installed:
 10 | 
 11 | ```bash
 12 | $ node -v
 13 | v7.10.0
 14 | $ npm -v
 15 | v5.0.0
 16 | ```
 17 | 
 18 | If you want to run the selenium tests, you will also need a local copy of the Java Development Kit:
 19 | 
 20 | ```bash
 21 | $ java -version
 22 | java version "1.8.0_131"
 23 | Java(TM) SE Runtime Environment (build 1.8.0_131-b11)
 24 | Java HotSpot(TM) 64-Bit Server VM (build 25.131-b11, mixed mode)
 25 | ```
 26 | 
 27 | To install Node (with npm) and Java locally on macOS, you can use [brew](https://brew.sh/):
 28 | 
 29 | ```bash
 30 | brew install node
 31 | brew cask install java
 32 | ```
 33 | 
 34 | ## Project structure
 35 | 
 36 | ```
 37 | $ ls
 38 | dist/        # The compiled and ready to distribute build artefacts.
 39 | screenshots/ # Gets outputted by the end to end tests when something goes wrong.
 40 | examples/    # GitHub pages examples of using the autocomplete.
 41 | scripts/     # Build scripts that don't fit in `package.json`.
 42 | src/         # The source code for the library.
 43 | test/        # The tests for the library.
 44 | ```
 45 | 
 46 | ## Build tasks
 47 | 
 48 | To develop locally:
 49 | 
 50 | ```bash
 51 | npm install
 52 | npm run dev
 53 | ```
 54 | 
 55 | Contributions will need to pass the linter and tests. To run everything once:
 56 | 
 57 | ```bash
 58 | npm test
 59 | ```
 60 | 
 61 | To run the linter on its own:
 62 | 
 63 | ```bash
 64 | npm run standard
 65 | ```
 66 | 
 67 | To run the functional tests in dev mode (automatically reruns when a file changes):
 68 | 
 69 | ```bash
 70 | npm run karma:dev
 71 | ```
 72 | 
 73 | To run the integration tests locally with Chrome (specified in [wdio.config.js](test/wdio.config.js)):
 74 | 
 75 | ```bash
 76 | npm run wdio
 77 | ```
 78 | 
 79 | To run the integration tests on [Sauce Labs](https://saucelabs.com/), create a `.env` file with the following:
 80 | 
 81 | ```bash
 82 | SAUCE_ENABLED="true"
 83 | SAUCE_USERNAME="XXXXXXXX"
 84 | SAUCE_ACCESS_KEY="YYYYYYYY"
 85 | ```
 86 | 
 87 | And run the same command:
 88 | 
 89 | ```bash
 90 | npm run wdio
 91 | ```
 92 | 
 93 | Failed integration tests should output screenshots to the `./screenshots/` folder.
 94 | 
 95 | To build the project for distribution:
 96 | 
 97 | ```bash
 98 | npm run build
 99 | ```
100 | 
101 | You should do this and commit it before you attempt to `git push`, otherwise the prepush checks will prevent you from pushing.
102 | 
103 | ## Prepush checks
104 | 
105 | When you push to a branch, git will run a `npm run prepush` [script](scripts/check-staged.mjs) that will compile the build on your behalf to the `dist/` folder. If it then finds unstaged files in `dist/`, it will fail your push.
106 | 
107 | The solution is to commit the files, preferably as part of a separate commit:
108 | 
109 | ```bash
110 | npm run build
111 | git add dist/
112 | git commit -m "Rebuild dist"
113 | git push
114 | ```
115 | 
116 | If you want to ignore the checks and push regardless:
117 | 
118 | ```bash
119 | git push --no-verify
120 | ```
121 | 
122 | ## PR nice to haves
123 | 
124 | - Tests for your feature or fix
125 | - Updates to the README.md when necessary
126 | - A 1 line update in CHANGELOG.md describing your changes
127 | 
128 | ## Cutting a new release
129 | 
130 | `git pull --rebase` and then run:
131 | 
132 | ```bash
133 | git checkout -b "v1.2.3"
134 | vim CHANGELOG.md # Update CHANGELOG, put all unreleased changes under new heading.
135 | git commit -am "Update CHANGELOG"
136 | npm version <major|minor|patch> -m "## 1.2.3 - 2017-01-13
137 | 
138 | - Change included in this release
139 | - Another change included in this release"
140 | ```
141 | 
142 | Then run:
143 | ```bash
144 | git push --tags --set-upstream origin refs/heads/v1.2.3:refs/heads/v1.2.3
145 | ```
146 | 
147 | Create a pull request for the release and merge once it has been approved, then run:
148 | 
149 | ```bash
150 | git checkout main
151 | git pull --rebase
152 | ```
153 | 
154 | ### Publish the release
155 | 
156 |   1. Sign in to npm (`npm login`) as `govuk-patterns-and-tools` using the credentials from BitWarden.
157 |   2. Run `npm publish` to publish to npm.
158 |   3. Open the ['create a new release' dialog](https://github.com/alphagov/accessible-autocomplete/releases/new) on GitHub.
159 |   4. Select the latest tag version.
160 |   5. Set 'v[VERSION-NUMBER]' as the title.
161 |   6. Add the release notes from the changelog.
162 |   7. Add a summary of highlights.
163 |   8. Select **Publish release**.
164 | 
165 | You do not need to manually attach source code files to the release on GitHub.
166 | 
167 | Post a short summary of the release in the cross-government and GDS #govuk-design-system Slack channels. For example:
168 | 
169 | 🚀 We’ve just released Accessible Autocomplete v2.0.1. You can now use the acccessible autocomplete multiple times on one page. Thanks to @<SLACK-NAME> and @<SLACK-NAME> for helping with this release. [https://github.com/alphagov/accessible-autocomplete/releases/tag/v2.0.1](https://github.com/alphagov/accessible-autocomplete/releases/tag/v2.0.1)
170 | 


--------------------------------------------------------------------------------
/test/integration/index.js:
--------------------------------------------------------------------------------
  1 | /* global $, afterEach, beforeEach, browser, describe, it */
  2 | const expect = require('chai').expect
  3 | const { browserName, browserVersion } = browser.capabilities
  4 | const isChrome = browserName === 'chrome'
  5 | // const isFireFox = browserName === 'firefox'
  6 | const isIE = browserName === 'internet explorer'
  7 | // const isIE9 = isIE && browserVersion === '9'
  8 | // const isIE10 = isIE && browserVersion === '10'
  9 | // const isIE11 = isIE && browserVersion === '11.103'
 10 | const liveRegionWaitTimeMillis = 10000
 11 | 
 12 | const basicExample = (runner = null) => {
 13 |   describe('basic example', function () {
 14 |     const input = 'input#autocomplete-default'
 15 |     const menu = `${input} + ul`
 16 |     const firstOption = `${menu} > li:first-child`
 17 |     const secondOption = `${menu} > li:nth-child(2)`
 18 | 
 19 |     it('should show the input', () => {
 20 |       $(input).waitForExist()
 21 |       expect($(input).isDisplayed()).to.equal(true)
 22 |     })
 23 | 
 24 |     it('should allow focusing the input', () => {
 25 |       $(input).click()
 26 |       expect($(input).isFocused()).to.equal(true)
 27 |     })
 28 | 
 29 |     it('should display suggestions', () => {
 30 |       $(input).click()
 31 |       $(input).setValue('ita')
 32 |       $(menu).waitForDisplayed()
 33 |       expect($(menu).isDisplayed()).to.equal(true)
 34 |     })
 35 | 
 36 |     // These tests are flakey when run through Saucelabs so we only run them
 37 |     // in Chrome
 38 |     if (isChrome) {
 39 |       it('should announce status changes using two alternately updated aria live regions', () => {
 40 |         const regionA = $('#autocomplete-default__status--A')
 41 |         const regionB = $('#autocomplete-default__status--B')
 42 | 
 43 |         expect(regionA.getText()).to.equal('')
 44 |         expect(regionB.getText()).to.equal('')
 45 | 
 46 |         $(input).click()
 47 |         $(input).setValue('a')
 48 | 
 49 |         // We can't tell which region will be used first, so we have to allow for
 50 |         // either region changing
 51 |         browser.waitUntil(() => { return regionA.getText() !== '' || regionB.getText() !== '' },
 52 |           liveRegionWaitTimeMillis,
 53 |           'expected the first aria live region to be populated within ' + liveRegionWaitTimeMillis + ' milliseconds'
 54 |         )
 55 | 
 56 |         if (regionA.getText()) {
 57 |           $(input).addValue('s')
 58 |           browser.waitUntil(() => { return (regionA.getText() === '' && regionB.getText() !== '') },
 59 |             liveRegionWaitTimeMillis,
 60 |             'expected the first aria live region to be cleared, and the second to be populated within ' +
 61 |             liveRegionWaitTimeMillis + ' milliseconds'
 62 |           )
 63 | 
 64 |           $(input).addValue('h')
 65 |           browser.waitUntil(() => { return (regionA.getText() !== '' && regionB.getText() === '') },
 66 |             liveRegionWaitTimeMillis,
 67 |             'expected the first aria live region to be populated, and the second to be cleared within ' +
 68 |             liveRegionWaitTimeMillis + ' milliseconds'
 69 |           )
 70 |         } else {
 71 |           $(input).addValue('s')
 72 |           browser.waitUntil(() => { return (regionA.getText() !== '' && regionB.getText() === '') },
 73 |             liveRegionWaitTimeMillis,
 74 |             'expected the first aria live region to be populated, and the second to be cleared within ' +
 75 |             liveRegionWaitTimeMillis + ' milliseconds'
 76 |           )
 77 | 
 78 |           $(input).addValue('h')
 79 |           browser.waitUntil(() => { return (regionA.getText() === '' && regionB.getText() !== '') },
 80 |             liveRegionWaitTimeMillis,
 81 |             'expected the first aria live region to be cleared, and the second to be populated within ' +
 82 |             liveRegionWaitTimeMillis + ' milliseconds'
 83 |           )
 84 |         }
 85 |       })
 86 |     }
 87 | 
 88 |     it('should set aria-selected to true on selected option and unset aria-selected on other options', () => {
 89 |       $(input).click()
 90 |       $(input).setValue('ita')
 91 |       browser.keys(['ArrowDown'])
 92 |       expect($(firstOption).getAttribute('aria-selected')).to.equal('true')
 93 |       if (runner === 'react') {
 94 |         expect($(secondOption).getAttribute('aria-selected')).to.equal('false')
 95 |       } else {
 96 |         expect($(secondOption).getAttribute('aria-selected')).to.equal(null)
 97 |       }
 98 |       browser.keys(['ArrowDown'])
 99 |       if (runner === 'react') {
100 |         expect($(firstOption).getAttribute('aria-selected')).to.equal('false')
101 |       } else {
102 |         expect($(firstOption).getAttribute('aria-selected')).to.equal(null)
103 |       }
104 |       expect($(secondOption).getAttribute('aria-selected')).to.equal('true')
105 |     })
106 | 
107 |     describe('keyboard use', () => {
108 |       it('should allow typing', () => {
109 |         $(input).click()
110 |         $(input).addValue('ita')
111 |         expect($(input).getValue()).to.equal('ita')
112 |       })
113 | 
114 |       it('should allow selecting an option', () => {
115 |         $(input).click()
116 |         $(input).setValue('ita')
117 |         browser.keys(['ArrowDown'])
118 |         expect($(input).isFocused()).to.equal(false)
119 |         expect($(firstOption).isFocused()).to.equal(true)
120 |         browser.keys(['ArrowDown'])
121 |         expect($(menu).isDisplayed()).to.equal(true)
122 |         expect($(input).getValue()).to.equal('ita')
123 |         expect($(firstOption).isFocused()).to.equal(false)
124 |         expect($(secondOption).isFocused()).to.equal(true)
125 |       })
126 | 
127 |       it('should allow confirming an option', () => {
128 |         $(input).click()
129 |         $(input).setValue('ita')
130 |         browser.keys(['ArrowDown', 'Enter'])
131 |         browser.waitUntil(() => $(input).getValue() !== 'ita')
132 |         expect($(input).isFocused()).to.equal(true)
133 |         expect($(input).getValue()).to.equal('Italy')
134 |       })
135 | 
136 |       it('should redirect keypresses on an option to input', () => {
137 |         if (!isIE) {
138 |           $(input).click()
139 |           $(input).setValue('ita')
140 |           browser.keys(['ArrowDown'])
141 |           expect($(input).isFocused()).to.equal(false)
142 |           expect($(firstOption).isFocused()).to.equal(true)
143 |           $(firstOption).addValue(['l'])
144 |           expect($(input).isFocused()).to.equal(true)
145 |           expect($(input).getValue()).to.equal('ital')
146 |         } else {
147 |           // FIXME: This feature does not work correctly on IE 9 to 11.
148 |         }
149 |       })
150 |     })
151 | 
152 |     describe('mouse use', () => {
153 |       it('should allow confirming an option', () => {
154 |         $(input).click()
155 |         $(input).setValue('ita')
156 |         $(firstOption).click()
157 |         expect($(input).isFocused()).to.equal(true)
158 |         expect($(input).getValue()).to.equal('Italy')
159 |       })
160 |     })
161 |   })
162 | }
163 | 
164 | const customTemplatesExample = () => {
165 |   describe('custom templates example', function () {
166 |     const input = 'input#autocomplete-customTemplates'
167 |     const menu = `${input} + ul`
168 |     const firstOption = `${menu} > li:first-child`
169 |     const firstOptionInnerElement = `${firstOption} > strong`
170 | 
171 |     beforeEach(() => {
172 |       $(input).setValue('') // Prevent autofilling, IE likes to do this.
173 |     })
174 | 
175 |     describe('mouse use', () => {
176 |       it('should allow confirming an option by clicking on child elements', () => {
177 |         $(input).setValue('uni')
178 | 
179 |         if (isIE) {
180 |           // FIXME: This feature works correctly on IE but testing it doesn't seem to work.
181 |           return
182 |         }
183 | 
184 |         try {
185 |           $(firstOptionInnerElement).click()
186 |         } catch (error) {
187 |           // In some cases (mainly ChromeDriver) the automation protocol won't
188 |           // allow clicking span elements. In this case we just skip the test.
189 |           if (error.toString().match(/Other element would receive the click/)) {
190 |             return
191 |           } else {
192 |             throw error
193 |           }
194 |         }
195 | 
196 |         expect($(input).isFocused()).to.equal(true)
197 |         expect($(input).getValue()).to.equal('United Kingdom')
198 |       })
199 |     })
200 |   })
201 | }
202 | 
203 | const takeScreenshotsIfFail = () => {
204 |   afterEach(function () {
205 |     const testFailed = this.currentTest.state === 'failed'
206 |     if (testFailed) {
207 |       const timestamp = +new Date()
208 |       const browserVariant = isIE ? `ie${browserVersion}` : browserName
209 |       const testTitle = this.currentTest.title.replace(/\W/g, '-')
210 |       const filename = `./screenshots/${timestamp}-${browserVariant}-${testTitle}.png`
211 |       browser.saveScreenshot(filename)
212 |       console.log(`Test failed, created: ${filename}`)
213 |     }
214 |   })
215 | }
216 | 
217 | describe('Accessible Autocomplete', () => {
218 |   beforeEach(() => {
219 |     browser.url('/')
220 |   })
221 | 
222 |   it('should have the right title', () => {
223 |     expect(browser.getTitle()).to.equal('Accessible Autocomplete examples')
224 |   })
225 | 
226 |   basicExample()
227 |   customTemplatesExample()
228 | 
229 |   takeScreenshotsIfFail()
230 | })
231 | 
232 | describe('Accessible Autocomplete Preact', () => {
233 |   beforeEach(() => {
234 |     browser.url('/preact')
235 |   })
236 | 
237 |   it('should have the right title', () => {
238 |     expect(browser.getTitle()).to.equal('Accessible Autocomplete Preact examples')
239 |   })
240 | 
241 |   basicExample()
242 | 
243 |   takeScreenshotsIfFail()
244 | })
245 | 
246 | describe('Accessible Autocomplete React', () => {
247 |   beforeEach(() => {
248 |     browser.url('/react')
249 |   })
250 | 
251 |   it('should have the right title', () => {
252 |     expect(browser.getTitle()).to.equal('Accessible Autocomplete React examples')
253 |   })
254 | 
255 |   basicExample('react')
256 | 
257 |   takeScreenshotsIfFail()
258 | })
259 | 


--------------------------------------------------------------------------------
/examples/preact/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |     <title>Accessible Autocomplete Preact examples</title>
  7 |     <style>
  8 |       /* Example page specific styling. */
  9 |       html {
 10 |         color: #111;
 11 |         background: #FFF;
 12 |         font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
 13 |         font-size: 16px;
 14 |         line-height: 1.5;
 15 |       }
 16 | 
 17 |       body {
 18 |         padding-left: 1rem;
 19 |         padding-right: 1rem;
 20 |       }
 21 | 
 22 |       h1, h2, h3, h4, h5, h6 {
 23 |         line-height: normal;
 24 |       }
 25 | 
 26 |       label {
 27 |         display: block;
 28 |         margin-bottom: .5rem;
 29 |       }
 30 | 
 31 |       code {
 32 |         padding-left: .5em;
 33 |         padding-right: .5em;
 34 |         background: #EFEFEF;
 35 |         font-weight: normal;
 36 |         font-family: monospace;
 37 |       }
 38 | 
 39 |       main {
 40 |         max-width: 40em;
 41 |         margin-left: auto;
 42 |         margin-right: auto;
 43 |       }
 44 | 
 45 |       .autocomplete-wrapper {
 46 |         max-width: 20em;
 47 |         margin-bottom: 4rem;
 48 |       }
 49 |     </style>
 50 |     <link rel="stylesheet" href="../../dist/accessible-autocomplete.min.css">
 51 |   </head>
 52 |   <body>
 53 |     <main>
 54 |       <h1>Accessible Autocomplete Preact examples</h1>
 55 | 
 56 |       <p>This page demonstrates using the autocomplete directly in Preact.</p>
 57 | 
 58 |       <label for="autocomplete-default">Select your country</label>
 59 |       <div id="tt-default" class="autocomplete-wrapper"></div>
 60 |     </main>
 61 | 
 62 |     <!-- We include the development version of Preact for debugging purposes. -->
 63 |     <script type="text/javascript" src="https://unpkg.com/preact@8.1.0/dist/preact.js"></script>
 64 |     <script type="text/javascript" src="../../dist/lib/accessible-autocomplete.preact.min.js"></script>
 65 |     <script type="text/javascript">
 66 |       function suggest (query, syncResults) {
 67 |         var results = [
 68 |           'Afghanistan',
 69 |           'Akrotiri',
 70 |           'Albania',
 71 |           'Algeria',
 72 |           'American Samoa',
 73 |           'Andorra',
 74 |           'Angola',
 75 |           'Anguilla',
 76 |           'Antarctica',
 77 |           'Antigua and Barbuda',
 78 |           'Argentina',
 79 |           'Armenia',
 80 |           'Aruba',
 81 |           'Ashmore and Cartier Islands',
 82 |           'Australia',
 83 |           'Austria',
 84 |           'Azerbaijan',
 85 |           'Bahamas, The',
 86 |           'Bahrain',
 87 |           'Bangladesh',
 88 |           'Barbados',
 89 |           'Bassas da India',
 90 |           'Belarus',
 91 |           'Belgium',
 92 |           'Belize',
 93 |           'Benin',
 94 |           'Bermuda',
 95 |           'Bhutan',
 96 |           'Bolivia',
 97 |           'Bosnia and Herzegovina',
 98 |           'Botswana',
 99 |           'Bouvet Island',
100 |           'Brazil',
101 |           'British Indian Ocean Territory',
102 |           'British Virgin Islands',
103 |           'Brunei',
104 |           'Bulgaria',
105 |           'Burkina Faso',
106 |           'Burma',
107 |           'Burundi',
108 |           'Cambodia',
109 |           'Cameroon',
110 |           'Canada',
111 |           'Cape Verde',
112 |           'Cayman Islands',
113 |           'Central African Republic',
114 |           'Chad',
115 |           'Chile',
116 |           'China',
117 |           'Christmas Island',
118 |           'Clipperton Island',
119 |           'Cocos (Keeling) Islands',
120 |           'Colombia',
121 |           'Comoros',
122 |           'Congo',
123 |           'Cook Islands',
124 |           'Coral Sea Islands',
125 |           'Costa Rica',
126 |           'Cote d\'Ivoire',
127 |           'Croatia',
128 |           'Cuba',
129 |           'Cyprus',
130 |           'Czech Republic',
131 |           'Denmark',
132 |           'Dhekelia',
133 |           'Djibouti',
134 |           'Dominica',
135 |           'Dominican Republic',
136 |           'Ecuador',
137 |           'Egypt',
138 |           'El Salvador',
139 |           'Equatorial Guinea',
140 |           'Eritrea',
141 |           'Estonia',
142 |           'Ethiopia',
143 |           'Europa Island',
144 |           'Falkland Islands',
145 |           'Faroe Islands',
146 |           'Fiji',
147 |           'Finland',
148 |           'France',
149 |           'French Guiana',
150 |           'French Polynesia',
151 |           'French Southern and Antarctic Lands',
152 |           'Gabon',
153 |           'Gambia,',
154 |           'Gaza Strip',
155 |           'Georgia',
156 |           'Germany',
157 |           'Ghana',
158 |           'Gibraltar',
159 |           'Glorioso Islands',
160 |           'Greece',
161 |           'Greenland',
162 |           'Grenada',
163 |           'Guadeloupe',
164 |           'Guam',
165 |           'Guatemala',
166 |           'Guernsey',
167 |           'Guinea',
168 |           'Guinea-Bissau',
169 |           'Guyana',
170 |           'Haiti',
171 |           'Heard Island and McDonald Islands',
172 |           'Holy See (Vatican City)',
173 |           'Honduras',
174 |           'Hong Kong',
175 |           'Hungary',
176 |           'Iceland',
177 |           'India',
178 |           'Indonesia',
179 |           'Iran',
180 |           'Iraq',
181 |           'Ireland',
182 |           'Isle of Man',
183 |           'Israel',
184 |           'Italy',
185 |           'Jamaica',
186 |           'Jan Mayen',
187 |           'Japan',
188 |           'Jersey',
189 |           'Jordan',
190 |           'Juan de Nova Island',
191 |           'Kazakhstan',
192 |           'Kenya',
193 |           'Kiribati',
194 |           'Korea, North',
195 |           'Korea, South',
196 |           'Kuwait',
197 |           'Kyrgyzstan',
198 |           'Laos',
199 |           'Latvia',
200 |           'Lebanon',
201 |           'Lesotho',
202 |           'Liberia',
203 |           'Libya',
204 |           'Liechtenstein',
205 |           'Lithuania',
206 |           'Luxembourg',
207 |           'Macau',
208 |           'Macedonia',
209 |           'Madagascar',
210 |           'Malawi',
211 |           'Malaysia',
212 |           'Maldives',
213 |           'Mali',
214 |           'Malta',
215 |           'Marshall Islands',
216 |           'Martinique',
217 |           'Mauritania',
218 |           'Mauritius',
219 |           'Mayotte',
220 |           'Mexico',
221 |           'Micronesia, Federated States of',
222 |           'Moldova',
223 |           'Monaco',
224 |           'Mongolia',
225 |           'Montserrat',
226 |           'Morocco',
227 |           'Mozambique',
228 |           'Namibia',
229 |           'Nauru',
230 |           'Navassa Island',
231 |           'Nepal',
232 |           'Netherlands',
233 |           'Netherlands Antilles',
234 |           'New Caledonia',
235 |           'New Zealand',
236 |           'Nicaragua',
237 |           'Niger',
238 |           'Nigeria',
239 |           'Niue',
240 |           'Norfolk Island',
241 |           'Northern Mariana Islands',
242 |           'Norway',
243 |           'Oman',
244 |           'Pakistan',
245 |           'Palau',
246 |           'Panama',
247 |           'Papua New Guinea',
248 |           'Paracel Islands',
249 |           'Paraguay',
250 |           'Peru',
251 |           'Philippines',
252 |           'Pitcairn Islands',
253 |           'Poland',
254 |           'Portugal',
255 |           'Puerto Rico',
256 |           'Qatar',
257 |           'Reunion',
258 |           'Romania',
259 |           'Russia',
260 |           'Rwanda',
261 |           'Saint Helena',
262 |           'Saint Kitts and Nevis',
263 |           'Saint Lucia',
264 |           'Saint Pierre and Miquelon',
265 |           'Saint Vincent and the Grenadines',
266 |           'Samoa',
267 |           'San Marino',
268 |           'Sao Tome and Principe',
269 |           'Saudi Arabia',
270 |           'Senegal',
271 |           'Serbia and Montenegro',
272 |           'Seychelles',
273 |           'Sierra Leone',
274 |           'Singapore',
275 |           'Slovakia',
276 |           'Slovenia',
277 |           'Solomon Islands',
278 |           'Somalia',
279 |           'South Africa',
280 |           'South Georgia and the South Sandwich Islands',
281 |           'Spain',
282 |           'Spratly Islands',
283 |           'Sri Lanka',
284 |           'Sudan',
285 |           'Suriname',
286 |           'Svalbard',
287 |           'Swaziland',
288 |           'Sweden',
289 |           'Switzerland',
290 |           'Syria',
291 |           'Taiwan',
292 |           'Tajikistan',
293 |           'Tanzania',
294 |           'Thailand',
295 |           'Timor-Leste',
296 |           'Togo',
297 |           'Tokelau',
298 |           'Tonga',
299 |           'Trinidad and Tobago',
300 |           'Tromelin Island',
301 |           'Tunisia',
302 |           'Turkey',
303 |           'Turkmenistan',
304 |           'Turks and Caicos Islands',
305 |           'Tuvalu',
306 |           'Uganda',
307 |           'Ukraine',
308 |           'United Arab Emirates',
309 |           'United Kingdom',
310 |           'United States',
311 |           'Uruguay',
312 |           'Uzbekistan',
313 |           'Vanuatu',
314 |           'Venezuela',
315 |           'Vietnam',
316 |           'Virgin Islands',
317 |           'Wake Island',
318 |           'Wallis and Futuna',
319 |           'West Bank',
320 |           'Western Sahara',
321 |           'Yemen',
322 |           'Zambia',
323 |           'Zimbabwe'
324 |           ]
325 |         syncResults(query
326 |           ? results.filter(function (result) {
327 |               return result.toLowerCase().indexOf(query.toLowerCase()) !== -1
328 |             })
329 |           : []
330 |         )
331 |       }
332 |     </script>
333 | 
334 |     <script type="text/javascript">
335 |       var element = document.querySelector('#tt-default')
336 |       var id = 'autocomplete-default'
337 |       preact.render(
338 |         preact.createElement(Autocomplete.default, {
339 |           id: id,
340 |           source: suggest
341 |         }),
342 |         element
343 |       )
344 |     </script>
345 |   </body>
346 | </html>
347 | 


--------------------------------------------------------------------------------
/examples/react/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |     <title>Accessible Autocomplete React examples</title>
  7 |     <style>
  8 |       /* Example page specific styling. */
  9 |       html {
 10 |         color: #111;
 11 |         background: #FFF;
 12 |         font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
 13 |         font-size: 16px;
 14 |         line-height: 1.5;
 15 |       }
 16 | 
 17 |       body {
 18 |         padding-left: 1rem;
 19 |         padding-right: 1rem;
 20 |       }
 21 | 
 22 |       h1, h2, h3, h4, h5, h6 {
 23 |         line-height: normal;
 24 |       }
 25 | 
 26 |       label {
 27 |         display: block;
 28 |         margin-bottom: .5rem;
 29 |       }
 30 | 
 31 |       code {
 32 |         padding-left: .5em;
 33 |         padding-right: .5em;
 34 |         background: #EFEFEF;
 35 |         font-weight: normal;
 36 |         font-family: monospace;
 37 |       }
 38 | 
 39 |       main {
 40 |         max-width: 40em;
 41 |         margin-left: auto;
 42 |         margin-right: auto;
 43 |       }
 44 | 
 45 |       .autocomplete-wrapper {
 46 |         max-width: 20em;
 47 |         margin-bottom: 4rem;
 48 |       }
 49 |     </style>
 50 |     <link rel="stylesheet" href="../../dist/accessible-autocomplete.min.css">
 51 |   </head>
 52 |   <body>
 53 |     <main>
 54 |       <h1>Accessible Autocomplete React examples</h1>
 55 | 
 56 |       <p>This page demonstrates using the autocomplete directly in React.</p>
 57 | 
 58 |       <label for="autocomplete-default">Select your country</label>
 59 |       <div id="tt-default" class="autocomplete-wrapper"></div>
 60 |     </main>
 61 | 
 62 |     <!-- We include the development version of React for debugging purposes. -->
 63 |     <script type="text/javascript" src="https://unpkg.com/react@15.5.4/dist/react.js"></script>
 64 |     <script type="text/javascript" src="https://unpkg.com/react-dom@15.5.4/dist/react-dom.js"></script>
 65 |     <script type="text/javascript" src="../../dist/lib/accessible-autocomplete.react.min.js"></script>
 66 |     <script type="text/javascript">
 67 |       function suggest (query, syncResults) {
 68 |         var results = [
 69 |           'Afghanistan',
 70 |           'Akrotiri',
 71 |           'Albania',
 72 |           'Algeria',
 73 |           'American Samoa',
 74 |           'Andorra',
 75 |           'Angola',
 76 |           'Anguilla',
 77 |           'Antarctica',
 78 |           'Antigua and Barbuda',
 79 |           'Argentina',
 80 |           'Armenia',
 81 |           'Aruba',
 82 |           'Ashmore and Cartier Islands',
 83 |           'Australia',
 84 |           'Austria',
 85 |           'Azerbaijan',
 86 |           'Bahamas, The',
 87 |           'Bahrain',
 88 |           'Bangladesh',
 89 |           'Barbados',
 90 |           'Bassas da India',
 91 |           'Belarus',
 92 |           'Belgium',
 93 |           'Belize',
 94 |           'Benin',
 95 |           'Bermuda',
 96 |           'Bhutan',
 97 |           'Bolivia',
 98 |           'Bosnia and Herzegovina',
 99 |           'Botswana',
100 |           'Bouvet Island',
101 |           'Brazil',
102 |           'British Indian Ocean Territory',
103 |           'British Virgin Islands',
104 |           'Brunei',
105 |           'Bulgaria',
106 |           'Burkina Faso',
107 |           'Burma',
108 |           'Burundi',
109 |           'Cambodia',
110 |           'Cameroon',
111 |           'Canada',
112 |           'Cape Verde',
113 |           'Cayman Islands',
114 |           'Central African Republic',
115 |           'Chad',
116 |           'Chile',
117 |           'China',
118 |           'Christmas Island',
119 |           'Clipperton Island',
120 |           'Cocos (Keeling) Islands',
121 |           'Colombia',
122 |           'Comoros',
123 |           'Congo',
124 |           'Cook Islands',
125 |           'Coral Sea Islands',
126 |           'Costa Rica',
127 |           'Cote d\'Ivoire',
128 |           'Croatia',
129 |           'Cuba',
130 |           'Cyprus',
131 |           'Czech Republic',
132 |           'Denmark',
133 |           'Dhekelia',
134 |           'Djibouti',
135 |           'Dominica',
136 |           'Dominican Republic',
137 |           'Ecuador',
138 |           'Egypt',
139 |           'El Salvador',
140 |           'Equatorial Guinea',
141 |           'Eritrea',
142 |           'Estonia',
143 |           'Ethiopia',
144 |           'Europa Island',
145 |           'Falkland Islands',
146 |           'Faroe Islands',
147 |           'Fiji',
148 |           'Finland',
149 |           'France',
150 |           'French Guiana',
151 |           'French Polynesia',
152 |           'French Southern and Antarctic Lands',
153 |           'Gabon',
154 |           'Gambia,',
155 |           'Gaza Strip',
156 |           'Georgia',
157 |           'Germany',
158 |           'Ghana',
159 |           'Gibraltar',
160 |           'Glorioso Islands',
161 |           'Greece',
162 |           'Greenland',
163 |           'Grenada',
164 |           'Guadeloupe',
165 |           'Guam',
166 |           'Guatemala',
167 |           'Guernsey',
168 |           'Guinea',
169 |           'Guinea-Bissau',
170 |           'Guyana',
171 |           'Haiti',
172 |           'Heard Island and McDonald Islands',
173 |           'Holy See (Vatican City)',
174 |           'Honduras',
175 |           'Hong Kong',
176 |           'Hungary',
177 |           'Iceland',
178 |           'India',
179 |           'Indonesia',
180 |           'Iran',
181 |           'Iraq',
182 |           'Ireland',
183 |           'Isle of Man',
184 |           'Israel',
185 |           'Italy',
186 |           'Jamaica',
187 |           'Jan Mayen',
188 |           'Japan',
189 |           'Jersey',
190 |           'Jordan',
191 |           'Juan de Nova Island',
192 |           'Kazakhstan',
193 |           'Kenya',
194 |           'Kiribati',
195 |           'Korea, North',
196 |           'Korea, South',
197 |           'Kuwait',
198 |           'Kyrgyzstan',
199 |           'Laos',
200 |           'Latvia',
201 |           'Lebanon',
202 |           'Lesotho',
203 |           'Liberia',
204 |           'Libya',
205 |           'Liechtenstein',
206 |           'Lithuania',
207 |           'Luxembourg',
208 |           'Macau',
209 |           'Macedonia',
210 |           'Madagascar',
211 |           'Malawi',
212 |           'Malaysia',
213 |           'Maldives',
214 |           'Mali',
215 |           'Malta',
216 |           'Marshall Islands',
217 |           'Martinique',
218 |           'Mauritania',
219 |           'Mauritius',
220 |           'Mayotte',
221 |           'Mexico',
222 |           'Micronesia, Federated States of',
223 |           'Moldova',
224 |           'Monaco',
225 |           'Mongolia',
226 |           'Montserrat',
227 |           'Morocco',
228 |           'Mozambique',
229 |           'Namibia',
230 |           'Nauru',
231 |           'Navassa Island',
232 |           'Nepal',
233 |           'Netherlands',
234 |           'Netherlands Antilles',
235 |           'New Caledonia',
236 |           'New Zealand',
237 |           'Nicaragua',
238 |           'Niger',
239 |           'Nigeria',
240 |           'Niue',
241 |           'Norfolk Island',
242 |           'Northern Mariana Islands',
243 |           'Norway',
244 |           'Oman',
245 |           'Pakistan',
246 |           'Palau',
247 |           'Panama',
248 |           'Papua New Guinea',
249 |           'Paracel Islands',
250 |           'Paraguay',
251 |           'Peru',
252 |           'Philippines',
253 |           'Pitcairn Islands',
254 |           'Poland',
255 |           'Portugal',
256 |           'Puerto Rico',
257 |           'Qatar',
258 |           'Reunion',
259 |           'Romania',
260 |           'Russia',
261 |           'Rwanda',
262 |           'Saint Helena',
263 |           'Saint Kitts and Nevis',
264 |           'Saint Lucia',
265 |           'Saint Pierre and Miquelon',
266 |           'Saint Vincent and the Grenadines',
267 |           'Samoa',
268 |           'San Marino',
269 |           'Sao Tome and Principe',
270 |           'Saudi Arabia',
271 |           'Senegal',
272 |           'Serbia and Montenegro',
273 |           'Seychelles',
274 |           'Sierra Leone',
275 |           'Singapore',
276 |           'Slovakia',
277 |           'Slovenia',
278 |           'Solomon Islands',
279 |           'Somalia',
280 |           'South Africa',
281 |           'South Georgia and the South Sandwich Islands',
282 |           'Spain',
283 |           'Spratly Islands',
284 |           'Sri Lanka',
285 |           'Sudan',
286 |           'Suriname',
287 |           'Svalbard',
288 |           'Swaziland',
289 |           'Sweden',
290 |           'Switzerland',
291 |           'Syria',
292 |           'Taiwan',
293 |           'Tajikistan',
294 |           'Tanzania',
295 |           'Thailand',
296 |           'Timor-Leste',
297 |           'Togo',
298 |           'Tokelau',
299 |           'Tonga',
300 |           'Trinidad and Tobago',
301 |           'Tromelin Island',
302 |           'Tunisia',
303 |           'Turkey',
304 |           'Turkmenistan',
305 |           'Turks and Caicos Islands',
306 |           'Tuvalu',
307 |           'Uganda',
308 |           'Ukraine',
309 |           'United Arab Emirates',
310 |           'United Kingdom',
311 |           'United States',
312 |           'Uruguay',
313 |           'Uzbekistan',
314 |           'Vanuatu',
315 |           'Venezuela',
316 |           'Vietnam',
317 |           'Virgin Islands',
318 |           'Wake Island',
319 |           'Wallis and Futuna',
320 |           'West Bank',
321 |           'Western Sahara',
322 |           'Yemen',
323 |           'Zambia',
324 |           'Zimbabwe'
325 |           ]
326 |         syncResults(query
327 |           ? results.filter(function (result) {
328 |               return result.toLowerCase().indexOf(query.toLowerCase()) !== -1
329 |             })
330 |           : []
331 |         )
332 |       }
333 |     </script>
334 | 
335 |     <script type="text/javascript">
336 |       var element = document.querySelector('#tt-default')
337 |       var id = 'autocomplete-default'
338 |       ReactDOM.render(
339 |         React.createElement(Autocomplete.default, {
340 |           id: id,
341 |           source: suggest
342 |         }),
343 |         element
344 |       )
345 |     </script>
346 |   </body>
347 | </html>
348 | 


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
  1 | # CHANGELOG
  2 | 
  3 | ## Unreleased
  4 | 
  5 | ## 2.0.5 - 2023-04-25
  6 | 
  7 | - [Pull request #591: Add menuAttributes to fix #361](https://github.com/alphagov/accessible-autocomplete/pull/591)
  8 | 
  9 | ## 2.0.4 - 2022-02-07
 10 | 
 11 | ### Fixes
 12 | 
 13 | - [Pull request #512: Make sure highlighted option is distinguishable in forced colors mode](https://github.com/alphagov/accessible-autocomplete/pull/512)
 14 | 
 15 | ## 2.0.3 - 2020-07-01
 16 | 
 17 | ### Fixes
 18 | 
 19 | - [Pull request #415: Make React bundle work server-side in a NodeJS environment](https://github.com/alphagov/accessible-autocomplete/pull/415)
 20 | 
 21 | ## 2.0.2 - 2020-01-30
 22 | 
 23 | ### Fixes
 24 | 
 25 | - [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).
 26 | - [Pull request #400: Remove pointer events check](https://github.com/alphagov/accessible-autocomplete/pull/400).
 27 | - [Pull request #406: Make hint padding match input padding](https://github.com/alphagov/accessible-autocomplete/pull/406).
 28 | - [Pull request #407: Use a div element to wrap enhanced component](https://github.com/alphagov/accessible-autocomplete/pull/407).
 29 | - [Pull request #410: Fix long clicks not selecting options](https://github.com/alphagov/accessible-autocomplete/pull/410).
 30 | 
 31 | ## 2.0.1 - 2019-10-07
 32 | 
 33 | ### Fixes
 34 | 
 35 | - [Pull request #379: Ensure multiple autocompletes on one page do not have conflicting id attributes](https://github.com/alphagov/accessible-autocomplete/pull/379)
 36 | 
 37 | ## 2.0.0 - 2019-09-26
 38 | 
 39 | We recommend you update to the latest release using npm:
 40 | 
 41 | `npm install accessible-autocomplete@latest`
 42 | 
 43 | ### Breaking changes
 44 | 
 45 | You must make the following change when you migrate to this release, or your service may break.
 46 | 
 47 | #### Migrate to the new accessible focus state
 48 | 
 49 | The focus state [now meets the new WCAG 2.1 level AA requirements](https://designnotes.blog.gov.uk/2019/07/29/weve-made-the-gov-uk-design-system-more-accessible/).
 50 | 
 51 | You do not need to do anything if you’re using Sass.
 52 | 
 53 | If you’ve previously copied CSS from our code into your project, you must copy all the CSS from our [`accessible-autocomplete.min.css` file](https://github.com/alphagov/accessible-autocomplete/blob/v2.0.0/dist/accessible-autocomplete.min.css) into your CSS file.
 54 | 
 55 | If you’ve created custom CSS, you should check that your component meets WCAG 2.1 level AA requirements. You can [read how we made the GOV.UK Design System focus states accessible](https://design-system.service.gov.uk/get-started/focus-states/).
 56 | 
 57 | [Pull request #360: Update focus styles to meet WCAG 2.1 level AA non-text contrast requirements](https://github.com/alphagov/accessible-autocomplete/pull/360).
 58 | 
 59 | ### Fixes
 60 | 
 61 | #### Better compatibility with screen readers
 62 | 
 63 | The input field is now visible to all screen readers, because the input field now meets the Accessible Rich Internet Applications (ARIA) 1.0 standard instead of ARIA 1.1. ARIA 1.0 is better supported by the current versions of most screen readers.
 64 | 
 65 | Screen readers will now consistently tell users:
 66 | 
 67 | - when users have entered too few characters in the input field
 68 | - the correct number of search results, and what the results are
 69 | - which result users have highlighted
 70 | - how to use autocomplete in different screen readers - by reading hidden hint text
 71 | 
 72 | Screen readers will also now avoid telling users information they do not need to know after they highlight an option.
 73 | 
 74 | Thanks to [Mark Hunter](https://github.com/markhunter27), Chris Moore and everyone at HMRC who worked on these improvements.
 75 | 
 76 | [Pull request #355: Refinements to address accessibility issues](https://github.com/alphagov/accessible-autocomplete/pull/355)
 77 | 
 78 | ## 1.6.2 - 2018-11-13
 79 | 
 80 | - Update all packages and add `@babel/preset-env` for browser polyfills. Updates Preact and avoids React 16 `onFocusOut` warnings - thanks [@colinrotherham](https://github.com/colinrotherham)
 81 |   ([#316](https://github.com/alphagov/accessible-autocomplete/pull/316))
 82 | 
 83 | - Fix mouse event issues in IE9-11 including looping `mouseout` and click event being prevented on child elements (e.g. bold text) - thanks [@colinrotherham](https://github.com/colinrotherham)
 84 |   ([#310](https://github.com/alphagov/accessible-autocomplete/pull/310))
 85 | 
 86 | - Fix position being incorrectly reported as '1 of n' regardless of actual
 87 |   position in list – thanks [@PRGfx](https://github.com/PRGfx)
 88 |   ([#291](https://github.com/alphagov/accessible-autocomplete/pull/291))
 89 | 
 90 | - Fix spacebar input not being registered when seeing 'No results found'
 91 |   message – thanks [@AdenFraser](https://github.com/AdenFraser)
 92 |   ([#287](https://github.com/alphagov/accessible-autocomplete/pull/287))
 93 | 
 94 | - Update following dependencies (from "Current" to "Wanted"). This fixes failing WebdriverIO tests and updates JS Standard to use eslint 4.
 95 | 
 96 | | Package                                  | Current | Wanted | Latest |
 97 | |------------------------------------------|---------|--------|--------|
 98 | | babel-eslint                             | 8.0.0   | 8.2.6  | 8.2.6  |
 99 | | babel-loader                             | 7.1.0   | 7.1.5  | 7.1.5  |
100 | | babel-plugin-transform-decorators-legacy | 1.3.4   | 1.3.5  | 1.3.5  |
101 | | babel-register                           | 6.24.1  | 6.26.0 | 6.26.0 |
102 | | babel-runtime                            | 6.23.0  | 6.26.0 | 6.26.0 |
103 | | chai                                     | 4.0.2   | 4.1.2  | 4.1.2  |
104 | | chalk                                    | 2.0.1   | 2.4.1  | 2.4.1  |
105 | | copy-webpack-plugin                      | 4.0.1   | 4.5.2  | 4.5.2  |
106 | | coveralls                                | 2.13.1  | 2.13.3 | 3.0.2  |
107 | | cross-env                                | 5.0.1   | 5.2.0  | 5.2.0  |
108 | | csso-cli                                 | 1.0.0   | 1.1.0  | 1.1.0  |
109 | | husky                                    | 0.14.1  | 0.14.3 | 0.14.3 |
110 | | karma                                    | 1.7.0   | 1.7.1  | 2.0.4  |
111 | | karma-coverage                           | 1.1.1   | 1.1.2  | 1.1.2  |
112 | | karma-mocha-reporter                     | 2.2.3   | 2.2.5  | 2.2.5  |
113 | | karma-webpack                            | 2.0.3   | 2.0.13 | 3.0.0  |
114 | | mocha                                    | 3.4.2   | 3.5.3  | 5.2.0  |
115 | | npm-run-all                              | 4.0.2   | 4.1.3  | 4.1.3  |
116 | | phantomjs-prebuilt                       | 2.1.14  | 2.1.16 | 2.1.16 |
117 | | preact                                   | 8.1.0   | 8.2.9  | 8.2.9  |
118 | | sinon-chai                               | 2.11.0  | 2.14.0 | 3.2.0  |
119 | | source-map-loader                        | 0.2.1   | 0.2.3  | 0.2.3  |
120 | | standard                                 | 10.0.2  | 11.0.1 | 11.0.1 |
121 | | wdio-mocha-framework                     | 0.5.10  | 0.5.13 | 0.6.2  |
122 | | wdio-sauce-service                       | 0.4.0   | 0.4.10 | 0.4.10 |
123 | | wdio-selenium-standalone-service         | 0.0.8   | 0.0.10 | 0.0.10 |
124 | | wdio-spec-reporter                       | 0.1.0   | 0.1.5  | 0.1.5  |
125 | | webdriverio                              | 4.8.0   | 4.13.1 | 4.13.1 |
126 | | webpack                                  | 3.0.0   | 3.12.0 | 4.16.1 |
127 | | webpack-dev-server                       | 2.5.0   | 2.11.2 | 3.1.4  |
128 | | webpack-sources                          | 1.0.1   | 1.1.0  | 1.1.0  |
129 | 
130 | ## 1.6.1 - 2017-09-25
131 | 
132 | - Fix role attr by moving `role='combobox'` to wrapper and adding `role='textbox'` to the input. By [@tobias-g](https://github.com/tobias-g)
133 | - Fix examples page by removing unrequired npm package `v8-lazy-parse-webpack-plugin`
134 | - Fix scrolling on iOS by reverting #85, new issue raised to find better fix for clicking custom suggestions #177
135 | - Fix selection and timeout race condition. By [@tobias-g](https://github.com/tobias-g)
136 | - Fix dropdown on IE to ensure it isn't focusable. By [@tobias-g](https://github.com/tobias-g)
137 | 
138 | ## 1.6.0 - 2017-07-20
139 | 
140 | - [Feature] Allow customization of the dropdown arrow. By [@sventschui](https://github.com/sventschui).
141 | 
142 | ## 1.5.0 - 2017-07-18
143 | 
144 | - [Feature] Add ability to translate texts. Relates to #96. By [@sventschui](https://github.com/sventschui).
145 | 
146 | ## 1.4.2 - 2017-07-18
147 | 
148 | - Allow space to confirm an option, fixes #98.
149 | - Add support for navigating lists on IE9, 10 and 11, fixes #193.
150 | 
151 | ## 1.4.1 - 2017-07-06
152 | 
153 | - Fix use of HTML entities in enhanced select options. #151. By [@dracos](https://github.com/dracos).
154 | 
155 | ## 1.4.0 - 2017-07-04
156 | 
157 | - [Feature] Add option to show all values on dropdown.  By [@joelanman](https://github.com/joelanman).
158 | 
159 | ## 1.3.2 - 2017-07-03
160 | 
161 | - Redirect keypresses on an option to input, fixes #179.
162 | 
163 | ## 1.3.1 - 2017-06-08
164 | 
165 | - Fix `autoselect: false` not working when using `enhanceSelectElement`.
166 | 
167 | ## 1.3.0 - 2017-06-02
168 | 
169 | - [Feature] Add support for passing an array of strings to `source`. By [@joelanman](https://github.com/joelanman).
170 | 
171 | ## 1.2.1 - 2017-05-24
172 | 
173 | - Fix progressive enhancement in FireFox < 48. By [@revilossor](https://github.com/revilossor).
174 | 
175 | ## 1.2.0 - 2017-05-23
176 | 
177 | - [Feature] Export Preact and React bundles.
178 | 
179 | ## 1.1.0 - 2017-05-18
180 | 
181 | - [Feature] Add `required` option. By [@samtsai](https://github.com/samtsai).
182 | 
183 | ## 1.0.6 - 2017-05-17
184 | 
185 | - Update preact dependency to v8.1.0.
186 | 
187 | ## 1.0.5 - 2017-05-16
188 | 
189 | - Add support for handling null/placeholder options when using `enhanceSelectElement`. Use `preserveNullOptions: true` to include options with `value=''` in the autocomplete results when enhancing a select element. By @lennym.
190 | 
191 | ## 1.0.4 - 2017-05-15 (deprecated)
192 | 
193 | - This release does not contain any changes compared to the previous one and is due to a mistake in our build scripts.
194 | 
195 | ## 1.0.3 - 2017-05-15
196 | 
197 | - Do not copy `name` attribute when using `enhanceSelectElement`. By [@lennym](https://github.com/lennym).
198 | 
199 | ## 1.0.2 - 2017-05-12
200 | 
201 | - Add support for an empty `defaultValue` when enhancing a select element. By [@lennym](https://github.com/lennym).
202 | 
203 | ## 1.0.1 - 2017-05-12
204 | 
205 | - Update `style` property in package.json to reflect updated filename. By [@lennym](https://github.com/lennym).
206 | 
207 | ## 1.0.0 - 2017-05-10
208 | 
209 | - [Breaking] Default `autoselect` to `true` when using `enhanceSelectElement`.
210 | - [Breaking] Make `id` a required attribute.
211 | - [Breaking] Rename `onSelect` to `onConfirm`.
212 | - [Breaking] Rename `selectOnBlur` to `confirmOnBlur`.
213 | - Fix an issue where users couldn't click on custom suggestions on Chrome.
214 | 
215 | ## 0.6.0 - 2017-05-10
216 | 
217 | - [Breaking] Rename component from `accessible-typeahead` to `accessible-autocomplete`.
218 | - Default `defaultValue` when progressively enhancing.
219 | - Throw an error when `enhanceSelectElement` is called without a `selectElement`.
220 | - Throw errors when `accessibleAutocomplete` is called without `element` or `source`.
221 | 
222 | ## 0.5.0 - 2017-05-09
223 | 
224 | - Test the typeahead with end to end tests.
225 | - Don't display hints on browsers that don't support pointer-events.
226 | - [Breaking] Rename `dist/styled.min.css` to `dist/accessible-typeahead.min.css`.
227 | - [Breaking] Rename library main export from `AccessibleTypeahead` to `accessibleTypeahead`.
228 | - Fix aria status region to more reliably trigger when the number of results stay the same.
229 | - Fix hint rendering and being picked up by assistive technologies.
230 | - More aria status region above input so it's more easily picked while navigating.
231 | 
232 | ## 0.4.2 - 2017-05-03
233 | 
234 | - Add touchEnd handler for iOS and touch devices, fixes custom suggestions.
235 | - Add `style` declaration in package.json
236 | - Add support for UMD/commonjs module definition.
237 | 
238 | ## 0.4.1 - 2017-04-26
239 | 
240 | - Minify `styled.css` for production.
241 | 
242 | ## 0.4.0 - 2017-04-11
243 | 
244 | - [Breaking] Don't focus suggestions when hovering them, add `:hover` CSS class.
245 | - Add `showNoOptionsFound` property to allow users to disable this behaviour.
246 | - Pass through unrecognised key events to input, allowing users to continue typing when they are focusing an option.
247 | 
248 | ## 0.3.5 - 2017-04-06
249 | 
250 | - Don't prepopulate `defaultValue` in `enhanceSelectElement`.
251 | 
252 | ## 0.3.4 - 2017-04-06
253 | 
254 | - Pass actual selected object into `onSelect`.
255 | - Add `selectOnBlur` property to allow users to disable this behaviour.
256 | - Add `placeholder` property.
257 | 
258 | ## 0.3.3 - 2017-04-04
259 | 
260 | - Add `templates.inputValue` and `templates.suggestion` properties. These allow users to override how the suggestions are displayed.
261 | 
262 | ## 0.3.2 - 2017-04-03
263 | 
264 | - Add `AccessibleTypeahead.enhanceSelectElement` function.
265 | - Add `onSelect` property.
266 | 
267 | ## 0.3.1 - 2017-03-09
268 | 
269 | - Add ability to specify a `defaultValue` to prefill the input.
270 | - When user has selected an option with the keyboard, blurring will select.
271 | - When user has no selected but autoselect is on, blurring will select.
272 | - Hovering no longer selects, just focuses.
273 | - When hovering out of component, focus returns to selected.
274 | - Allow enter to submit forms when menu isn't opened.
275 | - Hide results when going under minLength.
276 | 
277 | ## 0.3.0 - 2017-03-09
278 | 
279 | - [Breaking] Add `displayMenu` property. The default is `inline` which was not the previous default.
280 | - CSS colour changes, and more properties moved away from inline styles.
281 | - Turn off native browser autocomplete so it doesn't interfere with typeahead overlay.
282 | - Change the content and styling of the 'No results found' feature.
283 | 
284 | ## 0.2.4 - 2017-03-02
285 | 
286 | - Display "No options found" when there are no results.
287 | - Add `autoselect` property. This refactors the `:focused` CSS class to `--focused`, but because previous styling should still work as before, is not a breaking change.
288 | - Poll the input element periodically to pick up value changes. This makes it more resilient to direct modifications from applications like Dragon, or from interventions from other JavaScript snippets.
289 | 
290 | ## 0.2.3 - 2017-02-21
291 | 
292 | - Add `minLength` property, which:
293 |   - Tells the aria region to display text that the user should type in more characters;
294 |   - Doesn't call the `source` until that lower limit is reached.
295 | - Select text only when component is unfocused.
296 | 
297 | ## 0.2.2 - 2017-02-16
298 | 
299 | - Fix focus/blur events on IE11.
300 | - Fix value of `aria-expanded` attribute to be based on `menuOpen`.
301 | - Remove `aria-activedescendant` attribute when no option selected.
302 | - Set `aria-selected` on options when they are focused.
303 | - Fix clicking on options on Safari.
304 | - Use a darker blue in the styled example for better contrast ratios.
305 | - Don't close menu when blurring options or input on iOS, to allow VoiceOver users the ability to select from the available options.
306 | - Autoselect entire text region when focusing into the input.
307 | 
308 | ## 0.2.1 - 2017-02-03
309 | 
310 | - Don't close menu when closing the keyboard on iOS, to allow VoiceOver users the ability to select from the available options.
311 | - Add ability to set `name` attribute on input.
312 | 
313 | ## 0.2.0 - 2017-01-31
314 | 
315 | - [Breaking] Change the CSS classes to our own instead of the jQuery typeahead ones.
316 | - Allow importing styling from file in `examples/styled.css`.
317 | - Tweak the styled example to fix two Safari bugs:
318 |   - fix scroll bar appearing in menu where none is necessary;
319 |   - fix weird margin separating the input from the menu.
320 | 
321 | ## 0.1.3 - 2017-01-31
322 | 
323 | - Don't apply focused CSS on hover, change handler to MouseOver instead of MouseMove.
324 | - (WIP) Make enter select first option if `autoselect` is enabled. This feature is not finished yet.
325 | - Close results when focusing out of component after hovering an element.
326 | - Update styled example:
327 |   - unbold results;
328 |   - make height of options consistent with input;
329 |   - remove top border from results menu;
330 |   - remove default focus outline on options.
331 | - Don't display the menu when there are no options.
332 | - Prevent accidental form submission by `preventDefault`ing on enter key.
333 | - Add form around basic example.
334 | 
335 | ## 0.1.2 - 2017-01-20
336 | 
337 | - Don't specify typeahead menu width inline. Allows custom CSS to override it.
338 | 
339 | ## 0.1.0 - 2017-01-19
340 | 
341 | - Initial release.
342 | - Basic functionality, minimal styling, only two examples, incomplete tests.
343 | 


--------------------------------------------------------------------------------
/test/functional/wrapper.js:
--------------------------------------------------------------------------------
  1 | /* global before, beforeEach, after, describe, expect, it */
  2 | import accessibleAutocomplete from '../../src/wrapper'
  3 | 
  4 | const DEFAULT_OPTIONS = {
  5 |   '': 'Select',
  6 |   fr: 'France',
  7 |   de: 'Germany',
  8 |   gb: 'United Kingdom of Great Britain & Northern Ireland'
  9 | }
 10 | 
 11 | const injectSelectToEnhanceIntoDOM = (element, settings) => {
 12 |   settings = settings || {}
 13 |   settings.options = settings.options || DEFAULT_OPTIONS
 14 |   settings.id = settings.id !== undefined ? settings.id : 'location-picker-id'
 15 |   settings.name = settings.name !== undefined ? settings.name : 'location-picker-name'
 16 |   var $select = document.createElement('select')
 17 |   if (settings.id) {
 18 |     $select.id = settings.id
 19 |   }
 20 |   if (settings.name) {
 21 |     $select.name = settings.name
 22 |   }
 23 |   if (settings.multiple) {
 24 |     $select.multiple = settings.multiple
 25 |   }
 26 | 
 27 |   if (settings.multiple) {
 28 |     const selected = settings.selected || []
 29 |     Object.keys(settings.options)
 30 |       .map(optionKey => {
 31 |         const option = document.createElement('option')
 32 |         option.value = optionKey
 33 |         option.text = settings.options[optionKey]
 34 |         option.selected = selected.indexOf(optionKey) !== -1
 35 |         return option
 36 |       })
 37 |       .forEach(option => $select.appendChild(option))
 38 |   } else {
 39 |     Object.keys(settings.options)
 40 |       .map(optionKey => {
 41 |         const option = document.createElement('option')
 42 |         option.value = optionKey
 43 |         option.text = settings.options[optionKey]
 44 |         option.selected = (settings.selected === optionKey)
 45 |         return option
 46 |       })
 47 |       .forEach(option => $select.appendChild(option))
 48 |   }
 49 | 
 50 |   element.appendChild($select)
 51 | 
 52 |   return $select
 53 | }
 54 | 
 55 | describe('Wrapper', () => {
 56 |   let scratch
 57 |   before(() => {
 58 |     scratch = document.createElement('div');
 59 |     (document.body || document.documentElement).appendChild(scratch)
 60 |   })
 61 | 
 62 |   beforeEach(() => {
 63 |     scratch.innerHTML = ''
 64 |   })
 65 | 
 66 |   after(() => {
 67 |     scratch.parentNode.removeChild(scratch)
 68 |     scratch = null
 69 |   })
 70 | 
 71 |   it('throws an error when called on nonexistent element', () => {
 72 |     expect(
 73 |       accessibleAutocomplete.bind(null, {
 74 |         element: document.querySelector('#nothing-container'),
 75 |         id: 'scratch',
 76 |         source: () => {}
 77 |       })
 78 |     ).to.throw('element is not defined')
 79 |   })
 80 | 
 81 |   it('throws an error when called without an id ', () => {
 82 |     expect(
 83 |       accessibleAutocomplete.bind(null, {
 84 |         element: scratch,
 85 |         source: () => {}
 86 |       })
 87 |     ).to.throw('id is not defined')
 88 |   })
 89 | 
 90 |   it('throws an error when called without a source', () => {
 91 |     expect(
 92 |       accessibleAutocomplete.bind(null, {
 93 |         element: scratch,
 94 |         id: 'scratch'
 95 |       })
 96 |     ).to.throw('source is not defined')
 97 |   })
 98 | 
 99 |   it('throws an error when called on nonexistent selectElement', () => {
100 |     expect(
101 |       accessibleAutocomplete.enhanceSelectElement.bind(null, {
102 |         selectElement: document.querySelector('#nothing')
103 |       })
104 |     ).to.throw('selectElement is not defined')
105 |   })
106 | 
107 |   it('can enhance a select element', () => {
108 |     const select = injectSelectToEnhanceIntoDOM(scratch)
109 |     const id = select.id
110 | 
111 |     accessibleAutocomplete.enhanceSelectElement({
112 |       selectElement: select
113 |     })
114 | 
115 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
116 |     expect(autocompleteInstances.length).to.equal(1)
117 | 
118 |     const autocompleteInstance = autocompleteInstances[0]
119 | 
120 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
121 |     expect(autocompleteInput.tagName.toLowerCase()).to.equal('input')
122 |     expect(autocompleteInput.id).to.equal(id)
123 |   })
124 | 
125 |   it('can enhance a select multiple element', () => {
126 |     const select = injectSelectToEnhanceIntoDOM(scratch, { multiple: true })
127 |     const id = select.id
128 | 
129 |     accessibleAutocomplete.enhanceSelectElement({
130 |       selectElement: select
131 |     })
132 | 
133 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
134 |     expect(autocompleteInstances.length).to.equal(1)
135 | 
136 |     const autocompleteInstance = autocompleteInstances[0]
137 | 
138 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
139 |     const autocompleteList = autocompleteInstance.querySelector('.autocomplete__list')
140 |     expect(autocompleteInput.tagName.toLowerCase()).to.equal('input')
141 |     expect(autocompleteInput.id).to.equal(id)
142 |     expect(autocompleteList).to.equal(null)
143 |   })
144 | 
145 |   it('uses the defaultValue setting to populate the input field if no option is selected', () => {
146 |     const select = injectSelectToEnhanceIntoDOM(scratch, { selected: '' })
147 |     accessibleAutocomplete.enhanceSelectElement({
148 |       defaultValue: '',
149 |       selectElement: select
150 |     })
151 | 
152 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
153 |     const autocompleteInstance = autocompleteInstances[0]
154 | 
155 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
156 |     expect(autocompleteInput.value).to.equal('')
157 |   })
158 | 
159 |   it('uses the option label as the default input element value if an option is selected', () => {
160 |     const select = injectSelectToEnhanceIntoDOM(scratch, { selected: 'de' })
161 |     accessibleAutocomplete.enhanceSelectElement({
162 |       defaultValue: '',
163 |       selectElement: select
164 |     })
165 | 
166 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
167 |     const autocompleteInstance = autocompleteInstances[0]
168 | 
169 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
170 |     expect(autocompleteInput.value).to.equal('Germany')
171 |   })
172 | 
173 |   it('plays back the selected options when enhancing a select multiple', () => {
174 |     const select = injectSelectToEnhanceIntoDOM(scratch, { selected: ['de', 'fr'], multiple: true })
175 | 
176 |     accessibleAutocomplete.enhanceSelectElement({
177 |       selectElement: select
178 |     })
179 | 
180 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
181 |     const autocompleteInstance = autocompleteInstances[0]
182 | 
183 |     const autocompleteSelectedItems = autocompleteInstance.querySelectorAll('ul.autocomplete__list li.autocomplete__selected-option')
184 |     expect(autocompleteSelectedItems.length).to.equal(2)
185 |     expect(autocompleteSelectedItems[0].textContent).to.contain('France')
186 |     expect(autocompleteSelectedItems[1].textContent).to.contain('Germany')
187 |   })
188 | 
189 |   it('can make selections when enhancing a select multiple', (done) => {
190 |     const select = injectSelectToEnhanceIntoDOM(scratch, { selected: ['fr'], multiple: true })
191 | 
192 |     accessibleAutocomplete.enhanceSelectElement({
193 |       selectElement: select
194 |     })
195 | 
196 |     const autocompleteInstance = document.querySelector('.autocomplete__wrapper')
197 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
198 | 
199 |     autocompleteInput.value = 'Germany'
200 |     setTimeout(() => {
201 |       const autocompleteOption = autocompleteInstance.querySelector('.autocomplete__option')
202 |       expect(autocompleteOption.textContent).to.equal('Germany')
203 |       autocompleteOption.click()
204 | 
205 |       const selectedOptions = select.querySelectorAll('option:checked')
206 |       expect(selectedOptions.length).to.equal(2)
207 |       expect(selectedOptions[0].textContent).to.equal('France')
208 |       expect(selectedOptions[1].textContent).to.equal('Germany')
209 |       done()
210 |     }, 250)
211 |   })
212 | 
213 |   it('can remove selections when enhancing a select multiple', (done) => {
214 |     const select = injectSelectToEnhanceIntoDOM(scratch, { selected: ['de', 'fr'], multiple: true })
215 | 
216 |     accessibleAutocomplete.enhanceSelectElement({
217 |       selectElement: select
218 |     })
219 | 
220 |     const autocompleteInstance = document.querySelectorAll('.autocomplete__wrapper')[0]
221 |     const removeFrance = autocompleteInstance.querySelector('.autocomplete__remove-option')
222 |     removeFrance.click()
223 | 
224 |     setTimeout(() => {
225 |       const autocompleteSelectedItems = autocompleteInstance.querySelectorAll('.autocomplete__list li')
226 |       expect(autocompleteSelectedItems.length).to.equal(1)
227 |       expect(autocompleteSelectedItems[0].textContent).to.contain('Germany')
228 | 
229 |       const selectedOptions = select.querySelectorAll('option:checked')
230 |       expect(selectedOptions.length).to.equal(1)
231 |       expect(selectedOptions[0].textContent).to.equal('Germany')
232 | 
233 |       done()
234 |     }, 250)
235 |   })
236 | 
237 |   it('gives the autocomplete element a blank name attribute by default', () => {
238 |     const select = injectSelectToEnhanceIntoDOM(scratch)
239 | 
240 |     accessibleAutocomplete.enhanceSelectElement({
241 |       selectElement: select
242 |     })
243 | 
244 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
245 | 
246 |     const autocompleteInstance = autocompleteInstances[0]
247 | 
248 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
249 |     expect(autocompleteInput.name).to.equal('')
250 |   })
251 | 
252 |   it('can define a name for the autocomplete element', () => {
253 |     const select = injectSelectToEnhanceIntoDOM(scratch)
254 | 
255 |     accessibleAutocomplete.enhanceSelectElement({
256 |       name: 'location-picker-autocomplete',
257 |       selectElement: select
258 |     })
259 | 
260 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
261 | 
262 |     const autocompleteInstance = autocompleteInstances[0]
263 | 
264 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
265 |     expect(autocompleteInput.name).to.equal('location-picker-autocomplete')
266 |   })
267 | 
268 |   it('does not include "null" options in autocomplete', (done) => {
269 |     const select = injectSelectToEnhanceIntoDOM(scratch)
270 | 
271 |     accessibleAutocomplete.enhanceSelectElement({
272 |       selectElement: select
273 |     })
274 | 
275 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
276 |     const autocompleteInstance = autocompleteInstances[0]
277 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
278 | 
279 |     // Using setTimeouts here since changes in values take a while to reflect in lists
280 |     autocompleteInput.value = 'e'
281 |     setTimeout(() => {
282 |       const autocompleteOptions = autocompleteInstance.querySelectorAll('.autocomplete__option')
283 |       expect(autocompleteOptions.length).to.equal(3)
284 |       expect([].map.call(autocompleteOptions, o => o.textContent)).not.to.contain('Select')
285 |       done()
286 |     }, 250)
287 |   })
288 | 
289 |   it('includes "null" options in autocomplete if `preserveNullOptions` flag is true', (done) => {
290 |     const select = injectSelectToEnhanceIntoDOM(scratch)
291 | 
292 |     accessibleAutocomplete.enhanceSelectElement({
293 |       preserveNullOptions: true,
294 |       selectElement: select
295 |     })
296 | 
297 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
298 |     const autocompleteInstance = autocompleteInstances[0]
299 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
300 | 
301 |     // Using setTimeouts here since changes in values take a while to reflect in lists
302 |     autocompleteInput.value = 'e'
303 |     setTimeout(() => {
304 |       const autocompleteOptions = autocompleteInstance.querySelectorAll('.autocomplete__option')
305 |       expect(autocompleteOptions.length).to.equal(4)
306 |       expect([].map.call(autocompleteOptions, o => o.textContent)).to.contain('Select')
307 |       done()
308 |     }, 250)
309 |   })
310 | 
311 |   it('has all options when typing', (done) => {
312 |     const select = injectSelectToEnhanceIntoDOM(scratch)
313 | 
314 |     accessibleAutocomplete.enhanceSelectElement({
315 |       selectElement: select
316 |     })
317 | 
318 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
319 |     const autocompleteInstance = autocompleteInstances[0]
320 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
321 |     const autocompleteOption = autocompleteInstance.querySelector('.autocomplete__option')
322 | 
323 |     // Using setTimeouts here since changes in values take a while to reflect in lists
324 |     autocompleteInput.value = 'Fran'
325 |     setTimeout(() => {
326 |       expect(autocompleteOption.textContent).to.equal('France')
327 |       autocompleteInput.value = 'Ger'
328 |       setTimeout(() => {
329 |         expect(autocompleteOption.textContent).to.equal('Germany')
330 |         autocompleteInput.value = 'United'
331 |         setTimeout(() => {
332 |           const autocompleteHint = autocompleteInstance.querySelector('.autocomplete__hint')
333 |           expect(autocompleteOption.textContent).to.equal('United Kingdom of Great Britain & Northern Ireland')
334 |           expect(autocompleteHint.value).to.equal('United Kingdom of Great Britain & Northern Ireland')
335 |           done()
336 |         }, 250)
337 |       }, 250)
338 |     }, 250)
339 |   })
340 | 
341 |   it('includes aria attributes on each option, to indicate position within the full set of list item elements', (done) => {
342 |     const select = injectSelectToEnhanceIntoDOM(scratch)
343 | 
344 |     accessibleAutocomplete.enhanceSelectElement({
345 |       selectElement: select
346 |     })
347 | 
348 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
349 |     const autocompleteInstance = autocompleteInstances[0]
350 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
351 |     autocompleteInput.value = 'e'
352 |     setTimeout(() => {
353 |       const autocompleteOptions = autocompleteInstance.querySelectorAll('.autocomplete__option')
354 |       expect(autocompleteOptions.length).to.equal(3)
355 |       expect(autocompleteOptions[0].getAttribute('aria-posinset')).to.equal('1')
356 |       expect(autocompleteOptions[0].getAttribute('aria-setsize')).to.equal('3')
357 |       expect(autocompleteOptions[1].getAttribute('aria-posinset')).to.equal('2')
358 |       expect(autocompleteOptions[1].getAttribute('aria-setsize')).to.equal('3')
359 |       expect(autocompleteOptions[2].getAttribute('aria-posinset')).to.equal('3')
360 |       expect(autocompleteOptions[2].getAttribute('aria-setsize')).to.equal('3')
361 |       done()
362 |     }, 250)
363 |   })
364 | 
365 |   it('includes an explicit position suffix on each list item option when iOS is detected', (done) => {
366 |     Object.defineProperty(global.navigator, 'userAgent', { value: 'iPhone AppleWebKit', configurable: true })
367 | 
368 |     const select = injectSelectToEnhanceIntoDOM(scratch)
369 | 
370 |     accessibleAutocomplete.enhanceSelectElement({
371 |       selectElement: select
372 |     })
373 | 
374 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
375 |     const autocompleteInstance = autocompleteInstances[0]
376 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
377 |     const autocompleteOption = autocompleteInstance.querySelector('.autocomplete__option')
378 | 
379 |     autocompleteInput.value = 'Fran'
380 |     setTimeout(() => {
381 |       expect(autocompleteOption.textContent).to.equal('France 1 of 1')
382 |       const iosSuffixSpan = autocompleteOption.querySelector('#location-picker-id__option-suffix--0')
383 |       expect(iosSuffixSpan.textContent).to.equal(' 1 of 1')
384 |       done()
385 |     }, 250)
386 |   })
387 | 
388 |   it('does not include a position suffix on each list item option, when iOS is not detected', (done) => {
389 |     Object.defineProperty(global.navigator, 'userAgent', { value: 'definitely not an iDevice', configurable: true })
390 | 
391 |     const select = injectSelectToEnhanceIntoDOM(scratch)
392 | 
393 |     accessibleAutocomplete.enhanceSelectElement({
394 |       selectElement: select
395 |     })
396 | 
397 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
398 |     const autocompleteInstance = autocompleteInstances[0]
399 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
400 |     const autocompleteOption = autocompleteInstance.querySelector('.autocomplete__option')
401 | 
402 |     autocompleteInput.value = 'Fran'
403 |     setTimeout(() => {
404 |       expect(autocompleteOption.textContent).to.equal('France')
405 |       const iosSuffixSpan = autocompleteOption.querySelector('#location-picker-id__option-suffix--0')
406 |       expect(iosSuffixSpan).to.equal(null)
407 |       done()
408 |     }, 250)
409 |   })
410 | 
411 |   it('onConfirm updates original select', (done) => {
412 |     const select = injectSelectToEnhanceIntoDOM(scratch, { selected: 'de' })
413 | 
414 |     accessibleAutocomplete.enhanceSelectElement({
415 |       selectElement: select
416 |     })
417 | 
418 |     const autocompleteInstances = document.querySelectorAll('.autocomplete__wrapper')
419 |     const autocompleteInstance = autocompleteInstances[0]
420 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
421 |     const autocompleteOption = autocompleteInstance.querySelector('.autocomplete__option')
422 | 
423 |     // Check the initial value of the original selectElement
424 |     expect(select.value).to.equal('de')
425 |     // Using setTimeouts here since changes in values take a while to reflect in lists
426 |     autocompleteInput.value = 'United'
427 |     setTimeout(() => {
428 |       expect(autocompleteOption.textContent).to.equal('United Kingdom of Great Britain & Northern Ireland')
429 |       autocompleteOption.click()
430 |       expect(select.value).to.equal('gb')
431 |       setTimeout(() => {
432 |         expect(autocompleteInput.value).to.equal('United Kingdom of Great Britain & Northern Ireland')
433 |         done()
434 |       }, 250)
435 |     }, 250)
436 |   })
437 | 
438 |   it('onConfirm selects blank option when available', (done) => {
439 |     const select = injectSelectToEnhanceIntoDOM(scratch, { selected: 'de' })
440 | 
441 |     accessibleAutocomplete.enhanceSelectElement({
442 |       selectElement: select
443 |     })
444 | 
445 |     const autocompleteInstance = document.querySelectorAll('.autocomplete__wrapper')[0]
446 |     const autocompleteInput = autocompleteInstance.querySelector('.autocomplete__input')
447 | 
448 |     autocompleteInput.value = ''
449 |     autocompleteInput.dispatchEvent(new window.Event('blur'))
450 |     setTimeout(() => {
451 |       expect(autocompleteInput.textContent).to.equal('')
452 |       expect(select.value).to.equal('')
453 |       done()
454 |     }, 500)
455 |   })
456 | })
457 | 


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | # Accessible autocomplete multi select (RETIRED)
  2 | 
  3 | > **NOTE**: This project is retired as the component is not accessible.
  4 | >
  5 | > Similar functionality is now provided by the [Multiple](https://components.publishing.service.gov.uk/component-guide/select_with_search#with_multiple_select_enabled) variant of the [Select With Search](https://components.publishing.service.gov.uk/component-guide/select_with_search) component, which is available in the [govuk_publishing_components](https://github.com/alphagov/govuk_publishing_components) gem.
  6 | 
  7 | ---
  8 | 
  9 | The accessible autocomplete is a component that helps users choose answers from a list you provide. You can also use it to make the answers you get from users more consistent.
 10 | 
 11 | If you're asking users to provide their country or territory, the [govuk-country-and-territory-autocomplete](https://github.com/alphagov/govuk-country-and-territory-autocomplete/blob/main/README.md) might be more appropriate.
 12 | 
 13 | [![npm version](https://img.shields.io/npm/v/accessible-autocomplete.svg)](http://npm.im/accessible-autocomplete)
 14 | [![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)
 15 | [![gzip size](http://img.badgesize.io/https://unpkg.com/accessible-autocomplete/dist/accessible-autocomplete.min.js?compression=gzip)](https://unpkg.com/accessible-autocomplete/dist/accessible-autocomplete.min.js)
 16 | 
 17 | [![Sauce Labs Build Status](https://saucelabs.com/browser-matrix/tvararu-alphagov.svg)](https://saucelabs.com/u/tvararu-alphagov)
 18 | 
 19 | This is a fork of the [accessible-autocomplete](https://github.com/alphagov/accessible-autocomplete) component. It adds additional functionality such as support for [select multiple](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select#attr-multiple).
 20 | 
 21 | `accessible-autocomplete` is a JavaScript autocomplete built from the ground up to be accessible. The design goals are:
 22 | 
 23 | - **Accessibility**: Following WAI-ARIA best practices and testing with assistive technologies.
 24 | - **User experience**: Supporting a wide variety of user needs.
 25 | - **Compatibility**: Working with [recommended browsers](https://www.gov.uk/service-manual/technology/designing-for-different-browsers-and-devices#browsers-to-test-in) and [assistive technologies](https://www.gov.uk/service-manual/technology/testing-with-assistive-technologies#which-assistive-technologies-to-test-with).
 26 | 
 27 | [Try out the examples!](https://alphagov.github.io/accessible-autocomplete/examples/)
 28 | 
 29 | ---
 30 | 
 31 | ## Support
 32 | 
 33 | The GOV.UK Design System team maintains the accessible autocomplete as a standalone component. However, we’re only able to put in minimal work to support it.
 34 | 
 35 | [Read about our plans to maintain this component](https://github.com/alphagov/accessible-autocomplete/issues/532).
 36 | 
 37 | [Read more about the types of support we can provide](https://github.com/alphagov/accessible-autocomplete/issues/430).
 38 | 
 39 | ---
 40 | 
 41 | ## Installation / usage
 42 | 
 43 | ### Using npm and a module system
 44 | 
 45 | Install it by running:
 46 | 
 47 | ```bash
 48 | npm install --save accessible-autocomplete
 49 | ```
 50 | 
 51 | The `accessibleAutocomplete` function will render an autocomplete `<input>` and its accompanying suggestions and `aria-live` region. Your page should provide a `<label>` and a container element:
 52 | 
 53 | ```html
 54 | <label for="my-autocomplete">Select your country</label>
 55 | <div id="my-autocomplete-container"></div>
 56 | ```
 57 | 
 58 | Then import it using a module system like Browserify / Webpack / Rollup, and call the `accessibleAutocomplete` function, providing an array of values:
 59 | 
 60 | ```js
 61 | import accessibleAutocomplete from 'accessible-autocomplete'
 62 | 
 63 | const countries = [
 64 |   'France',
 65 |   'Germany',
 66 |   'United Kingdom'
 67 | ]
 68 | 
 69 | accessibleAutocomplete({
 70 |   element: document.querySelector('#my-autocomplete-container'),
 71 |   id: 'my-autocomplete', // To match it to the existing <label>.
 72 |   source: countries
 73 | })
 74 | ```
 75 | 
 76 | If you want to use it as a replacement for a `<select>` element, read the [Progressive enhancement](#progressive-enhancement) section.
 77 | 
 78 | ### As a plain JavaScript module
 79 | 
 80 | You can copy the [dist/accessible-autocomplete.min.js](dist/accessible-autocomplete.min.js) file to your JavaScript folder and import it into the browser:
 81 | 
 82 | ```html
 83 | <script type="text/javascript" src="assets/js/accessible-autocomplete.min.js"></script>
 84 | ```
 85 | 
 86 | ### Styling the autocomplete
 87 | 
 88 | A stylesheet is included with the package at [dist/accessible-autocomplete.min.css](dist/accessible-autocomplete.min.css).
 89 | 
 90 | You can copy it to your stylesheets folder and import it into the browser:
 91 | 
 92 | ```html
 93 | <link rel="stylesheet" href="assets/css/accessible-autocomplete.min.css" />
 94 | ```
 95 | 
 96 | You can also import it using Sass:
 97 | 
 98 | ```css
 99 | @import "accessible-autocomplete";
100 | ```
101 | 
102 | ### Using with Preact
103 | 
104 | If you already use Preact in your application, you can import a bundle that will use that:
105 | 
106 | ```js
107 | import preact from 'preact'
108 | import Autocomplete from 'accessible-autocomplete/preact'
109 | 
110 | preact.render(
111 |   <Autocomplete id='autocomplete' source={suggest} />,
112 |   document.querySelector('#container')
113 | )
114 | ```
115 | 
116 | [Try out the Preact example!](https://alphagov.github.io/accessible-autocomplete/examples/preact/)
117 | 
118 | ### Using with React
119 | 
120 | If you already use React in your application, you can import a bundle that will use that:
121 | 
122 | ```js
123 | import React from 'react'
124 | import ReactDOM from 'react-dom'
125 | import Autocomplete from 'accessible-autocomplete/react'
126 | 
127 | ReactDOM.render(
128 |   <Autocomplete id='autocomplete' source={suggest} />,
129 |   document.querySelector('#container')
130 | )
131 | ```
132 | 
133 | [Try out the React example!](https://alphagov.github.io/accessible-autocomplete/examples/react/)
134 | 
135 | #### React versions
136 | 
137 | React v15.5.4 has been tested to work with the Accessible Autocomplete - although make sure to check
138 | out [documented issues](https://github.com/alphagov/accessible-autocomplete/issues).
139 | 
140 | React v15.6.2 and 16.0 have been incompletely tested with the Accessible Autocomplete: while no undocumented issues were found, we recommend you carry out thorough testing if you wish to use these or later versions of React.
141 | 
142 | ## API documentation
143 | 
144 | ### Required options
145 | 
146 | #### `element`
147 | 
148 | Type: `HTMLElement`
149 | 
150 | The container element in which the autocomplete will be rendered in.
151 | 
152 | #### `id`
153 | 
154 | Type: `string`
155 | 
156 | The `id` to assign to the autocomplete input field, to use with a `<label for=id>`. Not required if using `enhanceSelectElement`.
157 | 
158 | #### `source`
159 | 
160 | Type: `Array | Function`
161 | 
162 | An array of values to search when the user types in the input field, or a function to take what the user types and call a callback function with the results to be displayed.
163 | 
164 | An example of an array of values:
165 | 
166 | ```js
167 | const countries = [
168 |   'France',
169 |   'Germany',
170 |   'United Kingdom'
171 | ]
172 | ```
173 | 
174 | If `source` is a function, the arguments are: `query: string, populateResults: Function`
175 | 
176 | Similar to the [`source` argument for typeahead.js](https://github.com/corejavascript/typeahead.js/blob/47d46b40cb834d8285ac9328c4b436e5eccf7197/doc/jquery_typeahead.md#datasets), a backing data source for suggestions. `query` is what gets typed into the input field, which will callback to `populateResults` synchronously with the array of string results to display in the menu.
177 | 
178 | An example of a simple suggestion engine:
179 | 
180 | ```js
181 | function suggest (query, populateResults) {
182 |   const results = [
183 |     'France',
184 |     'Germany',
185 |     'United Kingdom'
186 |   ]
187 |   const filteredResults = results.filter(result => result.indexOf(query) !== -1)
188 |   populateResults(filteredResults)
189 | }
190 | ```
191 | 
192 | ### Other options
193 | 
194 | #### `menuAttributes` (default: `{}`)
195 | 
196 | Type: `Object`
197 | 
198 | Sets html attributes and their values on the `menu`. Useful for adding `aria-labelledby` and setting to the value of the `id` attribute on your existing label, to provide context to an assistive technology user.
199 | 
200 | #### `autoselect` (default: `false`)
201 | 
202 | Type: `Boolean`
203 | 
204 | Set to true to highlight the first option when the user types in something and receives results. Pressing enter will select it.
205 | 
206 | #### `confirmOnBlur` (default: `true`)
207 | 
208 | Type: `Boolean`
209 | 
210 | The autocomplete will confirm the currently selected option when the user clicks outside of the component. Set to `false` to disable.
211 | 
212 | #### `cssNamespace` (default: `'autocomplete'`)
213 | 
214 | Type: `string`
215 | 
216 | Use this property to override the [BEM](http://getbem.com/) block name that the JavaScript component will use. You will need to rewrite the CSS class names to use your specified block name.
217 | 
218 | #### `defaultValue` (default: `''`)
219 | 
220 | Type: `string`
221 | 
222 | Specify a string to prefill the autocomplete with.
223 | 
224 | #### `displayMenu` (default: `'inline'`)
225 | 
226 | Type: `'inline' | 'overlay'`
227 | 
228 | You can set this property to specify the way the menu should appear, whether inline or as an overlay.
229 | 
230 | #### `minLength` (default: `0`)
231 | 
232 | Type: `number`
233 | 
234 | The minimum number of characters that should be entered before the autocomplete will attempt to suggest options. When the query length is under this, the aria status region will also provide helpful text to the user informing them they should type in more.
235 | 
236 | #### `name` (default: `'input-autocomplete'`)
237 | 
238 | Type: `string`
239 | 
240 | The `name` for the autocomplete input field, to use with a parent `<form>`.
241 | 
242 | #### `onConfirm` (default: `() => {}`)
243 | 
244 | Type: `Function`
245 | 
246 | Arguments: `confirmed: Object`
247 | 
248 | This function will be called when the user confirms an option, with the option they've confirmed.
249 | 
250 | #### `placeholder` (default: `''`) :warning: not recommended :warning:
251 | 
252 | Type: `string`
253 | 
254 | This option will populate the `placeholder` attribute on the input element.
255 | 
256 | We think [placeholders have usability issues](http://adamsilver.io/articles/placeholders-are-problematic/) and that there are [better alternatives to input placeholder text](https://design-system.service.gov.uk/components/text-input/#hint-text), so we do not recommend using this option.
257 | 
258 | #### `required` (default: `false`)
259 | 
260 | Type: `Boolean`
261 | 
262 | The input field will be rendered with a `required` attribute, see [W3C `required` attribute definition](https://www.w3.org/TR/html5/forms.html#the-required-attribute).
263 | 
264 | #### `showAllValues` (default: `false`)
265 | 
266 | Type: `Boolean`
267 | 
268 | If this is set to `true`, all values are shown when the user clicks the input. This is similar
269 | to a default dropdown, so the autocomplete is rendered with a dropdown arrow to convey
270 | this behaviour.
271 | 
272 | #### `showNoOptionsFound` (default: `true`)
273 | 
274 | Type: `Boolean`
275 | 
276 | The autocomplete will display a "No results found" template when there are no results. Set to `false` to disable.
277 | 
278 | #### `templates` (default: `undefined`)
279 | 
280 | Type:
281 | 
282 | ```js
283 | {
284 |   inputValue: Function,
285 |   suggestion: Function
286 | }
287 | ```
288 | 
289 | This object defines templates (functions) that are used for displaying parts of the autocomplete.
290 | 
291 | `inputValue` is a function that receives one argument, the currently selected suggestion. It returns the string value to be inserted into the input.
292 | 
293 | `suggestion` is a function that receives one argument, a suggestion to be displayed. It is used when rendering suggestions, and should return a string, which can contain HTML.
294 | 
295 | :warning: **Caution:** because this function allows you to output arbitrary HTML, you should [make sure it's trusted](https://en.wikipedia.org/wiki/Cross-site_scripting), and accessible.
296 | 
297 | If your template includes child elements with defined foreground or background colours, check they display correctly in forced colors modes. For example, Windows high contrast mode.
298 | 
299 | #### `dropdownArrow` (default: A triangle pointing down)
300 | 
301 | Type: `Function`
302 | 
303 | A function that gets passed an object with the property `className` (`{ className: '' }`) and should return a string of HTML or a (P)React element. :warning: **Caution:** because this function allows you to output arbitrary HTML, you should [make sure it's trusted](https://en.wikipedia.org/wiki/Cross-site_scripting), and accessible.
304 | 
305 | ### Internationalization
306 | 
307 | #### `tNoResults` (default: `() => 'No results found'`)
308 | 
309 | Type: `Function`
310 | 
311 | A function that receives no arguments and should return the text used in the dropdown to indicate that there are no results.
312 | 
313 | #### `tStatusQueryTooShort` (default: `` (minQueryLength) => `Type in ${minQueryLength} or more characters for results` ``)
314 | 
315 | Type: `Function`
316 | 
317 | A function that receives one argument that indicates the minimal amount of characters needed for the dropdown to trigger and should return the text used in the accessibility hint to indicate that the query is too short.
318 | 
319 | #### `tStatusNoResults` (default: `() => 'No search results'`)
320 | 
321 | Type: `Function`
322 | 
323 | A function that receives no arguments and should return the text that is used in the accessibility hint to indicate that there are no results.
324 | 
325 | #### `tStatusSelectedOption` (default: `` (selectedOption, length, index) => `${selectedOption} ${index + 1} of ${length} is highlighted` ``)
326 | 
327 | Type: `Function`
328 | 
329 | A function that receives two arguments, the selectedOption and the amount of available options, and it should return the text used in the accessibility hint to indicate which option is selected.
330 | 
331 | #### `tStatusResults`
332 | 
333 | Default:
334 | 
335 | ```js
336 | (length, contentSelectedOption) => {
337 |   const words = {
338 |     result: (length === 1) ? 'result' : 'results',
339 |     is: (length === 1) ? 'is' : 'are'
340 |   }
341 | 
342 |   return <span>{length} {words.result} {words.is} available. {contentSelectedOption}</span>
343 | }
344 | ```
345 | 
346 | Type: `Function`
347 | 
348 | A function that receives two arguments, the count of available options and the return value of `tStatusSelectedOption`, and should return the text used in the accessibility hint to indicate which options are available and which is selected.
349 | 
350 | #### `tAssistiveHint` (default: `() => 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.'`)
351 | 
352 | Type: `Function`
353 | 
354 | A function that receives no arguments and should return the text to be assigned as the aria description of the html `input` element, via the `aria-describedby` attribute.
355 | This text is intended as an initial instruction to the assistive tech user. The `aria-describedby` attribute is automatically removed once user input is detected, in order to reduce screen reader verbosity.
356 | 
357 | 
358 | ## Progressive enhancement
359 | 
360 | If your autocomplete is meant to select from a small list of options (a few hundred), we strongly suggest that you render a `<select>` menu on the server, and use progressive enhancement.
361 | 
362 | If you have the following HTML:
363 | 
364 | ```html
365 | <select id="location-picker">
366 |   <option value="fr">France</option>
367 |   <option value="de">Germany</option>
368 |   <option value="gb">United Kingdom</option>
369 | </select>
370 | ```
371 | 
372 | You can use the `accessibleAutocomplete.enhanceSelectElement` function to enhance it into an autocomplete:
373 | 
374 | ```js
375 | accessibleAutocomplete.enhanceSelectElement({
376 |   selectElement: document.querySelector('#location-picker')
377 | })
378 | ```
379 | 
380 | This will:
381 | 
382 | - Place an autocomplete input field after the specified `<select>`
383 | - Default the autocomplete `autoselect` to `true`
384 | - Default the autocomplete `defaultValue` to the select's `option[selected]`
385 | - Default the autocomplete `id` to the `<select>`'s `id`
386 | - Default the autocomplete `name` attribute to `''` to prevent it being included in form submissions
387 | - Default the autocomplete `source` to use existing `<option>`s from the `<select>`
388 | - Hide the `<select>` using inline `display: none`
389 | - Set the `<select>`'s `id` to `${id}-select` to decouple from any `<label>`
390 | - Upon confirming a value in the autocomplete, update the original `<select>`
391 | 
392 | This function takes the same options as `accessibleAutocomplete`, with the only difference being that it uses `selectElement` instead of `element`, which needs to be an instance of `HTMLSelectElement`.
393 | 
394 | > **Note**: The `accessibleAutocomplete.enhanceSelectElement` function is fairly light and wraps the public API for `accessibleAutocomplete`. If your use case doesn't fit the above defaults, try [reading the source](src/wrapper.js) and seeing if you can write your own.
395 | 
396 | ### Null options
397 | 
398 | If your `<select>` element has a "null" option - a default option with no value - then you can pass a `defaultValue` option to `enhanceSelectElement` which will replace the label of this option when it is selected.
399 | 
400 | With the following HTML:
401 | 
402 | ```html
403 | <select id="location-picker">
404 |   <option value="">Select a country</option>
405 |   <option value="fr">France</option>
406 |   <option value="de">Germany</option>
407 |   <option value="gb">United Kingdom</option>
408 | </select>
409 | ```
410 | 
411 | Then passing a `defaultValue` option of `''` will then leave the autocomplete blank if the null option is selected.
412 | 
413 | ```js
414 | accessibleAutocomplete.enhanceSelectElement({
415 |   defaultValue: '',
416 |   selectElement: document.querySelector('#location-picker')
417 | })
418 | ```
419 | 
420 | Any null options will also be filtered out of the options used to populate the `source` of the autocomplete element. To preserve options with no value in the autocomplete, then pass a `preserveNullOptions` flag of `true` to `enhanceSelectElement`.
421 | 
422 | ## Analytics and tracking
423 | 
424 | The following events get triggered on the input element during the life cycle of the autocomplete:
425 | 
426 | - `onConfirm` - This function will be called when the user confirms an option, with the option they've chosen.
427 | 
428 | Example usage:
429 | 
430 | ```js
431 | accessibleAutocomplete({
432 |   // additional options
433 |   onConfirm: (val) => {
434 |     track(val)
435 |   }
436 | })
437 | ```
438 | 
439 | ## Why another autocomplete?
440 | 
441 | `accessible-autocomplete` was built after studying many existing solutions and prototyping patches to fix user experience or accessibility issues. It draws heavy inspiration from the following (and a lot of others):
442 | 
443 | - [ljwatson/design-patterns](http://ljwatson.github.io/design-patterns/autocomplete/index.html): great accessible experience
444 | - [corejavascript/corejs-typeahead](https://github.com/corejavascript/typeahead.js): flexible autocomplete/suggestion engine architecture
445 | - [JamieAppleseed/selectToAutocomplete](https://github.com/JamieAppleseed/selectToAutocomplete): ease of use
446 | 
447 | ## Developing locally
448 | 
449 | Check out the [CONTRIBUTING](CONTRIBUTING.md) guide for instructions.
450 | 
451 | If you want to help and want to get more familiar with the codebase, try starting with the ["good for beginners"](https://github.com/alphagov/accessible-autocomplete/issues?q=is%3Aissue+is%3Aopen+label%3A%22good+for+beginners%22) issues.
452 | 
453 | ## License
454 | 
455 | [MIT](LICENSE.txt).
456 | 


--------------------------------------------------------------------------------
/examples/form-single.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |     <title>Accessible Autocomplete form example</title>
  7 |     <style>
  8 |       /* Example page specific styling. */
  9 |       html {
 10 |         color: #111;
 11 |         background: #FFF;
 12 |         font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
 13 |         font-size: 16px;
 14 |         line-height: 1.5;
 15 |       }
 16 | 
 17 |       body {
 18 |         padding-left: 1rem;
 19 |         padding-right: 1rem;
 20 |       }
 21 | 
 22 |       h1, h2, h3, h4, h5, h6 {
 23 |         line-height: normal;
 24 |       }
 25 | 
 26 |       label {
 27 |         display: block;
 28 |         margin-bottom: .5rem;
 29 |       }
 30 | 
 31 |       code {
 32 |         padding-left: .5em;
 33 |         padding-right: .5em;
 34 |         background: #EFEFEF;
 35 |         font-weight: normal;
 36 |         font-family: monospace;
 37 |       }
 38 | 
 39 |       main {
 40 |         max-width: 40em;
 41 |         margin-left: auto;
 42 |         margin-right: auto;
 43 |       }
 44 | 
 45 |       .autocomplete-wrapper {
 46 |         max-width: 20em;
 47 |         margin-bottom: 4rem;
 48 |       }
 49 | 
 50 |       .submitted--hidden {
 51 |         display: none;
 52 |       }
 53 |     </style>
 54 |     <link rel="stylesheet" href="../dist/accessible-autocomplete.min.css">
 55 |   </head>
 56 |   <body>
 57 |     <main>
 58 |       <h1>Accessible Autocomplete form example</h1>
 59 | 
 60 |       <div class="submitted submitted--hidden">
 61 |         <p>You submitted:</p>
 62 |         <ul>
 63 |           <li><code>"last-location": <span class="submitted__last-location"></span></code></li>
 64 |         </ul>
 65 |         <hr />
 66 |       </div>
 67 | 
 68 |       <form action="form-single.html" method="get">
 69 |         <label for="last-location">What was the last location you visited?</label>
 70 |         <div class="autocomplete-wrapper">
 71 |           <select name="last-location" id="last-location">
 72 |             <option value="">Select a country</option>
 73 |             <option value="territory:AE-AZ">Abu Dhabi</option>
 74 |             <option value="country:AF">Afghanistan</option>
 75 |             <option value="territory:AE-AJ">Ajman</option>
 76 |             <option value="territory:XQZ">Akrotiri</option>
 77 |             <option value="country:AL">Albania</option>
 78 |             <option value="country:DZ">Algeria</option>
 79 |             <option value="territory:AS">American Samoa</option>
 80 |             <option value="country:AD">Andorra</option>
 81 |             <option value="country:AO">Angola</option>
 82 |             <option value="territory:AI">Anguilla</option>
 83 |             <option value="territory:AQ">Antarctica</option>
 84 |             <option value="country:AG">Antigua and Barbuda</option>
 85 |             <option value="country:AR">Argentina</option>
 86 |             <option value="country:AM">Armenia</option>
 87 |             <option value="territory:AW">Aruba</option>
 88 |             <option value="territory:SH-AC">Ascension</option>
 89 |             <option value="country:AU">Australia</option>
 90 |             <option value="country:AT">Austria</option>
 91 |             <option value="country:AZ">Azerbaijan</option>
 92 |             <option value="country:BH">Bahrain</option>
 93 |             <option value="territory:UM-81">Baker Island</option>
 94 |             <option value="country:BD">Bangladesh</option>
 95 |             <option value="country:BB">Barbados</option>
 96 |             <option value="country:BY">Belarus</option>
 97 |             <option value="country:BE">Belgium</option>
 98 |             <option value="country:BZ">Belize</option>
 99 |             <option value="country:BJ">Benin</option>
100 |             <option value="territory:BM">Bermuda</option>
101 |             <option value="country:BT">Bhutan</option>
102 |             <option value="country:BO">Bolivia</option>
103 |             <option value="territory:BQ-BO">Bonaire</option>
104 |             <option value="country:BA">Bosnia and Herzegovina</option>
105 |             <option value="country:BW">Botswana</option>
106 |             <option value="territory:BV">Bouvet Island</option>
107 |             <option value="country:BR">Brazil</option>
108 |             <option value="territory:BAT">British Antarctic Territory</option>
109 |             <option value="territory:IO">British Indian Ocean Territory</option>
110 |             <option value="territory:VG">British Virgin Islands</option>
111 |             <option value="country:BN">Brunei</option>
112 |             <option value="country:BG">Bulgaria</option>
113 |             <option value="country:BF">Burkina Faso</option>
114 |             <option value="country:MM">Burma</option>
115 |             <option value="country:BI">Burundi</option>
116 |             <option value="country:KH">Cambodia</option>
117 |             <option value="country:CM">Cameroon</option>
118 |             <option value="country:CA">Canada</option>
119 |             <option value="country:CV">Cape Verde</option>
120 |             <option value="territory:KY">Cayman Islands</option>
121 |             <option value="country:CF">Central African Republic</option>
122 |             <option value="territory:ES-CE">Ceuta</option>
123 |             <option value="country:TD">Chad</option>
124 |             <option value="country:CL">Chile</option>
125 |             <option value="country:CN">China</option>
126 |             <option value="territory:CX">Christmas Island</option>
127 |             <option value="territory:CC">Cocos (Keeling) Islands</option>
128 |             <option value="country:CO">Colombia</option>
129 |             <option value="country:KM">Comoros</option>
130 |             <option value="country:CG">Congo</option>
131 |             <option value="country:CD">Congo (Democratic Republic)</option>
132 |             <option value="territory:CK">Cook Islands</option>
133 |             <option value="country:CR">Costa Rica</option>
134 |             <option value="country:HR">Croatia</option>
135 |             <option value="country:CU">Cuba</option>
136 |             <option value="territory:CW">Curaçao</option>
137 |             <option value="country:CY">Cyprus</option>
138 |             <option value="country:CZ">Czechia</option>
139 |             <option value="country:CS">Czechoslovakia</option>
140 |             <option value="country:DK">Denmark</option>
141 |             <option value="territory:XXD">Dhekelia</option>
142 |             <option value="country:DJ">Djibouti</option>
143 |             <option value="country:DM">Dominica</option>
144 |             <option value="country:DO">Dominican Republic</option>
145 |             <option value="territory:AE-DU">Dubai</option>
146 |             <option value="country:DD">East Germany</option>
147 |             <option value="country:TL">East Timor</option>
148 |             <option value="country:EC">Ecuador</option>
149 |             <option value="country:EG">Egypt</option>
150 |             <option value="country:SV">El Salvador</option>
151 |             <option value="country:GQ">Equatorial Guinea</option>
152 |             <option value="country:ER">Eritrea</option>
153 |             <option value="country:EE">Estonia</option>
154 |             <option value="country:ET">Ethiopia</option>
155 |             <option value="territory:FK">Falkland Islands</option>
156 |             <option value="territory:FO">Faroe Islands</option>
157 |             <option value="country:FJ">Fiji</option>
158 |             <option value="country:FI">Finland</option>
159 |             <option value="country:FR">France</option>
160 |             <option value="territory:GF">French Guiana</option>
161 |             <option value="territory:PF">French Polynesia</option>
162 |             <option value="territory:TF">French Southern Territories</option>
163 |             <option value="territory:AE-FU">Fujairah</option>
164 |             <option value="country:GA">Gabon</option>
165 |             <option value="country:GE">Georgia</option>
166 |             <option value="country:DE">Germany</option>
167 |             <option value="country:GH">Ghana</option>
168 |             <option value="territory:GI">Gibraltar</option>
169 |             <option value="country:GR">Greece</option>
170 |             <option value="territory:GL">Greenland</option>
171 |             <option value="country:GD">Grenada</option>
172 |             <option value="territory:GP">Guadeloupe</option>
173 |             <option value="territory:GU">Guam</option>
174 |             <option value="country:GT">Guatemala</option>
175 |             <option value="territory:GG">Guernsey</option>
176 |             <option value="country:GN">Guinea</option>
177 |             <option value="country:GW">Guinea-Bissau</option>
178 |             <option value="country:GY">Guyana</option>
179 |             <option value="country:HT">Haiti</option>
180 |             <option value="territory:HM">Heard Island and McDonald Islands</option>
181 |             <option value="country:HN">Honduras</option>
182 |             <option value="territory:HK">Hong Kong</option>
183 |             <option value="territory:UM-84">Howland Island</option>
184 |             <option value="country:HU">Hungary</option>
185 |             <option value="country:IS">Iceland</option>
186 |             <option value="country:IN">India</option>
187 |             <option value="country:ID">Indonesia</option>
188 |             <option value="country:IR">Iran</option>
189 |             <option value="country:IQ">Iraq</option>
190 |             <option value="country:IE">Ireland</option>
191 |             <option value="territory:IM">Isle of Man</option>
192 |             <option value="country:IL">Israel</option>
193 |             <option value="country:IT">Italy</option>
194 |             <option value="country:CI">Ivory Coast</option>
195 |             <option value="country:JM">Jamaica</option>
196 |             <option value="country:JP">Japan</option>
197 |             <option value="territory:UM-86">Jarvis Island</option>
198 |             <option value="territory:JE">Jersey</option>
199 |             <option value="territory:UM-67">Johnston Atoll</option>
200 |             <option value="country:JO">Jordan</option>
201 |             <option value="country:KZ">Kazakhstan</option>
202 |             <option value="country:KE">Kenya</option>
203 |             <option value="territory:UM-89">Kingman Reef</option>
204 |             <option value="country:KI">Kiribati</option>
205 |             <option value="country:XK">Kosovo</option>
206 |             <option value="country:KW">Kuwait</option>
207 |             <option value="country:KG">Kyrgyzstan</option>
208 |             <option value="country:LA">Laos</option>
209 |             <option value="country:LV">Latvia</option>
210 |             <option value="country:LB">Lebanon</option>
211 |             <option value="country:LS">Lesotho</option>
212 |             <option value="country:LR">Liberia</option>
213 |             <option value="country:LY">Libya</option>
214 |             <option value="country:LI">Liechtenstein</option>
215 |             <option value="country:LT">Lithuania</option>
216 |             <option value="country:LU">Luxembourg</option>
217 |             <option value="territory:MO">Macao</option>
218 |             <option value="country:MK">Macedonia</option>
219 |             <option value="country:MG">Madagascar</option>
220 |             <option value="country:MW">Malawi</option>
221 |             <option value="country:MY">Malaysia</option>
222 |             <option value="country:MV">Maldives</option>
223 |             <option value="country:ML">Mali</option>
224 |             <option value="country:MT">Malta</option>
225 |             <option value="country:MH">Marshall Islands</option>
226 |             <option value="territory:MQ">Martinique</option>
227 |             <option value="country:MR">Mauritania</option>
228 |             <option value="country:MU">Mauritius</option>
229 |             <option value="territory:YT">Mayotte</option>
230 |             <option value="territory:ES-ML">Melilla</option>
231 |             <option value="country:MX">Mexico</option>
232 |             <option value="country:FM">Micronesia</option>
233 |             <option value="territory:UM-71">Midway Islands</option>
234 |             <option value="country:MD">Moldova</option>
235 |             <option value="country:MC">Monaco</option>
236 |             <option value="country:MN">Mongolia</option>
237 |             <option value="country:ME">Montenegro</option>
238 |             <option value="territory:MS">Montserrat</option>
239 |             <option value="country:MA">Morocco</option>
240 |             <option value="country:MZ">Mozambique</option>
241 |             <option value="country:NA">Namibia</option>
242 |             <option value="country:NR">Nauru</option>
243 |             <option value="territory:UM-76">Navassa Island</option>
244 |             <option value="country:NP">Nepal</option>
245 |             <option value="country:NL">Netherlands</option>
246 |             <option value="territory:NC">New Caledonia</option>
247 |             <option value="country:NZ">New Zealand</option>
248 |             <option value="country:NI">Nicaragua</option>
249 |             <option value="country:NE">Niger</option>
250 |             <option value="country:NG">Nigeria</option>
251 |             <option value="territory:NU">Niue</option>
252 |             <option value="territory:NF">Norfolk Island</option>
253 |             <option value="country:KP">North Korea</option>
254 |             <option value="territory:MP">Northern Mariana Islands</option>
255 |             <option value="country:NO">Norway</option>
256 |             <option value="territory:PS">Occupied Palestinian Territories</option>
257 |             <option value="country:OM">Oman</option>
258 |             <option value="country:PK">Pakistan</option>
259 |             <option value="country:PW">Palau</option>
260 |             <option value="territory:UM-95">Palmyra Atoll</option>
261 |             <option value="country:PA">Panama</option>
262 |             <option value="country:PG">Papua New Guinea</option>
263 |             <option value="country:PY">Paraguay</option>
264 |             <option value="country:PE">Peru</option>
265 |             <option value="country:PH">Philippines</option>
266 |             <option value="territory:PN">Pitcairn, Henderson, Ducie and Oeno Islands</option>
267 |             <option value="country:PL">Poland</option>
268 |             <option value="country:PT">Portugal</option>
269 |             <option value="territory:PR">Puerto Rico</option>
270 |             <option value="country:QA">Qatar</option>
271 |             <option value="territory:AE-RK">Ras al-Khaimah</option>
272 |             <option value="country:RO">Romania</option>
273 |             <option value="country:RU">Russia</option>
274 |             <option value="country:RW">Rwanda</option>
275 |             <option value="territory:RE">Réunion</option>
276 |             <option value="territory:BQ-SA">Saba</option>
277 |             <option value="territory:BL">Saint Barthélemy</option>
278 |             <option value="territory:SH-HL">Saint Helena</option>
279 |             <option value="territory:PM">Saint Pierre and Miquelon</option>
280 |             <option value="territory:MF">Saint-Martin (French part)</option>
281 |             <option value="country:WS">Samoa</option>
282 |             <option value="country:SM">San Marino</option>
283 |             <option value="country:ST">Sao Tome and Principe</option>
284 |             <option value="country:SA">Saudi Arabia</option>
285 |             <option value="country:SN">Senegal</option>
286 |             <option value="country:RS">Serbia</option>
287 |             <option value="country:SC">Seychelles</option>
288 |             <option value="territory:AE-SH">Sharjah</option>
289 |             <option value="country:SL">Sierra Leone</option>
290 |             <option value="country:SG">Singapore</option>
291 |             <option value="territory:BQ-SE">Sint Eustatius</option>
292 |             <option value="territory:SX">Sint Maarten (Dutch part)</option>
293 |             <option value="country:SK">Slovakia</option>
294 |             <option value="country:SI">Slovenia</option>
295 |             <option value="country:SB">Solomon Islands</option>
296 |             <option value="country:SO">Somalia</option>
297 |             <option value="country:ZA">South Africa</option>
298 |             <option value="territory:GS">South Georgia and South Sandwich Islands</option>
299 |             <option value="country:KR">South Korea</option>
300 |             <option value="country:SS">South Sudan</option>
301 |             <option value="country:ES">Spain</option>
302 |             <option value="country:LK">Sri Lanka</option>
303 |             <option value="country:KN">St Kitts and Nevis</option>
304 |             <option value="country:LC">St Lucia</option>
305 |             <option value="country:VC">St Vincent</option>
306 |             <option value="country:SD">Sudan</option>
307 |             <option value="country:SR">Suriname</option>
308 |             <option value="territory:SJ">Svalbard and Jan Mayen</option>
309 |             <option value="country:SZ">Swaziland</option>
310 |             <option value="country:SE">Sweden</option>
311 |             <option value="country:CH">Switzerland</option>
312 |             <option value="country:SY">Syria</option>
313 |             <option value="territory:TW">Taiwan</option>
314 |             <option value="country:TJ">Tajikistan</option>
315 |             <option value="country:TZ">Tanzania</option>
316 |             <option value="country:TH">Thailand</option>
317 |             <option value="country:BS">The Bahamas</option>
318 |             <option value="country:GM">The Gambia</option>
319 |             <option value="country:TG">Togo</option>
320 |             <option value="territory:TK">Tokelau</option>
321 |             <option value="country:TO">Tonga</option>
322 |             <option value="country:TT">Trinidad and Tobago</option>
323 |             <option value="territory:SH-TA">Tristan da Cunha</option>
324 |             <option value="country:TN">Tunisia</option>
325 |             <option value="country:TR">Turkey</option>
326 |             <option value="country:TM">Turkmenistan</option>
327 |             <option value="territory:TC">Turks and Caicos Islands</option>
328 |             <option value="country:TV">Tuvalu</option>
329 |             <option value="country:SU">USSR</option>
330 |             <option value="country:UG">Uganda</option>
331 |             <option value="country:UA">Ukraine</option>
332 |             <option value="territory:AE-UQ">Umm al-Quwain</option>
333 |             <option value="country:AE">United Arab Emirates</option>
334 |             <option value="country:GB">United Kingdom</option>
335 |             <option value="country:US">United States</option>
336 |             <option value="territory:VI">United States Virgin Islands</option>
337 |             <option value="country:UY">Uruguay</option>
338 |             <option value="country:UZ">Uzbekistan</option>
339 |             <option value="country:VU">Vanuatu</option>
340 |             <option value="country:VA">Vatican City</option>
341 |             <option value="country:VE">Venezuela</option>
342 |             <option value="country:VN">Vietnam</option>
343 |             <option value="territory:UM-79">Wake Island</option>
344 |             <option value="territory:WF">Wallis and Futuna</option>
345 |             <option value="territory:EH">Western Sahara</option>
346 |             <option value="country:YE">Yemen</option>
347 |             <option value="country:YU">Yugoslavia</option>
348 |             <option value="country:ZM">Zambia</option>
349 |             <option value="country:ZW">Zimbabwe</option>
350 |             <option value="territory:AX">Åland Islands</option>
351 |           </select>
352 |         </div>
353 | 
354 |         <button type="submit">Submit your answer</button>
355 |       </form>
356 |     </main>
357 | 
358 |     <script type="text/javascript" src="../dist/accessible-autocomplete.min.js"></script>
359 |     <script type="text/javascript">
360 |       var selectEl = document.querySelector('#last-location')
361 |       accessibleAutocomplete.enhanceSelectElement({
362 |         autoselect: true,
363 |         confirmOnBlur: true,
364 |         defaultValue: "",
365 |         minLength: 2,
366 |         selectElement: selectEl
367 |       })
368 | 
369 |       var queryStringParameters = window.location.search
370 |       var previouslySubmitted = queryStringParameters.length > 0
371 |       if (previouslySubmitted) {
372 |         var submittedEl = document.querySelector('.submitted')
373 |         submittedEl.classList.remove('submitted--hidden')
374 |         var params = new URLSearchParams(document.location.search.split('?')[1])
375 |         document.querySelector('.submitted__last-location').innerHTML = params.get('last-location')
376 |       }
377 |     </script>
378 |   </body>
379 | </html>
380 | 


--------------------------------------------------------------------------------
/examples/index.html:
--------------------------------------------------------------------------------
  1 | <!DOCTYPE html>
  2 | <html lang="en">
  3 |   <head>
  4 |     <meta charset="utf-8">
  5 |     <meta name="viewport" content="width=device-width, initial-scale=1">
  6 |     <title>Accessible Autocomplete examples</title>
  7 |     <style>
  8 |       /* Example page specific styling. */
  9 |       html {
 10 |         color: #111;
 11 |         background: #FFF;
 12 |         font-family: -apple-system, BlinkMacSystemFont, 'avenir next', avenir, 'helvetica neue', helvetica, ubuntu, roboto, noto, 'segoe ui', arial, sans-serif;
 13 |         font-size: 16px;
 14 |         line-height: 1.5;
 15 |       }
 16 | 
 17 |       body {
 18 |         padding-left: 1rem;
 19 |         padding-right: 1rem;
 20 |       }
 21 | 
 22 |       h1, h2, h3, h4, h5, h6 {
 23 |         line-height: normal;
 24 |       }
 25 | 
 26 |       label {
 27 |         display: block;
 28 |         margin-bottom: .5rem;
 29 |       }
 30 | 
 31 |       code {
 32 |         padding-left: .5em;
 33 |         padding-right: .5em;
 34 |         background: #EFEFEF;
 35 |         font-weight: normal;
 36 |         font-family: monospace;
 37 |       }
 38 | 
 39 |       main {
 40 |         max-width: 40em;
 41 |         margin-left: auto;
 42 |         margin-right: auto;
 43 |       }
 44 | 
 45 |       .autocomplete-wrapper {
 46 |         max-width: 20em;
 47 |         margin-bottom: 4rem;
 48 |       }
 49 |     </style>
 50 |     <link rel="stylesheet" href="../dist/accessible-autocomplete.min.css">
 51 |   </head>
 52 |   <body>
 53 |     <main>
 54 |       <h1>Accessible Autocomplete examples</h1>
 55 | 
 56 |       <p><a href="form.html">Example in a real HTML form that you can submit</a></p>
 57 | 
 58 |       <h2>Options</h2>
 59 | 
 60 |       <h3><code>{ element, id, source }</code></h3>
 61 |       <p>This illustrates usage with only the required arguments.</p>
 62 |       <label for="autocomplete-default">Country</label>
 63 |       <div id="tt-default" class="autocomplete-wrapper"></div>
 64 | 
 65 |       <h3><code>{ minLength: 2 }</code></h3>
 66 |       <p>
 67 |         This option will prevent displaying suggestions if less than 2 characters are
 68 |         typed in.
 69 |       </p>
 70 |       <label for="autocomplete-minLength">Country</label>
 71 |       <div id="tt-minLength" class="autocomplete-wrapper"></div>
 72 | 
 73 |       <h3><code>{ displayMenu: 'overlay' }</code></h3>
 74 |       <p>This option will display the menu as an absolutely positioned overlay.</p>
 75 |       <label for="autocomplete-overlay">Country</label>
 76 |       <div id="tt-overlay" class="autocomplete-wrapper"></div>
 77 | 
 78 |       <h3><code>{ autoselect: true }</code></h3>
 79 |       <p>This option will automatically select the first suggestion.</p>
 80 |       <label for="autocomplete-autoselect">Country</label>
 81 |       <div id="tt-autoselect" class="autocomplete-wrapper"></div>
 82 | 
 83 |       <h3><code>{ defaultValue: 'Germany' }</code></h3>
 84 |       <p>This option will prefill the input with a value.</p>
 85 |       <label for="autocomplete-defaultValue">Country</label>
 86 |       <div id="tt-defaultValue" class="autocomplete-wrapper"></div>
 87 | 
 88 |       <h3><code>{ confirmOnBlur: false }</code></h3>
 89 |       <p>
 90 |         This option will toggle automatically confirming a selection on blur. In the other
 91 |         examples, if you select an option using the arrow keys and then click out, it will
 92 |         confirm the selection.
 93 |       </p>
 94 |       <label for="autocomplete-confirmOnBlur">Country</label>
 95 |       <div id="tt-confirmOnBlur" class="autocomplete-wrapper"></div>
 96 | 
 97 |       <h3><code>{ placeholder: 'Search for a country' }</code></h3>
 98 |       <p>This option will populate the placeholder attribute on the input element.</p>
 99 |       <label for="autocomplete-placeholder">Country</label>
100 |       <div id="tt-placeholder" class="autocomplete-wrapper"></div>
101 | 
102 |       <h3><code>{ showNoOptionsFound: false }</code></h3>
103 |       <p>This option will toggle displaying the "No results found" message.</p>
104 |       <label for="autocomplete-showNoOptionsFound">Country</label>
105 |       <div id="tt-showNoOptionsFound" class="autocomplete-wrapper"></div>
106 | 
107 |       <h3><code>{ showAllValues: true }</code></h3>
108 |       <p>
109 |         This option will toggle showing all values when the input is clicked, like a
110 |         default dropdown.
111 |       </p>
112 |       <label for="autocomplete-showAllValues">Country</label>
113 |       <div id="tt-showAllValues" class="autocomplete-wrapper"></div>
114 | 
115 |       <h3><code>{ showAllValues: true, dropdownArrow: () => '' }</code></h3>
116 |       <p>
117 |         When <code>showAllValues</code> is <code>true</code> a dropdown arrow
118 |         will be displayed. It can be customized using a function that receives a
119 |         `{ className: string }` object and returns a string or (P)React component.
120 |       </p>
121 |       <label for="autocomplete-customDropdownArrow">Country</label>
122 |       <div id="tt-customDropdownArrow" class="autocomplete-wrapper"></div>
123 | 
124 |       <h2>Advanced features</h2>
125 | 
126 |       <h3>Progressive enhancement</h3>
127 |       <p>
128 |         This example demonstrates how to turn a server-rendered <code>&lt;select&gt;</code> element
129 |         into a autocomplete. Turn off JavaScript to see the <code>&lt;select&gt;</code> element.
130 |       </p>
131 |       <p>Uses <code>accessibleAutocomplete.enhanceSelectElement</code>.</p>
132 |       <label for="autocomplete-progressiveEnhancement">Country</label>
133 |       <div class="autocomplete-wrapper">
134 |         <select id="autocomplete-progressiveEnhancement">
135 |           <option value="fr">France</option>
136 |           <option value="de">Germany</option>
137 |           <option value="gb" selected>United Kingdom</option>
138 |         </select>
139 |       </div>
140 | 
141 |       <h3>Custom results</h3>
142 |       <p>
143 |         <p>This example demonstrates how to allow users to search for a country by either:</p>
144 |         <ul>
145 |             <li>its English name</li>
146 |             <li>the name by which a group of people refer to their country</li>
147 |         </ul>
148 |         <p>The suggestions are user-defined objects and they are displayed using a user-defined template. Confirming a suggestion will populate the input with the English country name.</p>
149 |       </p>
150 |       <p>Uses the <code>{ templates: { inputValue, suggestion } }</code> options.</p>
151 |       <label for="autocomplete-customTemplates">Country</label>
152 |       <div id="tt-customTemplates" class="autocomplete-wrapper"></div>
153 | 
154 |       <h3>Translating texts</h3>
155 |       <p>
156 |         This example demonstrates how to translate the texts emitted by the component.
157 |       </p>
158 |       <p>Uses the <code>{ tStatusQueryTooShort: (minQueryLength) => '',
159 |         tStatusNoResults: () => '',
160 |         tStatusSelectedOption: (selectedOption, length) => '',
161 |         tStatusResults: () => '' }</code> options.</p>
162 |       <label for="autocomplete-i18n">Country</label>
163 |       <div id="tt-i18n" class="autocomplete-wrapper"></div>
164 | 
165 |       <h3>Multiselect</h3>
166 |       <p>
167 |         This example demonstrates how to use the autocomplete on a multiselect <code>&lt;select multiple&gt;</code> element
168 |         Turn off JavaScript to see the <code>&lt;select multiple&gt;</code> element.
169 |       </p>
170 |       <p>Uses <code>accessibleAutocomplete.enhanceSelectElement</code>.</p>
171 |       <label for="multiselect-autocomplete-progressiveEnhancement">Country</label>
172 |       <div class="autocomplete-wrapper">
173 |         <select multiple id="multiselect-autocomplete-progressiveEnhancement">
174 |           <option value="fr">France</option>
175 |           <option value="de" selected>Germany</option>
176 |           <option value="gb" selected>United Kingdom</option>
177 |         </select>
178 |       </div>
179 | 
180 |       <h3>Custom attributes</h3>
181 |       <p>
182 |         This example demonstrates how to add custom attributes to the component.
183 |       </p>
184 |       <p>Uses the <code>{ customAttributes: {
185 |         "data-hello": "hey",
186 |         "data-goodbye": "bye"
187 |       } }</code> options.</p>
188 |       <label for="autocomplete-custom-attributes">Country</label>
189 |       <div id="custom-attributes" class="autocomplete-wrapper"></div>
190 |     </main>
191 | 
192 |     <script type="text/javascript" src="../dist/accessible-autocomplete.min.js"></script>
193 |     <script type="text/javascript">
194 |       var countries = [
195 |         'Afghanistan',
196 |         'Akrotiri',
197 |         'Albania',
198 |         'Algeria',
199 |         'American Samoa',
200 |         'Andorra',
201 |         'Angola',
202 |         'Anguilla',
203 |         'Antarctica',
204 |         'Antigua and Barbuda',
205 |         'Argentina',
206 |         'Armenia',
207 |         'Aruba',
208 |         'Ashmore and Cartier Islands',
209 |         'Australia',
210 |         'Austria',
211 |         'Azerbaijan',
212 |         'Bahamas, The',
213 |         'Bahrain',
214 |         'Bangladesh',
215 |         'Barbados',
216 |         'Bassas da India',
217 |         'Belarus',
218 |         'Belgium',
219 |         'Belize',
220 |         'Benin',
221 |         'Bermuda',
222 |         'Bhutan',
223 |         'Bolivia',
224 |         'Bosnia and Herzegovina',
225 |         'Botswana',
226 |         'Bouvet Island',
227 |         'Brazil',
228 |         'British Indian Ocean Territory',
229 |         'British Virgin Islands',
230 |         'Brunei',
231 |         'Bulgaria',
232 |         'Burkina Faso',
233 |         'Burma',
234 |         'Burundi',
235 |         'Cambodia',
236 |         'Cameroon',
237 |         'Canada',
238 |         'Cape Verde',
239 |         'Cayman Islands',
240 |         'Central African Republic',
241 |         'Chad',
242 |         'Chile',
243 |         'China',
244 |         'Christmas Island',
245 |         'Clipperton Island',
246 |         'Cocos (Keeling) Islands',
247 |         'Colombia',
248 |         'Comoros',
249 |         'Congo',
250 |         'Cook Islands',
251 |         'Coral Sea Islands',
252 |         'Costa Rica',
253 |         'Cote d\'Ivoire',
254 |         'Croatia',
255 |         'Cuba',
256 |         'Cyprus',
257 |         'Czech Republic',
258 |         'Denmark',
259 |         'Dhekelia',
260 |         'Djibouti',
261 |         'Dominica',
262 |         'Dominican Republic',
263 |         'Ecuador',
264 |         'Egypt',
265 |         'El Salvador',
266 |         'Equatorial Guinea',
267 |         'Eritrea',
268 |         'Estonia',
269 |         'Ethiopia',
270 |         'Europa Island',
271 |         'Falkland Islands',
272 |         'Faroe Islands',
273 |         'Fiji',
274 |         'Finland',
275 |         'France',
276 |         'French Guiana',
277 |         'French Polynesia',
278 |         'French Southern and Antarctic Lands',
279 |         'Gabon',
280 |         'Gambia,',
281 |         'Gaza Strip',
282 |         'Georgia',
283 |         'Germany',
284 |         'Ghana',
285 |         'Gibraltar',
286 |         'Glorioso Islands',
287 |         'Greece',
288 |         'Greenland',
289 |         'Grenada',
290 |         'Guadeloupe',
291 |         'Guam',
292 |         'Guatemala',
293 |         'Guernsey',
294 |         'Guinea',
295 |         'Guinea-Bissau',
296 |         'Guyana',
297 |         'Haiti',
298 |         'Heard Island and McDonald Islands',
299 |         'Holy See (Vatican City)',
300 |         'Honduras',
301 |         'Hong Kong',
302 |         'Hungary',
303 |         'Iceland',
304 |         'India',
305 |         'Indonesia',
306 |         'Iran',
307 |         'Iraq',
308 |         'Ireland',
309 |         'Isle of Man',
310 |         'Israel',
311 |         'Italy',
312 |         'Jamaica',
313 |         'Jan Mayen',
314 |         'Japan',
315 |         'Jersey',
316 |         'Jordan',
317 |         'Juan de Nova Island',
318 |         'Kazakhstan',
319 |         'Kenya',
320 |         'Kiribati',
321 |         'Korea, North',
322 |         'Korea, South',
323 |         'Kuwait',
324 |         'Kyrgyzstan',
325 |         'Laos',
326 |         'Latvia',
327 |         'Lebanon',
328 |         'Lesotho',
329 |         'Liberia',
330 |         'Libya',
331 |         'Liechtenstein',
332 |         'Lithuania',
333 |         'Luxembourg',
334 |         'Macau',
335 |         'Macedonia',
336 |         'Madagascar',
337 |         'Malawi',
338 |         'Malaysia',
339 |         'Maldives',
340 |         'Mali',
341 |         'Malta',
342 |         'Marshall Islands',
343 |         'Martinique',
344 |         'Mauritania',
345 |         'Mauritius',
346 |         'Mayotte',
347 |         'Mexico',
348 |         'Micronesia, Federated States of',
349 |         'Moldova',
350 |         'Monaco',
351 |         'Mongolia',
352 |         'Montserrat',
353 |         'Morocco',
354 |         'Mozambique',
355 |         'Namibia',
356 |         'Nauru',
357 |         'Navassa Island',
358 |         'Nepal',
359 |         'Netherlands',
360 |         'Netherlands Antilles',
361 |         'New Caledonia',
362 |         'New Zealand',
363 |         'Nicaragua',
364 |         'Niger',
365 |         'Nigeria',
366 |         'Niue',
367 |         'Norfolk Island',
368 |         'Northern Mariana Islands',
369 |         'Norway',
370 |         'Oman',
371 |         'Pakistan',
372 |         'Palau',
373 |         'Panama',
374 |         'Papua New Guinea',
375 |         'Paracel Islands',
376 |         'Paraguay',
377 |         'Peru',
378 |         'Philippines',
379 |         'Pitcairn Islands',
380 |         'Poland',
381 |         'Portugal',
382 |         'Puerto Rico',
383 |         'Qatar',
384 |         'Reunion',
385 |         'Romania',
386 |         'Russia',
387 |         'Rwanda',
388 |         'Saint Helena',
389 |         'Saint Kitts and Nevis',
390 |         'Saint Lucia',
391 |         'Saint Pierre and Miquelon',
392 |         'Saint Vincent and the Grenadines',
393 |         'Samoa',
394 |         'San Marino',
395 |         'Sao Tome and Principe',
396 |         'Saudi Arabia',
397 |         'Senegal',
398 |         'Serbia and Montenegro',
399 |         'Seychelles',
400 |         'Sierra Leone',
401 |         'Singapore',
402 |         'Slovakia',
403 |         'Slovenia',
404 |         'Solomon Islands',
405 |         'Somalia',
406 |         'South Africa',
407 |         'South Georgia and the South Sandwich Islands',
408 |         'Spain',
409 |         'Spratly Islands',
410 |         'Sri Lanka',
411 |         'Sudan',
412 |         'Suriname',
413 |         'Svalbard',
414 |         'Swaziland',
415 |         'Sweden',
416 |         'Switzerland',
417 |         'Syria',
418 |         'Taiwan',
419 |         'Tajikistan',
420 |         'Tanzania',
421 |         'Thailand',
422 |         'Timor-Leste',
423 |         'Togo',
424 |         'Tokelau',
425 |         'Tonga',
426 |         'Trinidad and Tobago',
427 |         'Tromelin Island',
428 |         'Tunisia',
429 |         'Turkey',
430 |         'Turkmenistan',
431 |         'Turks and Caicos Islands',
432 |         'Tuvalu',
433 |         'Uganda',
434 |         'Ukraine',
435 |         'United Arab Emirates',
436 |         'United Kingdom',
437 |         'United States',
438 |         'Uruguay',
439 |         'Uzbekistan',
440 |         'Vanuatu',
441 |         'Venezuela',
442 |         'Vietnam',
443 |         'Virgin Islands',
444 |         'Wake Island',
445 |         'Wallis and Futuna',
446 |         'West Bank',
447 |         'Western Sahara',
448 |         'Yemen',
449 |         'Zambia',
450 |         'Zimbabwe'
451 |       ]
452 |     </script>
453 | 
454 |     <script type="text/javascript">
455 |       var element = document.querySelector('#tt-default')
456 |       var id = 'autocomplete-default'
457 |       accessibleAutocomplete({
458 |         element: element,
459 |         id: id,
460 |         source: countries,
461 |         menuAttributes: {
462 |           "aria-labelledby": id
463 |         }
464 |       })
465 |     </script>
466 | 
467 |     <script type="text/javascript">
468 |       element = document.querySelector('#tt-minLength')
469 |       id = 'autocomplete-minLength'
470 |       accessibleAutocomplete({
471 |         element: element,
472 |         id: id,
473 |         minLength: 2,
474 |         source: countries,
475 |         menuAttributes: {
476 |           "aria-labelledby": id
477 |         }
478 |       })
479 |     </script>
480 | 
481 |     <script type="text/javascript">
482 |       element = document.querySelector('#tt-autoselect')
483 |       id = 'autocomplete-autoselect'
484 |       accessibleAutocomplete({
485 |         autoselect: true,
486 |         element: element,
487 |         id: id,
488 |         source: countries,
489 |         menuAttributes: {
490 |           "aria-labelledby": id
491 |         }
492 |       })
493 |     </script>
494 | 
495 |     <script type="text/javascript">
496 |       element = document.querySelector('#tt-overlay')
497 |       id = 'autocomplete-overlay'
498 |       accessibleAutocomplete({
499 |         displayMenu: 'overlay',
500 |         element: element,
501 |         id: id,
502 |         source: countries,
503 |         menuAttributes: {
504 |           "aria-labelledby": id
505 |         }
506 |       })
507 |     </script>
508 | 
509 |     <script type="text/javascript">
510 |       element = document.querySelector('#tt-defaultValue')
511 |       id = 'autocomplete-defaultValue'
512 |       accessibleAutocomplete({
513 |         defaultValue: 'Germany',
514 |         element: element,
515 |         id: id,
516 |         source: countries,
517 |         menuAttributes: {
518 |           "aria-labelledby": id
519 |         }
520 |       })
521 |     </script>
522 | 
523 |     <script type="text/javascript">
524 |       element = document.querySelector('#autocomplete-progressiveEnhancement')
525 |       accessibleAutocomplete.enhanceSelectElement({
526 |         selectElement: element
527 |       })
528 |     </script>
529 | 
530 |     <script type="text/javascript">
531 |       element = document.querySelector('#multiselect-autocomplete-progressiveEnhancement')
532 |       accessibleAutocomplete.enhanceSelectElement({
533 |         minLength: 3,
534 |         selectElement: element
535 |       })
536 |     </script>
537 | 
538 |     <script type="text/javascript">
539 |       function customSuggest (query, syncResults) {
540 |         var results = [
541 |           { endonymLang: 'fr', endonym: 'République Française', name: 'France' },
542 |           { endonymLang: 'de', endonym: 'Deutschland', name: 'Germany' },
543 |           { endonymLang: 'en', endonym: 'Great Britain', name: 'United Kingdom' }
544 |         ]
545 |         syncResults(query
546 |           ? results.filter(function (result) {
547 |               var resultContains = result.name.toLowerCase().indexOf(query.toLowerCase()) !== -1
548 |               var endonymContains = result.endonym.toLowerCase().indexOf(query.toLowerCase()) !== -1
549 |               return resultContains || endonymContains
550 |             })
551 |           : []
552 |         )
553 |       }
554 | 
555 |       function inputValueTemplate (result) {
556 |         return result && result.name
557 |       }
558 | 
559 |       function suggestionTemplate (result) {
560 |         return result && '<strong>' + result.name + '</strong>' +
561 |           ' (<span lang=' + result.endonymLang + '>' + result.endonym + '</span>)'
562 |       }
563 | 
564 |       element = document.querySelector('#tt-customTemplates')
565 |       id = 'autocomplete-customTemplates'
566 |       accessibleAutocomplete({
567 |         element: element,
568 |         id: id,
569 |         source: customSuggest,
570 |         menuAttributes: {
571 |           "aria-labelledby": id
572 |         },
573 |         templates: {
574 |           inputValue: inputValueTemplate,
575 |           suggestion: suggestionTemplate
576 |         }
577 |       })
578 |     </script>
579 | 
580 |     <script type="text/javascript">
581 |       element = document.querySelector('#tt-confirmOnBlur')
582 |       id = 'autocomplete-confirmOnBlur'
583 |       accessibleAutocomplete({
584 |         element: element,
585 |         id: id,
586 |         confirmOnBlur: false,
587 |         source: countries,
588 |         menuAttributes: {
589 |           "aria-labelledby": id
590 |         }
591 |       })
592 |     </script>
593 | 
594 |     <script type="text/javascript">
595 |       element = document.querySelector('#tt-placeholder')
596 |       id = 'autocomplete-placeholder'
597 |       accessibleAutocomplete({
598 |         element: element,
599 |         id: id,
600 |         placeholder: 'Search for a country',
601 |         source: countries,
602 |         menuAttributes: {
603 |           "aria-labelledby": id
604 |         }
605 |       })
606 |     </script>
607 | 
608 |     <script type="text/javascript">
609 |       element = document.querySelector('#tt-showNoOptionsFound')
610 |       id = 'autocomplete-showNoOptionsFound'
611 |       accessibleAutocomplete({
612 |         element: element,
613 |         id: id,
614 |         showNoOptionsFound: false,
615 |         source: countries,
616 |         menuAttributes: {
617 |           "aria-labelledby": id
618 |         }
619 |       })
620 |     </script>
621 | 
622 |     <script type="text/javascript">
623 |       element = document.querySelector('#tt-showAllValues')
624 |       id = 'autocomplete-showAllValues'
625 |       accessibleAutocomplete({
626 |         element: element,
627 |         id: id,
628 |         showAllValues: true,
629 |         source: countries,
630 |         menuAttributes: {
631 |           "aria-labelledby": id
632 |         }
633 |       })
634 |     </script>
635 | 
636 |     <script type="text/javascript">
637 |       element = document.querySelector('#tt-i18n')
638 |       id = 'autocomplete-i18n'
639 |       accessibleAutocomplete({
640 |         element: element,
641 |         id: id,
642 |         showAllValues: false,
643 |         menuAttributes: {
644 |           "aria-labelledby": id
645 |         },
646 |         source: countries,
647 |         tStatusQueryTooShort: function (minQueryLength) {
648 |           return 'Tippe mindestens ' + minQueryLength + ' Zeichen ein für Resultate.'
649 |         },
650 |         tStatusNoResults: function () {
651 |           return 'Keine Resultate.'
652 |         },
653 |         tStatusSelectedOption: function (selectedOption, length) {
654 |           return selectedOption + ' (1 von ' + length + ') ist ausgewählt.'
655 |         },
656 |         tStatusResults: function (length, contentSelectedOption) {
657 |           var words = {
658 |             result: (length === 1) ? 'Resultat' : 'Resultate',
659 |             is: (length === 1) ? 'ist' : 'sind'
660 |           }
661 | 
662 |           return length + ' ' + words.result + ' ' + words.is + ' verfügbar. ' + contentSelectedOption
663 |         },
664 |         tNoResults: function () {
665 |           return 'Keine Resultate'
666 |         }
667 |       })
668 |     </script>
669 | 
670 |     <script type="text/javascript">
671 |       element = document.querySelector('#tt-customDropdownArrow')
672 |       id = 'autocomplete-customDropdownArrow'
673 |       accessibleAutocomplete({
674 |         element: element,
675 |         id: id,
676 |         showAllValues: true,
677 |         source: countries,
678 |         menuAttributes: {
679 |           "aria-labelledby": id
680 |         },
681 |         dropdownArrow: function (config) {
682 |           return '<svg class="' + config.className + '" style="top: 8px;" viewBox="0 0 512 512" ><path d="M256,298.3L256,298.3L256,298.3l174.2-167.2c4.3-4.2,11.4-4.1,15.8,0.2l30.6,29.9c4.4,4.3,4.5,11.3,0.2,15.5L264.1,380.9  c-2.2,2.2-5.2,3.2-8.1,3c-3,0.1-5.9-0.9-8.1-3L35.2,176.7c-4.3-4.2-4.2-11.2,0.2-15.5L66,131.3c4.4-4.3,11.5-4.4,15.8-0.2L256,298.3  z"/></svg>'
683 |         }
684 |       })
685 |     </script>
686 | 
687 |     <script type="text/javascript">
688 |       element = document.querySelector('#custom-attributes')
689 |       id = 'autocomplete-custom-attributes'
690 |       accessibleAutocomplete({
691 |         element: element,
692 |         id: id,
693 |         showAllValues: false,
694 |         source: countries,
695 |         customAttributes: {
696 |           "data-hello": "hey",
697 |           "data-goodbye": "bye"
698 |         }
699 |       })
700 |     </script>
701 | 
702 |   </body>
703 | </html>
704 | 


--------------------------------------------------------------------------------
/src/autocomplete.js:
--------------------------------------------------------------------------------
  1 | import { createElement, Component } from 'preact' /** @jsx createElement */
  2 | import Status from './status'
  3 | import DropdownArrowDown from './dropdown-arrow-down'
  4 | 
  5 | const IS_PREACT = process.env.COMPONENT_LIBRARY === 'PREACT'
  6 | const IS_REACT = process.env.COMPONENT_LIBRARY === 'REACT'
  7 | 
  8 | const keyCodes = {
  9 |   13: 'enter',
 10 |   27: 'escape',
 11 |   32: 'space',
 12 |   38: 'up',
 13 |   40: 'down'
 14 | }
 15 | 
 16 | function isIosDevice () {
 17 |   return typeof navigator !== 'undefined' && !!(navigator.userAgent.match(/(iPod|iPhone|iPad)/g) && navigator.userAgent.match(/AppleWebKit/g))
 18 | }
 19 | 
 20 | function isPrintableKeyCode (keyCode) {
 21 |   return (
 22 |     (keyCode > 47 && keyCode < 58) || // number keys
 23 |     keyCode === 32 || keyCode === 8 || // spacebar or backspace
 24 |     (keyCode > 64 && keyCode < 91) || // letter keys
 25 |     (keyCode > 95 && keyCode < 112) || // numpad keys
 26 |     (keyCode > 185 && keyCode < 193) || // ;=,-./` (in order)
 27 |     (keyCode > 218 && keyCode < 223) // [\]' (in order)
 28 |   )
 29 | }
 30 | 
 31 | // Preact does not implement onChange on inputs, but React does.
 32 | function onChangeCrossLibrary (handler) {
 33 |   if (IS_PREACT) { return { onInput: handler } }
 34 |   if (IS_REACT) { return { onChange: handler } }
 35 | }
 36 | 
 37 | export default class Autocomplete extends Component {
 38 |   static defaultProps = {
 39 |     autoselect: false,
 40 |     cssNamespace: 'autocomplete',
 41 |     customAttributes: {},
 42 |     defaultValue: '',
 43 |     displayMenu: 'inline',
 44 |     minLength: 0,
 45 |     name: 'input-autocomplete',
 46 |     placeholder: '',
 47 |     onConfirm: () => {},
 48 |     onRemove: () => {},
 49 |     confirmOnBlur: true,
 50 |     showNoOptionsFound: true,
 51 |     showAllValues: false,
 52 |     required: false,
 53 |     multiple: false,
 54 |     selectedOptions: [],
 55 |     tNoResults: () => 'No results found',
 56 |     dropdownArrow: DropdownArrowDown,
 57 |     menuAttributes: {},
 58 |     tAssistiveHint: () => 'When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures.',
 59 |     tSelectedOptionDescription: () => 'Press Enter or Space to remove selection'
 60 |   }
 61 | 
 62 |   elementReferences = {}
 63 | 
 64 |   constructor (props) {
 65 |     super(props)
 66 | 
 67 |     this.state = {
 68 |       inputFocused: false,
 69 |       optionFocused: null,
 70 |       hovered: null,
 71 |       menuOpen: false,
 72 |       options: props.defaultValue ? [props.defaultValue] : [],
 73 |       selectedOptions: props.selectedOptions,
 74 |       query: props.defaultValue,
 75 |       selected: props.defaultValue,
 76 |       validChoiceMade: false,
 77 |       ariaHint: true
 78 |     }
 79 | 
 80 |     this.handleComponentBlur = this.handleComponentBlur.bind(this)
 81 |     this.handleKeyDown = this.handleKeyDown.bind(this)
 82 |     this.handleUpArrow = this.handleUpArrow.bind(this)
 83 |     this.handleDownArrow = this.handleDownArrow.bind(this)
 84 |     this.handleEnter = this.handleEnter.bind(this)
 85 |     this.handlePrintableKey = this.handlePrintableKey.bind(this)
 86 | 
 87 |     this.handleListMouseLeave = this.handleListMouseLeave.bind(this)
 88 | 
 89 |     this.handleOptionBlur = this.handleOptionBlur.bind(this)
 90 |     this.handleOptionClick = this.handleOptionClick.bind(this)
 91 |     this.handleOptionFocus = this.handleOptionFocus.bind(this)
 92 |     this.handleOptionMouseDown = this.handleOptionMouseDown.bind(this)
 93 |     this.handleOptionMouseEnter = this.handleOptionMouseEnter.bind(this)
 94 | 
 95 |     this.handleRemoveSelectedOptionClick = this.handleRemoveSelectedOptionClick.bind(this)
 96 | 
 97 |     this.handleInputBlur = this.handleInputBlur.bind(this)
 98 |     this.handleInputChange = this.handleInputChange.bind(this)
 99 |     this.handleInputFocus = this.handleInputFocus.bind(this)
100 | 
101 |     this.pollInputElement = this.pollInputElement.bind(this)
102 |     this.getDirectInputChanges = this.getDirectInputChanges.bind(this)
103 |   }
104 | 
105 |   isQueryAnOption (query, options) {
106 |     return options.map(entry => this.templateInputValue(entry).toLowerCase()).indexOf(query.toLowerCase()) !== -1
107 |   }
108 | 
109 |   componentDidMount () {
110 |     this.pollInputElement()
111 |   }
112 | 
113 |   componentWillUnmount () {
114 |     clearTimeout(this.$pollInput)
115 |   }
116 | 
117 |   // Applications like Dragon NaturallySpeaking will modify the
118 |   // `input` field by directly changing its `.value`. These events
119 |   // don't trigger our JavaScript event listeners, so we need to poll
120 |   // to handle when and if they occur.
121 |   pollInputElement () {
122 |     this.getDirectInputChanges()
123 |     this.$pollInput = setTimeout(() => {
124 |       this.pollInputElement()
125 |     }, 100)
126 |   }
127 | 
128 |   getDirectInputChanges () {
129 |     const inputReference = this.elementReferences['input']
130 |     const queryHasChanged = inputReference && inputReference.value !== this.state.query
131 | 
132 |     if (queryHasChanged) {
133 |       this.handleInputChange({ target: { value: inputReference.value } })
134 |     }
135 |   }
136 | 
137 |   componentDidUpdate (prevProps, prevState) {
138 |     const { inputFocused, optionFocused } = this.state
139 |     if (inputFocused) {
140 |       const inputElement = this.elementReferences['input']
141 |       if (inputElement !== document.activeElement) {
142 |         inputElement.focus()
143 |       }
144 |       const notPreviouslyFocused = !prevState.inputFocused && prevState.optionFocused === null
145 |       if (notPreviouslyFocused) {
146 |         inputElement.setSelectionRange(0, inputElement.value.length)
147 |       }
148 |     } else if (optionFocused !== null) {
149 |       const optionElement = this.elementReferences[`option-${optionFocused}`]
150 |       if (optionElement && optionElement !== document.activeElement) {
151 |         optionElement.focus()
152 |       }
153 |     }
154 |   }
155 | 
156 |   hasAutoselect () {
157 |     return isIosDevice() ? false : this.props.autoselect
158 |   }
159 | 
160 |   // This template is used when converting from a state.options object into a state.query.
161 |   templateInputValue (value) {
162 |     const inputValueTemplate = this.props.templates && this.props.templates.inputValue
163 |     return inputValueTemplate ? inputValueTemplate(value) : value
164 |   }
165 | 
166 |   // This template is used when displaying results / suggestions.
167 |   templateSuggestion (value) {
168 |     const suggestionTemplate = this.props.templates && this.props.templates.suggestion
169 |     return suggestionTemplate ? suggestionTemplate(value) : value
170 |   }
171 | 
172 |   resetInput () {
173 |     this.setState({
174 |       inputFocused: false,
175 |       optionFocused: null,
176 |       clicked: null,
177 |       menuOpen: false,
178 |       selected: null,
179 |       query: ''
180 |     })
181 |   }
182 | 
183 |   handleComponentBlur (newState) {
184 |     const { options, query, selected } = this.state
185 |     let newQuery
186 |     if (this.props.confirmOnBlur) {
187 |       newQuery = newState.query || query
188 |       this.props.onConfirm(options[selected])
189 |     } else {
190 |       newQuery = query
191 |     }
192 | 
193 |     if (this.props.multiple) {
194 |       this.resetInput()
195 |     } else {
196 |       this.setState({
197 |         inputFocused: false,
198 |         optionFocused: null,
199 |         clicked: null,
200 |         menuOpen: newState.menuOpen || false,
201 |         query: newQuery,
202 |         selected: null,
203 |         validChoiceMade: this.isQueryAnOption(newQuery, options)
204 |       })
205 |     }
206 |   }
207 | 
208 |   handleListMouseLeave (event) {
209 |     this.setState({
210 |       hovered: null
211 |     })
212 |   }
213 | 
214 |   handleOptionBlur (event, index) {
215 |     const { optionFocused, clicked, menuOpen, options, selected } = this.state
216 |     const focusingOutsideComponent = event.relatedTarget === null && clicked === null
217 |     const focusingInput = event.relatedTarget === this.elementReferences['input']
218 |     const focusingAnotherOption = optionFocused !== null && optionFocused !== index
219 |     const blurComponent = (!focusingAnotherOption && focusingOutsideComponent) || !(focusingAnotherOption || focusingInput)
220 |     if (blurComponent) {
221 |       const keepMenuOpen = menuOpen && isIosDevice()
222 |       this.handleComponentBlur({
223 |         menuOpen: keepMenuOpen,
224 |         query: this.templateInputValue(options[selected])
225 |       })
226 |     }
227 |   }
228 | 
229 |   handleInputBlur () {
230 |     const { optionFocused, menuOpen, options, query, selected } = this.state
231 |     const focusingAnOption = optionFocused !== null
232 |     clearTimeout(this.$blurInput)
233 |     if (!focusingAnOption) {
234 |       const keepMenuOpen = menuOpen && isIosDevice()
235 |       const newQuery = isIosDevice() ? query : this.templateInputValue(options[selected])
236 |       this.$blurInput = setTimeout(() => this.handleComponentBlur({
237 |         menuOpen: keepMenuOpen,
238 |         query: newQuery
239 |       }), 200)
240 |     }
241 |   }
242 | 
243 |   handleInputChange (event) {
244 |     const { minLength, source, showAllValues } = this.props
245 |     const autoselect = this.hasAutoselect()
246 |     const query = event.target.value
247 |     const queryEmpty = query.length === 0
248 |     const queryChanged = this.state.query.length !== query.length
249 |     const queryLongEnough = query.length >= minLength
250 | 
251 |     this.setState({
252 |       query,
253 |       ariaHint: queryEmpty
254 |     })
255 | 
256 |     const searchForOptions = showAllValues || (!queryEmpty && queryChanged && queryLongEnough)
257 |     if (searchForOptions) {
258 |       source(query, (options) => {
259 |         const optionsAvailable = options.length > 0
260 |         this.setState({
261 |           menuOpen: optionsAvailable,
262 |           options,
263 |           validChoiceMade: false,
264 |           selected: (autoselect && optionsAvailable) ? 0 : null
265 |         })
266 |       })
267 |     } else if (queryEmpty || !queryLongEnough) {
268 |       this.setState({
269 |         menuOpen: false,
270 |         options: [],
271 |         selected: null
272 |       })
273 |     }
274 |   }
275 | 
276 |   handleInputClick (event) {
277 |     this.handleInputChange(event)
278 |   }
279 | 
280 |   handleInputFocus () {
281 |     this.setState({
282 |       inputFocused: true,
283 |       optionFocused: null
284 |     })
285 |   }
286 | 
287 |   handleOptionFocus (index) {
288 |     this.setState({
289 |       inputFocused: false,
290 |       optionFocused: index,
291 |       hovered: null,
292 |       selected: index
293 |     })
294 |   }
295 | 
296 |   handleOptionMouseDown (event) {
297 |     // Safari triggers focusOut before click, but if you
298 |     // preventDefault on mouseDown, you can stop that from happening.
299 |     // If this is removed, clicking on an option in Safari will trigger
300 |     // `handleOptionBlur`, which closes the menu, and the click will
301 |     // trigger on the element underneath instead.
302 |     // See: http://stackoverflow.com/questions/7621711/how-to-prevent-blur-running-when-clicking-a-link-in-jquery
303 |     event.preventDefault()
304 |   }
305 | 
306 |   handleOptionMouseEnter (event, index) {
307 |     // iOS Safari prevents click event if mouseenter adds hover background colour
308 |     // See: https://developer.apple.com/library/archive/documentation/AppleApplications/Reference/SafariWebContent/HandlingEvents/HandlingEvents.html#//apple_ref/doc/uid/TP40006511-SW4
309 |     if (!isIosDevice()) {
310 |       this.setState({
311 |         hovered: index
312 |       })
313 |     }
314 |   }
315 | 
316 |   handleOptionClick (event, index) {
317 |     const selectedOption = this.state.options[index]
318 |     const newQuery = this.templateInputValue(selectedOption)
319 |     this.props.onConfirm(selectedOption)
320 | 
321 |     if (this.props.multiple) {
322 |       this.resetInput()
323 |       if (this.state.selectedOptions.indexOf(selectedOption) === -1) {
324 |         this.setState({
325 |           selectedOptions: this.state.selectedOptions.concat([selectedOption])
326 |         })
327 |       }
328 |     } else {
329 |       this.setState({
330 |         inputFocused: true,
331 |         optionFocused: null,
332 |         clicked: index,
333 |         hovered: null,
334 |         menuOpen: false,
335 |         query: newQuery,
336 |         validChoiceMade: true,
337 |         selected: index
338 |       })
339 |     }
340 |   }
341 | 
342 |   handleRemoveSelectedOptionClick (event, index) {
343 |     const selectedOptions = this.state.selectedOptions
344 |     const toRemove = selectedOptions[index]
345 |     if (toRemove) {
346 |       const newSelectedOptions = selectedOptions.filter(o => o !== toRemove)
347 | 
348 |       this.setState({
349 |         selectedOptions: newSelectedOptions
350 |       })
351 | 
352 |       this.props.onRemove(toRemove)
353 |     }
354 |   }
355 | 
356 |   handleUpArrow (event) {
357 |     event.preventDefault()
358 |     const { menuOpen, selected } = this.state
359 |     if (!menuOpen) { return }
360 | 
361 |     const hasOptions = selected && selected > 0
362 |     if (hasOptions) {
363 |       this.handleOptionFocus(selected - 1)
364 |     } else {
365 |       this.setState({
366 |         inputFocused: true,
367 |         optionFocused: null,
368 |         selected: null
369 |       })
370 |     }
371 |   }
372 | 
373 |   handleDownArrow (event) {
374 |     event.preventDefault()
375 |     // if not open, open
376 |     if (this.props.showAllValues && this.state.menuOpen === false) {
377 |       event.preventDefault()
378 |       this.props.source('', (options) => {
379 |         this.setState({
380 |           menuOpen: true,
381 |           options,
382 |           selected: 0,
383 |           inputFocused: false,
384 |           optionFocused: 0,
385 |           hovered: null
386 |         })
387 |       })
388 |     } else if (this.state.menuOpen === true) {
389 |       const { options, selected } = this.state
390 |       const isAtBottom = selected === options.length - 1
391 |       if (!isAtBottom) {
392 |         this.handleOptionFocus(selected === null ? 0 : selected + 1)
393 |       }
394 |     }
395 |   }
396 | 
397 |   handleSpace (event) {
398 |     // if not open, open
399 |     if (this.props.showAllValues && this.state.menuOpen === false && this.state.query === '') {
400 |       event.preventDefault()
401 |       this.props.source('', (options) => {
402 |         this.setState({
403 |           menuOpen: true,
404 |           options
405 |         })
406 |       })
407 |     }
408 |     const focusIsOnOption = this.state.optionFocused !== null
409 |     if (focusIsOnOption) {
410 |       event.preventDefault()
411 |       this.handleOptionClick(event, this.state.optionFocused)
412 |     }
413 |   }
414 | 
415 |   handleEnter (event) {
416 |     const { menuOpen, selected } = this.state
417 |     if (menuOpen) {
418 |       event.preventDefault()
419 |       const hasSelectedOption = selected !== null && selected > -1
420 |       if (hasSelectedOption) {
421 |         this.handleOptionClick(event, selected)
422 |       }
423 |     }
424 |   }
425 | 
426 |   handlePrintableKey (event) {
427 |     const inputElement = this.elementReferences['input']
428 |     const eventIsOnInput = event.target === inputElement
429 |     if (!eventIsOnInput) {
430 |       // FIXME: This would be better if it was in componentDidUpdate,
431 |       // but using setState to trigger that seems to not work correctly
432 |       // in preact@8.1.0.
433 |       inputElement.focus()
434 |     }
435 |   }
436 | 
437 |   handleKeyDown (event) {
438 |     switch (keyCodes[event.keyCode]) {
439 |       case 'up':
440 |         this.handleUpArrow(event)
441 |         break
442 |       case 'down':
443 |         this.handleDownArrow(event)
444 |         break
445 |       case 'space':
446 |         this.handleSpace(event)
447 |         break
448 |       case 'enter':
449 |         this.handleEnter(event)
450 |         break
451 |       case 'escape':
452 |         this.handleComponentBlur({
453 |           query: this.state.query
454 |         })
455 |         break
456 |       default:
457 |         if (isPrintableKeyCode(event.keyCode)) {
458 |           this.handlePrintableKey(event)
459 |         }
460 |         break
461 |     }
462 |   }
463 | 
464 |   render () {
465 |     const {
466 |       cssNamespace,
467 |       displayMenu,
468 |       id,
469 |       minLength,
470 |       name,
471 |       placeholder,
472 |       required,
473 |       multiple,
474 |       showAllValues,
475 |       tNoResults,
476 |       tStatusQueryTooShort,
477 |       tStatusNoResults,
478 |       tStatusSelectedOption,
479 |       tStatusResults,
480 |       tAssistiveHint,
481 |       tSelectedOptionDescription,
482 |       dropdownArrow: dropdownArrowFactory,
483 |       customAttributes,
484 |       menuAttributes
485 |     } = this.props
486 |     const {
487 |       inputFocused,
488 |       optionFocused,
489 |       hovered,
490 |       menuOpen,
491 |       options,
492 |       query,
493 |       selected,
494 |       selectedOptions,
495 |       ariaHint,
496 |       validChoiceMade
497 |     } = this.state
498 | 
499 |     const autoselect = this.hasAutoselect()
500 | 
501 |     const noOptionsAvailable = options.length === 0
502 |     const queryNotEmpty = query.length !== 0
503 |     const queryLongEnough = query.length >= minLength
504 |     const showNoOptionsFound = this.props.showNoOptionsFound &&
505 |       inputFocused && noOptionsAvailable && queryNotEmpty && queryLongEnough
506 | 
507 |     const wrapperClassName = `${cssNamespace}__wrapper`
508 | 
509 |     const inputClassName = `${cssNamespace}__input`
510 |     const componentIsFocused = inputFocused || optionFocused !== null
511 |     const inputModifierFocused = componentIsFocused ? ` ${inputClassName}--focused` : ''
512 |     const inputModifierType = this.props.showAllValues ? ` ${inputClassName}--show-all-values` : ` ${inputClassName}--default`
513 |     const dropdownArrowClassName = `${cssNamespace}__dropdown-arrow-down`
514 | 
515 |     const menuClassName = `${cssNamespace}__menu`
516 |     const menuModifierDisplayMenu = `${menuClassName}--${displayMenu}`
517 |     const menuIsVisible = menuOpen || showNoOptionsFound
518 |     const menuModifierVisibility = `${menuClassName}--${(menuIsVisible) ? 'visible' : 'hidden'}`
519 | 
520 |     const optionClassName = `${cssNamespace}__option`
521 | 
522 |     const selectedOptionsClassName = `${cssNamespace}__list`
523 | 
524 |     const hintClassName = `${cssNamespace}__hint`
525 |     const selectedOptionText = this.templateInputValue(options[selected])
526 |     const optionBeginsWithQuery = selectedOptionText &&
527 |       selectedOptionText.toLowerCase().indexOf(query.toLowerCase()) === 0
528 |     const hintValue = (optionBeginsWithQuery && autoselect)
529 |       ? query + selectedOptionText.substr(query.length)
530 |       : ''
531 | 
532 |     const assistiveHintID = id + '__assistiveHint'
533 |     const ariaDescribedProp = (ariaHint) ? {
534 |       'aria-describedby': assistiveHintID
535 |     } : null
536 | 
537 |     let dropdownArrow
538 | 
539 |     // we only need a dropdown arrow if showAllValues is set to a truthy value
540 |     if (showAllValues) {
541 |       dropdownArrow = dropdownArrowFactory({ className: dropdownArrowClassName })
542 | 
543 |       // if the factory returns a string we'll render this as HTML (usage w/o (P)React)
544 |       if (typeof dropdownArrow === 'string') {
545 |         dropdownArrow = <div className={`${cssNamespace}__dropdown-arrow-down-wrapper`} dangerouslySetInnerHTML={{ __html: dropdownArrow }} />
546 |       }
547 |     }
548 | 
549 |     return (
550 |       <div className={wrapperClassName} onKeyDown={this.handleKeyDown}>
551 |         <Status
552 |           id={id}
553 |           length={options.length}
554 |           queryLength={query.length}
555 |           minQueryLength={minLength}
556 |           selectedOption={this.templateInputValue(options[selected])}
557 |           selectedOptionIndex={selected}
558 |           validChoiceMade={validChoiceMade}
559 |           isInFocus={this.state.focused !== null}
560 |           tQueryTooShort={tStatusQueryTooShort}
561 |           tNoResults={tStatusNoResults}
562 |           tSelectedOption={tStatusSelectedOption}
563 |           tResults={tStatusResults}
564 |         />
565 | 
566 |         {hintValue && (
567 |           <span><input className={hintClassName} readonly tabIndex='-1' value={hintValue} /></span>
568 |         )}
569 | 
570 |         <input
571 |           aria-expanded={menuOpen ? 'true' : 'false'}
572 |           aria-activedescendant={optionFocused !== null ? `${id}__option--${optionFocused}` : false}
573 |           aria-owns={`${id}__listbox`}
574 |           aria-autocomplete={(this.hasAutoselect()) ? 'both' : 'list'}
575 |           {...ariaDescribedProp}
576 |           autoComplete='off'
577 |           className={`${inputClassName}${inputModifierFocused}${inputModifierType}`}
578 |           id={id}
579 |           onClick={(event) => this.handleInputClick(event)}
580 |           onBlur={this.handleInputBlur}
581 |           {...onChangeCrossLibrary(this.handleInputChange)}
582 |           onFocus={this.handleInputFocus}
583 |           name={name}
584 |           placeholder={placeholder}
585 |           ref={(inputElement) => { this.elementReferences['input'] = inputElement }}
586 |           type='text'
587 |           role='combobox'
588 |           required={required}
589 |           value={query}
590 |           {...customAttributes}
591 |         />
592 | 
593 |         {dropdownArrow}
594 | 
595 |         <ul
596 |           className={`${menuClassName} ${menuModifierDisplayMenu} ${menuModifierVisibility}`}
597 |           onMouseLeave={(event) => this.handleListMouseLeave(event)}
598 |           id={`${id}__listbox`}
599 |           role='listbox'
600 |           {...menuAttributes}
601 |         >
602 |           {options.map((option, index) => {
603 |             const showFocused = inputFocused ? selected === index : optionFocused === index
604 |             const optionModifierFocused = showFocused && hovered === null ? ` ${optionClassName}--focused` : ''
605 |             const optionModifierOdd = (index % 2) ? ` ${optionClassName}--odd` : ''
606 |             const iosPosinsetHtml = (isIosDevice())
607 |               ? `<span id=${id}__option-suffix--${index} style="border:0;clip:rect(0 0 0 0);height:1px;` +
608 |                 'marginBottom:-1px;marginRight:-1px;overflow:hidden;padding:0;position:absolute;' +
609 |                 'whiteSpace:nowrap;width:1px">' + ` ${index + 1} of ${options.length}</span>`
610 |               : ''
611 | 
612 |             return (
613 |               <li
614 |                 aria-selected={optionFocused === index}
615 |                 className={`${optionClassName}${optionModifierFocused}${optionModifierOdd}`}
616 |                 dangerouslySetInnerHTML={{ __html: this.templateSuggestion(option) + iosPosinsetHtml }}
617 |                 id={`${id}__option--${index}`}
618 |                 key={index}
619 |                 onBlur={(event) => this.handleOptionBlur(event, index)}
620 |                 onClick={(event) => this.handleOptionClick(event, index)}
621 |                 onMouseEnter={(event) => this.handleOptionMouseEnter(event, index)}
622 |                 onMouseDown={this.handleOptionMouseDown}
623 |                 ref={(optionEl) => { this.elementReferences[`option-${index}`] = optionEl }}
624 |                 role='option'
625 |                 tabIndex='-1'
626 |                 aria-posinset={index + 1}
627 |                 aria-setsize={options.length}
628 |               />
629 |             )
630 |           })}
631 | 
632 |           {showNoOptionsFound && (
633 |             <li className={`${optionClassName} ${optionClassName}--no-results`}>{tNoResults()}</li>
634 |           )}
635 |         </ul>
636 | 
637 |         <span id={assistiveHintID} style={{ display: 'none' }}>{tAssistiveHint()}</span>
638 | 
639 |         {multiple && selectedOptions.length > 0 && (
640 |           <ul
641 |             className={`${selectedOptionsClassName}`}
642 |             id={`${id}__list`}
643 |           >
644 |             {selectedOptions.map((option, index) => {
645 |               return (
646 |                 <li id={`${id}__selected-option--${index}`} className='autocomplete__selected-option'>
647 |                   <span dangerouslySetInnerHTML={{ __html: this.templateSuggestion(option) }} />
648 |                   <button
649 |                     type='button'
650 |                     className='autocomplete__remove-option'
651 |                     aria-label={`${this.templateSuggestion(option)}, selected. ${tSelectedOptionDescription()}`}
652 |                     onClick={(event) => this.handleRemoveSelectedOptionClick(event, index)}>remove</button>
653 |                 </li>
654 |               )
655 |             })}
656 |             {showNoOptionsFound && (
657 |               <li className={`${optionClassName} ${optionClassName}--no-results`}>{tNoResults()}</li>
658 |             )}
659 |           </ul>
660 |         )}
661 |       </div>
662 |     )
663 |   }
664 | }
665 | 


--------------------------------------------------------------------------------
/dist/lib/accessible-autocomplete.react.min.js:
--------------------------------------------------------------------------------
1 | (function webpackUniversalModuleDefinition(e,t){"object"==typeof exports&&"object"==typeof module?module.exports=t(require("react")):"function"==typeof define&&define.amd?define(["react"],t):"object"==typeof exports?exports["Autocomplete"]=t(require("react")):e["Autocomplete"]=t(e["React"])})(this,function(n){return function(n){var o={};function r(e){if(o[e])return o[e].exports;var t=o[e]={i:e,l:!1,exports:{}};return n[e].call(t.exports,t,t.exports,r),t.l=!0,t.exports}return r.m=n,r.c=o,r.d=function(e,t,n){r.o(e,t)||Object.defineProperty(e,t,{enumerable:!0,get:n})},r.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},r.t=function(t,e){if(1&e&&(t=r(t)),8&e)return t;if(4&e&&"object"==typeof t&&t&&t.__esModule)return t;var n=Object.create(null);if(r.r(n),Object.defineProperty(n,"default",{enumerable:!0,value:t}),2&e&&"string"!=typeof t)for(var o in t)r.d(n,o,function(e){return t[e]}.bind(null,o));return n},r.n=function(e){var t=e&&e.__esModule?function(){return e["default"]}:function(){return e};return r.d(t,"a",t),t},r.o=function(e,t){return Object.prototype.hasOwnProperty.call(e,t)},r.p="/",r(r.s=38)}([function(e,t,n){var m=n(1),v=n(6),y=n(7),b=n(21),g=n(11),O="prototype",w=function(e,t,n){var o,r,i,u,s=e&w.F,a=e&w.G,l=e&w.S,c=e&w.P,p=e&w.B,f=a?m:l?m[t]||(m[t]={}):(m[t]||{})[O],d=a?v:v[t]||(v[t]={}),h=d[O]||(d[O]={});for(o in a&&(n=t),n)i=((r=!s&&f&&f[o]!==undefined)?f:n)[o],u=p&&r?g(i,m):c&&"function"==typeof i?g(Function.call,i):i,f&&b(f,o,i,e&w.U),d[o]!=i&&y(d,o,u),c&&h[o]!=i&&(h[o]=i)};m.core=v,w.F=1,w.G=2,w.S=4,w.P=8,w.B=16,w.W=32,w.U=64,w.R=128,e.exports=w},function(e,t){var n=e.exports="undefined"!=typeof window&&window.Math==Math?window:"undefined"!=typeof self&&self.Math==Math?self:Function("return this")();"number"==typeof __g&&(__g=n)},function(e,t){e.exports=function(e){return"object"==typeof e?null!==e:"function"==typeof e}},function(e,t,n){e.exports=!n(4)(function(){return 7!=Object.defineProperty({},"a",{get:function(){return 7}}).a})},function(e,t){e.exports=function(e){try{return!!e()}catch(t){return!0}}},function(e,t,n){var o=n(2);e.exports=function(e){if(!o(e))throw TypeError(e+" is not an object!");return e}},function(e,t){var n=e.exports={version:"2.5.7"};"number"==typeof __e&&(__e=n)},function(e,t,n){var o=n(8),r=n(20);e.exports=n(3)?function(e,t,n){return o.f(e,t,r(1,n))}:function(e,t,n){return e[t]=n,e}},function(e,t,n){var r=n(5),i=n(17),u=n(19),s=Object.defineProperty;t.f=n(3)?Object.defineProperty:function(e,t,n){if(r(e),t=u(t,!0),r(n),i)try{return s(e,t,n)}catch(o){}if("get"in n||"set"in n)throw TypeError("Accessors not supported!");return"value"in n&&(e[t]=n.value),e}},function(e,t){var n={}.hasOwnProperty;e.exports=function(e,t){return n.call(e,t)}},function(e,t){var n=0,o=Math.random();e.exports=function(e){return"Symbol(".concat(e===undefined?"":e,")_",(++n+o).toString(36))}},function(e,t,n){var i=n(22);e.exports=function(o,r,e){if(i(o),r===undefined)return o;switch(e){case 1:return function(e){return o.call(r,e)};case 2:return function(e,t){return o.call(r,e,t)};case 3:return function(e,t,n){return o.call(r,e,t,n)}}return function(){return o.apply(r,arguments)}}},function(e,t,n){var o=n(13),r=n(14);e.exports=function(e){return o(r(e))}},function(e,t,n){var o=n(24);e.exports=Object("z").propertyIsEnumerable(0)?Object:function(e){return"String"==o(e)?e.split(""):Object(e)}},function(e,t){e.exports=function(e){if(e==undefined)throw TypeError("Can't call method on  "+e);return e}},function(e,t,n){"use strict";var o=n(4);e.exports=function(e,t){return!!e&&o(function(){t?e.call(null,function(){},1):e.call(null)})}},function(e,t){e.exports=n},function(e,t,n){e.exports=!n(3)&&!n(4)(function(){return 7!=Object.defineProperty(n(18)("div"),"a",{get:function(){return 7}}).a})},function(e,t,n){var o=n(2),r=n(1).document,i=o(r)&&o(r.createElement);e.exports=function(e){return i?r.createElement(e):{}}},function(e,t,n){var r=n(2);e.exports=function(e,t){if(!r(e))return e;var n,o;if(t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;if("function"==typeof(n=e.valueOf)&&!r(o=n.call(e)))return o;if(!t&&"function"==typeof(n=e.toString)&&!r(o=n.call(e)))return o;throw TypeError("Can't convert object to primitive value")}},function(e,t){e.exports=function(e,t){return{enumerable:!(1&e),configurable:!(2&e),writable:!(4&e),value:t}}},function(e,t,n){var i=n(1),u=n(7),s=n(9),a=n(10)("src"),o="toString",r=Function[o],l=(""+r).split(o);n(6).inspectSource=function(e){return r.call(e)},(e.exports=function(e,t,n,o){var r="function"==typeof n;r&&(s(n,"name")||u(n,"name",t)),e[t]!==n&&(r&&(s(n,a)||u(n,a,e[t]?""+e[t]:l.join(String(t)))),e===i?e[t]=n:o?e[t]?e[t]=n:u(e,t,n):(delete e[t],u(e,t,n)))})(Function.prototype,o,function(){return"function"==typeof this&&this[a]||r.call(this)})},function(e,t){e.exports=function(e){if("function"!=typeof e)throw TypeError(e+" is not a function!");return e}},function(e,t,n){var o=n(41),r=n(30);e.exports=Object.keys||function(e){return o(e,r)}},function(e,t){var n={}.toString;e.exports=function(e){return n.call(e).slice(8,-1)}},function(e,t,n){var a=n(12),l=n(26),c=n(42);e.exports=function(s){return function(e,t,n){var o,r=a(e),i=l(r.length),u=c(n,i);if(s&&t!=t){for(;u<i;)if((o=r[u++])!=o)return!0}else for(;u<i;u++)if((s||u in r)&&r[u]===t)return s||u||0;return!s&&-1}}},function(e,t,n){var o=n(27),r=Math.min;e.exports=function(e){return 0<e?r(o(e),9007199254740991):0}},function(e,t){var n=Math.ceil,o=Math.floor;e.exports=function(e){return isNaN(e=+e)?0:(0<e?o:n)(e)}},function(e,t,n){var o=n(29)("keys"),r=n(10);e.exports=function(e){return o[e]||(o[e]=r(e))}},function(e,t,n){var o=n(6),r=n(1),i="__core-js_shared__",u=r[i]||(r[i]={});(e.exports=function(e,t){return u[e]||(u[e]=t!==undefined?t:{})})("versions",[]).push({version:o.version,mode:n(43)?"pure":"global",copyright:"© 2018 Denis Pushkarev (zloirock.ru)"})},function(e,t){e.exports="constructor,hasOwnProperty,isPrototypeOf,propertyIsEnumerable,toLocaleString,toString,valueOf".split(",")},function(e,t){t.f={}.propertyIsEnumerable},function(e,t,n){var o=n(14);e.exports=function(e){return Object(o(e))}},function(e,t,n){var o=n(0);o(o.S,"Object",{create:n(45)})},function(e,t,n){var o=n(0);o(o.S,"Object",{setPrototypeOf:n(48).set})},function(e,t,n){var g=n(11),O=n(13),w=n(32),_=n(26),o=n(52);e.exports=function(p,e){var f=1==p,d=2==p,h=3==p,m=4==p,v=6==p,y=5==p||v,b=e||o;return function(e,t,n){for(var o,r,i=w(e),u=O(i),s=g(t,n,3),a=_(u.length),l=0,c=f?b(e,a):d?b(e,0):undefined;l<a;l++)if((y||l in u)&&(r=s(o=u[l],l,i),p))if(f)c[l]=r;else if(r)switch(p){case 3:return!0;case 5:return o;case 6:return l;case 2:c.push(o)}else if(m)return!1;return v?-1:h||m?m:c}}},function(e,t,n){var o=n(29)("wks"),r=n(10),i=n(1).Symbol,u="function"==typeof i;(e.exports=function(e){return o[e]||(o[e]=u&&i[e]||(u?i:r)("Symbol."+e))}).store=o},function(e,t,n){var o=n(0);o(o.P,"Function",{bind:n(57)})},function(e,t,n){"use strict";n(39),n(33),n(34),t.__esModule=!0,t["default"]=void 0,n(50),n(51),n(55),n(56),n(37),n(59);var ee=n(16),te=r(n(61)),o=r(n(62));function r(e){return e&&e.__esModule?e:{"default":e}}function ne(){return(ne=Object.assign?Object.assign.bind():function(e){for(var t=1;t<arguments.length;t++){var n=arguments[t];for(var o in n)Object.prototype.hasOwnProperty.call(n,o)&&(e[o]=n[o])}return e}).apply(this,arguments)}function i(e,t){return(i=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}function u(e){if(void 0===e)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return e}var s={13:"enter",27:"escape",32:"space",38:"up",40:"down"};function oe(){return"undefined"!=typeof navigator&&!(!navigator.userAgent.match(/(iPod|iPhone|iPad)/g)||!navigator.userAgent.match(/AppleWebKit/g))}var a=function(n){function e(e){var t;return(t=n.call(this,e)||this).elementReferences={},t.state={inputFocused:!1,optionFocused:null,hovered:null,menuOpen:!1,options:e.defaultValue?[e.defaultValue]:[],selectedOptions:e.selectedOptions,query:e.defaultValue,selected:e.defaultValue,validChoiceMade:!1,ariaHint:!0},t.handleComponentBlur=t.handleComponentBlur.bind(u(u(t))),t.handleKeyDown=t.handleKeyDown.bind(u(u(t))),t.handleUpArrow=t.handleUpArrow.bind(u(u(t))),t.handleDownArrow=t.handleDownArrow.bind(u(u(t))),t.handleEnter=t.handleEnter.bind(u(u(t))),t.handlePrintableKey=t.handlePrintableKey.bind(u(u(t))),t.handleListMouseLeave=t.handleListMouseLeave.bind(u(u(t))),t.handleOptionBlur=t.handleOptionBlur.bind(u(u(t))),t.handleOptionClick=t.handleOptionClick.bind(u(u(t))),t.handleOptionFocus=t.handleOptionFocus.bind(u(u(t))),t.handleOptionMouseDown=t.handleOptionMouseDown.bind(u(u(t))),t.handleOptionMouseEnter=t.handleOptionMouseEnter.bind(u(u(t))),t.handleRemoveSelectedOptionClick=t.handleRemoveSelectedOptionClick.bind(u(u(t))),t.handleInputBlur=t.handleInputBlur.bind(u(u(t))),t.handleInputChange=t.handleInputChange.bind(u(u(t))),t.handleInputFocus=t.handleInputFocus.bind(u(u(t))),t.pollInputElement=t.pollInputElement.bind(u(u(t))),t.getDirectInputChanges=t.getDirectInputChanges.bind(u(u(t))),t}(function o(e,t){e.prototype=Object.create(t.prototype),i(e.prototype.constructor=e,t)})(e,n);var t=e.prototype;return t.isQueryAnOption=function(e,t){var n=this;return-1!==t.map(function(e){return n.templateInputValue(e).toLowerCase()}).indexOf(e.toLowerCase())},t.componentDidMount=function(){this.pollInputElement()},t.componentWillUnmount=function(){clearTimeout(this.$pollInput)},t.pollInputElement=function(){var e=this;this.getDirectInputChanges(),this.$pollInput=setTimeout(function(){e.pollInputElement()},100)},t.getDirectInputChanges=function(){var e=this.elementReferences["input"];e&&e.value!==this.state.query&&this.handleInputChange({target:{value:e.value}})},t.componentDidUpdate=function(e,t){var n=this.state,o=n.inputFocused,r=n.optionFocused;if(o){var i=this.elementReferences["input"];i!==document.activeElement&&i.focus(),!t.inputFocused&&null===t.optionFocused&&i.setSelectionRange(0,i.value.length)}else if(null!==r){var u=this.elementReferences["option-"+r];u&&u!==document.activeElement&&u.focus()}},t.hasAutoselect=function(){return!oe()&&this.props.autoselect},t.templateInputValue=function(e){var t=this.props.templates&&this.props.templates.inputValue;return t?t(e):e},t.templateSuggestion=function(e){var t=this.props.templates&&this.props.templates.suggestion;return t?t(e):e},t.resetInput=function(){this.setState({inputFocused:!1,optionFocused:null,clicked:null,menuOpen:!1,selected:null,query:""})},t.handleComponentBlur=function(e){var t,n=this.state,o=n.options,r=n.query,i=n.selected;this.props.confirmOnBlur?(t=e.query||r,this.props.onConfirm(o[i])):t=r,this.props.multiple?this.resetInput():this.setState({inputFocused:!1,optionFocused:null,clicked:null,menuOpen:e.menuOpen||!1,query:t,selected:null,validChoiceMade:this.isQueryAnOption(t,o)})},t.handleListMouseLeave=function(e){this.setState({hovered:null})},t.handleOptionBlur=function(e,t){var n=this.state,o=n.optionFocused,r=n.clicked,i=n.menuOpen,u=n.options,s=n.selected,a=null===e.relatedTarget&&null===r,l=e.relatedTarget===this.elementReferences["input"],c=null!==o&&o!==t;if(!c&&a||!(c||l)){var p=i&&oe();this.handleComponentBlur({menuOpen:p,query:this.templateInputValue(u[s])})}},t.handleInputBlur=function(){var e=this,t=this.state,n=t.optionFocused,o=t.menuOpen,r=t.options,i=t.query,u=t.selected,s=null!==n;if(clearTimeout(this.$blurInput),!s){var a=o&&oe(),l=oe()?i:this.templateInputValue(r[u]);this.$blurInput=setTimeout(function(){return e.handleComponentBlur({menuOpen:a,query:l})},200)}},t.handleInputChange=function(e){var n=this,t=this.props,o=t.minLength,r=t.source,i=t.showAllValues,u=this.hasAutoselect(),s=e.target.value,a=0===s.length,l=this.state.query.length!==s.length,c=s.length>=o;this.setState({query:s,ariaHint:a}),i||!a&&l&&c?r(s,function(e){var t=0<e.length;n.setState({menuOpen:t,options:e,validChoiceMade:!1,selected:u&&t?0:null})}):!a&&c||this.setState({menuOpen:!1,options:[],selected:null})},t.handleInputClick=function(e){this.handleInputChange(e)},t.handleInputFocus=function(){this.setState({inputFocused:!0,optionFocused:null})},t.handleOptionFocus=function(e){this.setState({inputFocused:!1,optionFocused:e,hovered:null,selected:e})},t.handleOptionMouseDown=function(e){e.preventDefault()},t.handleOptionMouseEnter=function(e,t){oe()||this.setState({hovered:t})},t.handleOptionClick=function(e,t){var n=this.state.options[t],o=this.templateInputValue(n);this.props.onConfirm(n),this.props.multiple?(this.resetInput(),-1===this.state.selectedOptions.indexOf(n)&&this.setState({selectedOptions:this.state.selectedOptions.concat([n])})):this.setState({inputFocused:!0,optionFocused:null,clicked:t,hovered:null,menuOpen:!1,query:o,validChoiceMade:!0,selected:t})},t.handleRemoveSelectedOptionClick=function(e,t){var n=this.state.selectedOptions,o=n[t];if(o){var r=n.filter(function(e){return e!==o});this.setState({selectedOptions:r}),this.props.onRemove(o)}},t.handleUpArrow=function(e){e.preventDefault();var t=this.state,n=t.menuOpen,o=t.selected;n&&(o&&0<o?this.handleOptionFocus(o-1):this.setState({inputFocused:!0,optionFocused:null,selected:null}))},t.handleDownArrow=function(e){var t=this;if(e.preventDefault(),this.props.showAllValues&&!1===this.state.menuOpen)e.preventDefault(),this.props.source("",function(e){t.setState({menuOpen:!0,options:e,selected:0,inputFocused:!1,optionFocused:0,hovered:null})});else if(!0===this.state.menuOpen){var n=this.state,o=n.options,r=n.selected;r===o.length-1||this.handleOptionFocus(null===r?0:r+1)}},t.handleSpace=function(e){var t=this;this.props.showAllValues&&!1===this.state.menuOpen&&""===this.state.query&&(e.preventDefault(),this.props.source("",function(e){t.setState({menuOpen:!0,options:e})})),null!==this.state.optionFocused&&(e.preventDefault(),this.handleOptionClick(e,this.state.optionFocused))},t.handleEnter=function(e){var t=this.state,n=t.menuOpen,o=t.selected;n&&(e.preventDefault(),null!==o&&-1<o&&this.handleOptionClick(e,o))},t.handlePrintableKey=function(e){var t=this.elementReferences["input"];e.target===t||t.focus()},t.handleKeyDown=function(e){switch(s[e.keyCode]){case"up":this.handleUpArrow(e);break;case"down":this.handleDownArrow(e);break;case"space":this.handleSpace(e);break;case"enter":this.handleEnter(e);break;case"escape":this.handleComponentBlur({query:this.state.query});break;default:(function t(e){return 47<e&&e<58||32===e||8===e||64<e&&e<91||95<e&&e<112||185<e&&e<193||218<e&&e<223})(e.keyCode)&&this.handlePrintableKey(e)}},t.render=function(){var e,i=this,t=this.props,n=t.cssNamespace,o=t.displayMenu,u=t.id,r=t.minLength,s=t.name,a=t.placeholder,l=t.required,c=t.multiple,p=t.showAllValues,f=t.tNoResults,d=t.tStatusQueryTooShort,h=t.tStatusNoResults,m=t.tStatusSelectedOption,v=t.tStatusResults,y=t.tAssistiveHint,b=t.tSelectedOptionDescription,g=t.dropdownArrow,O=t.customAttributes,w=t.menuAttributes,_=this.state,x=_.inputFocused,S=_.optionFocused,F=_.hovered,E=_.menuOpen,C=_.options,I=_.query,j=_.selected,M=_.selectedOptions,A=_.ariaHint,P=_.validChoiceMade,k=this.hasAutoselect(),R=0===C.length,D=0!==I.length,N=I.length>=r,T=this.props.showNoOptionsFound&&x&&R&&D&&N,q=n+"__wrapper",L=n+"__input",B=x||null!==S?" "+L+"--focused":"",V=this.props.showAllValues?" "+L+"--show-all-values":" "+L+"--default",U=n+"__dropdown-arrow-down",K=n+"__menu",H=K+"--"+o,Q=K+"--"+(E||T?"visible":"hidden"),W=n+"__option",$=n+"__list",z=n+"__hint",G=this.templateInputValue(C[j]),J=G&&0===G.toLowerCase().indexOf(I.toLowerCase())&&k?I+G.substr(I.length):"",X=u+"__assistiveHint",Y=A?{"aria-describedby":X}:null;return p&&"string"==typeof(e=g({className:U}))&&(e=(0,ee.createElement)("div",{className:n+"__dropdown-arrow-down-wrapper",dangerouslySetInnerHTML:{__html:e}})),(0,ee.createElement)("div",{className:q,onKeyDown:this.handleKeyDown},(0,ee.createElement)(te["default"],{id:u,length:C.length,queryLength:I.length,minQueryLength:r,selectedOption:this.templateInputValue(C[j]),selectedOptionIndex:j,validChoiceMade:P,isInFocus:null!==this.state.focused,tQueryTooShort:d,tNoResults:h,tSelectedOption:m,tResults:v}),J&&(0,ee.createElement)("span",null,(0,ee.createElement)("input",{className:z,readonly:!0,tabIndex:"-1",value:J})),(0,ee.createElement)("input",ne({"aria-expanded":E?"true":"false","aria-activedescendant":null!==S&&u+"__option--"+S,"aria-owns":u+"__listbox","aria-autocomplete":this.hasAutoselect()?"both":"list"},Y,{autoComplete:"off",className:""+L+B+V,id:u,onClick:function(e){return i.handleInputClick(e)},onBlur:this.handleInputBlur},function Z(e){return{onChange:e}}(this.handleInputChange),{onFocus:this.handleInputFocus,name:s,placeholder:a,ref:function(e){i.elementReferences["input"]=e},type:"text",role:"combobox",required:l,value:I},O)),e,(0,ee.createElement)("ul",ne({className:K+" "+H+" "+Q,onMouseLeave:function(e){return i.handleListMouseLeave(e)},id:u+"__listbox",role:"listbox"},w),C.map(function(e,t){var n=(x?j===t:S===t)&&null===F?" "+W+"--focused":"",o=t%2?" "+W+"--odd":"",r=oe()?"<span id="+u+"__option-suffix--"+t+' style="border:0;clip:rect(0 0 0 0);height:1px;marginBottom:-1px;marginRight:-1px;overflow:hidden;padding:0;position:absolute;whiteSpace:nowrap;width:1px"> '+(t+1)+" of "+C.length+"</span>":"";return(0,ee.createElement)("li",{"aria-selected":S===t,className:""+W+n+o,dangerouslySetInnerHTML:{__html:i.templateSuggestion(e)+r},id:u+"__option--"+t,key:t,onBlur:function(e){return i.handleOptionBlur(e,t)},onClick:function(e){return i.handleOptionClick(e,t)},onMouseEnter:function(e){return i.handleOptionMouseEnter(e,t)},onMouseDown:i.handleOptionMouseDown,ref:function(e){i.elementReferences["option-"+t]=e},role:"option",tabIndex:"-1","aria-posinset":t+1,"aria-setsize":C.length})}),T&&(0,ee.createElement)("li",{className:W+" "+W+"--no-results"},f())),(0,ee.createElement)("span",{id:X,style:{display:"none"}},y()),c&&0<M.length&&(0,ee.createElement)("ul",{className:""+$,id:u+"__list"},M.map(function(e,t){return(0,ee.createElement)("li",{id:u+"__selected-option--"+t,className:"autocomplete__selected-option"},(0,ee.createElement)("span",{dangerouslySetInnerHTML:{__html:i.templateSuggestion(e)}}),(0,ee.createElement)("button",{type:"button",className:"autocomplete__remove-option","aria-label":i.templateSuggestion(e)+", selected. "+b(),onClick:function(e){return i.handleRemoveSelectedOptionClick(e,t)}},"remove"))}),T&&(0,ee.createElement)("li",{className:W+" "+W+"--no-results"},f())))},e}(ee.Component);(t["default"]=a).defaultProps={autoselect:!1,cssNamespace:"autocomplete",customAttributes:{},defaultValue:"",displayMenu:"inline",minLength:0,name:"input-autocomplete",placeholder:"",onConfirm:function(){},onRemove:function(){},confirmOnBlur:!0,showNoOptionsFound:!0,showAllValues:!1,required:!1,multiple:!1,selectedOptions:[],tNoResults:function(){return"No results found"},dropdownArrow:o["default"],menuAttributes:{},tAssistiveHint:function(){return"When autocomplete results are available use up and down arrows to review and enter to select.  Touch device users, explore by touch or with swipe gestures."},tSelectedOptionDescription:function(){return"Press Enter or Space to remove selection"}}},function(e,t,n){var o=n(0);o(o.S+o.F,"Object",{assign:n(40)})},function(e,t,n){"use strict";var f=n(23),d=n(44),h=n(31),m=n(32),v=n(13),r=Object.assign;e.exports=!r||n(4)(function(){var e={},t={},n=Symbol(),o="abcdefghijklmnopqrst";return e[n]=7,o.split("").forEach(function(e){t[e]=e}),7!=r({},e)[n]||Object.keys(r({},t)).join("")!=o})?function(e,t){for(var n=m(e),o=arguments.length,r=1,i=d.f,u=h.f;r<o;)for(var s,a=v(arguments[r++]),l=i?f(a).concat(i(a)):f(a),c=l.length,p=0;p<c;)u.call(a,s=l[p++])&&(n[s]=a[s]);return n}:r},function(e,t,n){var u=n(9),s=n(12),a=n(25)(!1),l=n(28)("IE_PROTO");e.exports=function(e,t){var n,o=s(e),r=0,i=[];for(n in o)n!=l&&u(o,n)&&i.push(n);for(;t.length>r;)u(o,n=t[r++])&&(~a(i,n)||i.push(n));return i}},function(e,t,n){var o=n(27),r=Math.max,i=Math.min;e.exports=function(e,t){return(e=o(e))<0?r(e+t,0):i(e,t)}},function(e,t){e.exports=!1},function(e,t){t.f=Object.getOwnPropertySymbols},function(e,t,o){var r=o(5),i=o(46),u=o(30),s=o(28)("IE_PROTO"),a=function(){},l="prototype",c=function(){var e,t=o(18)("iframe"),n=u.length;for(t.style.display="none",o(47).appendChild(t),t.src="javascript:",(e=t.contentWindow.document).open(),e.write("<script>document.F=Object<\/script>"),e.close(),c=e.F;n--;)delete c[l][u[n]];return c()};e.exports=Object.create||function(e,t){var n;return null!==e?(a[l]=r(e),n=new a,a[l]=null,n[s]=e):n=c(),t===undefined?n:i(n,t)}},function(e,t,n){var u=n(8),s=n(5),a=n(23);e.exports=n(3)?Object.defineProperties:function(e,t){s(e);for(var n,o=a(t),r=o.length,i=0;i<r;)u.f(e,n=o[i++],t[n]);return e}},function(e,t,n){var o=n(1).document;e.exports=o&&o.documentElement},function(e,t,r){var n=r(2),o=r(5),i=function(e,t){if(o(e),!n(t)&&null!==t)throw TypeError(t+": can't set as prototype!")};e.exports={set:Object.setPrototypeOf||("__proto__"in{}?function(e,n,o){try{(o=r(11)(Function.call,r(49).f(Object.prototype,"__proto__").set,2))(e,[]),n=!(e instanceof Array)}catch(t){n=!0}return function(e,t){return i(e,t),n?e.__proto__=t:o(e,t),e}}({},!1):undefined),check:i}},function(e,t,n){var o=n(31),r=n(20),i=n(12),u=n(19),s=n(9),a=n(17),l=Object.getOwnPropertyDescriptor;t.f=n(3)?l:function(e,t){if(e=i(e),t=u(t,!0),a)try{return l(e,t)}catch(n){}if(s(e,t))return r(!o.f.call(e,t),e[t])}},function(e,t,n){var o=n(8).f,r=Function.prototype,i=/^\s*function ([^ (]*)/;"name"in r||n(3)&&o(r,"name",{configurable:!0,get:function(){try{return(""+this).match(i)[1]}catch(e){return""}}})},function(e,t,n){"use strict";var o=n(0),r=n(35)(2);o(o.P+o.F*!n(15)([].filter,!0),"Array",{filter:function(e){return r(this,e,arguments[1])}})},function(e,t,n){var o=n(53);e.exports=function(e,t){return new(o(e))(t)}},function(e,t,n){var o=n(2),r=n(54),i=n(36)("species");e.exports=function(e){var t;return r(e)&&("function"!=typeof(t=e.constructor)||t!==Array&&!r(t.prototype)||(t=undefined),o(t)&&null===(t=t[i])&&(t=undefined)),t===undefined?Array:t}},function(e,t,n){var o=n(24);e.exports=Array.isArray||function(e){return"Array"==o(e)}},function(e,t,n){"use strict";var o=n(0),r=n(35)(1);o(o.P+o.F*!n(15)([].map,!0),"Array",{map:function(e){return r(this,e,arguments[1])}})},function(e,t,n){"use strict";var o=n(0),r=n(25)(!1),i=[].indexOf,u=!!i&&1/[1].indexOf(1,-0)<0;o(o.P+o.F*(u||!n(15)(i)),"Array",{indexOf:function(e){return u?i.apply(this,arguments)||0:r(this,e,arguments[1])}})},function(e,t,n){"use strict";var i=n(22),u=n(2),s=n(58),a=[].slice,l={};e.exports=Function.bind||function(t){var n=i(this),o=a.call(arguments,1),r=function(){var e=o.concat(a.call(arguments));return this instanceof r?function(e,t,n){if(!(t in l)){for(var o=[],r=0;r<t;r++)o[r]="a["+r+"]";l[t]=Function("F,a","return new F("+o.join(",")+")")}return l[t](e,n)}(n,e.length,e):s(n,e,t)};return u(n.prototype)&&(r.prototype=n.prototype),r}},function(e,t){e.exports=function(e,t,n){var o=n===undefined;switch(t.length){case 0:return o?e():e.call(n);case 1:return o?e(t[0]):e.call(n,t[0]);case 2:return o?e(t[0],t[1]):e.call(n,t[0],t[1]);case 3:return o?e(t[0],t[1],t[2]):e.call(n,t[0],t[1],t[2]);case 4:return o?e(t[0],t[1],t[2],t[3]):e.call(n,t[0],t[1],t[2],t[3])}return e.apply(n,t)}},function(e,t,n){n(60)("match",1,function(o,r,e){return[function(e){"use strict";var t=o(this),n=e==undefined?undefined:e[r];return n!==undefined?n.call(e,t):new RegExp(e)[r](String(t))},e]})},function(e,t,n){"use strict";var s=n(7),a=n(21),l=n(4),c=n(14),p=n(36);e.exports=function(t,e,n){var o=p(t),r=n(c,o,""[t]),i=r[0],u=r[1];l(function(){var e={};return e[o]=function(){return 7},7!=""[t](e)})&&(a(String.prototype,t,i),s(RegExp.prototype,o,2==e?function(e,t){return u.call(e,this,t)}:function(e){return u.call(e,this)}))}},function(e,t,n){"use strict";n(33),t.__esModule=!0,t["default"]=void 0,n(37),n(34);var g=n(16);function o(e,t){return(o=Object.setPrototypeOf?Object.setPrototypeOf.bind():function(e,t){return e.__proto__=t,e})(e,t)}var a=function a(r,i,u){var s;return function(){var e=this,t=arguments,n=function n(){s=null,u||r.apply(e,t)},o=u&&!s;clearTimeout(s),s=setTimeout(n,i),o&&r.apply(e,t)}},r=function(r){function e(){for(var e,t=arguments.length,n=new Array(t),o=0;o<t;o++)n[o]=arguments[o];return(e=r.call.apply(r,[this].concat(n))||this).state={bump:!1,debounced:!1},e}(function n(e,t){e.prototype=Object.create(t.prototype),o(e.prototype.constructor=e,t)})(e,r);var t=e.prototype;return t.componentWillMount=function(){var e=this;this.debounceStatusUpdate=a(function(){if(!e.state.debounced){var t=!e.props.isInFocus||e.props.validChoiceMade;e.setState(function(e){return{bump:!e.bump,debounced:!0,silenced:t}})}},1400)},t.componentWillReceiveProps=function(e){e.queryLength;this.setState({debounced:!1})},t.render=function(){var e=this.props,t=e.id,n=e.length,o=e.queryLength,r=e.minQueryLength,i=e.selectedOption,u=e.selectedOptionIndex,s=e.tQueryTooShort,a=e.tNoResults,l=e.tSelectedOption,c=e.tResults,p=this.state,f=p.bump,d=p.debounced,h=p.silenced,m=o<r,v=0===n,y=i?l(i,n,u):"",b=null;return b=m?s(r):v?a():c(n,y),this.debounceStatusUpdate(),(0,g.createElement)("div",{style:{border:"0",clip:"rect(0 0 0 0)",height:"1px",marginBottom:"-1px",marginRight:"-1px",overflow:"hidden",padding:"0",position:"absolute",whiteSpace:"nowrap",width:"1px"}},(0,g.createElement)("div",{id:t+"__status--A",role:"status","aria-atomic":"true","aria-live":"polite"},!h&&d&&f?b:""),(0,g.createElement)("div",{id:t+"__status--B",role:"status","aria-atomic":"true","aria-live":"polite"},h||!d||f?"":b))},e}(g.Component);(t["default"]=r).defaultProps={tQueryTooShort:function(e){return"Type in "+e+" or more characters for results"},tNoResults:function(){return"No search results"},tSelectedOption:function(e,t,n){return e+" "+(n+1)+" of "+t+" is highlighted"},tResults:function(e,t){return e+" "+(1===e?"result":"results")+" "+(1===e?"is":"are")+" available. "+t}}},function(e,t,n){"use strict";t.__esModule=!0,t["default"]=void 0;var o=n(16),r=function i(e){var t=e.className;return(0,o.createElement)("svg",{version:"1.1",xmlns:"http://www.w3.org/2000/svg",className:t,focusable:"false"},(0,o.createElement)("g",{stroke:"none",fill:"none","fill-rule":"evenodd"},(0,o.createElement)("polygon",{fill:"#000000",points:"0 0 22 0 11 17"})))};t["default"]=r}])});
2 | //# sourceMappingURL=accessible-autocomplete.react.min.js.map


--------------------------------------------------------------------------------