Page MenuHomePhabricator

TextInput: Improve accessibility of the clear icon
Open, LowPublic

Description

Background

T326525 brought up some design issues with the TextInput's clear icon:

  1. It provides no feedback on interaction (hover and active)
  2. It is very small and may not provide a large enough touch or pointer area
  3. Semantically, it may make more sense to use a button rather than a clickable icon

During the exploration on that task, we decided that it is not important enough to use a <button> element since the clear icon is hidden from assistive technology and not accessible via keyboard anyway. However, the design implications of items 1 and 2 still stand.

User stories

As a user, I need to understand that the clear icon is interactive and effective

Design spec

(to be added)


Acceptance criteria

  • Provide a design spec that demonstrates the interactive states (hover and active) of the clear icon
  • Determine the size of the icon itself and (if applicable) the size of the background area that is displayed on hover/active