how to make Toggle button focusable, using tab key

tabindex focus
javascript move focus with arrow keys
tab focus
tabindex not working in chrome
html tab focus button
button not getting focus on tab
react tabindex focus
html tab key

I am using this in angular4 environments so afraid of use jquery, Here is my HTML and CSS:

<div class="row"> <input type="text"></div>
<div class="row"> <input type="text"></div>
   <div class="row"> <input type="text"></div>
   <div  class="row"> <label class="switch">
  <input type="checkbox" checked>
  <span class="slider round"></span>
</label></div>
<div class="row"> <input type="text"></div>
<div class="row"> <input type="text"></div>
<div class="row"> <input type="text"></div>



    .row{
  padding:15px;
}

.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {display:none;}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked + .slider {
  background-color: #2196F3;
}

input:focus + .slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked + .slider:before {
  -webkit-transform: translateX(26px);
  -ms-transform: translateX(26px);
  transform: translateX(26px);
}

Below is this URL where this code is working: https://plnkr.co/edit/eVX3ATeizyuTIkqzmG94?p=preview

I have a few inputs before the toggle, all input is selectable using tab key but toggle button get skipped.

After focus, I need to move this toggle on the arrow press active/deactivate

OR how we can select checkbox using the keyboard.

UPDATE: Although your primary question was answered and now you have borderline a too broad question, here is solution for the updated question:

HTML:

<div class="row"> <input #input1 (keydown)="input2.focus()" type="text"></div>
<div class="row"> <input #input2 (keydown)="input3.focus()" type="text"></div>
<div class="row"> <input #input3 (keydown)="input4.focus()" type="text"></div>
<div class="row"> <label class="switch">
  <input type="checkbox" #input4 (keydown)="input5.focus()" checked>
  <span class="slider round"></span>
</label></div>
<div class="row"> <input #input5 (keydown)="input6.focus()" type="text"></div>
<div class="row"> <input #input6 (keydown)="input7.focus()" type="text"></div>
<div class="row"> <input #input7  type="text"></div>


PRIMARY QUESTION ANSWER:

Remove this line:

.switch input {display:none;}

as it's the input tag that could get the focus and set an other color when focused to hightlight the focus:

input:focus + .slider {
   background-color:red;
   ...
}

DEMO

html - how to make Toggle button focusable, using tab key, UPDATE: Although your primary question was answered and now you have borderline a too broad question, here is solution for the updated  Specifications. Notes. The button role should be used for clickable elements that trigger a response when activated by the user. Adding role="button" will make an element appear as a button control to a screen reader. This role can be used in combination with the aria-pressed attribute to create toggle buttons.

Without knowing more about your HTML structure it's hard to tell you how to solve it, but you can add a tabindex attribute to your inputs to make the browser know in which order they should be reachable in when tabbing. For example:

<input tabindex="1" type="checkbox" class="checkbox-toggle">
<input tabindex="2" type="checkbox" class="checkbox-toggle">
<input tabindex="3" type="checkbox" class="checkbox-toggle">
<input tabindex="4" type="checkbox" class="checkbox-toggle">

This should force the browser to not skip one of them.

Control focus with tabindex, Native HTML elements such as <button> or <input> have keyboard accessibility built in <div tabindex="0">Focus me with the TAB key</div>. For example, let's say you wanted to create a tabbed interface for some information on the screen. The headings for each section could be the tabs. Having them as links doesn't make much sense since the links wouldn't go anywhere. But having them as keyboard focusable means you could set up onfocus events to bring the selected tab to the forefront.

Try to set tabindex="0" on both: input and span:

<input type="checkbox" tabindex="0" checked> <span class="slider round" tabindex="0"></span>

It works for me

Using tabindex | Web Fundamentals, Overview · <howto-checkbox> · <howto-tabs> · <howto-tooltip> <custom-button tabindex="0">Press Tab to Focus Me! like an image, if it's not something the user can interact with, there's no reason to make it focusable. Focus the element using Tab and use the up/down arrow keys to navigate --> Step 3: Tap Turn on easy access keys under Ease of Access Center to move on. Step 4: Check the box before Turn on Toggle Keys and hit OK in the Make the keyboard easier to use window. Tip: You can also open the above window following the path of Control Panel/Ease of Access/ Change how your keyboard works. Part 2: Turn off Toggle Keys in

Keyboard-navigable JavaScript widgets, By default, when people use the tab key to browse a webpage, only With the tabindex global attribute, authors can make other elements focusable, too. When set to 0 , the element becomes focusable by keyboard and script. Button, Toggle button, Expanding Button, or Menu Button. Instructions for building a proper role=”button” UI control can be found at the WAI-ARIA Authoring Practices 1.1. The Authoring Practices says that in addition to the normal button widget there are two other types of buttons, Toggle button (aria-pressed) and Menu button (aria-haspopup).

tabindex, <label>First in tab order:<input type="text"></label>. 4 The user won't be able to focus any element with a negative tabindex using the keyboard, but a script can do so by calling the focus() method. An example of this would be using a <​div> element to describe a button, instead of the <button> element. Sighted mouse users are able to visually scan a web page and directly click on any item. Keyboard users must press the Tab key or other navigation keys to navigate through the interactive elements that precede the item the user wants to activate. Tabbing through lengthy navigation may be particularly demanding for users with motor disabilities.

Making elements keyboard focusable and clickable, Either use natively keyboard accessible elements to trigger JavaScript attribute to make it focusable and appear in the tab order according to its or the Space key is pressed; If you're using a link to create the fake button,  Right click on the Toggle button (make sure the Design mode is selected).From the drop down menu select "View Code". A new window (Visual Basic Editor) will open which will have a dialog box in the center. You will write the code in this dialog box. Note: you can also double click on your command button (make sure the Design mode is selected

Comments
  • Please provide a full html code of your component. It is hard to understand your problem without seeing full picture
  • on arrow key it should toggle
  • For the arrow key it's out of this question scope, right?