Textinput: add tabindex=-1 to clear button

[frequent]

Shouldn't the clear button on a textinput have

 tabindex=-1 

so it must not be tabbed when filling out a form.

Shouldn't matter on mobile or when no tabbing is available, but when filling a large form on a PC having to tab through all of the close buttons is quite annoying.

[jaspermdegroot]

This would make the clear button inaccessible for keyboard-only users. In general that's a bad idea, but in this case it's a bit different because the clear button is only for convenience; you can still use cmd/ctrl + a and backspace to clear the input. So I say +1 but we have to make sure that screen readers don't say there is a button.

[frequent]

@uGoMobi:
I have been reading here and here. From the (little) info I get, setting tabindex="-1" should be "safe". Will make a PR

[scottgonzalez]

I would never use a clear button when I'm using the keyboard. It's only convenient when using a pointing device. TBH, I only use clear buttons on touch devices.

It's much more natural to select all and either delete or just start typing the new value when using the keyboard.

[gabrielschulhof]

Why is this milestoned 1.5.0? Can it not go into 1.4.x? @uGoMobi? @arschmitz?

[arschmitz]

im not sure why its 1.5.0 it can go into 1.4.x

[jaspermdegroot]

The fix for this issue won't land in 1.4.3, because we want to ask an accessibility expert first (#7155 (comment)). I am changing the milestone to 1.4.4.

[dylanb]

A couple of comments here:

1. If you really want to hide the button, you must place aria-hidden="true" on it in addition to tabindex=-1,
2. What about sighted keyboard-only users? They will still see the button but will not be able to get to it.
3. How do users find out that they must use the keyboard command to clear the text input?
4. Mobile does not necessarily mean no keyboard. It is possible to attach a keyboard to (for example) an iOS device and tab around

If you are doing this, I would recommend also displaying a hint text visually and associating this hint text with the input using aria-describedby. You might want to make the hint only appear on focus so that the visual layout is not changed.

So to summarize, my recommendation would be:

1. add aria-hidden="true" to the button in addition to tabindex=-1
2. Add a hint text that becomes visible on focus and is associated with aria-describedby

[scottgonzalez]

The clear button doesn't provide new functionality, and the equivalent keyboard functionality is super simple and presumably known by all keyboard users. I still stand by my statement that this is only useful for pointing devices. It seems like the native elements, e.g., <input type="search"> in Chrome, has the same behavior of the clear button only being usable by pointing devices.