Update: change default role for custom elements

closes #2303 This updates a custom element's default role to none to allow attribute reflection from the custom element parent to its internals. This change provides additional clarification about how a custom element can be provided a role by authors, and what caveats would change a custom element's default role of none, to another implicit minimum role.
w3c · Nov 22, 2024 · 4fbb93f · 4fbb93f
1 parent b1ac2e2
commit 4fbb93f
Showing 1 changed file with 40 additions and 5 deletions.
diff --git a/html-aam/index.html b/html-aam/index.html
@@ -226,7 +226,8 @@ <h3>HTML Element Role Mappings</h3>
             specified which would require a more specific <a>minimum role</a> to be exposed.
           </li>
           <li>
-            Where an element is indicated as having &quot;No corresponding (WAI-ARIA) role&quot;, or is mapped to the <a class="core-mapping" href="#role-map-generic">`generic`</a> role, user agents
+            Where an element is indicated as having &quot;No corresponding (WAI-ARIA) role&quot;, or is mapped to the <a class="core-mapping" href="#role-map-generic">`generic`</a>
+            or <a class="core-mapping" href="#role-map-none">`none`</a> roles, user agents
             MUST NOT expose the <a class="core-mapping" href="#ariaRoleDescription">`aria-roledescription`</a> property value in the <a class="termref">accessibility tree</a> unless the element has an
             explicit, conforming `role` attribute value which [[WAI-ARIA-1.2]] does not prohibit the use of `aria-roledescription`.
           </li>
@@ -815,7 +816,19 @@ <h4 id="el-autonomous-custom-element">autonomous custom element</h4>
             </tr>
             <tr>
               <th>[[wai-aria-1.2]]</th>
-              <td>If the author assigned a conforming ARIA role using the `role` attribute, map to that role. Otherwise, the <a class="core-mapping" href="#role-map-generic">`generic`</a> role.</td>
+              <td>
+                <p>
+                  If the author assigned a conforming ARIA role using the `role` attribute, 
+                  or by the custom element's internals, map to the specified role.
+                </p>
+                <p>
+                  If the author assigned attributes that result in a <a>minimum role</a>, then map
+                  to the minimum role (see <a href="#custom-element-comments">comments</a>.
+                </p>
+                <p>
+                  Otherwise, the element maps to the <a class="core-mapping" href="#role-map-none">`none`</a> role.
+                </p>
+              </td>
             </tr>
             <tr>
               <th><a data-cite="core-aam-1.2/#roleMappingComputedRole">Computed Role</a></th>
@@ -850,7 +863,29 @@ <h4 id="el-autonomous-custom-element">autonomous custom element</h4>
             <!-- <th><a href="#accessible-name-and-description-computation">Naming Algorithm</a></th> -->
             <tr>
               <th>Comments</th>
-              <td></td>
+              <td>
+                <p>
+                  Along with the attributes defined in this specification that contribute to modifying an element's <a>minimum role</a>,
+                  the following conditions will also alter a custom element's computed role, if an author has not otherwise specified an
+                  explicit role for the element:
+                </p>
+                <ul>
+                  <li>if the custom element is focusable: expose as <a class="core-mapping" href="#role-map-group">`group`</a> role</li>
+                  <li>if the custom element has an `aria-live` or `aria-owns` attribute: expose as <a class="core-mapping" href="#role-map-generic">`generic`</a> role</li>
+                  <li>if element internals are used to set a global ARIA property: expose as <a class="core-mapping" href="#role-map-generic">`generic`</a> role</li>
+                  <li>if an author specifies an ARIA relation via an element attribute: expose <a class="core-mapping" href="#role-map-generic">`generic`</a> role</li>
+                </ul>
+                <div class="example">
+                  <p>The following is an exmaple of an author specifiying an ARIA relation on a custom element, with another element in the DOM.</p>
+                  <pre>
+                    <code>
+                      &lt;my-element aria-details=ex>...&lt;my-element>
+                      ...
+                      &lt;div id=ex> &lt;!-- details for my-element --> &lt;/div>
+                    </code>
+                  </pre>
+                </div>
+              </td>
             </tr>
           </tbody>
         </table>
@@ -8680,7 +8715,7 @@ <h4 id="att-autofocus">`autofocus`</h4>
             </tr>
             <tr>
               <th>Comments</th>
-              <td>Provides a <a href="termref">minimum role</a> of <a class="core-mapping" href="#role-map-group">`group`</a>.</td>
+              <td>Provides a <a>minimum role</a> of <a class="core-mapping" href="#role-map-group">`group`</a>.</td>
             </tr>
           </tbody>
         </table>
@@ -10171,7 +10206,7 @@ <h4 id="att-draggable">`draggable`</h4>
             </tr>
             <tr>
               <th>Comments</th>
-              <td>Provides a <a href="termref">minimum role</a> of <a class="core-mapping" href="#role-map-group">`group`</a>.</td>
+              <td>Provides a <a>minimum role</a> of <a class="core-mapping" href="#role-map-group">`group`</a>.</td>
             </tr>
           </tbody>
         </table>