Calendar: Use button instead of link elements for day items

Ref gh-1432

diff --git a/tests/unit/calendar/calendar_core.js b/tests/unit/calendar/calendar_core.js
index 9ffbe50925cdebd92d0367c9937fc31ff2d81d75..dbcdda8eae10d27b08850aedb8df8d73e00bcfc7 100644 (file)
--- a/tests/unit/calendar/calendar_core.js
+++ b/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 ),

diff --git a/tests/unit/calendar/calendar_methods.js b/tests/unit/calendar/calendar_methods.js
index c7b7bf8dc8f2edbe889b98a3af5170c484e8e73d..d447e4eab8b76f1d9e365b2a3f4831fe6e4a5dd1 100644 (file)
--- a/tests/unit/calendar/calendar_methods.js
+++ b/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" );

diff --git a/tests/unit/calendar/calendar_options.js b/tests/unit/calendar/calendar_options.js
index e5a09d3d89eb12769c771382f5204d40d73bf0dd..f1ec947550f18f07cb43c0776aac83b0962c67a1 100644 (file)
--- a/tests/unit/calendar/calendar_options.js
+++ b/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" );
+       ok( firstCell.find( "button" ).prop( "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" );
 });

diff --git a/tests/unit/datepicker/datepicker_core.js b/tests/unit/datepicker/datepicker_core.js
index ffb7ab6c4f2152b987c7589891a17d451cb9b6ac..f7b508d7ad341d853511999156226c4b878e592f 100644 (file)
--- a/tests/unit/datepicker/datepicker_core.js
+++ b/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 ),

diff --git a/tests/unit/datepicker/datepicker_events.js b/tests/unit/datepicker/datepicker_events.js
index 6b2cc200727ee8644b65e8f3f746821727042d78..35720ebf6c7edaf2a5d6b148876ec5e3f9ab3eae 100644 (file)
--- a/tests/unit/datepicker/datepicker_events.js
+++ b/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 );

diff --git a/tests/unit/datepicker/datepicker_methods.js b/tests/unit/datepicker/datepicker_methods.js
index 76b76813c4f683b6d79c9f3d7947a435688781d8..b969c00f49351599e7c54e920c3571baa14fa6e0 100644 (file)
--- a/tests/unit/datepicker/datepicker_methods.js
+++ b/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" );

diff --git a/themes/base/calendar.css b/themes/base/calendar.css
index 7dc8e182929d796bd7db3b8e3880bb4936ac6fda..2262e97a9e50bb4b46829b2522fdda7130944668 100644 (file)
--- a/themes/base/calendar.css
+++ b/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;

diff --git a/ui/calendar.js b/ui/calendar.js
index 44d07a285db90b64c9eaf89829afd542e40c38dd..6cb0dd343e607f80dffe3a1ae59c659ad023e62c 100644 (file)
--- a/ui/calendar.js
+++ b/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
@@ -85,8 +85,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"
                });
 
@@ -152,7 +152,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" );
        },
 
@@ -351,8 +351,8 @@ return $.widget( "ui.calendar", {
        },
 
        _buildDayElement: function( day, selectable ) {
-               var classes = [ "ui-state-default" ],
-                       content = "";
+               var attributes, content,
+                       classes = [ "ui-state-default" ];
 
                if ( day === this.date && selectable ) {
                        classes.push( "ui-state-focus" );
@@ -368,12 +368,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>";