Calendar: Use button instead of link elements for day items

Author: fnagel

tests/unit/calendar/calendar_core.js

@@ -306,7 +306,7 @@ asyncTest( "mouse", function() {
 		date = new Date();
 
 	function step1() {
-		$( "tbody a:contains(10)", element ).simulate( "mousedown" );
+		$( "tbody button:contains(10)", element ).simulate( "mousedown" );
 		date.setDate( 10 );
 		TestHelpers.calendar.equalsDate(
 			element.calendar( "valueAsDate" ),
@@ -315,7 +315,7 @@ asyncTest( "mouse", function() {
 		);
 
 		element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
-		$( ".ui-calendar-calendar tbody a:contains(12)", element ).simulate( "mousedown" );
+		$( ".ui-calendar-calendar tbody button:contains(12)", element ).simulate( "mousedown" );
 		TestHelpers.calendar.equalsDate(
 			element.calendar( "valueAsDate" ),
 			new Date( 2008, 2 - 1, 12 ),
@@ -325,7 +325,7 @@ asyncTest( "mouse", function() {
 		// Previous/next
 		element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
 		$( ".ui-calendar-prev", element ).simulate( "click" );
-		$( ".ui-calendar-calendar tbody a:contains(16)", element ).simulate( "mousedown" );
+		$( ".ui-calendar-calendar tbody button:contains(16)", element ).simulate( "mousedown" );
 		TestHelpers.calendar.equalsDate(
 			element.calendar( "valueAsDate" ),
 			new Date( 2008, 1 - 1, 16 ),
@@ -334,7 +334,7 @@ asyncTest( "mouse", function() {
 
 		element.calendar( "option", "value", new Date( 2008, 2 - 1, 4) );
 		$( ".ui-calendar-next", element ).simulate( "click" );
-		$( ".ui-calendar-calendar tbody a:contains(18)", element ).simulate( "mousedown" );
+		$( ".ui-calendar-calendar tbody button:contains(18)", element ).simulate( "mousedown" );
 		TestHelpers.calendar.equalsDate(
 			element.calendar( "valueAsDate" ),
 			new Date( 2008, 3 - 1, 18 ),
@@ -354,7 +354,7 @@ asyncTest( "mouse", function() {
 		});
 
 		$( ".ui-calendar-prev", element ).simulate( "click" );
-		$( "tbody a:contains(16)", element ).simulate( "mousedown" );
+		$( "tbody button:contains(16)", element ).simulate( "mousedown" );
 		TestHelpers.calendar.equalsDate(
 			element.calendar( "valueAsDate" ),
 			new Date( 2008, 2 - 1, 16 ),
@@ -372,7 +372,7 @@ asyncTest( "mouse", function() {
 		});
 
 		$( ".ui-calendar-next", element ).simulate( "click" );
-		$( "tbody a:contains(18)", element ).simulate( "mousedown" );
+		$( "tbody button:contains(18)", element ).simulate( "mousedown" );
 		TestHelpers.calendar.equalsDate(
 			element.calendar( "valueAsDate" ),
 			new Date( 2008, 2 - 1, 18 ),

tests/unit/calendar/calendar_methods.js

@@ -42,7 +42,10 @@ test( "value", function() {
 	var element = $( "#calendar" ).calendar();
 
 	element.calendar( "value", "1/1/14" );
-	ok( element.find( "a[data-timestamp]:first" ).hasClass( "ui-state-active" ), "first day marked as selected" );
+	ok( element.find(
+		"button[data-timestamp]:first" ).hasClass( "ui-state-active" ),
+		"first day marked as selected"
+	);
 	equal( element.calendar( "value" ), "1/1/14", "getter" );
 
 	element.calendar( "value", "abc" );
@@ -58,7 +61,10 @@ test( "valueAsDate", function() {
 		date2;
 
 	element.calendar( "valueAsDate", new Date( 2014, 0, 1 ) );
-	ok( element.find( "a[data-timestamp]:first" ).hasClass( "ui-state-active" ), "First day marked as selected" );
+	ok( element.find(
+		"button[data-timestamp]:first" ).hasClass( "ui-state-active" ),
+		"First day marked as selected"
+	);
 	TestHelpers.calendar.equalsDate( element.calendar( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" );
 
 	element.calendar( "destroy" );

tests/unit/calendar/calendar_options.js

@@ -112,7 +112,7 @@ test( "dateFormat", function() {
 	var element = $( "#calendar" ).calendar({
 			value: "1/1/14"
 		}),
-		firstDayLink = element.calendar( "widget" ).find( "td[id]:first a" );
+		firstDayLink = element.calendar( "widget" ).find( "td[id]:first button" );
 
 	firstDayLink.trigger( "mousedown" );
 	equal( element.calendar( "value" ), "1/1/14", "default formatting" );
@@ -128,8 +128,8 @@ test( "eachDay", function() {
 		picker = input.calendar( "widget" ),
 		firstCell = picker.find( "td[id]:first" );
 
-	equal( firstCell.find( "a" ).length, 1, "days are selectable by default" );
-	timestamp = parseInt( firstCell.find( "a" ).attr( "data-timestamp" ), 10 );
+	equal( firstCell.find( "button" ).length, 1, "days are selectable by default" );
+	timestamp = parseInt( firstCell.find( "button" ).attr( "data-timestamp" ), 10 );
 	equal( new Date( timestamp ).getDate(), 1, "first available day is the 1st by default" );
 
 	// Do not render the 1st of the month
@@ -139,7 +139,7 @@ test( "eachDay", function() {
 		}
 	});
 	firstCell = picker.find( "td[id]:first" );
-	timestamp = parseInt( firstCell.find( "a" ).attr( "data-timestamp" ), 10 );
+	timestamp = parseInt( firstCell.find( "button" ).attr( "data-timestamp" ), 10 );
 	equal( new Date( timestamp ).getDate(), 2, "first available day is the 2nd" );
 
 	// Display the 1st of the month but make it not selectable.
@@ -149,14 +149,14 @@ test( "eachDay", function() {
 		}
 	});
 	firstCell = picker.find( "td[id]:first" );
-	equal( firstCell.find( "a" ).length, 0, "the 1st is not selectable" );
+	equal( firstCell.find( "button" ).attr( "disabled" ), "disabled", "the 1st is not selectable" );
 
 	input.calendar( "option", "eachDay", function( day ) {
 		if ( day.date === 1 ) {
 			day.extraClasses = "ui-custom";
 		}
 	});
-	ok( picker.find( "td[id]:first a" ).hasClass( "ui-custom" ), "extraClasses applied" );
+	ok( picker.find( "td[id]:first button" ).hasClass( "ui-custom" ), "extraClasses applied" );
 
 	input.calendar( "destroy" );
 });

tests/unit/datepicker/datepicker_core.js

@@ -136,7 +136,7 @@ asyncTest( "mouse", function() {
 
 	setTimeout(function() {
 		input.val( "4/4/08" ).datepicker( "refresh" ).datepicker( "open" );
-		$( ".ui-calendar-calendar tbody a:contains(12)", picker ).simulate( "mousedown", {} );
+		$( ".ui-calendar-calendar tbody button:contains(12)", picker ).simulate( "mousedown", {} );
 		TestHelpers.datepicker.equalsDate(
 			input.datepicker( "valueAsDate" ),
 			new Date( 2008, 4 - 1, 12 ),

tests/unit/datepicker/datepicker_events.js

@@ -57,7 +57,7 @@ test( "close", function() {
 	shouldFire = false;
 	input.datepicker( "open" );
 	shouldFire = true;
-	input.datepicker( "widget" ).find( "tbody tr:first a:first" ).simulate( "mousedown" );
+	input.datepicker( "widget" ).find( "tbody tr:first button:first" ).simulate( "mousedown" );
 });
 
 test( "open", function() {
@@ -96,7 +96,7 @@ asyncTest( "select", function() {
 			.simulate( "focus" )
 			.simulate( "keydown", { keyCode: $.ui.keyCode.DOWN } );
 		setTimeout(function() {
-			widget.find( "tbody tr:first a:first" ).simulate( "mousedown" );
+			widget.find( "tbody tr:first button:first" ).simulate( "mousedown" );
 			input.datepicker( "close" );
 			step2();
 		}, 100 );

tests/unit/datepicker/datepicker_methods.js

@@ -72,7 +72,10 @@ test( "value", function() {
 	equal( input.val(), "1/1/14", "input's value set" );
 
 	input.datepicker( "open" );
-	ok( picker.find( "a[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ), "first day marked as selected" );
+	ok(
+		picker.find( "button[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ),
+		"first day marked as selected"
+	);
 	equal( input.datepicker( "value" ), "1/1/14", "getter" );
 
 	input.val( "abc" );
@@ -88,7 +91,10 @@ test( "valueAsDate", function() {
 
 	input.datepicker( "valueAsDate", new Date( 2014, 0, 1 ) );
 	equal( input.val(), "1/1/14", "Input's value set" );
-	ok( picker.find( "a[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ), "First day marked as selected" );
+	ok(
+		picker.find( "button[data-timestamp]" ).eq( 0 ).hasClass( "ui-state-active" ),
+		"First day marked as selected"
+	);
 	TestHelpers.datepicker.equalsDate( input.datepicker( "valueAsDate" ), new Date( 2014, 0, 1 ), "Getter" );
 
 	input.val( "a/b/c" );

themes/base/calendar.css

@@ -82,12 +82,19 @@
 	border: 0;
 	padding: 1px;
 }
-.ui-calendar td span,
-.ui-calendar td a {
+.ui-calendar td button {
 	display: block;
 	padding: .2em;
 	text-align: right;
-	text-decoration: none;
+	cursor: pointer;
+	width: 100%;
+}
+.ui-calendar td button::-moz-focus-inner {
+	padding: 0;
+	border: 0;
+}
+.ui-calendar .ui-state-disabled button {
+	cursor: default;
 }
 .ui-calendar .ui-calendar-buttonpane {
 	background-image: none;

ui/calendar.js

@@ -75,7 +75,7 @@ return $.widget( "ui.calendar", {
 				this.date.adjust( "M", this.options.numberOfMonths );
 				this.refresh();
 			},
-			"mousedown .ui-calendar-calendar a": function( event ) {
+			"mousedown .ui-calendar-calendar button": function( event ) {
 				event.preventDefault();
 
 				// TODO Exclude clicks on lead days or handle them correctly
@@ -87,8 +87,8 @@ return $.widget( "ui.calendar", {
 			},
 			"mouseenter .ui-calendar-header button": "_hover",
 			"mouseleave .ui-calendar-header button": "_hover",
-			"mouseenter .ui-calendar-calendar a": "_hover",
-			"mouseleave .ui-calendar-calendar a": "_hover",
+			"mouseenter .ui-calendar-calendar button": "_hover",
+			"mouseleave .ui-calendar-calendar button": "_hover",
 			"keydown .ui-calendar-calendar": "_handleKeydown"
 		});
 
@@ -156,7 +156,7 @@ return $.widget( "ui.calendar", {
 			.removeClass( "ui-state-focus" );
 
 		this.activeDescendant = this.grid.find(
-			this._sanitizeSelector( "#" + id ) + " > a"
+			this._sanitizeSelector( "#" + id ) + " > button"
 		).addClass( "ui-state-focus" );
 	},
 
@@ -356,7 +356,7 @@ return $.widget( "ui.calendar", {
 
 	_buildDayElement: function( day, selectable ) {
 		var classes = [ "ui-state-default" ],
-			content = "";
+			attributes, content;
 
 		if ( day === this.date && selectable ) {
 			classes.push( "ui-state-focus" );
@@ -372,12 +372,13 @@ return $.widget( "ui.calendar", {
 			classes.push( day.extraClasses.split( " " ) );
 		}
 
-		classes = " class='" + classes.join( " " ) + "'";
+		attributes = " class='" + classes.join( " " ) + "'";
 		if ( selectable ) {
-			content = "<a href='#' tabindex='-1' data-timestamp='" + day.timestamp + "'" + classes + ">" + day.date + "</a>";
+			attributes += " tabindex='-1' data-timestamp='" + day.timestamp + "'";
 		} else {
-			content = "<span" + classes + ">" + day.date + "</span>";
+			attributes += " disabled='disabled'";
 		}
+		content = "<button" + attributes + ">" + day.date + "</button>";
 
 		if ( day.today ) {
 			content += "<span class='ui-helper-hidden-accessible'>, " + this._getTranslation( "currentText" ) + "</span>";