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

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

Comments

Projects
None yet
9 participants
@frequent
Contributor

frequent commented Sep 13, 2013

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 comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Sep 15, 2013

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.

Member

jaspermdegroot commented Sep 15, 2013

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

This comment has been minimized.

Show comment
Hide comment
@frequent

frequent Feb 22, 2014

Contributor

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

Contributor

frequent commented Feb 22, 2014

@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

This comment has been minimized.

Show comment
Hide comment
@scottgonzalez

scottgonzalez Feb 28, 2014

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.

Member

scottgonzalez commented Feb 28, 2014

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

This comment has been minimized.

Show comment
Hide comment
@gabrielschulhof

gabrielschulhof Mar 18, 2014

Contributor

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

Contributor

gabrielschulhof commented Mar 18, 2014

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

@arschmitz

This comment has been minimized.

Show comment
Hide comment
@arschmitz

arschmitz Mar 18, 2014

Member

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

Member

arschmitz commented Mar 18, 2014

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

@gabrielschulhof gabrielschulhof modified the milestones: 1.4.3, 1.5.0 Mar 18, 2014

@jaspermdegroot

This comment has been minimized.

Show comment
Hide comment
@jaspermdegroot

jaspermdegroot Jun 2, 2014

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.

Member

jaspermdegroot commented Jun 2, 2014

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 milestones: 1.4.4, 1.4.3 Jun 2, 2014

@dylanb

This comment has been minimized.

Show comment
Hide comment
@dylanb

dylanb Aug 26, 2014

Contributor

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
Contributor

dylanb commented Aug 26, 2014

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

This comment has been minimized.

Show comment
Hide comment
@scottgonzalez

scottgonzalez Aug 26, 2014

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.

Member

scottgonzalez commented Aug 26, 2014

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

This comment has been minimized.

Show comment
Hide comment
@scottgonzalez

scottgonzalez Aug 26, 2014

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.

Member

scottgonzalez commented Aug 26, 2014

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

This comment has been minimized.

Show comment
Hide comment
@dylanb

dylanb Aug 26, 2014

Contributor

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

Contributor

dylanb commented Aug 26, 2014

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

gabrielschulhof added a commit that referenced this issue Sep 4, 2014

agcolom added a commit to agcolom/jquery-mobile that referenced this issue Nov 26, 2014

@HunterJoe

This comment has been minimized.

Show comment
Hide comment
@HunterJoe

HunterJoe Jul 11, 2017

I have updated to the latest jqueryUI version (1.12.1) and noticed that the spinner widget buttons have "disappeared".

This is the output and the code from the current 1.12.1 version
jquerui-1 12 1

this is the output and the code form the 1.11.0 version when added to the 1.12.1 version.
jqueryui-1 12 1-fixed

I have updated to the latest jqueryUI version (1.12.1) and noticed that the spinner widget buttons have "disappeared".

This is the output and the code from the current 1.12.1 version
jquerui-1 12 1

this is the output and the code form the 1.11.0 version when added to the 1.12.1 version.
jqueryui-1 12 1-fixed

@apsdehal

This comment has been minimized.

Show comment
Hide comment
@apsdehal

apsdehal Jul 12, 2017

Member

@HunterJoe Which version of jqm are you using?

Member

apsdehal commented Jul 12, 2017

@HunterJoe Which version of jqm are you using?

@HunterJoe

This comment has been minimized.

Show comment
Hide comment
@HunterJoe

HunterJoe Jul 17, 2017

@apsdehal Sorry, google brought me here, I am not even using jqm, but I failed to look at the actual repo I was in.

I will delete this and post it in the correct repo.

@apsdehal Sorry, google brought me here, I am not even using jqm, but I failed to look at the actual repo I was in.

I will delete this and post it in the correct repo.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment