Skip to content

Datepicker accessibility work. #1841

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

Closed
wants to merge 4 commits into from
Closed

Datepicker accessibility work. #1841

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
8107bf9
Datepicker: Accessibility: Change prev/next month links to buttons.
NigelCunningham Oct 25, 2017
9b8bf00
Datepicker: Accessibility: Change dates to buttons.
NigelCunningham Oct 25, 2017
aa8b2aa
Datepicker: Accessibility: Add aria-pressed attribute for dates.
NigelCunningham Oct 25, 2017
094c5e8
Datepicker: Accessibility: Fix CS issue and remove unneeded selector
NigelCunningham Oct 25, 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
36 changes: 18 additions & 18 deletions tests/unit/datepicker/core.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,8 +54,8 @@ QUnit.test( "baseStructure", function( assert ) {
header = dp.children( ":first" );
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure - header division" );
assert.equal( header.children().length, 3, "Structure - header child count" );
assert.ok( header.children( ":first" ).is( "a.ui-datepicker-prev" ) && header.children( ":first" ).html() !== "", "Structure - prev link" );
assert.ok( header.children( ":eq(1)" ).is( "a.ui-datepicker-next" ) && header.children( ":eq(1)" ).html() !== "", "Structure - next link" );
assert.ok( header.children( ":first" ).is( "button.ui-datepicker-prev" ) && header.children( ":first" ).html() !== "", "Structure - prev link" );
assert.ok( header.children( ":eq(1)" ).is( "button.ui-datepicker-next" ) && header.children( ":eq(1)" ).html() !== "", "Structure - next link" );

title = header.children( ":last" );
assert.ok( title.is( "div.ui-datepicker-title" ) && title.html() !== "", "Structure - title division" );
Expand Down Expand Up @@ -232,8 +232,8 @@ QUnit.test( "customStructure", function( assert ) {
header = dp.children( ":first" );
assert.ok( header.is( "div.ui-datepicker-header" ), "Structure RTL - header division" );
assert.equal( header.children().length, 3, "Structure RTL - header child count" );
assert.ok( header.children( ":first" ).is( "a.ui-datepicker-next" ), "Structure RTL - prev link" );
assert.ok( header.children( ":eq(1)" ).is( "a.ui-datepicker-prev" ), "Structure RTL - next link" );
assert.ok( header.children( ":first" ).is( "button.ui-datepicker-next" ), "Structure RTL - prev link" );
assert.ok( header.children( ":eq(1)" ).is( "button.ui-datepicker-prev" ), "Structure RTL - next link" );

panel = dp.children( ":last" );
assert.ok( panel.is( "div.ui-datepicker-buttonpane" ), "Structure RTL - button division" );
Expand Down Expand Up @@ -303,7 +303,7 @@ QUnit.test( "customStructure", function( assert ) {
testHelper.onFocus( inp, function() {
thead = dp.find( ".ui-datepicker-calendar thead tr" );
assert.equal( thead.children().length, 7, "Structure read-only first day - thead child count" );
assert.equal( thead.find( "a" ).length, 0, "Structure read-only first day - thead links count" );
assert.equal( thead.find( "button" ).length, 0, "Structure read-only first day - thead links count" );

inp.datepicker( "hide" ).datepicker( "destroy" );
ready();
Expand Down Expand Up @@ -463,11 +463,11 @@ QUnit.test( "mouse", function( assert ) {
dp = $( "#ui-datepicker-div" ),
date = new Date();
inp.val( "" ).datepicker( "show" );
$( ".ui-datepicker-calendar tbody a:contains(10)", dp ).simulate( "click", {} );
$( ".ui-datepicker-calendar tbody button:contains(10)", dp ).simulate( "click", {} );
date.setDate( 10 );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), date, "Mouse click" );
inp.val( "02/04/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar tbody a:contains(12)", dp ).simulate( "click", {} );
$( ".ui-datepicker-calendar tbody button:contains(12)", dp ).simulate( "click", {} );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 12 ),
"Mouse click - preset" );
inp.val( "02/04/2008" ).datepicker( "show" );
Expand All @@ -479,38 +479,38 @@ QUnit.test( "mouse", function( assert ) {
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 4 ),
"Mouse click - close + preset" );
inp.val( "02/04/2008" ).datepicker( "show" );
$( "a.ui-datepicker-prev", dp ).simulate( "click", {} );
$( "button.ui-datepicker-prev", dp ).simulate( "click", {} );
$( "button.ui-datepicker-close", dp ).simulate( "click", {} );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 4 ),
"Mouse click - abandoned" );

// Current/previous/next
inp.val( "02/04/2008" ).datepicker( "option", { showButtonPanel: true } ).datepicker( "show" );
$( ".ui-datepicker-current", dp ).simulate( "click", {} );
$( ".ui-datepicker-calendar tbody a:contains(14)", dp ).simulate( "click", {} );
$( ".ui-datepicker-calendar tbody button:contains(14)", dp ).simulate( "click", {} );
date.setDate( 14 );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), date, "Mouse click - current" );
inp.val( "02/04/2008" ).datepicker( "show" );
$( ".ui-datepicker-prev", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody a:contains(16)", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody button:contains(16)", dp ).simulate( "click" );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), new Date( 2008, 1 - 1, 16 ),
"Mouse click - previous" );
inp.val( "02/04/2008" ).datepicker( "show" );
$( ".ui-datepicker-next", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody a:contains(18)", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody button:contains(18)", dp ).simulate( "click" );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), new Date( 2008, 3 - 1, 18 ),
"Mouse click - next" );

// Previous/next with minimum/maximum
inp.datepicker( "option", { minDate: new Date( 2008, 2 - 1, 2 ),
maxDate: new Date( 2008, 2 - 1, 26 ) } ).val( "02/04/2008" ).datepicker( "show" );
$( ".ui-datepicker-prev", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody a:contains(16)", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody button:contains(16)", dp ).simulate( "click" );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 16 ),
"Mouse click - previous + min/max" );
inp.val( "02/04/2008" ).datepicker( "show" );
$( ".ui-datepicker-next", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody a:contains(18)", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody button:contains(18)", dp ).simulate( "click" );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), new Date( 2008, 2 - 1, 18 ),
"Mouse click - next + min/max" );

Expand All @@ -519,25 +519,25 @@ QUnit.test( "mouse", function( assert ) {
dp = $( ".ui-datepicker-inline", inl );
date = new Date();
inl.datepicker( "setDate", date );
$( ".ui-datepicker-calendar tbody a:contains(10)", dp ).simulate( "click", {} );
$( ".ui-datepicker-calendar tbody button:contains(10)", dp ).simulate( "click", {} );
date.setDate( 10 );
testHelper.equalsDate( assert, inl.datepicker( "getDate" ), date, "Mouse click inline" );
inl.datepicker( "option", { showButtonPanel: true } ).datepicker( "setDate", new Date( 2008, 2 - 1, 4 ) );
$( ".ui-datepicker-calendar tbody a:contains(12)", dp ).simulate( "click", {} );
$( ".ui-datepicker-calendar tbody button:contains(12)", dp ).simulate( "click", {} );
testHelper.equalsDate( assert, inl.datepicker( "getDate" ), new Date( 2008, 2 - 1, 12 ), "Mouse click inline - preset" );
inl.datepicker( "option", { showButtonPanel: true } );
$( ".ui-datepicker-current", dp ).simulate( "click", {} );
$( ".ui-datepicker-calendar tbody a:contains(14)", dp ).simulate( "click", {} );
$( ".ui-datepicker-calendar tbody button:contains(14)", dp ).simulate( "click", {} );
date.setDate( 14 );
testHelper.equalsDate( assert, inl.datepicker( "getDate" ), date, "Mouse click inline - current" );
inl.datepicker( "setDate", new Date( 2008, 2 - 1, 4 ) );
$( ".ui-datepicker-prev", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody a:contains(16)", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody button:contains(16)", dp ).simulate( "click" );
testHelper.equalsDate( assert, inl.datepicker( "getDate" ), new Date( 2008, 1 - 1, 16 ),
"Mouse click inline - previous" );
inl.datepicker( "setDate", new Date( 2008, 2 - 1, 4 ) );
$( ".ui-datepicker-next", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody a:contains(18)", dp ).simulate( "click" );
$( ".ui-datepicker-calendar tbody button:contains(18)", dp ).simulate( "click" );
testHelper.equalsDate( assert, inl.datepicker( "getDate" ), new Date( 2008, 3 - 1, 18 ),
"Mouse click inline - next" );
} );
Expand Down
8 changes: 4 additions & 4 deletions tests/unit/datepicker/events.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -144,15 +144,15 @@ QUnit.test( "beforeShowDay-getDate", function( assert ) {
// Support: IE <9, jQuery <1.8
// In IE7/8 with jQuery <1.8, encoded spaces behave in strange ways
$( "<span>January&#xa0;2010</span>" ).text(), "Initial month" );
$( "a.ui-datepicker-next", dp ).trigger( "click" );
$( "a.ui-datepicker-next", dp ).trigger( "click" );
$( "button.ui-datepicker-next", dp ).trigger( "click" );
$( "button.ui-datepicker-next", dp ).trigger( "click" );

// Contains non-breaking space
assert.equal( $( "div.ui-datepicker-title" ).text(),
$( "<span>March&#xa0;2010</span>" ).text(), "After next clicks" );
inp.datepicker( "hide" ).datepicker( "show" );
$( "a.ui-datepicker-prev", dp ).trigger( "click" );
$( "a.ui-datepicker-prev", dp ).trigger( "click" );
$( "button.ui-datepicker-prev", dp ).trigger( "click" );
$( "button.ui-datepicker-prev", dp ).trigger( "click" );

// Contains non-breaking space
assert.equal( $( "div.ui-datepicker-title" ).text(),
Expand Down
52 changes: 26 additions & 26 deletions tests/unit/datepicker/options.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -255,7 +255,7 @@ QUnit.test( "otherMonths", function( assert ) {
inp.datepicker( "hide" ).datepicker( "option", "selectOtherMonths", true ).datepicker( "show" );
assert.equal( pop.find( "tbody" ).text(), "311234567891011121314151617181920212223242526272829301234",
"Other months - select" );
assert.ok( pop.find( "td:last a" ).length === 1, "Other months - link content" );
assert.ok( pop.find( "td:last button" ).length === 1, "Other months - link content" );
inp.datepicker( "hide" ).datepicker( "option", "showOtherMonths", false ).datepicker( "show" );
assert.equal( pop.find( "tbody" ).text(),

Expand Down Expand Up @@ -289,7 +289,7 @@ QUnit.test( "defaultDate", function( assert ) {
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), date, "Default date 3" );

date = new Date();
inp.datepicker( "option", { defaultDate: 1 / "a" } ).
inp.datepicker( "option", { defaultDate: 1 / "button" } ).
datepicker( "hide" ).val( "" ).datepicker( "show" ).
simulate( "keydown", { keyCode: $.ui.keyCode.ENTER } );
testHelper.equalsDate( assert, inp.datepicker( "getDate" ), date, "Default date NaN" );
Expand Down Expand Up @@ -710,82 +710,82 @@ QUnit.test( "daylightSaving", function( assert ) {

// Australia, Sydney - AM change, southern hemisphere
inp.val( "04/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(6) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(6) button", dp ).simulate( "click" );
assert.equal( inp.val(), "04/05/2008", "Daylight saving - Australia 04/05/2008" );
inp.val( "04/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(7) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(7) button", dp ).simulate( "click" );
assert.equal( inp.val(), "04/06/2008", "Daylight saving - Australia 04/06/2008" );
inp.val( "04/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(8) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(8) button", dp ).simulate( "click" );
assert.equal( inp.val(), "04/07/2008", "Daylight saving - Australia 04/07/2008" );
inp.val( "10/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(6) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(6) button", dp ).simulate( "click" );
assert.equal( inp.val(), "10/04/2008", "Daylight saving - Australia 10/04/2008" );
inp.val( "10/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(7) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(7) button", dp ).simulate( "click" );
assert.equal( inp.val(), "10/05/2008", "Daylight saving - Australia 10/05/2008" );
inp.val( "10/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(8) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(8) button", dp ).simulate( "click" );
assert.equal( inp.val(), "10/06/2008", "Daylight saving - Australia 10/06/2008" );

// Brasil, Brasilia - midnight change, southern hemisphere
inp.val( "02/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(20) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(20) button", dp ).simulate( "click" );
assert.equal( inp.val(), "02/16/2008", "Daylight saving - Brasil 02/16/2008" );
inp.val( "02/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(21) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(21) button", dp ).simulate( "click" );
assert.equal( inp.val(), "02/17/2008", "Daylight saving - Brasil 02/17/2008" );
inp.val( "02/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(22) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(22) button", dp ).simulate( "click" );
assert.equal( inp.val(), "02/18/2008", "Daylight saving - Brasil 02/18/2008" );
inp.val( "10/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(13) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(13) button", dp ).simulate( "click" );
assert.equal( inp.val(), "10/11/2008", "Daylight saving - Brasil 10/11/2008" );
inp.val( "10/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(14) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(14) button", dp ).simulate( "click" );
assert.equal( inp.val(), "10/12/2008", "Daylight saving - Brasil 10/12/2008" );
inp.val( "10/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(15) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(15) button", dp ).simulate( "click" );
assert.equal( inp.val(), "10/13/2008", "Daylight saving - Brasil 10/13/2008" );

// Lebanon, Beirut - midnight change, northern hemisphere
inp.val( "03/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(34) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(34) button", dp ).simulate( "click" );
assert.equal( inp.val(), "03/29/2008", "Daylight saving - Lebanon 03/29/2008" );
inp.val( "03/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(35) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(35) button", dp ).simulate( "click" );
assert.equal( inp.val(), "03/30/2008", "Daylight saving - Lebanon 03/30/2008" );
inp.val( "03/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(36) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(36) button", dp ).simulate( "click" );
assert.equal( inp.val(), "03/31/2008", "Daylight saving - Lebanon 03/31/2008" );
inp.val( "10/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(27) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(27) button", dp ).simulate( "click" );
assert.equal( inp.val(), "10/25/2008", "Daylight saving - Lebanon 10/25/2008" );
inp.val( "10/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(28) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(28) button", dp ).simulate( "click" );
assert.equal( inp.val(), "10/26/2008", "Daylight saving - Lebanon 10/26/2008" );
inp.val( "10/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(29) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(29) button", dp ).simulate( "click" );
assert.equal( inp.val(), "10/27/2008", "Daylight saving - Lebanon 10/27/2008" );

// US, Eastern - AM change, northern hemisphere
inp.val( "03/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(13) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(13) button", dp ).simulate( "click" );
assert.equal( inp.val(), "03/08/2008", "Daylight saving - US 03/08/2008" );
inp.val( "03/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(14) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(14) button", dp ).simulate( "click" );
assert.equal( inp.val(), "03/09/2008", "Daylight saving - US 03/09/2008" );
inp.val( "03/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(15) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(15) button", dp ).simulate( "click" );
assert.equal( inp.val(), "03/10/2008", "Daylight saving - US 03/10/2008" );
inp.val( "11/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(6) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(6) button", dp ).simulate( "click" );
assert.equal( inp.val(), "11/01/2008", "Daylight saving - US 11/01/2008" );
inp.val( "11/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(7) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(7) button", dp ).simulate( "click" );
assert.equal( inp.val(), "11/02/2008", "Daylight saving - US 11/02/2008" );
inp.val( "11/01/2008" ).datepicker( "show" );
$( ".ui-datepicker-calendar td:eq(8) a", dp ).simulate( "click" );
$( ".ui-datepicker-calendar td:eq(8) button", dp ).simulate( "click" );
assert.equal( inp.val(), "11/03/2008", "Daylight saving - US 11/03/2008" );
} );

Expand Down
4 changes: 3 additions & 1 deletion themes/base/datepicker.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@
top: 2px;
width: 1.8em;
height: 1.8em;
border: none;
}
.ui-datepicker .ui-datepicker-prev-hover,
.ui-datepicker .ui-datepicker-next-hover {
Expand Down Expand Up @@ -79,11 +80,12 @@
padding: 1px;
}
.ui-datepicker td span,
.ui-datepicker td a {
.ui-datepicker td button {
display: block;
padding: .2em;
text-align: right;
text-decoration: none;
width: 100%;
}
.ui-datepicker .ui-datepicker-buttonpane {
background-image: none;
Expand Down
Loading