search

department-of-veterans-affairs / vets-design-system-documentation

Repository for design.va.gov website
https://design.va.gov
37 stars 56 forks source link

Clear input X icon is not keyboard accessible on search component #2696

Open laflannery opened 4 months ago

laflannery commented 4 months ago

Bug Report

What happened

On the Search input component I was using my keyboard to navigate and I was not able to access the X icon to clear my input

What I expected to happen

I should be able to access the X icon with the keyboard and then activate it to clear the input in the search component just as I would when using my mouse.

Reproducing

Steps to reproduce:

  1. Type a term into the search component
  2. Using the keyboard, tab through the elements
  3. Notice that you can tab to and focus on the input field and the search button. The X icon is skipped over.

Urgency

How urgent is this request? Please select the approriate option below and/or provide details

Details

I also tested this on USWDS and noticed that this occurs there as well. After some investigation, Dan and Jami discovered that this is a browser "bug", not USWDS or VADS code issue. You can see the same issue on MDN example

humancompanion-usds commented 3 months ago

@rsmithadhoc - Please review this and set a defect level label on this issue. Thanks!

caw310 commented 2 weeks ago

Hey team! Please add your planning poker estimate with Zenhub @Andrew565 @ataker @harshil1793 @it-harrison @jamigibbs @micahchiang @powellkerry @rmessina1010 @rsmithadhoc

jamigibbs commented 2 weeks ago

The search component as built by USWDS is using the browser native type=search on the input element. This is what is displaying the X when text is typed.

Keyboard access to clear the value is done using the Esc key on the keyboard (verified with Chromium. I'm not sure about others). I don't know that we can control tabbing into that X because the behavior is up to the user agent.

humancompanion-usds commented 2 weeks ago

@laflannery - Was your question to the USWDS team around this issue related to this request?

laflannery commented 2 weeks ago

@humancompanion-usds I did ask them about that issue as well:

So if, based on this, it would be more efficient to close or hold this until there's a bit more from the USWDS side with everything else on your plate that makes sense.