[Feature]: 'Clearable' functionality for Input component

[daisygeng]

Library

React Components / v9 (@fluentui/react-components)

Describe the feature that you would like added

An input can be made clearable

from:
https://www.figma.com/file/TvHmWjZYxwtI9Tz6v5BT7E/Input?node-id=2384%3A983

Have you discussed this feature with our team

Yes, @spmonahan and Juraj

Additional context

Feature request from Teams and Office.com

Validations

• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[jurokapsiar]

Fluent UI v0 had the clear button not focusable which was causing some confusion - especially difficulties in discoverability of it by the screen reader users. Instead, ESC was used as a shortcut for clearing, but that also has not been announced and also collides with other functionality that screen readers have attached to ESC (switching modes).

Based on the feedback and after confirming with PM we decided to make the clear button focusable in the intenal Teams component that handles it. I will be courious to see what will be the decision in Fluent UI v9.

[spmonahan]

@smhigley Any initial thoughts about this the interactions discussed above?

[smhigley]

My instinct is actually the opposite -- I've never really heard screen reader users ask for a clear button to be added to regular text inputs, so I don't think it's really adding anything to the keyboard/screen reader UX of the native control. However, making it focusable would double the number of tab stops for every single text input, and also the number of form fields exposed to screen readers by shortcut/list. That seems like a significant drawback for questionable gain. I've actually discussed this exact question with a number of different screen reader users both in and outside Microsoft, and haven't heard a preference for exposing that button.

I am curious what the Teams use case was where the "x" being discoverable was desired, and also where ESC was used instead of (or in addition to?) the standard text editing keyboard interaction.

[JustSlone]

@daisygeng what is the priority of this request for partners? For instance, is this blocking adoption/migration?

[behowell]

We may want to implement this as a recipe, per RFC #25139

[daisygeng]

@daisygeng what is the priority of this request for partners? For instance, is this blocking adoption/migration?

@JustSlone Office was hoping to use it (original request came from Helen Anderson. I would check with her if it blocks adoption or if it's more of a nice to have) :)