implement headingoffset & headingreset attributes

source

@@ -4317,6 +4317,7 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
      <li><dfn data-x-href="https://w3c.github.io/aria/#aria-describedby"><code data-x="attr-aria-describedby">aria-describedby</code></dfn></li>
      <li><dfn data-x-href="https://w3c.github.io/aria/#aria-disabled"><code data-x="attr-aria-disabled">aria-disabled</code></dfn></li>
      <li><dfn data-x-href="https://w3c.github.io/aria/#aria-label"><code data-x="attr-aria-label">aria-label</code></dfn></li>
+     <li><dfn data-x-href="https://w3c.github.io/aria/#aria-level"><code data-x="attr-aria-level">aria-level</code></dfn></li>
     </ul>
 
     <p>Finally, the following terms are defined in <cite>ARIA</cite>: <ref>ARIA</ref></p>
@@ -11964,6 +11965,10 @@ interface <dfn interface>HTMLElement</dfn> : <span>Element</span> {
   undefined <span data-x="dom-hidePopover">hidePopover</span>();
   boolean <span data-x="dom-togglePopover">togglePopover</span>(optional (<span>TogglePopoverOptions</span> or boolean) options = {});
   [<span>CEReactions</span>] attribute DOMString? <span data-x="dom-popover">popover</span>;
+
+  // The headingoffset API
+  [<span>CEReactions</span>] attribute unsigned long <span data-x="dom-headingOffset">headingOffset</span>;
+  [<span>CEReactions</span>] attribute boolean <span data-x="dom-headingReset">headingReset</span>;
 };
 
 dictionary <dfn dictionary>ShowPopoverOptions</dfn> {
@@ -13229,6 +13234,8 @@ https://software.hixie.ch/utilities/js/live-dom-viewer/?%3C%21DOCTYPE%20HTML%3E%
    <li><code data-x="attr-draggable">draggable</code></li>
    <li><code data-x="attr-enterkeyhint">enterkeyhint</code></li>
    <li><code data-x="attr-hidden">hidden</code></li>
+   <li><code data-x="attr-headingoffset">headingoffset</code></li>
+   <li><code data-x="attr-headingreset">headingreset</code></li>
    <li><code data-x="attr-inert">inert</code></li>
    <li><code data-x="attr-inputmode">inputmode</code></li>
    <li><code data-x="attr-is">is</code></li>
@@ -19387,8 +19394,9 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   <h4><span id="headings-and-outlines"></span><span id="outlines"></span>Headings and outlines</h4>
 
-  <p><code>h1</code>&ndash;<code>h6</code> elements have a <dfn>heading level</dfn>, which is given
-  by the number in the element's name.</p>
+  <p><code>h1</code>&ndash;<code>h6</code> elements have a <dfn>heading level</dfn>, which is
+  given by <span data-x="get an element's computed heading level">getting the element's computed
+  heading level</span>.</p>
 
   <p>These elements <span data-x="represents">represent</span> <dfn
   data-x="concept-heading">headings</dfn>. The lower a <span
@@ -19436,6 +19444,129 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {
 
   </div>
 
+  <h5>Heading levels &amp; offsets</h5>
+
+  <p>The <dfn element-attr for="global"><code data-x="attr-headingoffset">headingoffset</code></dfn>
+  content attribute allows authors to offset heading levels for descendants.</p>
+
+  <p>The <dfn element-attr for="global"><code data-x="attr-headingreset">headingreset</code></dfn>
+  content attribute allows authors to prevent a heading offset computation from traversing beyond
+  this point.</p>
+
+  <p>The <dfn attribute for="HTMLElement"><code
+  data-x="dom-headingOffset">headingOffset</code></dfn> IDL attribute must <span>reflect</span> the
+  <code data-x="attr-headingoffset">headingoffset</code> content attribute. It is
+  <span>clamped to the range</span> [0, 9].</p>
+
+  <p>The <dfn attribute for="HTMLElement"><code
+  data-x="dom-headingReset">headingReset</code></dfn> IDL attribute must <span>reflect</span> the
+  <code data-x="attr-headingreset">headingreset</code> content attribute.</p>
+
+  <p>To <dfn>get an element's computed heading level</dfn>, given an element <var>element</var>,
+  perform the following steps:</p>
+
+  <ol>
+   <li><p>Let <var>level</var> be 0.</p></li>
+
+   <li><p>Let <var>max</var> be 0.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h1">h1</code>, then set
+   <var>level</var> to 1 and <var>max</var> to 8.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h2">h2</code>, then set
+   <var>level</var> to 2 and <var>max</var> to 7.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h3">h3</code>, then set
+   <var>level</var> to 3 and <var>max</var> to 6.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h4">h4</code>, then set
+   <var>level</var> to 4 and <var>max</var> to 5.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h5">h5</code>, then set
+   <var>level</var> to 5 and <var>max</var> to 4.</p></li>
+
+   <li><p>If <var>element</var>'s local name is <code data-x="h6">h6</code>, then set
+   <var>level</var> to 6 and <var>max</var> to 3.</p></li>
+
+   <li><p><span>Assert</span>: <var>level</var> is not zero.</p></li>
+
+   <li><p><span>Assert</span>: <var>max</var> is not zero.</p></li>
+
+   <li><p>Increment <var>level</var> by the result of <span
+   data-x="get an element's computed heading offset">getting an element's computed heading
+   offset</span> given <var>element</var> and <var>max</var>.</p></li>
+
+   <li><p><span>Assert</span>: <var>level</var> is not greather than 9.</p></li>
+
+   <li><p>Return <var>level</var>.</p></li>
+  </ol>
+
+  <p>To <dfn>get an element's computed heading offset</dfn>, given an element <var>element</var>,
+  and a non-negative integer <var>max</var>, perform the following steps. They return a
+  non-negative integer.</p>
+
+  <ol>
+   <li><p>Let <var>offset</var> be 0.</p></li>
+
+   <li><p>Let <var>ancestor</var> be <var>element</var>.</p></li>
+
+   <li>
+    <p>While <var>ancestor</var> is not null:</p>
+
+    <ol>
+     <li><p>Let <var>nextOffset</var> be 0.</p></li>
+
+     <li>
+      <p>If <var>ancestor</var> has a <code data-x="attr-headingoffset">headingoffset</code>
+      attribute, then parse its value using the <span>rules for parsing non-negative
+      integers</span>.</p>
+
+      <p>If the result of parsing the value is not an error, then set <var>nextOffset</var> to
+      that value.</p>
+     </li>
+
+     <li><p>Increment <var>offset</var> by <var>nextOffset</var></p></li>
+
+     <li><p>If <var>offset</var> is greater than or equal to <var>max</var>, then return
+     <var>max</var>.</p></li>
+
+     <li><p>If <var>ancestor</var> has a <code data-x="attr-headingreset">headingreset</code>
+     attribute, then return <var>offset</var>.</p></li>
+
+     <li><p>Set <var>ancestor</var> to the parent node of <var>ancestor</var> within the
+     <span>flat tree</span>.</p></li>
+    </ol>
+   </li>
+
+   <li><p>Return <var>offset</var>.</p></li>
+  </ol>
+
+  <p class="note">The use of the <code data-x="attr-aria-level">aria-level</code> attribute will
+  take precedence over the headings computed level for the purposes of accessibility mapping.</p>
+
+  <div class="example">
+   <p>This example shows a combination of <code data-x="attr-headingoffset">headingoffset</code>,
+   <code data-x="attr-headingreset">headingreset</code>, and <code
+   data-x="attr-aria-level">aria-level</code> attributes with comments demonstrating the respective
+   heading levels. This example illustrates the various combinations and is not a best practice
+   example.</p>
+
+   <pre><code class="html">&lt;body>
+  &lt;main>
+   &lt;h1>This is a heading level 1&lt;/h1>
+   &lt;article headingoffset="1">
+    &lt;h1>This is a heading level 2&lt;/h1>
+    &lt;section headingoffset="1">
+     &lt;h1>This is a heading level 3&lt;/h1>
+     &lt;dialog headingreset>
+      &lt;h1>This is a heading level 1&lt;/h1>
+     &lt;/dialog>
+    &lt;/section>
+   &lt;/article>
+   &lt;h1 aria-level="2">This is a heading level 2&lt;/h1>
+  &lt;/main>
+&lt;/body></code></pre>
+  </div>
 
   <h5>Sample outlines</h5>