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