Password Field

User stories

The following user stories can be used to understand when this component should be used, and how to know when it's been implemented correctly.

• As someone using the component, I want to be able to understand the information required from me and how it should be provided.
• As someone with a cognitive disability, I want to be able to understand if any personal information is required, for example whether it's my current password or a new password.
• As someone with a cognitive disability, I want to be able to understand any errors related to the password field, as well as how to resolve the error.
• As a keyboard-only user, I want to be able to navigate to both the input field and the visibility control, using the Tab key.
• As a keyboard-only user, I want to be able to toggle the visibility of the control, using the Enter or Space keys.
• As a screen reader user, I want the field's label to be announced when navigating to the password input field.
• As a screen reader user, I want the purpose of the visibility control, as well as its current state, to be announced when I navigate to it.
• As a screen reader user, I want any error messages relating to the password field to be announced when they become present.
• As a voice-control user, I want to be able to navigate to the password input using it's associated label.

Test steps

Use these steps to check that the date field component has been implemented correctly:

1. Turn on a screen reader.
2. Navigate to each password field using the Tab key.
3. Verify that the password field has a visible label.
4. Verify that a name is announced and that it includes the visible label.
5. Verify that using the Tab key, you can navigate to the visibility control and that a name and the current state are announced. Ensure that when the field's content is hidden, that a screen reader announces the field as being protected.
6. Verify that the visibility control can be toggled using the Enter or Space keys.

If any errors appear when the form is validated, complete the following checks:

1. Turn on a screen reader.
2. Navigate to the password field using the Tab key.
3. Verify that once the password field receives focus, that there is an announcement to convey that there is an error with this field.

---

Known defects

We're aware of the following defects and have provided ways that these can be manually resolved, until this component is updated:

• When hovering over the password visibility control, add additional styling to make the icon's colour darker, achieving a colour contrast ratio of at least 3:1 against the field's background colour.
• The password visibility control does not have a large enough target size. Add additional styling to ensure the control is at least 24px in height and width.
• This component can be used to request a user's personal information, without any way of making this information programmatically identifiable. You can resolve this by providing the input purpose with an autocomplete attribute on the password field, referencing the correct password related autocomplete value

---