From 9664b7167518889c6a0fbd501ab53206b055723e Mon Sep 17 00:00:00 2001 From: "DESKTOP-0LNRR0O\\Nico" Date: Wed, 15 Aug 2018 17:05:19 +0200 Subject: [PATCH] Fix design pattern Plugin was not folloing the last version of the accordion design pattern. It is fixed :) --- README.md | 29 +++++++++-------------------- bower.json | 2 +- index.js | 43 ++++--------------------------------------- package.json | 2 +- 4 files changed, 15 insertions(+), 61 deletions(-) diff --git a/README.md b/README.md index 910ace4..2d1525c 100644 --- a/README.md +++ b/README.md @@ -9,7 +9,7 @@ It can be included for one, two accordion systems or more in a page.

This jQuery plugin will transform a simple list of hx and div’s into a fantastic-shiny accordion system, using ARIA.

-``` +```html

First tab

@@ -59,25 +59,14 @@ __If you focus in the accordion "buttons"__ - use Home to put focus on first accordion button (wherever you are in accordion buttons) - use End to put focus on last accordion button (wherever you are in accordion buttons) - -__If you focus in a accordion content__ -- use Ctrl Up/left to Set focus on the carrousel button for the currently displayed carrousel tab -- use Ctrl PageUp to Set focus on the previous carrousel button for the currently displayed carrousel tab -- use Ctrl PageDown to Set focus on the next carrousel button for the currently displayed carrousel tab - And strike space or return on an accordion button to open/close it -__New: if you focus on next/prev buttons__ -- use Ctrl Up to set focus on the accordion button for the currently displayed accordion content -- use Ctrl PageUp to set focus on the previous accordion button for the currently displayed accordion content -- use Ctrl PageDown to set focus on the next accordion button for the currently displayed accordion content -__Warning__: Ctrl+PageUp/PageDown combination could activate for some browsers a switch of browser tabs. Nothing to do for this, as far as I know (if you have a solution, let me know). - ## All options of the plugin - -```var defaultConfig = { + +```js +var defaultConfig = { headersSelector: '.js-accordion__header', panelsSelector: '.js-accordion__panel', buttonsSelector: 'button.js-accordion__header', @@ -98,8 +87,8 @@ __Warning__: Ctrl+PageUp/PageDown combination could activate for some browsers a ``` When calling the plugin, you may set up options as you want. For example: - -``` + +```js $(function () { $('.js-accordion').accordion({ buttonsGeneratedContent: 'html' }); }); @@ -113,7 +102,7 @@ __Content opened by default__ If you want to have an accordion content opened by default, just add the attribute ```data-accordion-opened="true"``` on a ```js-accordion__panel```, example: -``` +```html
``` @@ -132,7 +121,7 @@ In fact, it is possible using some CSS transitions. You have to keep in mind sev So here is the CSS code (unprefixed): -``` +```css .animated-accordion__panel { display: block; overflow: hidden; @@ -167,7 +156,7 @@ __Other options__ The ARIA Design Pattern for accordions (http://www.w3.org/TR/wai-aria-practices/#accordion) allows to have several accordion panels opened at the same time (which is shown by the attribute ```aria-multiselectable="true"```). However, you might need to avoid this for design purposes or client request. To do this, you may set this attribute on the accordion container: ```data-accordion-multiselectable="none"```. Example: -``` +```html
``` diff --git a/bower.json b/bower.json index 7a172a1..b659e30 100644 --- a/bower.json +++ b/bower.json @@ -1,7 +1,7 @@ { "title": "jQuery Accessible Accordion system, using ARIA", "name": "jquery-accessible-accordion-aria", - "version": "2.5.2", + "version": "2.6.0", "main": "index.js", "description": "This jQuery plugin will provide you an accessible Accordion System, using ARIA", "author": [ diff --git a/index.js b/index.js index b7bd782..cf0e51f 100644 --- a/index.js +++ b/index.js @@ -62,7 +62,7 @@ var $header = $(this.options.headersSelector, $panel); var $button = this.options.buttonsGeneratedContent === 'html' ? this.options.button.clone().html($header.html()) : this.options.button.clone().text($header.text()); - $header.attr('tabindex', '0').addClass(this.options.prefixClass + this.options.headerSuffixClass); + $header.addClass(this.options.prefixClass + this.options.headerSuffixClass); $panel.before($button); var panelId = $panel.attr('id') || this.$wrapper.attr('id') + '-' + index; @@ -73,7 +73,6 @@ 'aria-expanded': 'false', 'role': 'tab', 'id': buttonId, - 'tabindex': '-1', 'aria-selected': 'false' }).addClass(this.options.prefixClass + this.options.buttonSuffixClass); @@ -96,10 +95,7 @@ }); } - // init first one focusable - if (index === 0) { - $button.removeAttr('tabindex'); - } + }, this)); this.$buttons = $(this.options.buttonsSelector, this.$wrapper); @@ -120,13 +116,11 @@ var $button = $target.is('button') ? $target : $target.closest('button'); $(this.options.buttonsSelector, this.$wrapper).attr({ - 'tabindex': '-1', 'aria-selected': 'false' }); $button.attr({ - 'aria-selected': 'true', - 'tabindex': null + 'aria-selected': 'true' }); }; @@ -185,7 +179,6 @@ if ($.inArray(e.keyCode, allKeyCode) >= 0 && !e.ctrlKey) { this.$buttons.attr({ - 'tabindex': '-1', 'aria-selected': 'false' }); @@ -216,41 +209,13 @@ } }; - Accordion.prototype.keydownPanelEventHandler = function(e) { - var $panel = $(e.target).closest(this.options.panelsSelector); - var $button = $('#' + $panel.attr('aria-labelledby')); - var $firstButton = this.$buttons.first(); - var $lastButton = this.$buttons.last(); - var index = this.$buttons.index($button); - var $target = null; - - // strike up + ctrl => go to header - if (e.keyCode === 38 && e.ctrlKey) { - $target = $button; - } - // strike pageup + ctrl => go to prev header - else if (e.keyCode === 33 && e.ctrlKey) { - $target = $button.is($firstButton) ? $lastButton : this.$buttons.eq(index - 1); - } - // strike pagedown + ctrl => go to next header - else if (e.keyCode === 34 && e.ctrlKey) { - $target = $button.is($lastButton) ? $firstButton : this.$buttons.eq(index + 1); - } - - if ($target !== null) { - this.goToHeader($target); - e.preventDefault(); - } - }; - Accordion.prototype.goToHeader = function($target) { if ($target.length !== 1) { return; } $target.attr({ - 'aria-selected': 'true', - 'tabindex': null + 'aria-selected': 'true' }); setTimeout(function() { diff --git a/package.json b/package.json index a93bd49..13eb86a 100644 --- a/package.json +++ b/package.json @@ -2,7 +2,7 @@ "title": "jQuery Accessible Accordion system, using ARIA", "name": "jquery-accessible-accordion-aria", "description": "This jQuery plugin will provide you an accessible Accordion System, using ARIA", - "version": "2.5.2", + "version": "2.6.0", "main": "index.js", "homepage": "https://a11y.nicolas-hoffmann.net/accordion/", "bugs": {