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

Correct WAI-ARIA integration for custom elements #8974

Merged
merged 2 commits into from
Mar 7, 2023
+52 −35
Merged

Correct WAI-ARIA integration for custom elements #8974

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7c631d7
Correct WAI-ARIA integration for custom elements
annevk Mar 2, 2023
de82a15
review
annevk Mar 3, 2023
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
87 changes: 52 additions & 35 deletions source
View file
Open in desktop
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>Let <var>attr</var> be the <span>reflected content attribute name</span>.</p></li>
annevk marked this conversation as resolved.
Show resolved Hide resolved

<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>Let <var>attr</var> be 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 @@ -14243,11 +14247,23 @@ interface <dfn interface>DOMStringMap</dfn> {
follows:</p>

<ol>
<li><p>Let <var>map</var> be <var>element</var>'s <span>internal content attribute
map</span>.</p></li>
<li>
<p>If <var>element</var>'s <span>attached internals</span> is non-null:</p>

<li><p>If <var>map</var>[<var>stateOrProperty</var>] <span data-x="map exists">exists</span>,
then return it.</p></li>
<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 it.</p></li>

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think we should prioritize this higher than the internal content attribute map. Otherwise, for the element-valued properties you'll get the empty string.

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

‼️

<li><p>If <var>element</var>'s <span>attached internals</span>'s <span data-x="attr-associated
elements"><var>stateOrProperty</var>-associated elements</span> exist, then return
them.</p></li>
</ol>
<!-- We check these first as they end up being redundantly stored in element's internal content
attribute map with an empty string value. -->
annevk marked this conversation as resolved.
Show resolved Hide resolved

<li><p>If <var>element</var>'s <span>internal content attribute
map</span>[<var>stateOrProperty</var>] <span data-x="map exists">exists</span>, then return
it.</p></li>
annevk marked this conversation as resolved.
Show resolved Hide resolved

<li><p>Return the default value for <var>stateOrProperty</var>.</p></li>
</ol>
Expand Down Expand Up @@ -71310,8 +71326,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 +71350,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