PLATUI-3353: proof of concept - how could we integrate accessible autocomplete fixes from adam's patch

[oscarduignan]

proposal is that rather than copying adam's patches, because we're in charge of initialising the autocomplete elements, we can do it more simply/safely

the issues that need fixing

• doesn't get error styles
• when configured to "show all options" doesn't have a visible dropdown arrow to make them look like a select
• doesn't get hints and error messages associated with via aria-describedby, so not announced when using screen reader
• previously selected answer is retained when you enter an invalid option or didn't actually choose the matching option (if not using auto select)

adam's patch checks if there is an autocomplete on the page, and then polls until it's been setup by the accessible autocomplete javascript - we shouldn't need to do this because we are in charge of initialising the autocompletes

we can simplify the applying error styles by moving it into our css, where adam's patch is updating the dom to set a govuk error class on the autocomplete after the field changes

the aria-described by fix we can run directly after we call enhanceSelectElement

the issue with previouslySelected answers being retained we can fix by overriding the onConfirm handler for options - which triggers on blur of the field (regardless of auto select being enabled) and clearing the currently value of the underlying select, where adam's patch is hooking into the form submit

if we apply the patches in this way, then they should also work for any number of autocompletes on one page

if people are manually init'ing the autocompelte rather than using our data-module="hmrc-accessible-autocomplete" then they would just need to copy the js patches into their usage, which wouldn't be to onerous, since ideally not many people will be using that approach

[oscarduignan]

the test failures are visual regression tests where dropdown arrow is now visible correctly, if we go ahead with this, we probably want to look at the position of the dropdown arrow when the font has been scaled up, can't remember how we're changing the font size for this - assuming we're changing the root font size maybe

[oscarduignan]

flagged up upstream some of the fixes just in case they can at some point be sorted there, since they are so small https://github.com/alphagov/accessible-autocomplete/pull/769/files