Bug 1455357 - Setting grid item to display:contents resets its accessible role, patch=surkov,jamie, r=marcoz

accessible/base/MarkupMap.h

@@ -327,7 +327,8 @@ MARKUPMAP(summary,
 MARKUPMAP(
   table,
   [](Element* aElement, Accessible* aContext) -> Accessible* {
-     if (aElement->GetPrimaryFrame()->AccessibleType() != eHTMLTableType) {
+     if (aElement->GetPrimaryFrame() &&
+         aElement->GetPrimaryFrame()->AccessibleType() != eHTMLTableType) {
        return new ARIAGridAccessibleWrap(aElement, aContext->Document());
      }
      return nullptr;
@@ -390,12 +391,13 @@ MARKUPMAP(
      if (table) {
         nsIContent* parentContent = aElement->GetParent();
         nsIFrame* parentFrame = parentContent->GetPrimaryFrame();
-        if (!parentFrame->IsTableWrapperFrame()) {
+        if (parentFrame && !parentFrame->IsTableWrapperFrame()) {
           parentContent = parentContent->GetParent();
           parentFrame = parentContent->GetPrimaryFrame();
           if (table->GetContent() == parentContent &&
-              (!parentFrame->IsTableWrapperFrame() ||
-               aElement->GetPrimaryFrame()->AccessibleType() != eHTMLTableRowType)) {
+              ((parentFrame && !parentFrame->IsTableWrapperFrame()) ||
+               (aElement->GetPrimaryFrame() &&
+                aElement->GetPrimaryFrame()->AccessibleType() != eHTMLTableRowType))) {
             return new ARIARowAccessible(aElement, aContext->Document());
           }
         }

accessible/base/nsAccessibilityService.cpp

@@ -1054,6 +1054,20 @@ nsAccessibilityService::CreateAccessible(nsINode* aNode,
   // Check frame and its visibility. Note, hidden frame allows visible
   // elements in subtree.
   if (!frame || !frame->StyleVisibility()->IsVisible()) {
+    // display:contents element doesn't have a frame, but retains the semantics.
+    // All its children are unaffected.
+    if (content->IsElement() && content->AsElement()->IsDisplayContents()) {
+      const HTMLMarkupMapInfo* markupMap =
+        mHTMLMarkupMap.Get(content->NodeInfo()->NameAtom());
+      if (markupMap && markupMap->new_func) {
+        RefPtr<Accessible> newAcc =
+          markupMap->new_func(content->AsElement(), aContext);
+        document->BindToDocument(newAcc, aria::GetRoleMap(content->AsElement()));
+        return newAcc;
+      }
+      return nullptr;
+    }
+
     if (aIsSubtreeHidden && !frame)
       *aIsSubtreeHidden = true;
 

accessible/generic/Accessible.cpp

@@ -324,8 +324,14 @@ uint64_t
 Accessible::VisibilityState() const
 {
   nsIFrame* frame = GetFrame();
-  if (!frame)
+  if (!frame) {
+    // Element having display:contents is considered visible semantically,
+    // despite it doesn't have a visually visible box.
+    if (mContent->IsElement() && mContent->AsElement()->IsDisplayContents()) {
+      return states::OFFSCREEN;
+    }
     return states::INVISIBLE;
+  }
 
   // Walk the parent frame chain to see if there's invisible parent or the frame
   // is in background tab.
@@ -1946,8 +1952,12 @@ Accessible::AppendTextTo(nsAString& aText, uint32_t aStartOffset,
     return;
 
   nsIFrame *frame = GetFrame();
-  if (!frame)
+  if (!frame) {
+    if (mContent->IsElement() && mContent->AsElement()->IsDisplayContents()) {
+      aText += kEmbeddedObjectChar;
+    }
     return;
+  }
 
   NS_ASSERTION(mParent,
                "Called on accessible unbound from tree. Result can be wrong.");

accessible/tests/mochitest/states/test_visibility.html

@@ -23,6 +23,7 @@
       testStates("div_off", STATE_OFFSCREEN, 0, STATE_INVISIBLE);
       testStates("div_transformed", STATE_OFFSCREEN, 0, STATE_INVISIBLE);
       testStates("div_abschild", 0, 0, STATE_INVISIBLE | STATE_OFFSCREEN);
+      testStates("ul", STATE_OFFSCREEN, 0, STATE_INVISIBLE);
 
       SimpleTest.finish();
     }
@@ -66,6 +67,10 @@
       <p style="position: absolute; left: 120px; top:120px;">absolute</p>
     </div>
 
+    <ul id="ul" style="display: contents;">
+      <li>Supermarket 1</li>
+      <li>Supermarket 2</li>
+    </ul>
   </div>
 </body>
 </html>

accessible/tests/mochitest/text/test_hypertext.html

@@ -39,7 +39,7 @@
       // __h__e__l__l__o__ __!__ __s__e__e__ __!__
       //  0  1  2  3  4  5  6  7  8  9 10 11 12 13
 
-      var IDs = [ "hypertext", "hypertext2" ];
+      var IDs = [ "hypertext", "hypertext2", "ht_displaycontents" ];
 
       // //////////////////////////////////////////////////////////////////////
       // characterCount
@@ -123,6 +123,10 @@
 
   <div id="hypertext">hello <a>friend</a> see <img src="about:blank"></div>
   <div id="hypertext2">hello <a>friend</a> see <input></div>
+  <div id="ht_displaycontents">hello <a>friend</a> see <ul id="ul" style="display: contents;">
+    <li>Supermarket 1</li>
+    <li>Supermarket 2</li>
+  </ul></div>
   <ol id="list">
     <li id="listitem">foo</li>
     <li id="listitemnone">bar</li>

accessible/tests/mochitest/tree/a11y.ini

@@ -25,6 +25,7 @@ skip-if = true # Bug 561508
 [test_combobox.xul]
 [test_cssflexbox.html]
 [test_cssoverflow.html]
+[test_display_contents.html]
 [test_dochierarchy.html]
 [test_dockids.html]
 [test_filectrl.html]

accessible/tests/mochitest/tree/test_display_contents.html

@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+<title>CSS display:contents tests</title>
+<link rel="stylesheet" type="text/css"
+      href="chrome://mochikit/content/tests/SimpleTest/test.css" />
+
+<script type="application/javascript"
+        src="chrome://mochikit/content/tests/SimpleTest/SimpleTest.js"></script>
+
+<script type="application/javascript"
+        src="../common.js"></script>
+<script type="application/javascript"
+        src="../role.js"></script>
+
+<script type="application/javascript">
+function doTest() {
+  let tree =
+    { LIST: [
+      { LISTITEM: [
+        { STATICTEXT: [] },
+        { TEXT_LEAF: [] }
+      ]},
+      { LISTITEM: [
+        { STATICTEXT: [] },
+        { TEXT_LEAF: [] }
+      ]},
+    ] };
+  testAccessibleTree("ul", tree);
+
+  SimpleTest.finish();
+}
+
+SimpleTest.waitForExplicitFinish();
+addA11yLoadEvent(doTest);
+</script>
+</head>
+<body>
+  <p id="display"></p>
+  <div id="content" style="display: none"></div>
+  <pre id="test">
+  </pre>
+
+  <ul id="ul" style="display: contents;">
+    <li>Supermarket 1</li>
+    <li>Supermarket 2</li>
+  </ul>
+</body>
+</html>