The Australian Government coat of Arms

Communities of practice

Communities of practice

Text Inputs


#1

Please provide any feedback for the Text Inputs component.

You can also view the component page on our documentation site for the Text Inputs component.


#2

Moved from: https://github.com/govau/uikit/issues/306

Text input focus border is red

I know that colour isn’t everything, but when a text input is completed and you tab through and focus them, their border is red which as a user makes me think it’s invalid. What’s the reason for this?

@jonathaningram The dark orange on white and bright orange on dark was done to maximise colour contrast from the link colour and text color. While still being accessible.

Currently we are missing error messages which we would strongly recommend to provide with a form that has errors. @TrebBrennan has done a rough mockup of this and is a great suggestion for a new component.

@alex-page yeah the bright orange on dark is cool, but the dark orange on white just looks red to me. And I know that’s very subjective, but aren’t 99% of website forms using red borders/lines to indicate error states?

Gmail (this is the state I see when I’ve submitted an invalid form):

Gold (this is focus state):

@jonathaningram I’ll see what we can do to try and address this issue.

I 100% agree with you that our focus color looks like an error color. It’s very difficult to get an orange that meets accessibility, maybe we should change our focus color to a purple #B546FF or something else.

If you take orange and find the nearest accessible color for a 3.5 color contrast ratio you receive #B07200 which is a pretty ugly color.

@TrebBrennan any ideas, can you share that work with the error messages?

I think this is good feedback, it’s been niggling thought for a while so it’s probably something we need to consider.

We picked a focus colour that standouts quite dramatically against the blue hues of the default palette. So that it’s very obvious, similar to https://www.gov.uk/ but theirs doesn’t pass a 3:1 contrast ratio which we would like to.

I think @alex-page’s idea of a colour which has less implied meaning is a good one; I’ll add an enhancement label to this issue and assign myself… but if anyone want to take a stab at it, it would be appreciated.


#3

Hi all. I’d be interested to see what’s been done currently regarding the focus states as I agree with the points raised above, the orange definitely feels more ‘red’.

I’ve currently been experimenting with gold and looking at a form validation scenario the focus state in the middle of a form with errors is really confusing:
https://casaux.github.io/uitoolkit/validate.html

I’d also be really interested in the current state of validation patterns and knowing when they might be ready?


#4

Hey James, thanks for the feedback! We have transitioned to a purple focus state now.

In terms of validation patterns we have some rough prototypes maybe @treb can dig them up :slight_smile:


#5

These images below were just laying about, so they are very rough, but when we were working on the colour system I had a quick stab at how it could work on the dark themes as well while still passing colour contrast.








#6

Any chance the documentation page could be expanded to include an example of:

<input type="password" />

From:

Specifics of how the entry process works may vary from browser to browser; mobile devices, for example, often display the typed character for a moment before obscuring it, to allow the user to be sure they pressed the key they meant to press; this is helpful given the small size of keys and the ease with which the wrong one can be pressed, especially on virtual keyboards.


#7

I think that is valid, we are going to do a form template page in the near future, this could be a part of that work.

We have a lot of work to be done with inline alerts and errors in forms as well.

I have made an issue to be triaged in the next sprint:
https://github.com/govau/uikit/issues/576