Add clear button to text fields when focussed

Summary

Text fields currently don't display a 'X' clear button when focussed. In order to behave more like other input components, a clear button should be added within the text field component that can be toggled on or off with a prop.

💬 Description

Clear buttons enable users to quickly clear their input, this can be useful if it is longer input that may take a while to select all and delete.

However, not all situations would require a clear button. Some short text inputs may not require it as it is easier to remove the short text, or it may be accidentally clicked clearing the user input and requiring them to start again. Therefore, we should include a prop that allows this to be turned off.

If a clear button is specified, the clear button should only display when the text field is focussed. This avoids uneccessary clutter on the fields when unfocussed and avoids any accidental clicking of a clear button without having first focussed upon the field.

💰 Use value

Makes it more consistent with other input components and allows a quick method of clearing the text input.

Acceptance Criteria

Given that a text field is being implemented,
When setting its props,
Then an optional clear button can be added to the text field
And by default this setting is turned off.

Given that a text field is being implemented with a clear button,
When the text field is focussed, and it has some input,
Then the clear button should appear on the right edge of the field.

Given that a text field with a clear button exists,
When the clear button is clicked,
Then the text input should be cleared and focus should be returned to the textfield so new input can be entered,
And the clear button should be hidden as there is now no input in the text field.

Given that a text field with clear button specified is focussed and empty,
When the first character is entered,
Then the clear button should appear.

Given that a text field with clear button is specified
When tabbing through page content
Then the clear button should not be in the tabbing order, as keyboard users can use the keyboard to delete the content.

Given that a text field with clear button is specified
When interacting with a screen reader
Then the clear button's accessible name should not be announced when focussing on a filled text field.

Given that a text field with a clear button is specifed,
When a SR reader navigates to the clear button using the virtual cursor,
Then the clear buttons accessible name should be announced 'Clear entry.'
And the clear button should be able to be actioned by either space or enter key.
And focus should be moved to the text input after clear action is complete.

Additional info

Tell us anything else useful to help us understand your suggestion.
https://www.scottohara.me/blog/2022/02/19/custom-clear-buttons.html

Locate the text field component and its existing interaction and accessibility tests or entry points. Use the acceptance criteria and the linked clear-button guidance to verify the optional prop, focus behavior, keyboard and screen-reader behavior, and hidden tab order. Done means all specified states work without changing the default behavior.