feat: Replace Select with Autocomplete in FileUploadAndLabel component
#2993
Conversation
|
Removed vultr server and associated DNS entries |
DafyddLlyr
force-pushed
the
dp/fual-autocomplete
branch
from
c071f8f to
93fef31
Compare
| variant="standard" | ||
| multiple | ||
| value={tags} | ||
| <Autocomplete |
There was a problem hiding this comment.
I know this is still WIP - but just thought I'd flag prior MUI <Autocomplete /> a11y PRs for prop reference!
- fix: set
role="status"on autocomplete because it is dynamically rendered #865 - this one highlights some obscure ones likearia-atomic,handleHomeEndKeysetc that it doesn't look like we're supporting here yet - feat: use autocomplete web component in FindProperty #887 - really detailed notes about expected behavior per device in this one (hopefully MUI component has improved enough in last ~2 years that we'll be able to pass using it this time!)
There was a problem hiding this comment.
This is super helpful thanks - will take a detailed look through.
DafyddLlyr
force-pushed
the
dp/fual-autocomplete
branch
from
2d33f71 to
95dfecb
Compare
DafyddLlyr
changed the title
Select with Autocomplete in FileUploadAndLabel componentSelect with Autocomplete in FileUploadAndLabel component
There was a problem hiding this comment.
Another nice bonus of this approach is that testing this component is much simpler! With the Select we had a fairly hard time targeting the dropdown but this is now much simpler.
| * Custom Listbox component | ||
| * Used to wrap options within the autocomplete and append a custom element above the option list | ||
| */ | ||
| const ListboxComponent = forwardRef<typeof Box, PropsWithChildren>( |
There was a problem hiding this comment.
I spent a fair bit of time trying to take this component out of the scope of SelectMultiple and pass in the closePopper() function as a prop without much luck.
| const handleChange = ( | ||
| _event: React.SyntheticEvent, | ||
| value: Option[], | ||
| reason: AutocompleteChangeReason, |
There was a problem hiding this comment.
Another nice DX bonus - the Autocomplete has a much nicer API for handling changes as it expects items to be added/removed/changed.
In the Select we had to handle a single string being split up.
- Markdown working - Matches combobox example from report
DafyddLlyr
force-pushed
the
dp/fual-autocomplete
branch
from
422476a to
a141dd9
Compare
DafyddLlyr
added
the
UAT
|
This Pizza has now been handed across to DAC for re-testing. |
|
Thanks @ianjon3s ! Merged, and I'll open a prod deploy shortly |
What does this PR do?
FileUploadAndLabelmodalWhy do we need to do this?
After spending a good while amending the markup of the
SelectI realised it wasn't possible to meet the requirements laid out the in report. These are the two fundamental barriers I hit -role="option"on the children of the Select - we requirerole="group"ulelement is forced as the first child elementUsing the Autocomplete allows us access to grouping, which allows us to inject some custom HTML elements in the order and location we require. I've been aiming to match the following example of a grouped listbox shared in the report - https://www.w3.org/WAI/ARIA/apg/patterns/listbox/examples/listbox-grouped/
Potential issues
As this autocomplete in a HTMLInputunder the hood, users can natively type here. I've disabled this to match the current user experience however this may be problematic in itself.Update: At the dev call on 10/04 we agreed to reinstate typing (see 5769135). This is seen as an additional helpful feature, and resolves the accessibility concerns raised above.
Outstanding visual regressions
There are a few small visual disparities between the two versions which I've not yet tackled.