Skip to content
This repository

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
  • 5 commits
  • 1 file changed
  • 0 comments
  • 1 contributor
Mar 23, 2012
Hans Hillen ARIA Fixes b49c790
Hans Hillen Remove unnecessary blur and focus handlers
to fix issue with focus loss when collapsing
a collapsible accordion header.
6e68c28
Hans Hillen Added shortcuts based on ARIA Best Pratices Guide:
Home / End keys and Ctrl + Up to move focus from within panel
to header.
d6a1aa0
Hans Hillen Update for destroy, leave application developer's ID values in tact. b1dc9ee
Mar 24, 2012
Hans Hillen Missing break statement c3207a3

Showing 1 changed file with 74 additions and 17 deletions. Show diff stats Hide diff stats

  1. +74 17 ui/jquery.ui.accordion.js
91 ui/jquery.ui.accordion.js
@@ -12,6 +12,7 @@
12 12 * jquery.ui.widget.js
13 13 */
14 14 (function( $, undefined ) {
  15 + var idIncrement = 0;
15 16
16 17 $.widget( "ui.accordion", {
17 18 version: "@VERSION",
@@ -33,6 +34,8 @@ $.widget( "ui.accordion", {
33 34 },
34 35
35 36 _create: function() {
  37 + this.accordionId = this.element.attr( "id" ) || "ui-accordion-" + idIncrement++;
  38 + var accordionId = this.accordionId;
36 39 var options = this.options;
37 40
38 41 this.prevShow = this.prevHide = $();
@@ -68,6 +71,18 @@ $.widget( "ui.accordion", {
68 71
69 72 this.headers
70 73 .attr( "role", "tab" )
  74 + .each(function( i ){
  75 + var hdr = $( this );
  76 + var pnl = hdr.next();
  77 + if ( !hdr.attr( "id" ) ) {
  78 + hdr.attr( "id", accordionId + "-hdr-" + i );
  79 + }
  80 + if ( !pnl.attr( "id" ) ) {
  81 + pnl.attr( "id", accordionId + "-pnl-" + i );
  82 + }
  83 + hdr.attr( "aria-controls", pnl.attr( "id" ))
  84 + pnl.attr( "aria-labelledby", hdr.attr( "id" ))
  85 + })
71 86 .next()
72 87 .attr( "role", "tabpanel" );
73 88
@@ -75,11 +90,12 @@ $.widget( "ui.accordion", {
75 90 .not( this.active )
76 91 .attr({
77 92 // TODO: document support for each of these
78   - "aria-expanded": "false",
79 93 "aria-selected": "false",
80 94 tabIndex: -1
81 95 })
82 96 .next()
  97 + .attr( "aria-expanded", "false" )
  98 + .attr( "aria-hidden", "true" )
83 99 .hide();
84 100
85 101 // make sure at least one header is in the tab order
@@ -87,10 +103,12 @@ $.widget( "ui.accordion", {
87 103 this.headers.eq( 0 ).attr( "tabIndex", 0 );
88 104 } else {
89 105 this.active.attr({
90   - "aria-expanded": "true",
91 106 "aria-selected": "true",
92 107 tabIndex: 0
93   - });
  108 + })
  109 + .next()
  110 + .attr( "aria-expanded", "true" )
  111 + .attr( "aria-hidden", "false" );
94 112 }
95 113
96 114 this._setupEvents( options.event );
@@ -124,6 +142,7 @@ $.widget( "ui.accordion", {
124 142 },
125 143
126 144 _destroy: function() {
  145 + var accordionId = this.accordionId;
127 146 // clean up main element
128 147 this.element
129 148 .removeClass( "ui-accordion ui-widget ui-helper-reset" )
@@ -134,16 +153,30 @@ $.widget( "ui.accordion", {
134 153 .unbind( ".accordion" )
135 154 .removeClass( "ui-accordion-header ui-accordion-header-active ui-helper-reset ui-state-default ui-corner-all ui-state-active ui-state-disabled ui-corner-top" )
136 155 .removeAttr( "role" )
137   - .removeAttr( "aria-expanded" )
138 156 .removeAttr( "aria-selected" )
139   - .removeAttr( "tabIndex" );
  157 + .removeAttr( "aria-controls" )
  158 + .removeAttr( "tabIndex" )
  159 + .each(function(){
  160 + if ( this.id.indexOf( accordionId + "-hdr-" ) === 0 ) {
  161 + this.removeAttribute( "id" );
  162 + }
  163 + });
140 164 this._destroyIcons();
141 165
142 166 // clean up content panels
143 167 var contents = this.headers.next()
  168 + .unbind( ".accordion" )
144 169 .css( "display", "" )
145 170 .removeAttr( "role" )
146   - .removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-state-disabled" );
  171 + .removeAttr( "aria-expanded" )
  172 + .removeAttr( "aria-hidden" )
  173 + .removeAttr( "aria-labelledby" )
  174 + .removeClass( "ui-helper-reset ui-widget-content ui-corner-bottom ui-accordion-content ui-accordion-content-active ui-state-disabled" )
  175 + .each(function(){
  176 + if ( this.id.indexOf( accordionId + "-pnl-" ) === 0 ) {
  177 + this.removeAttribute( "id" );
  178 + }
  179 + });
147 180 if ( this.options.heightStyle !== "content" ) {
148 181 this.element.css( "height", this.originalHeight );
149 182 contents.css( "height", "" );
@@ -208,6 +241,13 @@ $.widget( "ui.accordion", {
208 241 case keyCode.SPACE:
209 242 case keyCode.ENTER:
210 243 this._eventHandler( event );
  244 + break;
  245 + case keyCode.HOME:
  246 + toFocus = this.headers[ 0 ];
  247 + break;
  248 + case keyCode.END:
  249 + toFocus = this.headers[ length - 1 ];
  250 + break;
211 251 }
212 252
213 253 if ( toFocus ) {
@@ -218,6 +258,17 @@ $.widget( "ui.accordion", {
218 258 }
219 259 },
220 260
  261 + _panelKeyDown : function( event ) {
  262 + var keyCode = $.ui.keyCode;
  263 + switch ( event.keyCode ) {
  264 + case keyCode.UP:
  265 + if ( event.ctrlKey ) {
  266 + $( event.currentTarget ).prev().focus();
  267 + }
  268 + break;
  269 + }
  270 + },
  271 +
221 272 refresh: function() {
222 273 var heightStyle = this.options.heightStyle,
223 274 parent = this.element.parent(),
@@ -305,6 +356,9 @@ $.widget( "ui.accordion", {
305 356 });
306 357 }
307 358 this._bind( this.headers, events );
  359 + this._bind( this.headers.next(), {
  360 + keydown : "_panelKeyDown"
  361 + } );
308 362 },
309 363
310 364 _eventHandler: function( event ) {
@@ -382,21 +436,24 @@ $.widget( "ui.accordion", {
382 436 this._toggleComplete( data );
383 437 }
384 438
385   - // TODO assert that the blur and focus triggers are really necessary, remove otherwise
386   - toHide.prev()
  439 + toHide
387 440 .attr({
388 441 "aria-expanded": "false",
389   - "aria-selected": "false",
390   - tabIndex: -1
391   - })
392   - .blur();
393   - toShow.prev()
  442 + "aria-hidden": "true"
  443 + }).prev()
  444 + .attr({
  445 + "aria-selected": "false",
  446 + tabIndex: -1
  447 + });
  448 + toShow
394 449 .attr({
395 450 "aria-expanded": "true",
396   - "aria-selected": "true",
397   - tabIndex: 0
398   - })
399   - .focus();
  451 + "aria-hidden": "false"
  452 + }).prev()
  453 + .attr({
  454 + "aria-selected": "true",
  455 + tabIndex: 0
  456 + });
400 457 },
401 458
402 459 _animate: function( toShow, toHide, data ) {

No commit comments for this range

Something went wrong with that request. Please try again.