Date Picker Dialog Example: hide dates from prior or next month (pull #…

…1122) Dates at the beginning and end of the grid that are for days in the prior or next month were displayed and disabled. To resolve issue #1121, this commit removes those dates from the grid. It also removes aria-selected from the button representing the date currently displayed in the edit field because aria-selected is not valid on button.
w3c · Aug 28, 2019 · e653a7a · e653a7a
1 parent a34c63e
commit e653a7a
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 97 deletions.
diff --git a/examples/dialog-modal/css/datepicker.css b/examples/dialog-modal/css/datepicker.css
@@ -186,18 +186,7 @@
 }
 
 .datepicker .disabled {
-  color: #afafaf;
-}
-
-.datepicker .disabled:hover {
-  color: black;
-}
-
-.datepicker .dateButton:disabled {
-  color: #777;
-  background-color: #fff;
-  border: none;
-  cursor: not-allowed;
+  visibility: hidden;
 }
 
 .datepicker .message {

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
@@ -119,12 +119,12 @@ <h2 id="ex_label">Example</h2>
 
             <tbody>
               <tr>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>25</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>26</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>27</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>28</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>29</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>30</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">25</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">26</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">27</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">28</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">29</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">30</button></td>
                 <td class="dateCell"><button class="dateButton" tabindex="-1">1</button></td>
               </tr>
               <tr>
@@ -142,7 +142,7 @@ <h2 id="ex_label">Example</h2>
                 <td class="dateCell"><button class="dateButton" tabindex="-1">11</button></td>
                 <td class="dateCell"><button class="dateButton" tabindex="-1">12</button></td>
                 <td class="dateCell"><button class="dateButton" tabindex="-1">13</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="0">14</button></td>
+                <td class="dateCell"><button class="dateButton">14</button></td>
                 <td class="dateCell"><button class="dateButton" tabindex="-1">15</button></td>
               </tr>
               <tr>
@@ -166,11 +166,11 @@ <h2 id="ex_label">Example</h2>
               <tr>
                 <td class="dateCell"><button class="dateButton" tabindex="-1">30</button></td>
                 <td class="dateCell"><button class="dateButton" tabindex="-1">31</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>1</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>2</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>3</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>4</button></td>
-                <td class="dateCell"><button class="dateButton" tabindex="-1" disabled>5</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">1</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">2</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">3</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">4</button></td>
+                <td class="dateCell"><button class="dateButton disabled" tabindex="-1">5</button></td>
               </tr>
             </tbody>
           </table>

diff --git a/examples/dialog-modal/js/datepicker-day.js b/examples/dialog-modal/js/datepicker-day.js
@@ -46,21 +46,10 @@ DatePickerDay.prototype.isDisabled = function () {
   return this.domNode.classList.contains('disabled');
 };
 
-DatePickerDay.prototype.updateDay = function (disable, day) {
-
-  if (disable) {
-    this.domNode.classList.add('disabled');
-  }
-  else {
-    this.domNode.classList.remove('disabled');
-  }
+DatePickerDay.prototype.updateDay = function (disable, day, selected) {
 
   this.day = new Date(day);
 
-  this.domNode.innerHTML = this.day.getDate();
-  this.domNode.setAttribute('tabindex', '-1');
-  this.domNode.removeAttribute('aria-selected');
-
   var d = this.day.getDate().toString();
   if (this.day.getDate() <= 9) {
     d = '0' + d;
@@ -71,8 +60,23 @@ DatePickerDay.prototype.updateDay = function (disable, day) {
     m = '0' + m;
   }
 
+  this.domNode.setAttribute('tabindex', '-1');
+  this.domNode.removeAttribute('aria-selected');
   this.domNode.setAttribute('data-date', this.day.getFullYear() + '-' + m + '-' + d);
 
+  if (disable) {
+    this.domNode.classList.add('disabled');
+    this.domNode.innerHTML = '';
+  }
+  else {
+    this.domNode.classList.remove('disabled');
+    this.domNode.innerHTML = this.day.getDate();
+    if (selected) {
+      this.domNode.setAttribute('aria-selected', 'true');
+      this.domNode.setAttribute('tabindex', '0');
+    }
+  }
+
 };
 
 DatePickerDay.prototype.handleKeyDown = function (event) {
@@ -161,10 +165,7 @@ DatePickerDay.prototype.handleKeyDown = function (event) {
 
 DatePickerDay.prototype.handleMouseDown = function (event) {
 
-  if (this.isDisabled()) {
-    this.datepicker.moveFocusToDay(this.day);
-  }
-  else {
+  if (!this.isDisabled()) {
     this.datepicker.setTextboxDate(this.day);
     this.datepicker.hide();
   }

diff --git a/examples/dialog-modal/js/datepicker.js b/examples/dialog-modal/js/datepicker.js
@@ -110,6 +110,17 @@ DatePicker.prototype.init = function () {
   this.setFocusDay();
 };
 
+DatePicker.prototype.isSameDay = function (day1, day2) {
+  return (day1.getFullYear() == day2.getFullYear()) &&
+        (day1.getMonth() == day2.getMonth()) &&
+        (day1.getDate() == day2.getDate());
+};
+
+DatePicker.prototype.isNotSameMonth = function (day1, day2) {
+  return (day1.getFullYear() != day2.getFullYear()) ||
+        (day1.getMonth() != day2.getMonth());
+};
+
 DatePicker.prototype.updateGrid = function () {
 
   var i, flag;
@@ -118,7 +129,6 @@ DatePicker.prototype.updateGrid = function () {
   this.MonthYearNode.innerHTML = this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
 
   var firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
-  var daysInMonth = new Date(fd.getFullYear(), fd.getMonth() + 1, 0).getDate();
   var dayOfWeek = firstDayOfMonth.getDay();
 
   firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
@@ -127,30 +137,9 @@ DatePicker.prototype.updateGrid = function () {
 
   for (i = 0; i < this.days.length; i++) {
     flag = d.getMonth() != fd.getMonth();
-    this.days[i].updateDay(flag, d);
-    if ((d.getFullYear() == this.selectedDay.getFullYear()) &&
-        (d.getMonth() == this.selectedDay.getMonth()) &&
-        (d.getDate() == this.selectedDay.getDate())) {
-      this.days[i].domNode.setAttribute('aria-selected', 'true');
-    }
+    this.days[i].updateDay(flag, d, this.isSameDay(d, this.selectedDay));
     d.setDate(d.getDate() + 1);
   }
-
-  if ((dayOfWeek + daysInMonth) < 36) {
-    this.hideLastRow();
-  }
-  else {
-    this.showLastRow();
-  }
-
-};
-
-DatePicker.prototype.hideLastRow = function () {
-  this.lastRowNode.style.visibility = 'hidden';
-};
-
-DatePicker.prototype.showLastRow = function () {
-  this.lastRowNode.style.visibility = 'visible';
 };
 
 DatePicker.prototype.setFocusDay = function (flag) {
@@ -162,42 +151,29 @@ DatePicker.prototype.setFocusDay = function (flag) {
   var fd = this.focusDay;
 
   function checkDay (d) {
+
     d.domNode.setAttribute('tabindex', '-1');
-    if ((d.day.getDate()  == fd.getDate()) &&
-        (d.day.getMonth() == fd.getMonth()) &&
-        (d.day.getFullYear() == fd.getFullYear())) {
+    if (this.isSameDay(d.day, fd)) {
       d.domNode.setAttribute('tabindex', '0');
       if (flag) {
         d.domNode.focus();
       }
     }
   }
 
+
   this.days.forEach(checkDay.bind(this));
 };
 
 DatePicker.prototype.updateDay = function (day) {
   var d = this.focusDay;
   this.focusDay = day;
-  if ((d.getMonth() !== day.getMonth()) ||
-      (d.getFullYear() !== day.getFullYear())) {
+  if (this.isNotSameMonth(d, day)) {
     this.updateGrid();
     this.setFocusDay();
   }
 };
 
-DatePicker.prototype.getDaysInLastMonth = function () {
-  var fd = this.focusDay;
-  var lastDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 0);
-  return lastDayOfMonth.getDate();
-};
-
-DatePicker.prototype.getDaysInMonth = function () {
-  var fd = this.focusDay;
-  var lastDayOfMonth = new Date(fd.getFullYear(), fd.getMonth() + 1, 0);
-  return lastDayOfMonth.getDate();
-};
-
 DatePicker.prototype.show = function () {
 
   this.dialogNode.style.display = 'block';
@@ -250,7 +226,6 @@ DatePicker.prototype.handleOkButton = function (event) {
 
       switch (event.keyCode) {
         case this.keyCode.ENTER:
-        case this.keyCode.SPACE:
 
           this.setTextboxDate();
 
@@ -300,7 +275,6 @@ DatePicker.prototype.handleCancelButton = function (event) {
 
       switch (event.keyCode) {
         case this.keyCode.ENTER:
-        case this.keyCode.SPACE:
           this.hide();
           flag = true;
           break;
@@ -345,7 +319,6 @@ DatePicker.prototype.handleNextYearButton = function (event) {
           break;
 
         case this.keyCode.ENTER:
-        case this.keyCode.SPACE:
           this.moveToNextYear();
           this.setFocusDay(false);
           flag = true;
@@ -379,7 +352,6 @@ DatePicker.prototype.handlePreviousYearButton = function (event) {
       switch (event.keyCode) {
 
         case this.keyCode.ENTER:
-        case this.keyCode.SPACE:
           this.moveToPreviousYear();
           this.setFocusDay(false);
           flag = true;
@@ -432,7 +404,6 @@ DatePicker.prototype.handleNextMonthButton = function (event) {
           break;
 
         case this.keyCode.ENTER:
-        case this.keyCode.SPACE:
           this.moveToNextMonth();
           this.setFocusDay(false);
           flag = true;
@@ -470,7 +441,6 @@ DatePicker.prototype.handlePreviousMonthButton = function (event) {
           break;
 
         case this.keyCode.ENTER:
-        case this.keyCode.SPACE:
           this.moveToPreviousMonth();
           this.setFocusDay(false);
           flag = true;

diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
@@ -349,9 +349,7 @@ ariaTest('ENTER to buttons change calendar and date in focus', exampleFile, 'mon
   );
 });
 
-// This test is failing due to: https://github.com/w3c/aria-practices/issues/1098
-// If you fix the issue, please remove ".failing"
-ariaTest.failing('SPACE to buttons change calendar and date in focus', exampleFile, 'month-year-button-space-return', async (t) => {
+ariaTest('SPACE to buttons change calendar and date in focus', exampleFile, 'month-year-button-space-return', async (t) => {
   t.plan(4);
 
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
@@ -679,9 +677,7 @@ ariaTest('ENTER on cancel button does not select date', exampleFile, 'okay-cance
   );
 });
 
-// This test is failing due to: https://github.com/w3c/aria-practices/issues/1098
-// If you fix the issue, please remove ".failing"
-ariaTest.failing('SPACE on cancel button does not select date', exampleFile, 'okay-cancel-button-space-return', async (t) => {
+ariaTest('SPACE on cancel button does not select date', exampleFile, 'okay-cancel-button-space-return', async (t) => {
 
   t.plan(4);
 
@@ -749,9 +745,7 @@ ariaTest('ENTER on ok button does selects date', exampleFile, 'okay-cancel-butto
   );
 });
 
-// This test is failing due to: https://github.com/w3c/aria-practices/issues/1098
-// If you fix the issue, please remove ".failing"
-ariaTest.failing('SPACE on ok button does selects date', exampleFile, 'okay-cancel-button-space-return', async (t) => {
+ariaTest('SPACE on ok button does selects date', exampleFile, 'okay-cancel-button-space-return', async (t) => {
 
   t.plan(4);
 

diff --git a/test/util/report.js b/test/util/report.js
@@ -107,7 +107,7 @@ const processDocumentationInExampleFiles = function (exampleFiles, exampleCovera
       let $row = $(this);
       let dataTestId = $row.attr('data-test-id');
 
-      if (dataTestId === ignoredDataTestId) { return; };
+      if (dataTestId === ignoredDataTestId) { return; }
 
       if (dataTestId !== undefined) {
         dataTestIds.add(dataTestId);
@@ -122,7 +122,7 @@ const processDocumentationInExampleFiles = function (exampleFiles, exampleCovera
       let $row = $(this);
       let dataTestId = $row.attr('data-test-id');
 
-      if (dataTestId === ignoredDataTestId) { return; };
+      if (dataTestId === ignoredDataTestId) { return; }
 
       if (dataTestId !== undefined) {
         dataTestIds.add(dataTestId);