@financial-times/accessible-autocomplete
Advanced tools
Changelog
3.0.0 - 2024-04-19
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.
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:
This change was introduced in pull request #644: Align CSS styles with GOV.UK Frontend.
Use these new options to add your own classes to parts of the component:
inputClasses
for the input
elementhintClasses
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 optionsYou 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:
inputClasses
option. Thanks to @andreyyudin for contributing this change.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.
menuAttributes
to fix Axe's 'aria-input-field-name' error. Thanks to @mchughbri for contributing this change.