USWDS - Bug: Search input uses non-standard clear button that is not available in Firefox

[anselmbradford]

Describe the bug

After entering text in the search inputs on https://designsystem.digital.gov/components/search/, a clear button is shown. I have a few questions around this:

• This uses a non-standard browser default clear button that is not supported in Firefox, so Firefox visitors will get no clear button.

• It also does not have a hover state.

• It is not accessible via the keyboard. I'm not sure if this is an issue or not. Is the expectation with a screenreader that the escape key could be used to clear the input, and it is therefore not necessary that the clear button be accessible?

Steps to reproduce the bug

1. Go to https://designsystem.digital.gov/components/search/ in Chrome.
2. Enter some text in the search input and see there is a clear button that appears.
3. Go to the same page in Firefox.
4. Enter some text in the search input and see there is no clear button.

Expected Behavior

Clear button is consistent across major browsers.

Related code

No response

Screenshots

Chrome

Firefox

System setup

No response

Additional context

This branch shows how a cross-browser (x) clear button could be created via the use of a reset button accompanying the search input. However, this may not be an optimal solution https://github.com/cfpb/consumerfinance.gov/compare/ans_global_search_fix?expand=1

Code of Conduct

• I agree to follow this project's Code of Conduct.
• I checked the current issues for duplicate bug reports.

[mejiaj]

Based on 04-09-24 Dev sync discussion...

• A11Y team will test to determine priority & severity.
• Outline on site guidance that this is a browser issue.

Adding @amycole501 & @alex-hull to sync up with @amyleadem and continue work.

[amycole501]

Using both JAWS and NVDA I don't hear the "clear" button announced. It's inoperable to both screen readers and keyboard users.

Firefox is suppressing the feature and this has been brought to the attention to other design systems. Also this jquery-archive/jquery-mobile#6467

User agents have to comply with WCAG 2.0. I suggest the issue go to Firefox.

For now, I don't recommend we prioritize a solution due to the fact that this is a single browser issue and there is an alternate means by which the user can delete content out of the field.

That said, I plan to audit the search component this sprint; I can further update this issue as my research develops.

[anselmbradford]

@amycole501 I took the reset button technique referenced above and slimmed it down to a jsfiddle at https://jsfiddle.net/9buarncv/7/ (viewable full screen at https://jsfiddle.net/9buarncv/7/show). How does that look for accessibility? My testing shows it working the same in Firefox and Chrome, but Safari does not allow tabbing to the button, which would be equivalent to the status quo of the default (x) button that shows up in Chrome. So cross-browser improvement in Chrome and Firefox, status quo in Safari (although it does make the appearance of the (x) in Safari consistent with the others).

[amycole501]

Nice solution! It worked well in both NVDA and JAWS in Chrome and Firefox. I'm not sure how much retesting we'd need to do if we implemented this solution given the constantly changing nature of browsers. However I defer @mejiaj and team to determine if the solution fits our technical standards and practices and is something we'd want to include in the component.

But from an accessibility standpoint it solves the issue of the button not being announced (it is now in both NVDA and JAWS) and it's also focusable with a keyboard.

[mejiaj]

Removed assignees because we've confirmed the issue and have potential solutions, thanks @anselmbradford.

Todo

• Engineering to look at proposed solutions
• Get the weight and complexity
• Discuss with team

[aduth]

Related: #5277