Calendar Picker: Make month popup cells non-focusable.

We used <button> for cells, and we had unexpected focus behaviors. This CL
changes <button> to <div>.
This is a preparation to support accessibility in the month popup.

BUG=123896

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

git-svn-id: svn://svn.chromium.org/blink/trunk@181781 bbb929c8-8fbe-4397-9dbb-9b2b20218538

third_party/WebKit/LayoutTests/fast/forms/calendar-picker/calendar-picker-key-operations-expected.txt

@@ -124,6 +124,11 @@ PASS focusedElement() is ".month-popup-button"
 open the month popup
 PASS popupWindow.global.picker.monthPopupView.isVisible is true
 PASS highlightedMonthButton() is "1999-12"
+TAB shouldn't change focus
+PASS focusedElement() is ".list-view year-list-view"
+PASS focusedElement().indexOf("month-button") < 0 is true
+PASS focusedElement().indexOf("list-cell") < 0 is true
+PASS focusedElement() is ".list-view year-list-view"
 press down
 PASS highlightedMonthButton() is "2000-04"
 press right

third_party/WebKit/LayoutTests/fast/forms/calendar-picker/calendar-picker-key-operations.html

@@ -186,6 +186,15 @@ function test2() {
     shouldBeTrue('popupWindow.global.picker.monthPopupView.isVisible');
     shouldBeEqualToString('highlightedMonthButton()', '1999-12');
 
+    debug('TAB shouldn\'t change focus');
+    shouldBeEqualToString('focusedElement()', '.list-view year-list-view');
+    eventSender.keyDown('\t');
+    // With the MockPagePopup, an elemenet not in the popup is focused.
+    shouldBeTrue('focusedElement().indexOf("month-button") < 0');
+    shouldBeTrue('focusedElement().indexOf("list-cell") < 0');
+    eventSender.keyDown('\t', ['shiftKey']);
+    shouldBeEqualToString('focusedElement()', '.list-view year-list-view');
+
     debug("press down");
     eventSender.keyDown('downArrow');
     shouldBeEqualToString('highlightedMonthButton()', '2000-04');
@@ -278,6 +287,18 @@ function focusedElement() {
     if (!element)
         return null;
     var identifier = "." + element.className;
+    if (element.value)
+        identifier += "[value=" + element.value + "]";
+    if (identifier == ".")
+        return elementIdentifier(element);
+    return identifier;
+}
+
+function elementIdentifier(element) {
+    var identifier = element.parentElement ? (elementIdentifier(element.parentElement) + " ") : "";
+    identifier += element.tagName;
+    if (element.className)
+        identifier += "." + element.className.replace(/ +/g, ".");
     if (element.value)
         identifier += "[value=" + element.value + "]";
     return identifier;

third_party/WebKit/Source/web/resources/calendarPicker.css

@@ -244,18 +244,24 @@ body {
 .month-button {
     flex: 1;
     height: 32px;
+    line-height: 32px;
     padding: 0 !important;
     margin: 0 !important;
     background-image: none !important;
     background-color: #ffffff;
     border-width: 0 !important;
     box-shadow: none !important;
+    text-align: center;
 }
 
 .month-button.highlighted {
     background-color: #e5ecf8;
 }
 
+.month-button[aria-disabled="true"] {
+    color: GrayText;
+}
+
 .scrubby-scroll-bar {
     width: 14px;
     height: 60px;

third_party/WebKit/Source/web/resources/calendarPicker.js

@@ -2146,7 +2146,7 @@ function YearListCell(shortMonthLabels) {
         var buttonsRow = createElement("div", YearListCell.ClassNameMonthButtonsRow);
         for (var c = 0; c < YearListCell.ButtonColumns; ++c) {
             var month = c + r * YearListCell.ButtonColumns;
-            var button = createElement("button", YearListCell.ClassNameMonthButton, shortMonthLabels[month]);
+            var button = createElement("div", YearListCell.ClassNameMonthButton, shortMonthLabels[month]);
             button.dataset.month = month;
             buttonsRow.appendChild(button);
             this.monthButtons.push(button);
@@ -2409,7 +2409,7 @@ YearListView.prototype.onClick = function(event) {
         this.scrollView.scrollTo(this.selectedRow * YearListCell.Height, true);
     } else {
         var monthButton = enclosingNodeOrSelfWithClass(event.target, YearListCell.ClassNameMonthButton);
-        if (!monthButton)
+        if (!monthButton || monthButton.getAttribute("aria-disabled") == "true")
             return;
         var month = parseInt(monthButton.dataset.month, 10);
         this.dispatchEvent(YearListView.EventTypeYearListViewDidSelectMonth, this, new Month(year, month));
@@ -2480,7 +2480,7 @@ YearListView.prototype.prepareNewCell = function(row) {
     }
     for (var i = 0; i < cell.monthButtons.length; ++i) {
         var month = new Month(row + 1, i);
-        cell.monthButtons[i].disabled = this._minimumMonth > month || this._maximumMonth < month;
+        cell.monthButtons[i].setAttribute("aria-disabled", this._minimumMonth > month || this._maximumMonth < month ? "true" : "false");
     }
     var animator = this._runningAnimators[row];
     if (animator)
@@ -2586,7 +2586,7 @@ YearListView.prototype.selectWithoutAnimating = function(row) {
 
 /**
  * @param {!Month} month
- * @return {?HTMLButtonElement}
+ * @return {?HTMLDivElement}
  */
 YearListView.prototype.buttonForMonth = function(month) {
     if (!month)