Fix design pattern

Plugin was not folloing the last version of the accordion design pattern. It is fixed :)
nico3333fr · Aug 15, 2018 · 9664b71 · 9664b71
1 parent 7d04544
commit 9664b71
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 61 deletions.
diff --git a/README.md b/README.md
@@ -9,7 +9,7 @@ It can be included for one, two accordion systems or more in a page.
 <p>This jQuery plugin will transform a simple list of  <code>hx</code> and <code>div</code>’s into a <strong>fantastic-shiny accordion system</strong>, using <abbr title="Accessible Rich Internet Application">ARIA</abbr>.</p>
 
 
-```
+```html
 <div class="js-accordion" data-accordion-prefix-classes="your-prefix-class">
  <div class="js-accordion__panel">
    <h2 class="js-accordion__header">First tab</h2>
@@ -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
 <div class="js-accordion__panel" data-accordion-opened="true">
 ```
 
@@ -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
 <div class="js-accordion" data-accordion-multiselectable="none" …>
 ```
 

diff --git 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
@@ -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
@@ -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": {