Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

implement headingoffset & headingreset attributes #11086

Open
wants to merge 5 commits into
base: main
Choose a base branch
from
Open

implement headingoffset & headingreset attributes #11086

Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
d43c176
implement headingoffset & headingreset attributes
keithamus Feb 28, 2025
b3665a1
s/comptued/computed
keithamus Mar 1, 2025
6c54f76
s/child elements/descendants/
keithamus Mar 1, 2025
24845f2
s/authors prevent/authors to prevent/
keithamus Mar 1, 2025
a6b3420
add note on aria-level, example
keithamus Mar 1, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
123 changes: 121 additions & 2 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4308,6 +4308,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 <cite>ARIA</cite>: <ref>ARIA</ref></p>
Expand Down Expand Up @@ -13194,6 +13195,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>
Expand Down Expand Up @@ -19351,8 +19354,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
Expand Down Expand Up @@ -19400,6 +19404,121 @@ interface <dfn interface>HTMLHeadingElement</dfn> : <span>HTMLElement</span> {

</div>

<h5>Heading Levels & 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>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 zero.</p></li>

<li><p>Let <var>max</var> be zero.</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>Add 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> to
<var>level</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 <var>element</var>'s <code
data-x="attr-headingoffset">headingoffset</code> attribute value.</p></li>

<li><p>If <var>offset</var> is less than zero, set <var>offset</var> to zero.</p></li>

<li><p>If the <code data-x="attr-headingreset">headingreset</code> attribute is present, then
return <var>offset</var>.</p></li>

<li><p>Let <var>ancestor</var> be <var>element</var>.</p></li>

<li>
<p>While <var>child</var> is not null:</p>

<ol>
<li><p>Let <var>nextAncestor</var> be the parent node of
<var>ancestor</var> within the <span>flat tree</span>.</p></li>

<li><p>If <var>nextAncestor</var>'s <code data-x="attr-headingreset">headingreset</code>
attribute is present, then return <var>offset</var>.</p></li>

<li><p>Let <var>nextOffset</var> be <var>nextAncestor</var>'s <code
data-x="attr-headingoffset">headingoffset</code> attribute value.</p></li>

<li><p>If <var>nextOffset</var> is less than zero, set <var>nextOffset</var> to zero.</p></li>

<li><p>Add <var>nextOffset</var> to <var>offset</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>
</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.</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.</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>

Expand Down