feat(navigation): remove focus if button is not available

stephan-fischer · Apr 5, 2018 · 1b8af17 · 1b8af17
1 parent 91bc3bf
commit 1b8af17
Show file tree

Hide file tree

Showing 5 changed files with 79 additions and 22 deletions.
diff --git a/README.md b/README.md
@@ -1,10 +1,36 @@
-# owl-aria
+# Owl-Aria
 An Owl Carousel v2 accessibility layer
 
+## Authorship
 
+Written by [Stephan Fischer](mailto:[email protected])
 
 ## License
 
 ### Commercial license
 
-If you want to use owl-arai to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license. 
+If you want to use owl-aria to develop commercial sites, themes, projects, and applications, the Commercial license is the appropriate license.
+
+## Requirements
+
+* jQuery
+* Owl Carousel v2
+
+## Installation
+
+In the `<head>` of your page, after you set up your jQuery, Owl Carousel and jquery-throttle-debounce `<script>` items, add the following:
+
+```html
+<script type="text/javascript" src="owl.carousel.aria.min.js"></script>
+```
+
+## Features
+
+* Adds WAI-ARIA visibility and role hinting attributes
+* Adds keyboard navigation (arrow keys for previous/next, enter keys on controls)
+* Controls the focus of each element within the carousel, for a correct tabindex sequence
+* Works with nested carousels
+
+## Usage
+
+Once you've installed the accessibility layer plugin, it gets used automatically when you instantiate Owl Carousel.
diff --git a/dist/js/owl.carousel.aria.js b/dist/js/owl.carousel.aria.js
@@ -49,7 +49,9 @@
         this.$nav = $('.' + this.options.navContainerClass + ', .' + this.options.dotsClass, this.$element);
         var noButtonSel = ":not(button):not(input[type='submit'])";
 
-        this.$nav.children().attr("role", "button").attr("tabindex", "0").storeTabindex().filter(noButtonSel).each(function (i, e) {
+        this.setNavAria();
+
+        this.$nav.children().attr("role", "button").storeTabindex().filter(noButtonSel).each(function (i, e) {
             var $el = $(e);
 
             $el.on('keydown', function (e) {
@@ -108,21 +110,34 @@
         }
     };
 
+    Aria.prototype.setNavAria = function () {
+        this.$nav.children().each(function (i, el) {
+            var $el = $(el);
+            var isDisabled = $el.hasClass('disabled') || $el.hasClass('active');
+
+            $el.attr('aria-disabled', isDisabled ? "true" : "false");
+
+            if (isDisabled) {
+                $el.attr("tabindex", "-1");
+                $el.attr("data-tabindex", $el.attr('tabindex'));
+            } else {
+
+                $el.attr("tabindex", "0");
+                $el.attr("data-tabindex", $el.attr('tabindex'));
+            }
+        });
+    };
+
     Aria.prototype.setAria = function () {
         var _this3 = this;
 
         if (!this.$stage || !this.$stage.length) {
             return false;
         }
 
-        setTimeout(function () {
-            _this3.$nav.children().each(function (i, el) {
-                var $item = $(el);
-                var isDisabled = $item.hasClass('disabled');
-                var isActive = $item.hasClass('active');
+        this.setNavAria();
 
-                $item.attr('aria-disabled', isDisabled || isActive ? "true" : "false");
-            });
+        setTimeout(function () {
 
             _this3.$stage.children().each(function (i, el) {
                 var $item = $(el);

diff --git a/dist/js/owl.carousel.aria.min.js b/dist/js/owl.carousel.aria.min.js
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "owl-aria",
-  "version": "1.0.6",
+  "version": "1.0.7",
   "description": "Owl Carousel v2 accessibility layer",
   "homepage": "https://github.com/stephan-fischer/owl-aria",
   "keywords": [

diff --git a/src/js/owl.carousel.aria.js b/src/js/owl.carousel.aria.js
@@ -21,7 +21,7 @@
         {
             'initialized.owl.carousel': e =>
             {
-				if (e.namespace && !this._init) {
+                if (e.namespace && !this._init) {
                     this.$stage = this._core.$stage;
                     this.navigation();
                     this.bind();
@@ -53,9 +53,10 @@
         this.options.dotsClass, this.$element);
         const noButtonSel = ":not(button):not(input[type='submit'])";
 
+        this.setNavAria();
+
         this.$nav.children()
         .attr("role", "button")
-        .attr("tabindex", "0")
         .storeTabindex().filter(noButtonSel).each((i, e) => 
         {
             const $el = $(e);
@@ -109,23 +110,38 @@
         }
     };
 
+    Aria.prototype.setNavAria = function()
+    {
+        this.$nav.children().each((i, el) => 
+        {
+            const $el = $(el);
+            const isDisabled = $el.hasClass('disabled') || $el.hasClass('active');
+
+            $el.attr('aria-disabled', isDisabled  ? "true": "false");
+
+            if (isDisabled) {
+                $el.attr("tabindex", "-1");
+                $el.attr("data-tabindex", $el.attr('tabindex'));
+            } else {
+
+                $el.attr("tabindex", "0");
+                $el.attr("data-tabindex", $el.attr('tabindex'));
+            }
+
+        });
+    };
+
     Aria.prototype.setAria = function() 
     {
         if (!this.$stage || !this.$stage.length)  {
             return false;
         }
 
+        this.setNavAria();
+
         setTimeout(() => 
         {
-            this.$nav.children().each((i, el) => 
-            {
-                const $item = $(el);
-                const isDisabled = $item.hasClass('disabled');
-                const isActive = $item.hasClass('active');
 
-                $item.attr('aria-disabled', isDisabled || isActive ? "true": "false");
-
-            });
 
             this.$stage.children().each((i, el) => 
             {