Street picker - smbc-digital/patterns GitHub Wiki
Contents
β User needs β How it works β Status β Error messages β Styling decisions β Accessibility statement β Examples β Discuss this pattern
User needs
This pattern is to help users provide a street location via "Street lookup".
How it works
The street picker identifies a Stockport street by having users entering a street name and selecting from a drop-down list.
Street picker
When using the address picker, you should:
- Use inset text to inform the user there is a restriction to Stockport streets only.
- Allow people to enter a street name in upper or lower case.
Do not spellcheck userβs input
To make sure the userβs input will not be spellchecked, set the spellcheck attribute to false.
Status
Working progress
Error messages
Use an error message to identify when the user has not provided the information in the format you are expecting. To help the user, you should show an error message that allows them to fix the problem.
For styling follow GOV.UK
| Label | Error state | Error messages |
|---|---|---|
| Street lookup | If the text field is blank | Enter the street name |
| Select the street below | If the user hasn't selected a street | Select the street from the list |
Styling decisions
SMBC Design System
The 'Change' link on the Select the street page will always be considered by browsers as a visited link as it will take the user back to the previous page to change their input. It is therefore accepted that this link will always be the 'visited' link colour as per the Design System.
Accessibility statement
This pattern has a rating of AA.
Accessibility testing is the process of testing the pattern for ease of use with specific disabilities. Please see our accessibility guidelines.
Improvements
To make it AAA, we need to:
- Add...