Bug 1527691 - Disabled datetimebox inner elements shouldn't be tabbable. r=Gijs

They're not focusable with mouse already.

Differential Revision: https://phabricator.services.mozilla.com/D147084

dom/html/test/forms/test_input_datetime_tabindex.html

@@ -16,16 +16,18 @@ https://bugzilla.mozilla.org/show_bug.cgi?id=1288591
   <input id="time1" type="time" tabindex="0">
   <input id="time2" type="time" tabindex="-1">
   <input id="time3" type="time" tabindex="0">
+  <input id="time4" type="time" disabled>
   <input id="date1" type="date" tabindex="0">
   <input id="date2" type="date" tabindex="-1">
   <input id="date3" type="date" tabindex="0">
+  <input id="date4" type="date" disabled>
   <input id="datetime-local1" type="datetime-local" tabindex="0">
   <input id="datetime-local2" type="datetime-local" tabindex="-1">
   <input id="datetime-local3" type="datetime-local" tabindex="0">
+  <input id="datetime-local4" type="datetime-local" disabled>
 </div>
 <pre id="test">
-<script type="application/javascript">
-
+<script>
 /**
  * Test for Bug 1288591.
  * This test checks whether date/time input types tabindex attribute works
@@ -50,6 +52,7 @@ function testTabindex(type) {
   let input1 = document.getElementById(type + "1");
   let input2 = document.getElementById(type + "2");
   let input3 = document.getElementById(type + "3");
+  let input4 = document.getElementById(type + "4");
 
   input1.focus();
   is(document.activeElement, input1,
@@ -76,14 +79,20 @@ function testTabindex(type) {
   checkInnerTextboxTabindex(input1, 0);
   checkInnerTextboxTabindex(input2, -1);
   checkInnerTextboxTabindex(input3, 0);
+  checkInnerTextboxTabindex(input4, -1);
 
   // Changing the tabindex attribute dynamically.
   input3.setAttribute("tabindex", "-1");
+
   synthesizeKey("KEY_Tab"); // need only one TAB since input2 is not tabbable
+
   isnot(document.activeElement, input3,
         "element with tabindex changed to -1 should not be tabbable");
+  isnot(document.activeElement, input4,
+        "disabled element should not be tabbable");
 
   checkInnerTextboxTabindex(input3, -1);
+  checkInnerTextboxTabindex(input4, -1);
 }
 
 function test() {

toolkit/content/widgets/datetimebox.js

@@ -346,7 +346,7 @@ this.DateTimeBoxWidget = class {
     field.textContent = aPlaceHolder;
     field.placeholder = aPlaceHolder;
     field.setAttribute("aria-valuetext", "");
-    field.tabIndex = this.mInputElement.tabIndex;
+    field.tabIndex = this.editFieldTabIndex();
 
     field.setAttribute("readonly", this.mInputElement.readOnly);
     field.setAttribute("disabled", this.mInputElement.disabled);
@@ -447,6 +447,13 @@ this.DateTimeBoxWidget = class {
     this.mIsPickerOpen = aIsOpen;
   }
 
+  editFieldTabIndex() {
+    if (this.mInputElement.disabled) {
+      return -1;
+    }
+    return this.mInputElement.tabIndex;
+  }
+
   updateEditAttributes() {
     this.log("updateEditAttributes");
 
@@ -465,8 +472,8 @@ this.DateTimeBoxWidget = class {
       child.disabled = this.mInputElement.disabled;
       child.readOnly = this.mInputElement.readOnly;
 
-      // tabIndex works on all elements
-      child.tabIndex = this.mInputElement.tabIndex;
+      // tabIndex as a property works on all relevant elements.
+      child.tabIndex = this.editFieldTabIndex();
     }
 
     this.mResetButton.disabled =