Merge pull request #41 from palcarazm:palcarazm/issue38

feat: Toggles focusable from the keyboard

README.md

@@ -32,6 +32,9 @@ Project |Description
 <!-- DON'T EDIT THIS SECTION, INSTEAD RE-RUN doctoc TO UPDATE -->
 **Table of Contents**  *generated with [DocToc](https://github.com/thlorenz/doctoc)*
 
+- [Bootstrap 5 Toggle](#bootstrap-5-toggle)
+      - [Library Distributions](#library-distributions)
+- [Demos](#demos)
 - [Installation](#installation)
   - [CDN](#cdn)
   - [Download](#download)
@@ -127,6 +130,7 @@ Name      |Type       |Default     |Description                 |
 `style`   |string     |           |Appends the value to the class attribute of the toggle. This can be used to apply custom styles. Refer to Custom Styles for reference.
 `width`   |integer    |*null*     |Sets the width of the toggle. if set to *null*, width will be auto-calculated.
 `height`  |integer    |*null*     |Sets the height of the toggle. if set to *null*, height will be auto-calculated.
+`tabindex`|integer    |0          |Sets the tabindex of the toggle.
 
 ## Methods
 Methods can be used to control toggles directly.

cypress/e2e/tabindex.spec.cy.js

@@ -0,0 +1,26 @@
+/// <reference types="cypress" />
+require('cypress-plugin-tab');
+import PageModel from "../support/pagemodel";
+
+describe("Layout feature", () => {
+  context("Given ECMAS bootstrap toggle interface",()=>{
+    testCase("ecmas");
+  });
+  context("Given jQuery bootstrap toggle interface",()=>{
+    testCase("jquery");
+  });
+});
+
+function testCase(bstInterface) {
+  context("When previous element is selected and tab is pressed", () => {
+    const data_test = 'layout';
+    it("Then toggle is focused", () => {
+      PageModel.load(bstInterface, data_test);
+      PageModel.getTests().each(($test) => {
+        cy.wrap($test)
+          .find("input.form-control")
+          .tab().should('have.class','toggle');
+      });
+    });
+  });
+}

cypress/support/togglemodel.js

@@ -8,6 +8,7 @@ class ToggleModel {
     style: "",
     width: null,
     height: null,
+    tabindex: 0,
   };
 
   /**
@@ -77,6 +78,7 @@ class ToggleModel {
         .should("have.class", "off")
         .and("have.class",'btn-'+(options.offstyle || this.DEFAULTS.offstyle))
     }
+    cy.wrap($toggle).should('have.attr','tabindex',(options.tabindex || this.DEFAULTS.tabindex))
     if(options.width || this.DEFAULTS.width) cy.wrap($toggle).should('have.css', 'width', (options.width || this.DEFAULTS.width)+'px')
     if(options.height || this.DEFAULTS.height) cy.wrap($toggle).should('have.css', 'height', (options.height || this.DEFAULTS.height)+'px')
     if((options.style || this.DEFAULTS.style) != '') cy.wrap($toggle).should('have.class', options.style || this.DEFAULTS.style)

js/bootstrap5-toggle.ecmas.js

@@ -26,6 +26,7 @@
 				style: '',
 				width: null,
 				height: null,
+				tabindex: 0
 			};
 			options = options || {};
 
@@ -42,6 +43,7 @@
 				style: this.element.getAttribute('data-style') || options.style || DEFAULTS.style,
 				width: this.element.getAttribute('data-width') || options.width || DEFAULTS.width,
 				height: this.element.getAttribute('data-height') || options.height || DEFAULTS.height,
+				tabindex: this.element.getAttribute('tabindex') || options.tabindex || DEFAULTS.tabindex,
 			};
 
 			// LAST: Render Toggle
@@ -105,6 +107,7 @@
 			let ecmasToggle = document.createElement('div');
 			ecmasToggle.setAttribute('class', 'toggle btn');
 			ecmasToggle.classList.add(this.element.checked ? 'btn-' + this.options.onstyle : 'btn-' + this.options.offstyle);
+			ecmasToggle.setAttribute('tabindex',this.options.tabindex);
 			if (!this.element.checked) ecmasToggle.classList.add('off');
 			if (this.options.size) ecmasToggle.classList.add(size);
 			if (this.options.style) {