Add support for role-namerequired-caveat

common/script/aria.js

@@ -132,6 +132,25 @@ const buildStatesProperties = function (item) {
   };
 };
 
+/**
+ * Parse a role-namerequired cell while excluding caveat span text.
+ * @param {HTMLTableCellElement} cell
+ * @returns {{ primary: string, caveat: string, combined: string }}
+ */
+const parseNameRequiredCell = (cell) => {
+  const caveatNode = cell?.querySelector("span.role-namerequired-caveat");
+  const caveat = (caveatNode?.innerText || "").trim();
+  const clone = cell?.cloneNode(true);
+  clone?.querySelectorAll("span.role-namerequired-caveat").forEach((node) => node.remove());
+  const primary = (clone?.innerText || "").trim();
+
+  return {
+    primary,
+    caveat,
+    combined: `${primary} ${caveat}`.trim(),
+  };
+};
+
 /**
  *
  * @param {String} indexTest - string to decide if this index needs it
@@ -151,7 +170,8 @@ const renderIndexEntry = (indexTest, rdef) => {
   }
   if (!isAbstract && roleFromNode) {
     const content = rdef.innerText;
-    const isRequired = roleFromNode.closest("table").querySelector(".role-namerequired")?.innerText === "True";
+    const nameRequiredCell = roleFromNode.closest("table").querySelector("td.role-namerequired");
+    const isRequired = parseNameRequiredCell(nameRequiredCell).primary === "True";
     if (roleFromNode.textContent.indexOf(indexTest) !== -1) return `<li><a href="#${content}" class="role-reference"><code>${content}</code></a>${isRequired ? " (name required)" : ""}</li>`; // TODO: `textContent.indexOf` feels brittle; right now it's either the exact string or proper list markup with LI with exact string
   }
 };
@@ -287,7 +307,7 @@ const pruneUnusedRows = () => {
       ".role-abstract, .role-parent, .role-base, .role-related, .role-scope, .role-mustcontain, .role-required-properties, .role-properties, .role-namefrom, .role-namerequired, .role-namerequired-inherited, .role-childpresentational, .role-presentational-inherited, .state-related, .property-related,.role-inherited, .role-children, .property-descendants, .state-descendants, .implicit-values",
     )
     .forEach(function (item) {
-      var content = item.innerText;
+      var content = item.classList.contains("role-namerequired") ? parseNameRequiredCell(item).primary : item.innerText;
       if (content.length === 1 || content.length === 0) {
         // there is no item - remove the row
         item.parentNode.parentNode.removeChild(item.parentNode);

common/script/ariaChild.js

@@ -504,6 +504,24 @@ function ariaAttributeReferences() {
 
         updateReferences(document);
 
+        var parseNameRequiredCell = function (cell) {
+            var caveatNode = cell && cell.querySelector("span.role-namerequired-caveat");
+            var caveat = ((caveatNode ? caveatNode.innerText : "") || "").trim();
+            var clone = cell && cell.cloneNode(true);
+            if (clone) {
+                Array.prototype.slice.call(clone.querySelectorAll("span.role-namerequired-caveat")).forEach(function (node) {
+                    node.remove();
+                });
+            }
+            var primary = ((clone ? clone.innerText : "") || "").trim();
+
+            return {
+                primary: primary,
+                caveat: caveat,
+                combined: (primary + " " + caveat).trim(),
+            };
+        };
+
         // prune out unused rows throughout the document
 
         Array.prototype.slice
@@ -513,7 +531,9 @@ function ariaAttributeReferences() {
                 )
             )
             .forEach(function (item) {
-                var content = item.innerText;
+                var content = item.classList.contains("role-namerequired")
+                    ? parseNameRequiredCell(item).primary
+                    : item.innerText;
                 if (content.length === 1 || content.length === 0) {
                     // there is no item - remove the row
                     item.parentNode.parentNode.removeChild(item.parentNode);

index.html

@@ -5542,7 +5542,7 @@ <h2>Definition of Roles</h2>
               </tr>
               <tr>
                 <th class="role-namerequired-head" scope="row">Accessible Name Required:</th>
-                <td class="role-namerequired">True</td>
+                <td class="role-namerequired">True <span class="role-namerequired-caveat">(unless used with <rref>combobox</rref>)</span></td>
               </tr>
               <tr>
                 <th class="role-namerequired-inherited-head" scope="row">Inherits Name Required:</th>