Skip to content

Commit 9fcf801

Browse files
fnagelfnagel
committed
Calendar: Use button instead of link elements for day items
1 parent a595202 commit 9fcf801

File tree

8 files changed

+45
-25
lines changed

8 files changed

+45
-25
lines changed

‎tests/unit/calendar/calendar_core.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -306,7 +306,7 @@ asyncTest( "mouse", function() {
306306
date = new Date();
307307

308308
function step1() {
309-
$( "tbody a:contains(10)", element ).simulate( "mousedown" );
309+
$( "tbody button:contains(10)", element ).simulate( "mousedown" );
310310
date.setDate( 10 );
311311
TestHelpers.calendar.equalsDate(
312312
element.calendar( "valueAsDate" ),
@@ -315,7 +315,7 @@ asyncTest( "mouse", function() {
315315
);
316316

317317
element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
318-
$( ".ui-calendar-calendar tbody a:contains(12)", element ).simulate( "mousedown" );
318+
$( ".ui-calendar-calendar tbody button:contains(12)", element ).simulate( "mousedown" );
319319
TestHelpers.calendar.equalsDate(
320320
element.calendar( "valueAsDate" ),
321321
new Date( 2008, 2 - 1, 12 ),
@@ -325,7 +325,7 @@ asyncTest( "mouse", function() {
325325
// Previous/next
326326
element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
327327
$( ".ui-calendar-prev", element ).simulate( "click" );
328-
$( ".ui-calendar-calendar tbody a:contains(16)", element ).simulate( "mousedown" );
328+
$( ".ui-calendar-calendar tbody button:contains(16)", element ).simulate( "mousedown" );
329329
TestHelpers.calendar.equalsDate(
330330
element.calendar( "valueAsDate" ),
331331
new Date( 2008, 1 - 1, 16 ),
@@ -334,7 +334,7 @@ asyncTest( "mouse", function() {
334334

335335
element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
336336
$( ".ui-calendar-next", element ).simulate( "click" );
337-
$( ".ui-calendar-calendar tbody a:contains(18)", element ).simulate( "mousedown" );
337+
$( ".ui-calendar-calendar tbody button:contains(18)", element ).simulate( "mousedown" );
338338
TestHelpers.calendar.equalsDate(
339339
element.calendar( "valueAsDate" ),
340340
new Date( 2008, 3 - 1, 18 ),
@@ -354,7 +354,7 @@ asyncTest( "mouse", function() {
354354
});
355355

356356
$( ".ui-calendar-prev", element ).simulate( "click" );
357-
$( "tbody a:contains(16)", element ).simulate( "mousedown" );
357+
$( "tbody button:contains(16)", element ).simulate( "mousedown" );
358358
TestHelpers.calendar.equalsDate(
359359
element.calendar( "valueAsDate" ),
360360
new Date( 2008, 2 - 1, 16 ),
@@ -372,7 +372,7 @@ asyncTest( "mouse", function() {
372372
});
373373

374374
$( ".ui-calendar-next", element ).simulate( "click" );
375-
$( "tbody a:contains(18)", element ).simulate( "mousedown" );
375+
$( "tbody button:contains(18)", element ).simulate( "mousedown" );
376376
TestHelpers.calendar.equalsDate(
377377
element.calendar( "valueAsDate" ),
378378
new Date( 2008, 2 - 1, 18 ),

‎tests/unit/calendar/calendar_methods.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,10 @@ test( "value", function() {
4242
var element = $( "#calendar" ).calendar();
4343

4444
element.calendar( "value", "1/1/14" );
45-
ok( element.find( "a[data-timestamp]:first" ).hasClass( "ui-state-active" ), "first day marked as selected" );
45+
ok( element.find(
46+
"button[data-timestamp]:first" ).hasClass( "ui-state-active" ),
47+
"first day marked as selected"
48+
);
4649
equal( element.calendar( "value" ), "1/1/14", "getter" );
4750

4851
element.calendar( "value", "abc" );
@@ -58,7 +61,10 @@ test( "valueAsDate", function() {
5861
date2;
5962

6063
element.calendar( "valueAsDate", new Date( 2014, 0, 1 ) );
61-
ok( element.find( "a[data-timestamp]:first" ).hasClass( "ui-state-active" ), "First day marked as selected" );
64+
ok( element.find(
65+
"button[data-timestamp]:first" ).hasClass( "ui-state-active" ),
66+
"First day marked as selected"
67+
);
6268
TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" );
6369

6470
element.calendar( "destroy" );

‎tests/unit/calendar/calendar_options.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ test( "dateFormat", function() {
112112
var element = $( "#calendar" ).calendar({
113113
value: "1/1/14"
114114
}),
115-
firstDayLink = element.calendar( "widget" ).find( "td[id]:first a" );
115+
firstDayLink = element.calendar( "widget" ).find( "td[id]:first button" );
116116

117117
firstDayLink.trigger( "mousedown" );
118118
equal( element.calendar( "value" ), "1/1/14", "default formatting" );
@@ -128,8 +128,8 @@ test( "eachDay", function() {
128128
picker = input.calendar( "widget" ),
129129
firstCell = picker.find( "td[id]:first" );
130130

131-
equal( firstCell.find( "a" ).length, 1, "days are selectable by default" );
132-
timestamp = parseInt( firstCell.find( "a" ).attr( "data-timestamp" ), 10 );
131+
equal( firstCell.find( "button" ).length, 1, "days are selectable by default" );
132+
timestamp = parseInt( firstCell.find( "button" ).attr( "data-timestamp" ), 10 );
133133
equal( new Date( timestamp ).getDate(), 1, "first available day is the 1st by default" );
134134

135135
// Do not render the 1st of the month
@@ -139,7 +139,7 @@ test( "eachDay", function() {
139139
}
140140
});
141141
firstCell = picker.find( "td[id]:first" );
142-
timestamp = parseInt( firstCell.find( "a" ).attr( "data-timestamp" ), 10 );
142+
timestamp = parseInt( firstCell.find( "button" ).attr( "data-timestamp" ), 10 );
143143
equal( new Date( timestamp ).getDate(), 2, "first available day is the 2nd" );
144144

145145
// Display the 1st of the month but make it not selectable.
@@ -149,14 +149,14 @@ test( "eachDay", function() {
149149
}
150150
});
151151
firstCell = picker.find( "td[id]:first" );
152-
equal( firstCell.find( "a" ).length, 0, "the 1st is not selectable" );
152+
equal( firstCell.find( "button" ).length, 0, "the 1st is not selectable" );
153153

154154
input.calendar( "option", "eachDay", function( day ) {
155155
if ( day.date === 1 ) {
156156
day.extraClasses = "ui-custom";
157157
}
158158
});
159-
ok( picker.find( "td[id]:first a" ).hasClass( "ui-custom" ), "extraClasses applied" );
159+
ok( picker.find( "td[id]:first button" ).hasClass( "ui-custom" ), "extraClasses applied" );
160160

161161
input.calendar( "destroy" );
162162
});

‎tests/unit/datepicker/datepicker_core.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -136,7 +136,7 @@ asyncTest( "mouse", function() {
136136

137137
setTimeout(function() {
138138
input.val( "4/4/08" ).datepicker( "refresh" ).datepicker( "open" );
139-
$( ".ui-calendar-calendar tbody a:contains(12)", picker ).simulate( "mousedown", {} );
139+
$( ".ui-calendar-calendar tbody button:contains(12)", picker ).simulate( "mousedown", {} );
140140
TestHelpers.datepicker.equalsDate(
141141
input.datepicker( "valueAsDate" ),
142142
new Date( 2008, 4 - 1, 12 ),

‎tests/unit/datepicker/datepicker_events.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -57,7 +57,7 @@ test( "close", function() {
5757
shouldFire = false;
5858
input.datepicker( "open" );
5959
shouldFire = true;
60-
input.datepicker( "widget" ).find( "tbody tr:first a:first" ).simulate( "mousedown" );
60+
input.datepicker( "widget" ).find( "tbody tr:first button:first" ).simulate( "mousedown" );
6161
});
6262

6363
test( "open", function() {
@@ -96,7 +96,7 @@ asyncTest( "select", function() {
9696
.simulate( "focus" )
9797
.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
9898
setTimeout(function() {
99-
widget.find( "tbody tr:first a:first" ).simulate( "mousedown" );
99+
widget.find( "tbody tr:first button:first" ).simulate( "mousedown" );
100100
input.datepicker( "close" );
101101
step2();
102102
}, 100 );

‎tests/unit/datepicker/datepicker_methods.js‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,10 @@ test( "value", function() {
7272
equal( input.val(), "1/1/14", "input's value set" );
7373

7474
input.datepicker( "open" );
75-
ok( picker.find( "a[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ), "first day marked as selected" );
75+
ok(
76+
picker.find( "button[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ),
77+
"first day marked as selected"
78+
);
7679
equal( input.datepicker( "value" ), "1/1/14", "getter" );
7780

7881
input.val( "abc" );
@@ -88,7 +91,10 @@ test( "valueAsDate", function() {
8891

8992
input.datepicker( "valueAsDate", new Date( 2014, 0, 1 ) );
9093
equal( input.val(), "1/1/14", "Input's value set" );
91-
ok( picker.find( "a[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ), "First day marked as selected" );
94+
ok(
95+
picker.find( "button[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ),
96+
"First day marked as selected"
97+
);
9298
TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" );
9399

94100
input.val( "a/b/c" );

‎themes/base/calendar.css‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -83,12 +83,20 @@
8383
padding: 1px;
8484
}
8585
.ui-calendar td span,
86-
.ui-calendar td a {
86+
.ui-calendar td button {
8787
display: block;
8888
padding: .2em;
8989
text-align: right;
9090
text-decoration: none;
9191
}
92+
.ui-calendar td button {
93+
cursor: pointer;
94+
width: 100%;
95+
}
96+
.ui-calendar td button::-moz-focus-inner {
97+
padding: 0;
98+
border: 0;
99+
}
92100
.ui-calendar .ui-calendar-buttonpane {
93101
background-image: none;
94102
margin: .7em 0 0 0;

‎ui/calendar.js‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -70,7 +70,7 @@ return $.widget( "ui.calendar", {
7070
this.date.adjust( "M", this.options.numberOfMonths );
7171
this.refresh();
7272
},
73-
"mousedown .ui-calendar-calendar a": function( event ) {
73+
"mousedown .ui-calendar-calendar button": function( event ) {
7474
event.preventDefault();
7575

7676
// TODO Exclude clicks on lead days or handle them correctly
@@ -82,8 +82,8 @@ return $.widget( "ui.calendar", {
8282
},
8383
"mouseenter .ui-calendar-header button": "_hover",
8484
"mouseleave .ui-calendar-header button": "_hover",
85-
"mouseenter .ui-calendar-calendar a": "_hover",
86-
"mouseleave .ui-calendar-calendar a": "_hover",
85+
"mouseenter .ui-calendar-calendar button": "_hover",
86+
"mouseleave .ui-calendar-calendar button": "_hover",
8787
"keydown .ui-calendar-calendar": "_handleKeydown"
8888
});
8989

@@ -151,7 +151,7 @@ return $.widget( "ui.calendar", {
151151
.removeClass( "ui-state-focus" );
152152

153153
this.activeDescendant = this.grid.find(
154-
this._sanitizeSelector( "#" + id ) + " > a"
154+
this._sanitizeSelector( "#" + id ) + " > button"
155155
).addClass( "ui-state-focus" );
156156
},
157157

@@ -369,7 +369,7 @@ return $.widget( "ui.calendar", {
369369

370370
classes = " class='" + classes.join( " " ) + "'";
371371
if ( selectable ) {
372-
content = "<a href='#' tabindex='-1' data-timestamp='" + day.timestamp + "'" + classes + ">" + day.date + "</a>";
372+
content = "<button tabindex='-1' data-timestamp='" + day.timestamp + "'" + classes + ">" + day.date + "</button>";
373373
} else {
374374
content = "<span" + classes + ">" + day.date + "</span>";
375375
}

0 commit comments

Comments
 (0)