Bug 1896047 part 6: Support the CSS attr() function in CssAltContent. r=eeejay

As well as plain strings, alt text items can get their text from an attribute on the Element.
We need to include the values of those attributes when we compute alt text.
In addition, we must watch for changes to these attributes and update the accessibility tree or fire events as necessary.

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

accessible/base/CssAltContent.cpp

@@ -4,8 +4,14 @@
  * file, You can obtain one at http://mozilla.org/MPL/2.0/. */
 
 #include "CssAltContent.h"
+#include "mozilla/a11y/DocAccessible.h"
+#include "mozilla/a11y/DocManager.h"
+#include "mozilla/dom/Document.h"
+#include "mozilla/dom/Element.h"
 #include "nsIContent.h"
 #include "nsIFrame.h"
+#include "nsLayoutUtils.h"
+#include "nsNameSpaceManager.h"
 
 namespace mozilla::a11y {
 
@@ -23,11 +29,24 @@ CssAltContent::CssAltContent(nsIContent* aContent) {
     if (parent && (parent->IsGeneratedContentContainerForBefore() ||
                    parent->IsGeneratedContentContainerForAfter() ||
                    parent->IsGeneratedContentContainerForMarker())) {
+      mPseudoElement = parent->AsElement();
       // We need the frame from the pseudo-element to get the content style.
       frame = parent->GetPrimaryFrame();
       if (!frame) {
         return;
       }
+      // We need the real element to get any attributes.
+      mRealElement = parent->GetParentElement();
+      if (!mRealElement) {
+        return;
+      }
+    }
+  }
+  if (!mRealElement) {
+    if (aContent->IsElement()) {
+      mRealElement = aContent->AsElement();
+    } else {
+      return;
     }
   }
   mItems = frame->StyleContent()->AltContentItems();
@@ -38,8 +57,107 @@ void CssAltContent::AppendToString(nsAString& aOut) {
   for (const auto& item : mItems) {
     if (item.IsString()) {
       aOut.Append(NS_ConvertUTF8toUTF16(item.AsString().AsString()));
+    } else if (item.IsAttr()) {
+      // This item gets its value from an attribute on the element or from
+      // fallback text.
+      MOZ_ASSERT(mRealElement);
+      const auto& attr = item.AsAttr();
+      RefPtr<nsAtom> name = attr.attribute.AsAtom();
+      int32_t nsId = kNameSpaceID_None;
+      RefPtr<nsAtom> ns = attr.namespace_url.AsAtom();
+      if (!ns->IsEmpty()) {
+        nsresult rv = nsNameSpaceManager::GetInstance()->RegisterNameSpace(
+            ns.forget(), nsId);
+        if (NS_FAILED(rv)) {
+          continue;
+        }
+      }
+      if (mRealElement->IsHTMLElement() &&
+          mRealElement->OwnerDoc()->IsHTMLDocument()) {
+        ToLowerCaseASCII(name);
+      }
+      nsAutoString val;
+      if (!mRealElement->GetAttr(nsId, name, val)) {
+        if (RefPtr<nsAtom> fallback = attr.fallback.AsAtom()) {
+          fallback->ToString(val);
+        }
+      }
+      aOut.Append(val);
     }
   }
 }
 
+/* static */
+bool CssAltContent::HandleAttributeChange(nsIContent* aContent,
+                                          int32_t aNameSpaceID,
+                                          nsAtom* aAttribute) {
+  // Handle CSS content which replaces the content of aContent itself.
+  if (CssAltContent(aContent).HandleAttributeChange(aNameSpaceID, aAttribute)) {
+    return true;
+  }
+  // Handle any pseudo-elements with CSS alt content.
+  for (dom::Element* pseudo : {nsLayoutUtils::GetBeforePseudo(aContent),
+                               nsLayoutUtils::GetAfterPseudo(aContent),
+                               nsLayoutUtils::GetMarkerPseudo(aContent)}) {
+    // CssAltContent wants a child of a pseudo-element.
+    nsIContent* child = pseudo ? pseudo->GetFirstChild() : nullptr;
+    if (child &&
+        CssAltContent(child).HandleAttributeChange(aNameSpaceID, aAttribute)) {
+      return true;
+    }
+  }
+  return false;
+}
+
+bool CssAltContent::HandleAttributeChange(int32_t aNameSpaceID,
+                                          nsAtom* aAttribute) {
+  for (const auto& item : mItems) {
+    if (!item.IsAttr()) {
+      continue;
+    }
+    MOZ_ASSERT(mRealElement);
+    const auto& attr = item.AsAttr();
+    RefPtr<nsAtom> name = attr.attribute.AsAtom();
+    if (mRealElement->IsHTMLElement() &&
+        mRealElement->OwnerDoc()->IsHTMLDocument()) {
+      ToLowerCaseASCII(name);
+    }
+    if (name != aAttribute) {
+      continue;
+    }
+    int32_t nsId = kNameSpaceID_None;
+    RefPtr<nsAtom> ns = attr.namespace_url.AsAtom();
+    if (!ns->IsEmpty()) {
+      nsresult rv = nsNameSpaceManager::GetInstance()->RegisterNameSpace(
+          ns.forget(), nsId);
+      if (NS_FAILED(rv)) {
+        continue;
+      }
+    }
+    if (nsId != aNameSpaceID) {
+      continue;
+    }
+    // The CSS alt content references this attribute which has just changed.
+    DocAccessible* docAcc = GetExistingDocAccessible(mRealElement->OwnerDoc());
+    MOZ_ASSERT(docAcc);
+    if (mPseudoElement) {
+      // For simplicity, we just recreate the pseudo-element subtree. If this
+      // becomes a performance problem, we can probably do better. For images,
+      // we can just fire a name change event. Text is a bit more complicated,
+      // as we need to update the text leaf with the new alt text and fire the
+      // appropriate text change events. Mixed content gets even messier.
+      docAcc->RecreateAccessible(mPseudoElement);
+    } else {
+      // This is CSS content replacing an element's content.
+      MOZ_ASSERT(mRealElement->GetPrimaryFrame());
+      MOZ_ASSERT(mRealElement->GetPrimaryFrame()->IsReplaced());
+      LocalAccessible* acc = docAcc->GetAccessible(mRealElement);
+      MOZ_ASSERT(acc);
+      docAcc->FireDelayedEvent(nsIAccessibleEvent::EVENT_NAME_CHANGE, acc);
+    }
+    return true;
+  }
+  return false;
+}
+
 }  // namespace mozilla::a11y

accessible/base/CssAltContent.h

@@ -28,7 +28,18 @@ class MOZ_STACK_CLASS CssAltContent {
    */
   void AppendToString(nsAString& aOut);
 
+  /**
+   * Update accessibility if there is CSS alt content on the given element or a
+   * descendant pseudo-element which references the given attribute.
+   */
+  static bool HandleAttributeChange(nsIContent* aContent, int32_t aNameSpaceID,
+                                    nsAtom* aAttribute);
+
  private:
+  bool HandleAttributeChange(int32_t aNameSpaceID, nsAtom* aAttribute);
+
+  dom::Element* mRealElement = nullptr;
+  dom::Element* mPseudoElement = nullptr;
   mozilla::Span<const mozilla::StyleContentItem> mItems;
 };
 

accessible/generic/LocalAccessible.cpp

@@ -1310,6 +1310,8 @@ void LocalAccessible::DOMAttributeChanged(int32_t aNameSpaceID,
   // DOM attribute & resulting layout to actually change. Otherwise,
   // assistive technology will retrieve the wrong state/value/selection info.
 
+  CssAltContent::HandleAttributeChange(mContent, aNameSpaceID, aAttribute);
+
   // XXX todo
   // We still need to handle special HTML cases here
   // For example, if an <img>'s usemap attribute is modified

accessible/tests/browser/tree/browser_css_alt.js

@@ -26,6 +26,9 @@ addAccessibleTask(
 <h1 id="noAlt" style='content: ${IMAGE};'>noAlt</h1>
 <h1 id="oneString" style='content: ${IMAGE} / "replaced";'>oneString</h1>
 <h1 id="twoStrings" class="twoStrings1">twoStrings</h1>
+<h1 id="attr" style='content: ${IMAGE} / attr(data-alt)' data-alt="replaced">attr</h1>
+<h1 id="attrFallback" style='content: ${IMAGE} / attr(data-alt, "fallback")'>attrFallback</h1>
+<h1 id="mixed" style='content: ${IMAGE} / "re" attr(data-alt, "fallback") attr(missing, "ed")' data-alt="plac">mixed</h1>
   `,
   async function testReplacing(browser, docAcc) {
     testAccessibleTree(findAccessibleChildByID(docAcc, "noAlt"), {
@@ -44,6 +47,23 @@ addAccessibleTask(
       name: "replaced",
       children: [],
     });
+    const attr = findAccessibleChildByID(docAcc, "attr");
+    testAccessibleTree(attr, {
+      role: ROLE_HEADING,
+      name: "replaced",
+      children: [],
+    });
+    const attrFallback = findAccessibleChildByID(docAcc, "attrFallback");
+    testAccessibleTree(attrFallback, {
+      role: ROLE_HEADING,
+      name: "fallback",
+      children: [],
+    });
+    testAccessibleTree(findAccessibleChildByID(docAcc, "mixed"), {
+      role: ROLE_HEADING,
+      name: "replaced",
+      children: [],
+    });
 
     info("Changing oneString content style");
     let changed = waitForEvent(EVENT_NAME_CHANGE, oneString);
@@ -69,6 +89,26 @@ addAccessibleTask(
       name: "REPLACED",
       children: [],
     });
+
+    info("Changing attr data-alt");
+    changed = waitForEvent(EVENT_NAME_CHANGE, attr);
+    await invokeSetAttribute(browser, "attr", "data-alt", "REPLACED");
+    await changed;
+    testAccessibleTree(attr, {
+      role: ROLE_HEADING,
+      name: "REPLACED",
+      children: [],
+    });
+
+    info("Changing attrFallback data-alt");
+    changed = waitForEvent(EVENT_NAME_CHANGE, attrFallback);
+    await invokeSetAttribute(browser, "attrFallback", "data-alt", "replaced");
+    await changed;
+    testAccessibleTree(attrFallback, {
+      role: ROLE_HEADING,
+      name: "replaced",
+      children: [],
+    });
   },
   { chrome: true, topLevel: true }
 );
@@ -91,9 +131,13 @@ addAccessibleTask(
   #strings::after {
     content: ${IMAGE} / "af" "ter";
   }
+  #mixed::before {
+    content: ${IMAGE} / "be" attr(data-alt);
+  }
 </style>
 <h1 id="noAlt">noAlt</h1>
 <h1 id="strings" class="strings1">inside</h1>
+<h1 id="mixed" data-alt="fore">inside</h1>
   `,
   async function testImagePseudo(browser, docAcc) {
     testAccessibleTree(findAccessibleChildByID(docAcc, "noAlt"), {
@@ -110,6 +154,15 @@ addAccessibleTask(
         { role: ROLE_GRAPHIC, name: "after" },
       ],
     });
+    const mixed = findAccessibleChildByID(docAcc, "mixed");
+    testAccessibleTree(mixed, {
+      role: ROLE_HEADING,
+      name: "before inside",
+      children: [
+        { role: ROLE_GRAPHIC, name: "before" },
+        { role: ROLE_TEXT_LEAF, name: "inside" },
+      ],
+    });
 
     info("Changing strings class to strings2");
     let changed = waitForEvent(EVENT_NAME_CHANGE, strings);
@@ -124,6 +177,19 @@ addAccessibleTask(
         { role: ROLE_GRAPHIC, name: "after" },
       ],
     });
+
+    info("Changing mixed data-alt");
+    changed = waitForEvent(EVENT_NAME_CHANGE, mixed);
+    await invokeSetAttribute(browser, "mixed", "data-alt", "FORE");
+    await changed;
+    testAccessibleTree(mixed, {
+      role: ROLE_HEADING,
+      name: "beFORE inside",
+      children: [
+        { role: ROLE_GRAPHIC, name: "beFORE" },
+        { role: ROLE_TEXT_LEAF, name: "inside" },
+      ],
+    });
   },
   { chrome: true, topLevel: true }
 );
@@ -143,9 +209,13 @@ addAccessibleTask(
   .strings2::before {
     content: "before" / "A" "LT";
   }
+  #mixed::before {
+    content: "before" / "a" attr(data-alt);
+  }
 </style>
 <h1 id="noAlt">noAlt</h1>
 <h1 id="strings" class="strings1">inside</h1>
+<h1 id="mixed" data-alt="lt">inside</h1>
   `,
   async function testTextPseudo(browser, docAcc) {
     testAccessibleTree(findAccessibleChildByID(docAcc, "noAlt"), {
@@ -165,6 +235,15 @@ addAccessibleTask(
         { role: ROLE_TEXT_LEAF, name: "inside" },
       ],
     });
+    const mixed = findAccessibleChildByID(docAcc, "mixed");
+    testAccessibleTree(mixed, {
+      role: ROLE_HEADING,
+      name: "altinside",
+      children: [
+        { role: ROLE_STATICTEXT, name: "alt" },
+        { role: ROLE_TEXT_LEAF, name: "inside" },
+      ],
+    });
 
     info("Changing strings class to strings2");
     let changed = waitForEvent(EVENT_NAME_CHANGE, strings);
@@ -178,6 +257,19 @@ addAccessibleTask(
         { role: ROLE_TEXT_LEAF, name: "inside" },
       ],
     });
+
+    info("Changing mixed data-alt");
+    changed = waitForEvent(EVENT_NAME_CHANGE, mixed);
+    await invokeSetAttribute(browser, "mixed", "data-alt", "LT");
+    await changed;
+    testAccessibleTree(mixed, {
+      role: ROLE_HEADING,
+      name: "aLTinside",
+      children: [
+        { role: ROLE_STATICTEXT, name: "aLT" },
+        { role: ROLE_TEXT_LEAF, name: "inside" },
+      ],
+    });
   },
   { chrome: true, topLevel: true }
 );

testing/web-platform/meta/accname/name/comp_name_from_content.html.ini

@@ -10,12 +10,3 @@
 
   [heading with link referencing image using aria-labelledby, that in turn references itself and another element via aria-labelledby]
     expected: FAIL
-
-  [button name from fallback content mixing attr() and strings with ::before and ::after]
-    expected: FAIL
-
-  [heading name from fallback content mixing attr() and strings with ::before and ::after]
-    expected: FAIL
-
-  [link name from fallback content mixing attr() and strings with ::before and ::after]
-    expected: FAIL