diff --git a/dist/js/owl.carousel.aria.js b/dist/js/owl.carousel.aria.js index a293e96..146edce 100644 --- a/dist/js/owl.carousel.aria.js +++ b/dist/js/owl.carousel.aria.js @@ -22,10 +22,7 @@ 'initialized.owl.carousel': function initializedOwlCarousel(e) { if (e.namespace && !_this._init) { _this.$stage = _this._core.$stage; - _this.$nav = $('.' + _this.options.navContainerClass + ', .' + _this.options.dotsClass, _this.$element); - - _this.$nav.children().attr("role", "button").attr("tabindex", "0").storeTabindex(); - + _this.navigation(); _this.bind(); _this.setAria(); _this._init = true; @@ -34,9 +31,6 @@ 'changed.owl.carousel': function changedOwlCarousel(e) { return _this.setAria(); } - //'translated.owl.carousel': e => this.setAria(), - //'refreshed.owl.carousel': e => this.setAria(), - //'resized.owl.carousel': e => this.setAria() }); }; @@ -51,6 +45,22 @@ this.$element.find('*').storeTabindex(); }; + Aria.prototype.navigation = function () { + 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) { + var $el = $(e); + + $el.on('keydown', function (e) { + if (e.keyCode === 32 || e.keyCode === 13) { + $el.trigger('click'); + return false; + } + }); + }); + }; + Aria.prototype.bind = function () { var _this2 = this; @@ -70,8 +80,8 @@ return _this2.focus(e); }).on('focusout', function (e) { return _this2.blur(e); - }).on('keyup', function (e) { - return _this2.keyUp(e); + }).on('keydown', function (e) { + return _this2.keydown(e); }); }; @@ -83,7 +93,7 @@ this.$element.attr({ 'aria-live': 'off' }); }; - Aria.prototype.keyUp = function (e) { + Aria.prototype.keydown = function (e) { var action = null; if (e.keyCode == 37 || e.keyCode == 38) { @@ -94,9 +104,8 @@ if (action !== null) { this.$element.trigger(action); + return false; } - - return false; // important! }; Aria.prototype.setAria = function () { @@ -146,8 +155,8 @@ return _this4.focus(e); }).off('focusout', function (e) { return _this4.blur(e); - }).off('keyup', function (e) { - return _this4.keyUp(e); + }).off('keydown', function (e) { + return _this4.keydown(e); }); }; diff --git a/dist/js/owl.carousel.aria.min.js b/dist/js/owl.carousel.aria.min.js index a291096..cfe147e 100644 --- a/dist/js/owl.carousel.aria.min.js +++ b/dist/js/owl.carousel.aria.min.js @@ -1 +1 @@ -"use strict";!function(t,e,n,i){var o=function e(n){var i=this;if(this._core=n,this.options=t.extend({},e.Defaults,this._core.options),!this.options.aria)return!1;this.setup(),this.$element.on({"initialized.owl.carousel":function(e){e.namespace&&!i._init&&(i.$stage=i._core.$stage,i.$nav=t("."+i.options.navContainerClass+", ."+i.options.dotsClass,i.$element),i.$nav.children().attr("role","button").attr("tabindex","0").storeTabindex(),i.bind(),i.setAria(),i._init=!0)},"changed.owl.carousel":function(t){return i.setAria()}})};o.Defaults={aria:!0},o.prototype.setup=function(){this._init=!1,this.$element=this._core.$element,this.$element.attr("tabindex","0").storeTabindex(),this.$element.find("*").storeTabindex()},o.prototype.bind=function(){var t=this;this.$element.on("to.owl.carousel",function(t){return t.stopPropagation()}),this.$element.on("next.owl.carousel",function(t){return t.stopPropagation()}),this.$element.on("prev.owl.carousel",function(t){return t.stopPropagation()}),this.$element.on("destroy.owl.carousel",function(t){return t.stopPropagation()}),this.$element.on("focusin",function(e){return t.focus(e)}).on("focusout",function(e){return t.blur(e)}).on("keyup",function(e){return t.keyUp(e)})},o.prototype.focus=function(){this.$element.attr({"aria-live":"polite"})},o.prototype.blur=function(){this.$element.attr({"aria-live":"off"})},o.prototype.keyUp=function(t){var e=null;return 37==t.keyCode||38==t.keyCode?e="prev.owl.carousel":39!=t.keyCode&&40!=t.keyCode||(e="next.owl.carousel"),null!==e&&this.$element.trigger(e),!1},o.prototype.setAria=function(){var e=this;if(!this.$stage||!this.$stage.length)return!1;setTimeout(function(){e.$nav.children().each(function(e,n){var i=t(n),o=i.hasClass("disabled"),r=i.hasClass("active");i.attr("aria-disabled",o||r?"true":"false")}),e.$stage.children().each(function(e,n){var i=t(n),o=i.hasClass("active");i.attr("aria-hidden",o?"false":"true"),i.find("*").each(function(e,n){var i=t(n);!1===o?(i.storeTabindex(),i.attr("tabindex","-1")):i.restoreTabindex()})})})},o.prototype.destroy=function(){var t=this;this.$element.removeAttr("aria-live"),this.$element.removeAttr("tabindex"),this.$element.children().removeAttr("aria-hidden"),this.$element.find("[data-tabindex]").restoreTabindex(),this.$element.off("focusin",function(e){return t.focus(e)}).off("focusout",function(e){return t.blur(e)}).off("keyup",function(e){return t.keyUp(e)})},t.fn.extend({restoreTabindex:function(){return this.each(function(){var e=t(this);e.is("[data-tabindex]")?e.attr("tabindex",e.attr("data-tabindex")):e.removeAttr("tabindex")})},storeTabindex:function(){return this.each(function(){var e=t(this);e.is("[tabindex]")&&!e.is("[data-tabindex]")&&e.attr("data-tabindex",e.attr("tabindex"))})}}),t.fn.owlCarousel.Constructor.Plugins.Aria=o}(window.Zepto||window.jQuery,window,document); \ No newline at end of file +"use strict";!function(t,e,n,i){var o=function e(n){var i=this;if(this._core=n,this.options=t.extend({},e.Defaults,this._core.options),!this.options.aria)return!1;this.setup(),this.$element.on({"initialized.owl.carousel":function(t){t.namespace&&!i._init&&(i.$stage=i._core.$stage,i.navigation(),i.bind(),i.setAria(),i._init=!0)},"changed.owl.carousel":function(t){return i.setAria()}})};o.Defaults={aria:!0},o.prototype.setup=function(){this._init=!1,this.$element=this._core.$element,this.$element.attr("tabindex","0").storeTabindex(),this.$element.find("*").storeTabindex()},o.prototype.navigation=function(){this.$nav=t("."+this.options.navContainerClass+", ."+this.options.dotsClass,this.$element);this.$nav.children().attr("role","button").attr("tabindex","0").storeTabindex().filter(":not(button):not(input[type='submit'])").each(function(e,n){var i=t(n);i.on("keydown",function(t){if(32===t.keyCode||13===t.keyCode)return i.trigger("click"),!1})})},o.prototype.bind=function(){var t=this;this.$element.on("to.owl.carousel",function(t){return t.stopPropagation()}),this.$element.on("next.owl.carousel",function(t){return t.stopPropagation()}),this.$element.on("prev.owl.carousel",function(t){return t.stopPropagation()}),this.$element.on("destroy.owl.carousel",function(t){return t.stopPropagation()}),this.$element.on("focusin",function(e){return t.focus(e)}).on("focusout",function(e){return t.blur(e)}).on("keydown",function(e){return t.keydown(e)})},o.prototype.focus=function(){this.$element.attr({"aria-live":"polite"})},o.prototype.blur=function(){this.$element.attr({"aria-live":"off"})},o.prototype.keydown=function(t){var e=null;if(37==t.keyCode||38==t.keyCode?e="prev.owl.carousel":39!=t.keyCode&&40!=t.keyCode||(e="next.owl.carousel"),null!==e)return this.$element.trigger(e),!1},o.prototype.setAria=function(){var e=this;if(!this.$stage||!this.$stage.length)return!1;setTimeout(function(){e.$nav.children().each(function(e,n){var i=t(n),o=i.hasClass("disabled"),r=i.hasClass("active");i.attr("aria-disabled",o||r?"true":"false")}),e.$stage.children().each(function(e,n){var i=t(n),o=i.hasClass("active");i.attr("aria-hidden",o?"false":"true"),i.find("*").each(function(e,n){var i=t(n);!1===o?(i.storeTabindex(),i.attr("tabindex","-1")):i.restoreTabindex()})})})},o.prototype.destroy=function(){var t=this;this.$element.removeAttr("aria-live"),this.$element.removeAttr("tabindex"),this.$element.children().removeAttr("aria-hidden"),this.$element.find("[data-tabindex]").restoreTabindex(),this.$element.off("focusin",function(e){return t.focus(e)}).off("focusout",function(e){return t.blur(e)}).off("keydown",function(e){return t.keydown(e)})},t.fn.extend({restoreTabindex:function(){return this.each(function(){var e=t(this);e.is("[data-tabindex]")?e.attr("tabindex",e.attr("data-tabindex")):e.removeAttr("tabindex")})},storeTabindex:function(){return this.each(function(){var e=t(this);e.is("[tabindex]")&&!e.is("[data-tabindex]")&&e.attr("data-tabindex",e.attr("tabindex"))})}}),t.fn.owlCarousel.Constructor.Plugins.Aria=o}(window.Zepto||window.jQuery,window,document); \ No newline at end of file diff --git a/package.json b/package.json index 0f28e35..8853d30 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "owl-aria", - "version": "1.0.5", + "version": "1.0.6", "description": "Owl Carousel v2 accessibility layer", "homepage": "https://github.com/stephan-fischer/owl-aria", "keywords": [