diff --git a/tests/unit/calendar/core.js b/tests/unit/calendar/core.js index a39e7a7064d..c327e013018 100644 --- a/tests/unit/calendar/core.js +++ b/tests/unit/calendar/core.js @@ -401,7 +401,7 @@ QUnit.test( "mouse", function( assert ) { } ); QUnit.test( "ARIA", function( assert ) { - assert.expect( 15 ); + assert.expect( 11 ); var id = this.element.attr( "id" ), headerId = id + "-title", @@ -414,7 +414,7 @@ QUnit.test( "ARIA", function( assert ) { assert.equal( this.element.find( "#" + headerId ).attr( "role" ), "header", "Header role attribute" ); - assert.equal( this.element.find( "#" + monthLabelId ).attr( "role" ), "alert", + assert.equal( this.element.find( "#" + monthLabelId ).attr( "role" ), "status", "Header month label role attribute" ); assert.equal( table.attr( "role" ), "grid", "Table role attribute" ); @@ -426,19 +426,11 @@ QUnit.test( "ARIA", function( assert ) { assert.equal( table.children( "thead" ).attr( "role" ), "presentation", "Table head role attribute" ); - assert.equal( table.find( "thead tr" ).attr( "role" ), "row", - "Table head row role attribute" ); assert.equal( table.find( "thead th" ).first().attr( "role" ), "columnheader", "Table head cell role attribute" ); assert.equal( table.children( "tbody" ).attr( "role" ), "presentation", "Table body role attribute" ); - assert.equal( table.find( "tbody tr" ).attr( "role" ), "row", - "Table body row role attribute" ); - assert.equal( table.find( "tbody td" ).first().attr( "role" ), "gridcell", - "Table body cell role attribute" ); - assert.equal( table.find( "tbody td" ).first().attr( "aria-describedby" ), - monthLabelId, "Table body cell ARIA describedby attribute" ); } ); } ); diff --git a/tests/unit/calendar/methods.js b/tests/unit/calendar/methods.js index c0948244057..81880f58420 100644 --- a/tests/unit/calendar/methods.js +++ b/tests/unit/calendar/methods.js @@ -48,12 +48,16 @@ QUnit.test( "widget", function( assert ) { } ); QUnit.test( "value", function( assert ) { - assert.expect( 3 ); + assert.expect( 4 ); this.element.calendar( "value", "1/1/14" ); assert.ok( this.element.find( "button[data-ui-calendar-timestamp]:first" ) .hasClass( "ui-state-active" ), - "first day marked as selected" + "first day marked as selected (class)" + ); + assert.equal( this.element.find( "button[data-ui-calendar-timestamp]:first" ) + .attr( "aria-pressed" ), "true", + "first day marked as selected (attribute)" ); assert.equal( this.element.calendar( "value" ), "1/1/14", "getter" ); diff --git a/tests/unit/datepicker/core.js b/tests/unit/datepicker/core.js index ebbfa060994..934b8714c88 100644 --- a/tests/unit/datepicker/core.js +++ b/tests/unit/datepicker/core.js @@ -35,7 +35,7 @@ QUnit.test( "base structure", function( assert ) { var that = this; - this.element.focus(); + this.element.simulate( "keydown", { keyCode: $.ui.keyCode.UP } ); setTimeout( function() { assert.ok( that.widget.is( ":visible" ), "Datepicker visible" ); @@ -59,7 +59,7 @@ QUnit.test( "Keyboard handling: focus", function( assert ) { this.element.focus(); setTimeout( function() { - assert.ok( that.widget.is( ":visible" ), "Datepicker opens when receiving focus" ); + assert.ok( !that.widget.is( ":visible" ), "Datepicker keeps closed when receiving focus" ); ready(); }, 100 ); } ); diff --git a/ui/widgets/calendar.js b/ui/widgets/calendar.js index d9ed4dee30d..d9781bfcc48 100644 --- a/ui/widgets/calendar.js +++ b/ui/widgets/calendar.js @@ -227,8 +227,13 @@ return $.widget( "ui.calendar", { this.grid.attr( "aria-activedescendant", id ); - this._removeClass( this.grid.find( "button." + state ), null, state ); + this._removeClass( + this.grid.find( "button." + state ).removeAttr( "aria-pressed" ), + null, + state + ); this._addClass( button, null, state ); + button.attr( "aria-pressed", true ); return button; }, @@ -367,7 +372,7 @@ return $.widget( "ui.calendar", { }, _buildTitle: function() { - var title = $( "
", { role: "alert", id: this._getGridId() + "-month-label" } ), + var title = $( "
", { role: "status", id: this._getGridId() + "-month-label" } ), month = this._buildTitleMonth(), year = this._buildTitleYear(); @@ -408,7 +413,7 @@ return $.widget( "ui.calendar", { _buildGridHeading: function() { var head = $( "" ), week = $( "" ), - row = $( "" ), + row = $( "" ), i = 0, weekDayLength = this._getViewDate().weekdays().length, weekdays = this._getViewDate().weekdays(); @@ -461,13 +466,7 @@ return $.widget( "ui.calendar", { _buildDayCell: function( day ) { var content = "", dateObject = new Date( day.timestamp ), - dayName = this._calendarDateOptions.formatWeekdayFull( dateObject ), - attributes = [ - "role='gridcell'", - "aria-selected='" + ( this._isCurrent( day ) ? true : false ) + "'", - "aria-label='" + dayName + ", " + this._format( dateObject ) + "'", - "aria-describedby='" + this._getGridId() + "-month-label'" - ], + attributes = [], selectable = ( day.selectable && this._isValid( dateObject ) ); if ( day.render ) { @@ -491,14 +490,17 @@ return $.widget( "ui.calendar", { }, _buildDayElement: function( day, selectable ) { - var attributes, content, - classes = [ "ui-state-default" ]; + var content, + attributes = "", + classes = [ "ui-state-default" ], + current = this._isCurrent( day ); if ( day === this._getDate() && selectable ) { classes.push( "ui-state-focus" ); } - if ( this._isCurrent( day ) ) { + if ( current ) { classes.push( "ui-state-active" ); + attributes += " aria-pressed='true'"; } if ( day.today ) { classes.push( "ui-state-highlight" ); @@ -507,7 +509,7 @@ return $.widget( "ui.calendar", { classes.push( day.extraClasses.split( " " ) ); } - attributes = " class='" + classes.join( " " ) + "'"; + attributes += " class='" + classes.join( " " ) + "'"; if ( selectable ) { attributes += " tabindex='-1' data-ui-calendar-timestamp='" + day.timestamp + "'"; } else { diff --git a/ui/widgets/datepicker.js b/ui/widgets/datepicker.js index 48926ff72b4..a3a7940991a 100644 --- a/ui/widgets/datepicker.js +++ b/ui/widgets/datepicker.js @@ -63,7 +63,6 @@ var widget = $.widget( "ui.datepicker", { "icons", "labels", "locale", "max", "min", "numberOfMonths", "showWeek", "refresh" ], _create: function() { - this.suppressExpandOnFocus = false; this._parse = new Globalize( this.options.locale ).dateParser( this.options.dateFormat ); if ( $.type( this.options.max ) === "string" ) { @@ -165,28 +164,13 @@ var widget = $.widget( "ui.datepicker", { this.refresh(); } }, - mousedown: function( event ) { + mousedown: function() { if ( this.isOpen ) { - this.suppressExpandOnFocus = true; this.close(); return; } - this.open( event ); clearTimeout( this.closeTimer ); }, - focus: function( event ) { - if ( !this.suppressExpandOnFocus && !this.isOpen ) { - this._delay( function() { - this.open( event ); - } ); - } - this._delay( function() { - this.suppressExpandOnFocus = false; - }, 100 ); - }, - blur: function() { - this.suppressExpandOnFocus = false; - }, change: function( event ) { this._trigger( "change", event, { value: this.calendarInstance.valueAsDate() @@ -265,7 +249,6 @@ var widget = $.widget( "ui.datepicker", { }, _focusTrigger: function() { - this.suppressExpandOnFocus = true; this.element.focus(); },