[BUG] Code Toggle cannot be tabbed to or adjusted with Keyboard

[liamie]

Tabbing seems to skip by this element in general and even after using it with mouse doesn't seem to be functional with keyboard

Additional context
This keyboard functionality is a requirement for Accessibility

[liamie]

Similar for official statistics toggle in build

[liamie]

Similar in release workflow

[liamie]

also seems to lead to ambiguity and obfuscation when trying to print this type of toggle

[liamie]

These toggles are prolific in the charts section also. This makes keyboard tabbing for options in charts impossible, mouse only access for options.

[lorenzobruni]

@liamie
The fix to this issue has been already posted into the original GitHub project.
I have asked to commit and issue a new release for this fix... let's see.
minhur/bootstrap-toggle#125

If not committed shortly we will have to fork the project ourself.
We stay tuned.
Cheers

[lorenzobruni]

I have forked the https://github.com/CSOIreland/bootstrap-toggle repository to implement this fix.

The tootles are now working with tab-keys and they can also be toggles with space/enter keys.
Can you please retest?

Thanks

[lorenzobruni]

FYI @liamie

[liamie]

This issue is mostly fixed now.
Tabbing can pick up the toggle option and space can change the toggle value.
Printing displays the option chosen.
However currently Analytical choice produces a success Modal which disrupts the focus. Can the focus be returned to the toggle on close of the success modal?
Also can there be a distinctive highlight around the toggle when selected it's currently hard to tell when you are on it.

[lorenzobruni]

Also can there be a distinctive highlight around the toggle when selected it's currently hard to tell when you are on it.

This is there already... but the button is surrounded by the toggle frame, hence is not very visible... an example below.

However currently Analytical choice produces a success Modal which disrupts the focus. Can the focus be returned to the toggle on close of the success modal?

Sorry I didn't get this one... can you attach a screenshot or rephrase? Thanks

[liamie]

Also can there be a distinctive highlight around the toggle when selected it's currently hard to tell when you are on it.

This is there already... but the button is surrounded by the toggle frame, hence is not very visible... an example below.

Ok if the toggle cant be made more distinctive, like group below in the images, because of nesting in the frame can the text of the toggle be emphasised or something similar to provide a visual cue.
This is group selected not toggle

This is toggle selected

However currently Analytical choice produces a success Modal which disrupts the focus. Can the focus be returned to the toggle on close of the success modal?

Sorry I didn't get this one... can you attach a screenshot or rephrase? Thanks
When Analytical toggle selection is switched

appears but when this is closed the focus doesn't return to the toggle to proceed from there.
This may be separate issue unrelated to toggle specifically of returning focus to where dialog screens are launched from once closed unless there is an action resulting from the choice/close in the dialog.

[lorenzobruni]

@liamie , thanks!
I agree we should address how the focus look because is almost imperceptible.
I will look into the return of the focus...

@damienderoistecso,
can you please inspect the CSS have have a look to how we can improve the visual effect of a focused toggle?
Thanks

[damienderoistecso]

@lorenzobruni possible issue with forked library. When we toggle now, error in console

[lorenzobruni]

I have issued a new release of the bootstrap-toggle with both the console error fixed and the focus/blur enhanced.
The slider changes color then on focus/blur.

Unfortunately the success modal has no callback function (currently) so we cannot bring the focus back to anything.
Perhaps something to consider in the future?
Do you want to create an enhancement under the Client API repo to implement a callback function for the api.modal.success ?

Please test and let me know if the 2 items above are fixed.

Thanks!