Skip to content

Commit

Permalink
Date Picker Dialog Example: hide dates from prior or next month (pull #…
Browse files Browse the repository at this point in the history 
…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.
  • Loading branch information
@jongund @mcking65
jongund authored and mcking65 committed Aug 28, 2019
1 parent a34c63e commit e653a7a
Show file tree
Hide file tree
Showing 6 changed files with 51 additions and 97 deletions.
13 changes: 1 addition & 12 deletions examples/dialog-modal/css/datepicker.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
24 changes: 12 additions & 12 deletions examples/dialog-modal/datepicker-dialog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -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>
Expand All @@ -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>
Expand Down
33 changes: 17 additions & 16 deletions examples/dialog-modal/js/datepicker-day.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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) {
Expand Down Expand Up @@ -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();
}
Expand Down
62 changes: 16 additions & 46 deletions examples/dialog-modal/js/datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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);
Expand All @@ -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) {
Expand All @@ -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';
Expand Down Expand Up @@ -250,7 +226,6 @@ DatePicker.prototype.handleOkButton = function (event) {

switch (event.keyCode) {
case this.keyCode.ENTER:
case this.keyCode.SPACE:

this.setTextboxDate();

Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down
12 changes: 3 additions & 9 deletions test/tests/dialog-modal_datepicker.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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();
Expand Down Expand Up @@ -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);

Expand Down Expand Up @@ -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);

Expand Down
4 changes: 2 additions & 2 deletions test/util/report.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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);
Expand All @@ -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);
Expand Down

0 comments on commit e653a7a

Please sign in to comment.