include text input clear icon in tab order

[mirrorstage]

Area or Component

The "patient search" input field found on Conduct tests, on Results, and on Patients.

Quick Summary

The patient search input fields present throughout the application use the typical pattern of presenting an x ornament/decoration once the user has entered at least 1 character. When the user clicks or taps the x, the field is cleared of all input.

However, this interactive element is not included in the tab order.

How to Replicate

1. Using a device with a keyboard, navigate to the SimpleReport demo site, then navigate to the Conduct tests tab.
2. Enter a few characters of input in the Search for a patient... field
3. The x appears in the text field at the right
4. Press the tab key

Expected

• The application shifts focus to the x

Found

• On Conduct tests, focus shifts to the Add new patient button
• On Results, focus shifts to the Add new patient button
• On Patients, at desktop width focus shifts to the How can we improve? CTA. At narrower widths, it goes to the browser URL field

Accessibility Violation

Per the digital.gov accessibility guidance found here, "user should be able to use the tab key to navigate to every interactive element on a page." This resource further references these WCAG guidelines:

• 1.3.2 Meaningful Sequence
• 2.4.3 Focus Order
• 2.4.7 Focus Visible

Action Requested

For each text input component, add the x to the tab order

Screenshots (optional)

Conduct tests

Source Code (optional)

N/A

Original Deque Issue

N/A

[BobanL]

Looked into this a little bit this morning. It seems this is clear text "x" button is something implemented by browsers. For example, Firefox does not have the "x". To resolve this issue we could either just replace the type to be "text" and set aria-role to searchbox OR possibly we can remove it the css

[mirrorstage]

Interesting -- you're right, I don't see this when I use FF.

I would tend to think that the aria approach has the edge on changing the type, feels like it makes the intention more explicit in the code. The linked doc makes the CSS approach feel dodgy.