Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Replace dfe-autocomplete with accessible-autocomplete #1859

Merged
merged 5 commits into from
Sep 27, 2024
Merged

Conversation

tvararu
Copy link
Member

@tvararu tvararu commented Sep 27, 2024

The custom CSS seems to not be as accessible as the upstream one when using VoiceOver. It doesn't allow choosing from a list of options by swiping left/right in the focus order.

Add an autocomplete stimulus controller that's based on the implementation in the prototype.

See commits.

Screenshots

image

The custom CSS seems to not be as accessible as the upstream one when
using VoiceOver. It doesn't allow choosing from a list of options by
swiping left/right in the focus order.
The stylesheet couldn't be imported using the sass @import directive, so
instead we link to it as a separate stylesheet file instead of bundling
it in. This is probably more cache-friendly as the autocomplete upstream
CSS will change less frequently than our application bundle CSS.
This is copied from the prototype and includes some overrides to make it
align to the NHS styles better.
This allows us to specify `data-module="autocomplete"` on a `<select>`
element to enhance it to an autocompleteapp/javascript/controllers/autocomplete_controller.js.
Use the upstream one instead of the DFE one which has been removed.
@tvararu tvararu temporarily deployed to mavis-pr-1859 September 27, 2024 11:37 Inactive
Copy link

sonarcloud bot commented Sep 27, 2024

@tvararu tvararu merged commit c7ff01a into main Sep 27, 2024
12 checks passed
@tvararu tvararu deleted the autocomplete branch September 27, 2024 11:45
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants