Bug 1673036 - If focused accessible is styled away, emit focus event on document. r=Jamie

Previously, the focus was emitted on the accessible's visible
container, even if it was not focusable.

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

accessible/base/FocusManager.cpp

@@ -368,8 +368,11 @@ void FocusManager::ProcessFocusEvent(AccEvent* aEvent) {
 nsINode* FocusManager::FocusedDOMNode() const {
   nsFocusManager* DOMFocusManager = nsFocusManager::GetFocusManager();
   nsIContent* focusedElm = DOMFocusManager->GetFocusedElement();
-
-  if (focusedElm) {
+  nsIFrame* focusedFrame = focusedElm ? focusedElm->GetPrimaryFrame() : nullptr;
+  // DOM elements retain their focused state when they get styled as display:
+  // none/content or visibility: hidden. We should treat those cases as if those
+  // elements were removed, and focus on doc.
+  if (focusedFrame && focusedFrame->StyleVisibility()->IsVisible()) {
     // Print preview documents don't get DocAccessibles, but we still want a11y
     // focus to go somewhere useful. Therefore, we allow a11y focus to land on
     // the OuterDocAccessible in this case.

accessible/tests/mochitest/events/test_focus_removal.html

@@ -24,10 +24,14 @@
         aNodeToFocus.id + ".focus()");
     }
 
-    async function expectFocusAfterRemove(aNodeToRemove, aExpectedFocus) {
+    async function expectFocusAfterRemove(aNodeToRemove, aExpectedFocus, aDisplayNone = false) {
       let focused = waitForEvent(EVENT_FOCUS, aExpectedFocus);
       info("Removing " + aNodeToRemove.id);
-      aNodeToRemove.remove();
+      if (aDisplayNone) {
+        aNodeToRemove.style.display = "none";
+      } else {
+        aNodeToRemove.remove();
+      }
       await focused;
       let friendlyExpected = aExpectedFocus == document ?
         "document" : aExpectedFocus.id;
@@ -53,6 +57,11 @@
       await setFocus(listbox, option);
       await expectFocusAfterRemove(option, listbox);
 
+      info("Test hiding focused element with display: none");
+      let groupingButton = getNode("groupingButton");
+      await setFocus(groupingButton);
+      await expectFocusAfterRemove(groupingButton, document, true);
+
       SimpleTest.finish();
     }
 
@@ -78,5 +87,9 @@
     <div role="option" id="option"></div>
   </div>
 
+  <div role="grouping" id="grouping">
+    <button id="groupingButton">
+  </div>
+
 </body>
 </html>