Skip to content

GitLab

T
tangled
Commit ab7b0040 authored by tkent@chromium.org's avatar tkent@chromium.org
Browse files
Options

AX: Make the calendar role "grid". 

Rows have role="row", and cells have role="girdcell".

We apply aria-activedescendant to the calendar because the calendar cell is not
focusable. Thus, each of cells needs to have id=.  Also, cells should have
descriptive text as aria-label.

- getLocale() needs to replace _ with - because Intl.DateTimeFormat doesn't
  accept _.

- This CL doesn't improve the calendar picker for type=month and type=week, and
  won't be harmful for them.

BUG=123896

Review URL: https://codereview.chromium.org/536903002

git-svn-id: svn://svn.chromium.org/blink/trunk@181462 bbb929c8-8fbe-4397-9dbb-9b2b20218538
parent ccc9cf60
Hide whitespace changes
Inline Side-by-side
Showing with 63 additions and 5 deletions
third_party/WebKit/LayoutTests/fast/forms/calendar-picker/date-picker-ax-expected.txt 0 → 100644
View file @ ab7b0040
Tests if typing an arrow key dispatches |Focus| and |ActiveDescendantChanged| a11y events.
On success, you will see a series of "PASS" messages, followed by "TEST COMPLETE".
Focused: AXDescription:
Focused: AXDescription: Monday, January 3, 2000
PASS Received ActiveDescendantChanged
PASS successfullyParsed is true
TEST COMPLETE
third_party/WebKit/LayoutTests/fast/forms/calendar-picker/date-picker-ax.html 0 → 100644
View file @ ab7b0040
<!DOCTYPE html>
<html>
<body>
<script src="../../../resources/js-test.js"></script>
<script src="../../forms/resources/picker-common.js"></script>
<script src="resources/calendar-picker-common.js"></script>
<p id="description"></p>
<div id="console"></div>
<input type="date" id="date1" value="2000-01-02">
<script>
description('Tests if typing an arrow key dispatches |Focus| and |ActiveDescendantChanged| a11y events.');
window.accessibilityController.setNotificationListener(function(axnode, type) {
if (type == 'Focus') {
debug('Focused: ' + accessibilityController.focusedElement.description);
} else if (type == 'ActiveDescendantChanged') {
testPassed('Received ActiveDescendantChanged');
finishJSTest();
}
});
var date1 = document.getElementById('date1');
openPicker(date1, test1);
function test1() {
eventSender.keyDown('rightArrow');
}
</script>
</body>
</html>
third_party/WebKit/LayoutTests/fast/forms/resources/picker-common.js
View file @ ab7b0040
...@@ -22,7 +22,7 @@ function openPicker(input, callback) { ...@@ -22,7 +22,7 @@ function openPicker(input, callback) {
function popupOpenCallbackWrapper() { function popupOpenCallbackWrapper() {
popupWindow.removeEventListener("didOpenPicker", popupOpenCallbackWrapper); popupWindow.removeEventListener("didOpenPicker", popupOpenCallbackWrapper);
popupOpenCallback(); setTimeout(popupOpenCallback, 0);
} }
function waitUntilClosing(callback) { function waitUntilClosing(callback) {
......
third_party/WebKit/Source/web/resources/calendarPicker.js
View file @ ab7b0040
...@@ -75,7 +75,7 @@ function hasInaccuratePointingDevice() { ...@@ -75,7 +75,7 @@ function hasInaccuratePointingDevice() {
* @return {!string} lowercase locale name. e.g. "en-us" * @return {!string} lowercase locale name. e.g. "en-us"
*/ */
function getLocale() { function getLocale() {
return (global.params.locale || "en-us").toLowerCase(); return (global.params.locale || "en-us").toLowerCase().replace(/_/g, '-');
} }
/** /**
...@@ -1560,6 +1560,7 @@ ScrollView.prototype.contentPositionForContentOffset = function(offset) { ...@@ -1560,6 +1560,7 @@ ScrollView.prototype.contentPositionForContentOffset = function(offset) {
*/ */
function ListCell() { function ListCell() {
View.call(this, createElement("div", ListCell.ClassNameListCell)); View.call(this, createElement("div", ListCell.ClassNameListCell));
this.element.setAttribute("role", "gridcell");
/** /**
* @type {!number} * @type {!number}
...@@ -1659,6 +1660,7 @@ ListCell.prototype.setSelected = function(selected) { ...@@ -1659,6 +1660,7 @@ ListCell.prototype.setSelected = function(selected) {
function ListView() { function ListView() {
View.call(this, createElement("div", ListView.ClassNameListView)); View.call(this, createElement("div", ListView.ClassNameListView));
this.element.tabIndex = 0; this.element.tabIndex = 0;
this.element.setAttribute("role", "grid");
/** /**
* @type {!number} * @type {!number}
...@@ -3069,10 +3071,13 @@ DayCell.prototype.throwAway = function() { ...@@ -3069,10 +3071,13 @@ DayCell.prototype.throwAway = function() {
* @param {!boolean} highlighted * @param {!boolean} highlighted
*/ */
DayCell.prototype.setHighlighted = function(highlighted) { DayCell.prototype.setHighlighted = function(highlighted) {
if (highlighted) if (highlighted) {
this.element.classList.add(DayCell.ClassNameHighlighted); this.element.classList.add(DayCell.ClassNameHighlighted);
else this.element.setAttribute("aria-selected", "true");
} else {
this.element.classList.remove(DayCell.ClassNameHighlighted); this.element.classList.remove(DayCell.ClassNameHighlighted);
this.element.setAttribute("aria-selected", "false");
}
}; };
/** /**
...@@ -3111,6 +3116,13 @@ DayCell.prototype.setIsToday = function(selected) { ...@@ -3111,6 +3116,13 @@ DayCell.prototype.setIsToday = function(selected) {
DayCell.prototype.reset = function(day) { DayCell.prototype.reset = function(day) {
this.day = day; this.day = day;
this.element.textContent = localizeNumber(this.day.date.toString()); this.element.textContent = localizeNumber(this.day.date.toString());
if (!DayCell.formatter) {
DayCell.formatter = new Intl.DateTimeFormat(getLocale(), {
weekday: "long", year: "numeric", month: "long", day: "numeric", timeZone: "UTC"
});
}
this.element.setAttribute("aria-label", DayCell.formatter.format(this.day.startDate()));
this.element.id = this.day.toString();
this.show(); this.show();
}; };
...@@ -3226,6 +3238,7 @@ function CalendarRowCell() { ...@@ -3226,6 +3238,7 @@ function CalendarRowCell() {
ListCell.call(this); ListCell.call(this);
this.element.classList.add(CalendarRowCell.ClassNameCalendarRowCell); this.element.classList.add(CalendarRowCell.ClassNameCalendarRowCell);
this.element.style.height = CalendarRowCell.Height + "px"; this.element.style.height = CalendarRowCell.Height + "px";
this.element.setAttribute("role", "row");
/** /**
* @type {!Array} * @type {!Array}
...@@ -3511,7 +3524,10 @@ CalendarTableView.prototype.updateCells = function() { ...@@ -3511,7 +3524,10 @@ CalendarTableView.prototype.updateCells = function() {
var day = dayCell.day; var day = dayCell.day;
dayCell.setIsToday(Day.createFromToday().equals(day)); dayCell.setIsToday(Day.createFromToday().equals(day));
dayCell.setSelected(day >= firstDayInSelection && day <= lastDayInSelection); dayCell.setSelected(day >= firstDayInSelection && day <= lastDayInSelection);
dayCell.setHighlighted(day >= firstDayInHighlight && day <= lastDayInHighlight); var isHighlighted = day >= firstDayInHighlight && day <= lastDayInHighlight;
dayCell.setHighlighted(isHighlighted);
if (isHighlighted && firstDayInHighlight == lastDayInHighlight)
this.element.setAttribute("aria-activedescendant", dayCell.element.id);
dayCell.setIsInCurrentMonth(day >= firstDayInCurrentMonth && day <= lastDayInCurrentMonth); dayCell.setIsInCurrentMonth(day >= firstDayInCurrentMonth && day <= lastDayInCurrentMonth);
dayCell.setDisabled(!this.calendarPicker.isValidDay(day)); dayCell.setDisabled(!this.calendarPicker.isValidDay(day));
} }
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment