From 11c1735275eb91e92398401012e4967d0067cbcf Mon Sep 17 00:00:00 2001 From: Felix Nagel Date: Tue, 20 Jan 2015 18:23:49 +0100 Subject: [PATCH] Calendar: Use button instead of link elements for day items Ref gh-1432 --- tests/unit/calendar/calendar_core.js | 12 ++++++------ tests/unit/calendar/calendar_methods.js | 10 ++++++++-- tests/unit/calendar/calendar_options.js | 12 ++++++------ tests/unit/datepicker/datepicker_core.js | 2 +- tests/unit/datepicker/datepicker_events.js | 4 ++-- tests/unit/datepicker/datepicker_methods.js | 10 ++++++++-- themes/base/calendar.css | 13 ++++++++++--- ui/calendar.js | 19 ++++++++++--------- 8 files changed, 51 insertions(+), 31 deletions(-) diff --git a/tests/unit/calendar/calendar_core.js b/tests/unit/calendar/calendar_core.js index 9ffbe5092..dbcdda8ea 100644 --- 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 c7b7bf8dc..d447e4eab 100644 --- 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 e5a09d3d8..f1ec94755 100644 --- 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 ffb7ab6c4..f7b508d7a 100644 --- 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 6b2cc2007..35720ebf6 100644 --- 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 76b76813c..b969c00f4 100644 --- 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 7dc8e1829..2262e97a9 100644 --- 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 44d07a285..6cb0dd343 100644 --- 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 = "" + day.date + ""; + attributes += " tabindex='-1' data-timestamp='" + day.timestamp + "'"; } else { - content = "" + day.date + ""; + attributes += " disabled='disabled'"; } + content = "" + day.date + ""; if ( day.today ) { content += ", " + this._getTranslation( "currentText" ) + "";