Bug 1582323: When a file input has DOM focus, focus the browse button inside it for a11y. r=MarcoZ

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

--HG--
extra : moz-landing-system : lando

accessible/html/HTMLFormControlAccessible.cpp

@@ -439,6 +439,23 @@ nsresult HTMLFileInputAccessible::HandleAccEvent(AccEvent* aEvent) {
   return NS_OK;
 }
 
+Accessible* HTMLFileInputAccessible::CurrentItem() const {
+  // Allow aria-activedescendant to override.
+  if (Accessible* item = HyperTextAccessibleWrap::CurrentItem()) {
+    return item;
+  }
+
+  // The HTML file input itself gets DOM focus, not the button inside it.
+  // For a11y, we want the button to get focus.
+  Accessible* button = FirstChild();
+  if (!button) {
+    MOZ_ASSERT_UNREACHABLE("File input doesn't contain a button");
+    return nullptr;
+  }
+  MOZ_ASSERT(button->IsButton());
+  return button;
+}
+
 ////////////////////////////////////////////////////////////////////////////////
 // HTMLSpinnerAccessible
 ////////////////////////////////////////////////////////////////////////////////

accessible/html/HTMLFormControlAccessible.h

@@ -122,6 +122,7 @@ class HTMLFileInputAccessible : public HyperTextAccessibleWrap {
   // Accessible
   virtual mozilla::a11y::role NativeRole() const override;
   virtual nsresult HandleAccEvent(AccEvent* aAccEvent) override;
+  virtual Accessible* CurrentItem() const override;
 };
 
 /**

accessible/tests/mochitest/events/test_focus_controls.html

@@ -38,6 +38,9 @@
       gQueue.push(new changeCurrentItem("checkbox"));
       gQueue.push(new changeCurrentItem("radio1"));
 
+      let fileBrowseButton = getAccessible("file").firstChild;
+      gQueue.push(new synthFocus("file", new focusChecker(fileBrowseButton)));
+
       gQueue.invoke(); // Will call SimpleTest.finish();
     }
 
@@ -66,6 +69,7 @@
   <input id="checkbox" type="checkbox">
   <input id="radio1" type="radio" name="radiogroup">
   <input id="radio2" type="radio" name="radiogroup">
+  <input id="file" type="file">
 
   <div id="eventdump"></div>
 </body>