"disabled" options are still used by autocomplete

[philgyford]

If I have a select field like this:

<select name="test" id="test">
  <option value="">Select...</option>
  <option value="a">A</option>
  <option value="b" disabled>B</option>
  <option value="c">C</option>
</select>

And enable autocomplete like this:

<script>
  accessibleAutocomplete.enhanceSelectElement({
    defaultValue: '',
    selectElement: document.querySelector('#test')
  });
</script>

Then if I type "B" in the autocomplete input field, B is chosen. I would expect it to not be available.

(I can imagine there might be good reasons why gov.uk doesn't use disabled -- maybe it's poor accessibility? Some other reason? In which case I understand why this doesn't support the option :) But as an outsider using this otherwise excellent tool, this was unexpected behaviour.)

[NickColley]

Hey Phil,

We generally don't encourage the use of disabled states with inputs as they don't give good feedback to users as you've imagined.

Can you explain why you might disable an option rather than removing it from the option lists entirely?

[philgyford]

I'm not saying the below is best practice but I'm working on a project I inherited and I am where I am... :)

I wish to disable/enable options in the select field based on what other choices are made in a separate part of my form. Doing this dynamically is a separate problem, but I noticed this "bug" when trying to set the form's initial state.

I can understand this particular use-case is not one that gov.uk is likely to use, or encourage :) I just expected it to ignore disabled options.

[NickColley]

Sorry I did not mean to suggest this is something you were proposing as best practice.

More just wondering if you can avoid this bug by changing the behaviour of the original list of options?

I agree that it's unexpected behaviour that we should consider handling in the future.

[philgyford]

No apology required - I didn't think you were suggesting I was proposing... etc!

Given the dynamic nature of the form, if I was to remove the un-needed options from the select field, I would have to rebuild the field's list of options entirely whenever other choices changed, rather than only changing the disabled state on the relevant options.

Anyway, this specific problem isn't yours to worry about, I just wanted to flag up the unexpected ignoring of disabled attributes. Have a good weekend Nick!

[NickColley]

You too Phil,

If you wanted to work around it you could copy the wrapper.js file for your project and add handling to filter out disabled options here: https://github.com/alphagov/accessible-autocomplete/blob/master/src/wrapper.js#L24

It's not immediately clear to me if we could always consider disabled select options as hidden in the autocomplete, or if they should be shown in a similar fashion to the select element.

I'm going to assign awaiting-triage to this for the team to triage together. :)

[edwardhorsford]

@philgyford I designed the original Accessible Autocomplete together with @tvararu.

I don't think we explicitly didn't support it so much as not building for it as it wasn't a priority or used by GOV.UK. In other cases where services can't control the markup we've provided some disabled styles -but in this case we'd have expected the service must have control of the markup so can avoid disabled, etc.

The sorts of selects you get in government services don't generally have need for disabled items (clothing sizes out of stock, etc)

@nickcolley I assume the preferred solution would be for the disabled options to still be shown, but somehow indicated as not selectable.

I can see good reasons why someone might want a disabled option - though it might take some work - as you'd need to work out how to communicate to this to AT, and handle focus keyboard movement through the options.

[hannalaakso]

@philgyford We’re prioritising bug fixes over new feature development for the accessible autocomplete right now so we won't be able to work on this at the moment. But thanks for flagging it, it's good to have it recorded 👍