Tab to toggle via keyboard

[greenbeemedia]

Hi there, been looking all over your documentation as well as on google to see if there's a way to make it so I can tab over to the toggle and enable it. Cosmetically the toggle looks great, but it doesn't appear to work like a regular checkbox, in that I can't tab over to it with the keyboard on a form, and then use the spacebar to check it On or Off.

This ideally would be great if it worked like a regular checkbox as well as the visual of a toggle. Is there a way to tab over to a toggle?

[michielvanerp]

I just gave a demo of our product that features this awesome control, one of the questions was exactly this. Right now, the control can't be set with a keyboard nor does it stop at the control when 'tabbing' through a form.

[pjabbott]

This is definitely an issue - I work for a government agency and I am required by law to make our applications ADA compliant. I will simply need to abandon using this control if you must use a mouse to toggle it.

A quick and dirty fix is to change

var $toggleHandle = $('<span class="toggle-handle btn btn-default">')

to

var $toggleHandle = $('<a href="#" class="toggle-handle btn btn-default">')

but it has some minor display issues when tabbing into a checked box.

[interDist]

Re @pjabbott’s quick-and-dirty fix: I find a <button> better-suited for this task; it also does not generate a link hint (usually shown by the desktop browsers as hovering near the bottom of the page).

I would change the definition to:

var $toggleHandle = $('<button type="button" role="switch" class="toggle-handle btn btn-default">')
    .addClass(size)
    .attr('aria-checked', this.$element.prop('checked'))

adding the following lines

    this.$toggleGroup.children('.toggle-handle').attr('aria-checked', true)

and

    this.$toggleGroup.children('.toggle-handle').attr('aria-checked', false)

to Toggle.prototype.on and Toggle.prototype.off, respectively.

The dotted outline on the toggle handle, shown when tabbing to the toggle, can then be removed via CSS:

.toggle-handle:focus {
    outline: 0;
}

[arc95]

I'm experiencing the same issue with the Bootstrap Toggle. Any updates on this being fixed?

[Allann]

@interDist I implemented your suggested changes and whilst it does in fact solve the tab issue, the button size/position is incorrect when tabbing to a toggle that is already on.
I know little about js so trying to fix this is a bit beyond me.
I would love to see this bug being actioned by the author though.

It isn't actually the size or position as these remain constant, but somehow the toggle-group moves left -15px upon receiving focus when the toggle is already set to the on state.

[FanghanHu]

Here is a fix by editing the javascript from bootstrap-toggle.min.js (line 44~46)

var b = "large" === this.options.size ? "btn-lg" : "small" === this.options.size ? "btn-sm" : "mini" === this.options.size ? "btn-xs" : "",
c = a('<button class="btn" onfocus="$(this).closest(\'.input-group\').addClass(\'focused\')" onblur="$(this).closest(\'.input-group\').removeClass(\'focused\')">').html(this.options.on).addClass(this._onstyle + " " + b),
d = a('<label class="btn">').html(this.options.off).addClass(this._offstyle + " " + b + " active"),

Changing the on label into a button allow the correct display, and tab selection, also adding some onfocus and onblur to indicate that this control has been focused.

End result looks like this:

Edit: I noticed how clicking the on button will trigger focus styling but off label will not, so I also changed off label and thumb into a button, and give them the tabindex="-1" attribute and same onfocu/blur function.

[lorenzobruni]

Here is a fix by editing the javascript from bootstrap-toggle.min.js (line 44~46)

var b = "large" === this.options.size ? "btn-lg" : "small" === this.options.size ? "btn-sm" : "mini" === this.options.size ? "btn-xs" : "",
c = a('<button class="btn" onfocus="$(this).closest(\'.input-group\').addClass(\'focused\')" onblur="$(this).closest(\'.input-group\').removeClass(\'focused\')">').html(this.options.on).addClass(this._onstyle + " " + b),
d = a('<label class="btn">').html(this.options.off).addClass(this._offstyle + " " + b + " active"),

Changing the on label into a button allow the correct display, and tab selection, also adding some onfocus and onblur to indicate that this control has been focused.

End result looks like this:

Edit: I noticed how clicking the on button will trigger focus styling but off label will not, so I also changed off label and thumb into a button, and give them the tabindex="-1" attribute and same onfocu/blur function.

The solution by @FanghanHu works well.

@minhur, can you please commit the change and issue a new Release?
I'd like to get this fix in without forking, thanks!

[interDist]

@minhur, can you please commit the change and issue a new Release?

@lorenzobruni this project has been stale for 5 years already. I think at this point it is safe to say it was abandoned.

[lorenzobruni]

@interDist thanks for the heads up... I guess I had a little hope :-)

In situations like this one, where a project may be abandoned, is forking a good solution in order to continue supporting it independently of the author or is there a better alternative? Thanks for any advice. Cheers.

[lorenzobruni]

For those who are looking for this functionality, in relation to Accessibility Requirements such as WCAG 2.1, please find this issue resolved and forked at https://github.com/CSOIreland/bootstrap-toggle under the Release 2.2.2.1

Tested with Bootstrap 4.x only.

Many thanks to @FanghanHu for the proposed code.