Skip to content

[WIP] Calendar / Datepicker: Accessibility changes #1829

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Draft
wants to merge 7 commits into
base: datepicker
Choose a base branch
from
Draft

[WIP] Calendar / Datepicker: Accessibility changes #1829

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
9248949
Calendar: Remove unneeded row and gridcell role attributes
fnagel Aug 26, 2017
931cb89
Calendar: Remove unneeded aria attributes from day cell
fnagel Aug 26, 2017
77cd1b3
Calendar: Change title element role attribute from alert to status
fnagel Aug 26, 2017
bba2ac3
Calendar: make sure cell attributes change when day is selected
fnagel Aug 26, 2017
7f66706
Calendar: Use aria pressed on button instead of aria-selected on cell
fnagel Aug 26, 2017
9683725
Calendar: Remove aria-pressed attribute from inactive buttons
fnagel Aug 26, 2017
020e261
Datepicker: Do not open popup when input receives initial focus
fnagel Aug 26, 2017
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
12 changes: 2 additions & 10 deletions tests/unit/calendar/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand All @@ -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" );
Expand All @@ -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" );
} );

} );
8 changes: 6 additions & 2 deletions tests/unit/calendar/methods.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" );

Expand Down
4 changes: 2 additions & 2 deletions tests/unit/datepicker/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" );
Expand All @@ -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 );
} );
Expand Down
30 changes: 16 additions & 14 deletions ui/widgets/calendar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
},
Expand Down Expand Up @@ -367,7 +372,7 @@ return $.widget( "ui.calendar", {
},

_buildTitle: function() {
var title = $( "<div>", { role: "alert", id: this._getGridId() + "-month-label" } ),
var title = $( "<div>", { role: "status", id: this._getGridId() + "-month-label" } ),
month = this._buildTitleMonth(),
year = this._buildTitleYear();

Expand Down Expand Up @@ -408,7 +413,7 @@ return $.widget( "ui.calendar", {
_buildGridHeading: function() {
var head = $( "<thead role='presentation'>" ),
week = $( "<th>" ),
row = $( "<tr role='row'>" ),
row = $( "<tr>" ),
i = 0,
weekDayLength = this._getViewDate().weekdays().length,
weekdays = this._getViewDate().weekdays();
Expand Down Expand Up @@ -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 ) {
Expand All @@ -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" );
Expand All @@ -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 {
Expand Down
19 changes: 1 addition & 18 deletions ui/widgets/datepicker.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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" ) {
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -265,7 +249,6 @@ var widget = $.widget( "ui.datepicker", {
},

_focusTrigger: function() {
this.suppressExpandOnFocus = true;
this.element.focus();
},

Expand Down