Giters

openedx / paragon

💎 An accessible, theme-ready design system built for learning applications and Open edX.

Home Page:https://paragon-openedx.netlify.app

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

SearchField requires 2 clicks to interact with its IconButtons (clear/search) when input is focused

adamstankiewicz opened this issue · comments

commented

Improvements

The SearchField component allows users to type into an input field and then click one of two conditional icon buttons:

  • Clear. Resets the input to be empty.
  • Submit. Submits the current value in the input.

However, when the user has focus in the input field, it requires 2 clicks for the user to actually click the icon button. The first seemingly removes focus from the input field and makes the icon button hoverable; the second click works as expected.

From a usability/a11y POV, it should not require 2 clicks for a user to interact with one of the icon buttons in the search field.