- Pull request #388: Set aria-selected as a string instead of a boolean to avoid being dropped.
- Pull request #400: Remove pointer events check.
- Pull request #406: Make hint padding match input padding.
- Pull request #407: Use a div element to wrap enhanced component.
- Pull request #410: Fix long clicks not selecting options.
We recommend you update to the latest release using npm:
npm install accessible-autocomplete@latest
You must make the following change when you migrate to this release, or your service may break.
The focus state now meets the new WCAG 2.1 level AA requirements.
You do not need to do anything if you’re using Sass.
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 into your CSS file.
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.
Pull request #360: Update focus styles to meet WCAG 2.1 level AA non-text contrast requirements.
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.
Screen readers will now consistently tell users:
- when users have entered too few characters in the input field
- the correct number of search results, and what the results are
- which result users have highlighted
- how to use autocomplete in different screen readers - by reading hidden hint text
Screen readers will also now avoid telling users information they do not need to know after they highlight an option.
Thanks to Mark Hunter, Chris Moore and everyone at HMRC who worked on these improvements.
Pull request #355: Refinements to address accessibility issues
-
Update all packages and add
@babel/preset-env
for browser polyfills. Updates Preact and avoids React 16onFocusOut
warnings - thanks @colinrotherham (#316) -
Fix mouse event issues in IE9-11 including looping
mouseout
and click event being prevented on child elements (e.g. bold text) - thanks @colinrotherham (#310) -
Fix position being incorrectly reported as '1 of n' regardless of actual position in list – thanks @PRGfx (#291)
-
Fix spacebar input not being registered when seeing 'No results found' message – thanks @AdenFraser (#287)
-
Update following dependencies (from "Current" to "Wanted"). This fixes failing WebdriverIO tests and updates JS Standard to use eslint 4.
Package | Current | Wanted | Latest |
---|---|---|---|
babel-eslint | 8.0.0 | 8.2.6 | 8.2.6 |
babel-loader | 7.1.0 | 7.1.5 | 7.1.5 |
babel-plugin-transform-decorators-legacy | 1.3.4 | 1.3.5 | 1.3.5 |
babel-register | 6.24.1 | 6.26.0 | 6.26.0 |
babel-runtime | 6.23.0 | 6.26.0 | 6.26.0 |
chai | 4.0.2 | 4.1.2 | 4.1.2 |
chalk | 2.0.1 | 2.4.1 | 2.4.1 |
copy-webpack-plugin | 4.0.1 | 4.5.2 | 4.5.2 |
coveralls | 2.13.1 | 2.13.3 | 3.0.2 |
cross-env | 5.0.1 | 5.2.0 | 5.2.0 |
csso-cli | 1.0.0 | 1.1.0 | 1.1.0 |
husky | 0.14.1 | 0.14.3 | 0.14.3 |
karma | 1.7.0 | 1.7.1 | 2.0.4 |
karma-coverage | 1.1.1 | 1.1.2 | 1.1.2 |
karma-mocha-reporter | 2.2.3 | 2.2.5 | 2.2.5 |
karma-webpack | 2.0.3 | 2.0.13 | 3.0.0 |
mocha | 3.4.2 | 3.5.3 | 5.2.0 |
npm-run-all | 4.0.2 | 4.1.3 | 4.1.3 |
phantomjs-prebuilt | 2.1.14 | 2.1.16 | 2.1.16 |
preact | 8.1.0 | 8.2.9 | 8.2.9 |
sinon-chai | 2.11.0 | 2.14.0 | 3.2.0 |
source-map-loader | 0.2.1 | 0.2.3 | 0.2.3 |
standard | 10.0.2 | 11.0.1 | 11.0.1 |
wdio-mocha-framework | 0.5.10 | 0.5.13 | 0.6.2 |
wdio-sauce-service | 0.4.0 | 0.4.10 | 0.4.10 |
wdio-selenium-standalone-service | 0.0.8 | 0.0.10 | 0.0.10 |
wdio-spec-reporter | 0.1.0 | 0.1.5 | 0.1.5 |
webdriverio | 4.8.0 | 4.13.1 | 4.13.1 |
webpack | 3.0.0 | 3.12.0 | 4.16.1 |
webpack-dev-server | 2.5.0 | 2.11.2 | 3.1.4 |
webpack-sources | 1.0.1 | 1.1.0 | 1.1.0 |
- Fix role attr by moving
role='combobox'
to wrapper and addingrole='textbox'
to the input. By @tobias-g - Fix examples page by removing unrequired npm package
v8-lazy-parse-webpack-plugin
- Fix scrolling on iOS by reverting #85, new issue raised to find better fix for clicking custom suggestions #177
- Fix selection and timeout race condition. By @tobias-g
- Fix dropdown on IE to ensure it isn't focusable. By @tobias-g
- [Feature] Allow customization of the dropdown arrow. By @sventschui.
- [Feature] Add ability to translate texts. Relates to #96. By @sventschui.
- Allow space to confirm an option, fixes #98.
- Add support for navigating lists on IE9, 10 and 11, fixes #193.
- Fix use of HTML entities in enhanced select options. #151. By @dracos.
- [Feature] Add option to show all values on dropdown. By @joelanman.
- Redirect keypresses on an option to input, fixes #179.
- Fix
autoselect: false
not working when usingenhanceSelectElement
.
- [Feature] Add support for passing an array of strings to
source
. By @joelanman.
- Fix progressive enhancement in FireFox < 48. By @revilossor.
- [Feature] Export Preact and React bundles.
- [Feature] Add
required
option. By @samtsai.
- Update preact dependency to v8.1.0.
- Add support for handling null/placeholder options when using
enhanceSelectElement
. UsepreserveNullOptions: true
to include options withvalue=''
in the autocomplete results when enhancing a select element. By @lennym.
- This release does not contain any changes compared to the previous one and is due to a mistake in our build scripts.
- Do not copy
name
attribute when usingenhanceSelectElement
. By @lennym.
- Add support for an empty
defaultValue
when enhancing a select element. By @lennym.
- Update
style
property in package.json to reflect updated filename. By @lennym.
- [Breaking] Default
autoselect
totrue
when usingenhanceSelectElement
. - [Breaking] Make
id
a required attribute. - [Breaking] Rename
onSelect
toonConfirm
. - [Breaking] Rename
selectOnBlur
toconfirmOnBlur
. - Fix an issue where users couldn't click on custom suggestions on Chrome.
- [Breaking] Rename component from
accessible-typeahead
toaccessible-autocomplete
. - Default
defaultValue
when progressively enhancing. - Throw an error when
enhanceSelectElement
is called without aselectElement
. - Throw errors when
accessibleAutocomplete
is called withoutelement
orsource
.
- Test the typeahead with end to end tests.
- Don't display hints on browsers that don't support pointer-events.
- [Breaking] Rename
dist/styled.min.css
todist/accessible-typeahead.min.css
. - [Breaking] Rename library main export from
AccessibleTypeahead
toaccessibleTypeahead
. - Fix aria status region to more reliably trigger when the number of results stay the same.
- Fix hint rendering and being picked up by assistive technologies.
- More aria status region above input so it's more easily picked while navigating.
- Add touchEnd handler for iOS and touch devices, fixes custom suggestions.
- Add
style
declaration in package.json - Add support for UMD/commonjs module definition.
- Minify
styled.css
for production.
- [Breaking] Don't focus suggestions when hovering them, add
:hover
CSS class. - Add
showNoOptionsFound
property to allow users to disable this behaviour. - Pass through unrecognised key events to input, allowing users to continue typing when they are focusing an option.
- Don't prepopulate
defaultValue
inenhanceSelectElement
.
- Pass actual selected object into
onSelect
. - Add
selectOnBlur
property to allow users to disable this behaviour. - Add
placeholder
property.
- Add
templates.inputValue
andtemplates.suggestion
properties. These allow users to override how the suggestions are displayed.
- Add
AccessibleTypeahead.enhanceSelectElement
function. - Add
onSelect
property.
- Add ability to specify a
defaultValue
to prefill the input. - When user has selected an option with the keyboard, blurring will select.
- When user has no selected but autoselect is on, blurring will select.
- Hovering no longer selects, just focuses.
- When hovering out of component, focus returns to selected.
- Allow enter to submit forms when menu isn't opened.
- Hide results when going under minLength.
- [Breaking] Add
displayMenu
property. The default isinline
which was not the previous default. - CSS colour changes, and more properties moved away from inline styles.
- Turn off native browser autocomplete so it doesn't interfere with typeahead overlay.
- Change the content and styling of the 'No results found' feature.
- Display "No options found" when there are no results.
- 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. - 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.
- Add
minLength
property, which:- Tells the aria region to display text that the user should type in more characters;
- Doesn't call the
source
until that lower limit is reached.
- Select text only when component is unfocused.
- Fix focus/blur events on IE11.
- Fix value of
aria-expanded
attribute to be based onmenuOpen
. - Remove
aria-activedescendant
attribute when no option selected. - Set
aria-selected
on options when they are focused. - Fix clicking on options on Safari.
- Use a darker blue in the styled example for better contrast ratios.
- Don't close menu when blurring options or input on iOS, to allow VoiceOver users the ability to select from the available options.
- Autoselect entire text region when focusing into the input.
- Don't close menu when closing the keyboard on iOS, to allow VoiceOver users the ability to select from the available options.
- Add ability to set
name
attribute on input.
- [Breaking] Change the CSS classes to our own instead of the jQuery typeahead ones.
- Allow importing styling from file in
examples/styled.css
. - Tweak the styled example to fix two Safari bugs:
- fix scroll bar appearing in menu where none is necessary;
- fix weird margin separating the input from the menu.
- Don't apply focused CSS on hover, change handler to MouseOver instead of MouseMove.
- (WIP) Make enter select first option if
autoselect
is enabled. This feature is not finished yet. - Close results when focusing out of component after hovering an element.
- Update styled example:
- unbold results;
- make height of options consistent with input;
- remove top border from results menu;
- remove default focus outline on options.
- Don't display the menu when there are no options.
- Prevent accidental form submission by
preventDefault
ing on enter key. - Add form around basic example.
- Don't specify typeahead menu width inline. Allows custom CSS to override it.
- Initial release.
- Basic functionality, minimal styling, only two examples, incomplete tests.