Skip to content

Commit

Permalink
Correct WAI-ARIA integration for custom elements
Browse files Browse the repository at this point in the history 
This requires corresponding changes in https://w3c.github.io/core-aam/ as discussed in w3c/core-aam#152.
  • Loading branch information
@annevk
annevk committed Mar 2, 2023
1 parent b8e2674 commit 7c631d7
Showing 1 changed file with 49 additions and 31 deletions.
80 changes: 49 additions & 31 deletions source
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7638,7 +7638,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><p>A <dfn>reflected content attribute name</dfn> is a string. When the <span>reflected
target</span> is an element, it represents the local name of a content attribute whose namespace
is null. When the <span>reflected target</span> is an <code>ElementInternals</code> object, it
represents a key of the <span>internal content attribute map</span>.</p></li>
represents a key of the <span>reflected target</span>'s <span data-x="internals-target">target
element</span>'s <span>internal content attribute map</span>.</p></li>
</ul>

<p>A <span>reflected IDL attribute</span> can be defined to <dfn>reflect</dfn> a <span>reflected
Expand Down Expand Up @@ -8125,20 +8126,21 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<!-- Supporting ElementInternals is doable in theory, but would require corresponding changes to
DOMTokenList. -->

<p>If a <span>reflected IDL attribute</span> <var>attr</var> has the type <code
data-x=""><var>T</var>?</code>, where <var>T</var> is either <code>Element</code> or an
interface that inherits from <code>Element</code>, then:
<p>If a <span>reflected IDL attribute</span> has the type <code data-x=""><var>T</var>?</code>,
where <var>T</var> is either <code>Element</code> or an interface that inherits from
<code>Element</code>, then:

<ul>
<li><p><span data-x="reflected target">Reflected targets</span> that <var>attr</var> appears on
have an <dfn>explicitly set <var>attr</var>-element</dfn>, which is a weak reference to an
element or null. It is initially null.</p></li>
<li><p><var>attr</var> is the <span>reflected content attribute name</span>.</p></li>

<li><p>Its <span>reflected target</span> has an <dfn>explicitly set
<var>attr</var>-element</dfn>, which is a weak reference to an element or null. It is initially
null.</p></li>

<li>
<p><span data-x="reflected target">Reflected targets</span> that <var>attr</var> appears on have
an <dfn for="Element,ElementInternals" export><var>attr</var>-associated element</dfn>. To
compute the <span><var>attr</var>-associated element</span> for such a <span>reflected
target</span> <var>reflectedTarget</var>:</p>
<p>Its <span>reflected target</span> has an <dfn for="Element,ElementInternals"
export><var>attr</var>-associated element</dfn>. To compute the <span><var>attr</var>-associated
element</span> for such a <span>reflected target</span> <var>reflectedTarget</var>:</p>

<ol>
<li><p>Let <var>element</var> be the result of running <var>reflectedTarget</var>'s <span>get
Expand Down Expand Up @@ -8221,8 +8223,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
attribute:</p>

<ol>
<li><p>If <var>localName</var> is not the <span>reflected content attribute name</span> or
<var>namespace</var> is not null, then return.</p></li>
<li><p>If <var>localName</var> is not <var>attr</var> or <var>namespace</var> is not null, then
return.</p></li>

<li><p>Set <var>element</var>'s <span>explicitly set <var>attr</var>-element</span> to
null.</p></li>
Expand All @@ -8234,23 +8236,25 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
type are strongly encouraged to have their identifier end in "<code data-x="">Element</code>" for
consistency.</p>

<p>If a <span>reflected IDL attribute</span> <var>attr</var> has the type <code
<p>If a <span>reflected IDL attribute</span> has the type <code
data-x="">FrozenArray&lt;<var>T</var>&gt;?</code>, where <var>T</var> is either
<code>Element</code> or an interface that inherits from <code>Element</code>, then:</p>

<ul>
<li><p><span data-x="reflected target">Reflected targets</span> that <var>attr</var> appears on
have <dfn>explicitly set <var>attr</var>-elements</dfn>, which is either a <span>list</span> of
weak references to elements or null. It is initially null.</p></li>
<li><p><var>attr</var> is the <span>reflected content attribute name</span>.</p></li>

<li><p><span data-x="reflected target">Reflected targets</span> that <var>attr</var> appears on
have <dfn>cached <var>attr</var>-associated elements</dfn>, which is a <code
data-x="">FrozenArray&lt;<var>T</var>&gt;?</code>. It is initially null.</p></li>
<li><p>Its <span>reflected target</span> has an <dfn>explicitly set
<var>attr</var>-elements</dfn>, which is either a <span>list</span> of weak references to
elements or null. It is initially null.</p></li>

<li><p>Its <span>reflected target</span> has a <dfn>cached <var>attr</var>-associated
elements</dfn>, which is a <code data-x="">FrozenArray&lt;<var>T</var>&gt;?</code>. It is
initially null.</p></li>

<li>
<p><span data-x="reflected target">Reflected targets</span> that <var>attr</var> appears on have
<dfn for="Element,ElementInternals" export><var>attr</var>-associated elements</dfn>. To compute
the <span><var>attr</var>-associated elements</span> for such a <span>reflected target</span>
<p>Its <span>reflected target</span> has an <dfn for="Element,ElementInternals"
export><var>attr</var>-associated elements</dfn>. To compute the
<span><var>attr</var>-associated elements</span> for such a <span>reflected target</span>
<var>reflectedTarget</var>:</p>

<ol>
Expand Down Expand Up @@ -8397,8 +8401,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
attribute:</p>

<ol>
<li><p>If <var>localName</var> is not the <span>reflected content attribute name</span>, or
<var>namespace</var> is not null, then return.</p></li>
<li><p>If <var>localName</var> is not <var>attr</var> or <var>namespace</var> is not null, then
return.</p></li>

<li><p>Set <var>element</var>'s <span>explicitly set <var>attr</var>-elements</span> to
null.</p></li>
Expand Down Expand Up @@ -14249,6 +14253,19 @@ interface <dfn interface>DOMStringMap</dfn> {
<li><p>If <var>map</var>[<var>stateOrProperty</var>] <span data-x="map exists">exists</span>,
then return it.</p></li>

<li>
<p>If <var>element</var>'s <span>attached internals</span> is non-null:</p>

<ol>
<li><p>If <var>element</var>'s <span>attached internals</span>'s <span data-x="attr-associated
element"><var>stateOrProperty</var>-associated element</span> exists, then return its
value.</p></li>

<li><p>If <var>element</var>'s <span>attached internals</span>'s <span data-x="attr-associated
elements"><var>stateOrProperty</var>-associated elements</span> exists, then return its
value.</p></li>
</ol>

<li><p>Return the default value for <var>stateOrProperty</var>.</p></li>
</ol>

Expand Down Expand Up @@ -71310,8 +71327,8 @@ customElements.define("x-foo", class extends HTMLElement {

<div w-nodev>

<p>Each <code>HTMLElement</code> has an <dfn>attached internals</dfn> boolean, initially
false.</p>
<p>Each <code>HTMLElement</code> has an <dfn>attached internals</dfn> (null or an
<code>ElementInternals</code> object), initially null.</p>

<p>The <dfn method for="HTMLElement"><code
data-x="dom-attachInternals">attachInternals()</code></dfn> method steps are:</p>
Expand All @@ -71334,17 +71351,18 @@ customElements.define("x-foo", class extends HTMLElement {
data-x="concept-custom-element-definition-disable-internals">disable internals</span> is true,
then throw a <span>"<code>NotSupportedError</code>"</span> <code>DOMException</code>.</p></li>

<li><p>If <span>this</span>'s <span>attached internals</span> is true, then throw an
<li><p>If <span>this</span>'s <span>attached internals</span> is non-null, then throw an
<span>"<code>NotSupportedError</code>"</span> <code>DOMException</code>.</p></li>

<li><p>If <span>this</span>'s <span>custom element state</span> is not "<code
data-x="">precustomized</code>" or "<code data-x="">custom</code>", then throw a
<span>"<code>NotSupportedError</code>"</span> <code>DOMException</code>.</p></li>

<li><p>Set <span>this</span>'s <span>attached internals</span> to true.</p></li>
<li><p>Set <span>this</span>'s <span>attached internals</span> to a new
<code>ElementInternals</code> instance whose <span data-x="internals-target">target
element</span> is <span>this</span>.</p></li>

<li><p>Return a new <code>ElementInternals</code> instance whose <span
data-x="internals-target">target element</span> is <span>this</span>.</p></li>
<li><p>Return <span>this</span>'s <span>attached internals</span>.</p></li>
</ol>

<h5>The <code>ElementInternals</code> interface</h5>
Expand Down

0 comments on commit 7c631d7

Please sign in to comment.