accessible-autocomplete - npm Package Versions

3.0.1 - 2024-09-12

Fixes

• Pull request #727: Add aria-controls to aria props
• Pull request #724: Add accessibility controls to 'No results' list item
• Pull request #729: Move aria-labelledby into computed menu props

3.0.0 - 2024-04-19

Breaking changes

Verify your code does not rely on removed polyfills

Following on from our previous announcement, the accessible autocomplete code is no longer transpiled and polyfilled to support IE8-10.

However, because the polyfills create or extend global objects, you might have other code in your service unintentionally relying on the inclusion of these polyfills. You might need to introduce your own polyfills or rewrite your JavaScript to avoid using the polyfilled features.

This change was introduced in pull request #612: Update packages, configs + Node.js 20.

Check for minor visual changes in the rendering of the component

We've made some style adjustments to the stylesheet shipped with the component to make its colours, height, line-height and padding match those of the latest version of GOV.UK Frontend's <input>.

If you're using this stylesheet:

• check if our style update affects the rendering of the component in your service, and adjust if necessary
• if you were adding to the default style's to match GOV.UK Frontend's input, look for CSS declarations you may now be able to remove

This change was introduced in pull request #644: Align CSS styles with GOV.UK Frontend.

New features

Options to add classes to parts of the component

Use these new options to add your own classes to parts of the component:

• inputClasses for the input element
• hintClasses for the suggestion hint (input element appearing when the text typed by the user matches the start of an option)
• menuClasses for the ul element listing the options

You can also add custom classes to the ul listing the options through the new menuAttributes option, providing a className or class property.

This change was introduced in:

• pull request #602: Add inputClasses option. Thanks to @andreyyudin for contributing this change.
• pull request #649: Update options for styling component inputs
• pull request #650: Update ways of configuring menu attributes

New class on the component's status

Use the new autocomplete__status class in your CSS (or <CSS_NAMESPACE>__status if you set the cssNamespace option) to customise the styles of the component's status element (hidden element that makes announcements to assistive technologies).

This change was introduced in pull request #620: Add className attribute to status component. Thanks to @lennym for contributing this change.

Fixes

• Pull request #621: Handle query change when the text length does not change. Thanks to @archferns for contributing this change.
• Pull request #591: Add menuAttributes to fix Axe's 'aria-input-field-name' error. Thanks to @mchughbri for contributing this change.
• Pull request #600: Fix null aria attributes. Thanks to @mark-roberts-ho for contributing this change.
• Pull request #606: Correct description of tStatusSelectedOption i18n option in README and tweak some wording for consistency with other parts of the README. Thanks to @ellamdav for contributing this change.

2.0.4 - 2022-02-07

Fixes

• Pull request #512: Make sure highlighted option is distinguishable in forced colors mode

2.0.3 - 2020-07-01

Fixes

• Pull request #415: Make React bundle work server-side in a NodeJS environment

2.0.2 - 2020-01-30

Fixes

• 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.

2.0.1 - 2019-10-07

Fixes

• Pull request #379: Ensure multiple autocompletes on one page do not have conflicting id attributes

2.0.0 - 2019-09-26

We recommend you update to the latest release using npm:

npm install accessible-autocomplete@latest

Breaking changes

You must make the following change when you migrate to this release, or your service may break.

Migrate to the new accessible focus state

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.

Fixes

Better compatibility with screen readers

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

1.6.2 - 2018-11-13

• Update all packages and add @babel/preset-env for browser polyfills. Updates Preact and avoids React 16 onFocusOut 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 |

1.6.1 - 2017-09-25

• Fix role attr by moving role='combobox' to wrapper and adding role='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

1.6.0 - 2017-07-20

• [Feature] Allow customization of the dropdown arrow. By @sventschui.