fix(a11y): always enable continue button on FindProperty select page #3143
Conversation
| arrowStyle="light" | ||
| labelStyle="static" | ||
| /> | ||
| </ErrorWrapper> |
There was a problem hiding this comment.
Wrapping the web component in our error wrapper isn't perfect because it means the error message & select label will be out of normal order, with the error message above the label rather than below. I suspect the underlying markup may be a bit imperfect and disconnected too - but haven't inspected closely yet.
I see a couple possible ways forward:
- We choose not to address this "usability" feedback - on this page or this whole component?
- We always enable the continue button as suggested but ignore this style inconsistency for now if we confirm the markup is okay? It'll never be visible at the same time as the postcode error message, so hard to notice
- We update our web component code to implement an error wrapper directly there (and then create/pass a new
errorprop here?)- Looking through all the alpha gov examples of this component, none of them have error handling 🫠 so we'll have to make a number of decisions ourselves here about how to implement https://alphagov.github.io/accessible-autocomplete/examples/
- This is probably ~1 more day of work. So feasible to still get across the line this week, but not trivial !
- Other suggestions?
There was a problem hiding this comment.
Notes from dev call:
- The right move will be to add error handling & the error wrapper directly in the web component
- We'll want to additionally consider what this means for the autocomplete's current error state which is an icon & message like "No addresses in this postcode" (eg should it be a disabled select?)
- As this has been flagged as usability only, and not an A-level issue, we are not going to try to implement this before our re-test next week, but rather before our next annual audit. Since there isn't a clear implementation example of this in the Gov UK alpha docs, we don't want to risk introducing an actual A-level issue at the re-test stage.
- I'll close this PR and the Trello ticket will go to top of the icebox with these notes!
| // TODO `if (isValidating)` on either page, wrap Continue button in error mesage? | ||
| if (isValidating) { | ||
| setDataFetchError("Please wait for data fetching to complete"); | ||
| } |
There was a problem hiding this comment.
After the user has selected an address on either page, we need to make a quick request to Planning Data to fetch supplmental data about it that we can't get from Ordnance Survey - and we want to prevent the user from "continuing" before this fetch completes.
We used to simply set isValid={!isValidating} on the Card, but now we want to keep the continue button always enabled.
A couple questions here:
- What's the best language for explaining this?
- Is wrapping the "Continue" button in the error right considering the proposed design in feat: Inline loading indicator for address lookup #3136 ? If not the button, what else could we wrap?
- [TODO] Prevent "Continue" button from expanding to full-screen width when in error state (see screenshot below)
There was a problem hiding this comment.
Open questions from dev call:
- Should we move the loading indicator into the button in these instances rather than wrap it in an error?
|
Removed vultr server and associated DNS entries |
Follow-on from #3141 - please review that first as fewer open questions than here !