Textinput: add tabindex=-1 to clear button #6467

Closed
frequent opened this Issue Sep 13, 2013 · 10 comments

Projects

None yet

7 participants

@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
jQuery Foundation member

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.

@scottjehl scottjehl was assigned Sep 23, 2013
@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
jQuery Foundation member

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
jQuery Foundation member

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

@gabrielschulhof gabrielschulhof modified the milestone: 1.4.3, 1.5.0 Mar 18, 2014
@jaspermdegroot
jQuery Foundation member

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.

@jaspermdegroot jaspermdegroot modified the milestone: 1.4.4, 1.4.3 Jun 2, 2014
@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
jQuery Foundation member

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.

@scottgonzalez
jQuery Foundation member

I do agree that we need to add aria-hidden="true" though, since we're not providing a method for using the clear button.

@dylanb

ok, I agree with @scottgonzalez just add aria-hidden=true

@gabrielschulhof gabrielschulhof added a commit that referenced this issue Sep 4, 2014
@frequent frequent Textinput: added tabindex -1 on clearbuttons
(cherry picked from commit 826ada0)

Closes gh-7155
Fixes gh-6467
5c27fa0
@agcolom agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014
@frequent frequent Textinput: added tabindex -1 on clearbuttons
Closes gh-7155
Fixes gh-6467
1de0e50
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment