Repository navigation
USWDS - Bug: Search input uses non-standard clear button that is not available in Firefox #5834
Description
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
- Go to https://designsystem.digital.gov/components/search/ in Chrome.
- Enter some text in the search input and see there is a clear button that appears.
- Go to the same page in Firefox.
- 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.
Activity
mejiaj commentedon Apr 11, 2024
Based on 04-09-24 Dev sync discussion...
Adding @amycole501 & @alex-hull to sync up with @amyleadem and continue work.
amycole501 commentedon Apr 15, 2024
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 commentedon Apr 25, 2024
@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 commentedon Apr 29, 2024
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.
22 remaining items
mgifford commentedon May 16, 2026
I can confirm that the x still doesn't work in Firefox here, although it does in Chrome:
https://designsystem.digital.gov/components/search/
I noticed a problem that the "x" to clear the image isn't keyboard accessible.
However looking at other design sytems with this:
https://design.sis.gov.uk/components/inputs/search-bar/accessibility/
or even closer to home:
https://design.va.gov/components/search-input
The code proposed here also seems to work in Firefox and Chrome:
https://jsfiddle.net/9buarncv/7/
but It was too bad that the Search button wasn't also included in his example.
chandracarney commentedon Sep 10, 2026
In June, we discussed that this needs further testing and triage. Here are our initial thoughts:
ryparker commentedon Sep 18, 2026
I'm closing this as not planned and continuing the proposal for an optional clear button in discussion #6971.
The CFPB implementation and the earlier JAWS/NVDA results are useful starting points. We still need to weigh the added markup and events, server-populated values, behavior without JavaScript, and the risk of conflicts with future browser changes. Standard keyboard text editing remains available; we haven't approved replacing the native control by default.
The discussion includes the proposal and compatibility requirements. GitHub's issue conversion didn't complete, so it links back here to preserve the original report and comments. The usability concern remains open for discussion.