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

ElementInternals: Add a capability to set the default focus behavior #5120

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

ElementInternals: Add a capability to set the default focus behavior #5120

Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
0b68a18
ElementInternals: Add a capability to set the default focus bahvior
tkent-google Dec 2, 2019
69351e4
Remove unnecessary '>'
tkent-google Dec 3, 2019
3286a58
Mention :focus-visible
tkent-google Dec 3, 2019
9011d81
unfocusable -> default
tkent-google Dec 4, 2019
30e0431
Editorial tweaks
domenic Dec 18, 2019
9f97df5
- Add a reference to null tabindex from the table
tkent-google Dec 26, 2019
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
92 changes: 89 additions & 3 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3866,6 +3866,8 @@ a.setAttribute('href', 'https://example.com/'); // change the content attribute
<li><dfn data-x-href="https://drafts.csswg.org/selectors/#type-selector">type selector</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/selectors/#attribute-selector">attribute selector</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/selectors/#pseudo-class">pseudo-class</dfn></li>
<li><dfn data-x-href="https://drafts.csswg.org/selectors/#focus-visible-pseudo"
data-x="focus-visible-pseudo">:focus-visible</dfn></li>
</ul>

<p>The following features are defined in <cite>CSS Values and Units</cite>: <ref
Expand Down Expand Up @@ -68057,6 +68059,9 @@ interface <dfn>ElementInternals</dfn> {
boolean <span data-x="dom-ElementInternals-reportValidity">reportValidity</span>();

readonly attribute <span>NodeList</span> <span data-x="dom-ElementInternals-labels">labels</span>;

// Focus management
attribute DOMString <span data-x="dom-ElementInternals-focusBehavior">focusBehavior</span>;
};

dictionary <dfn>ValidityStateFlags</dfn> {
Expand Down Expand Up @@ -68145,6 +68150,19 @@ dictionary <dfn>ValidityStateFlags</dfn> {
<var>internals</var>'s <span data-x="internals-target">target element</span> is associated with.
</p></dd>

<dt><var>internals</var> . <code data-x="dom-ElementInternals-focusBehavior">focusBehavior</code>
[ = <var>value</var> ]</dt>
<dd>
<p>Returns the <span data-x="ce-focus-behavior">focus behavior</span> of the
<var>internals</var>'s <span data-x="internals-target">target element</span>. Possible values
are "<code data-x="ce-focusBehavior-default">default</code>", "<code
data-x="ce-focusBehavior-focusable">focusable</code>", and "<code
data-x="ce-focusBehavior-simple-control">simple-control</code>". If an unknown value was set,
this returns "<code data-x="ce-focusBehavior-focusable">focusable</code>".</p>

<p>Can be set, to change the <span data-x="ce-focus-behavior">focus behavior</span> to the new
value.</p>
</dd>
</dl>

<p>Each <code>ElementInternals</code> has a <dfn data-x="internals-target">target element</dfn>,
Expand Down Expand Up @@ -68352,6 +68370,60 @@ dictionary <dfn>ValidityStateFlags</dfn> {
<span data-x="face-submission-value">submission value</span>.</p></li>
</ol>

<hr>

<p>Each <span>autonomous custom element</span> has <dfn data-x="ce-focus-behavior">focus
behavior</dfn> string, initially "<code data-x="ce-focusBehavior-default">default</code>". It also
can be "<code data-x="ce-focusBehavior-focusable">focusable</code>" or "<code
data-x="ce-focusBehavior-simple-control">simple-control</code>". These values have the following
impacts:</p>

<dl>
<dt>"<dfn><code data-x="ce-focusBehavior-default">default</code></dfn>"</dt>
<dd>
<p>The element is not <span>focusable</span> by default. The element's focus-related behavior
is same as elements like <code>div</code>, which are not <span>focusable</span> by default.</p>

<p class="note">There are ways for authors to make an element with "<code
data-x="ce-focusBehavior-default">default</code>" <span data-x="ce-focus-behavior">focus
behavior</span> <span>focusable</span>, e.g., adding a <code
data-x="attr-tabindex">tabindex</code> or <code
data-x="attr-contenteditable">contenteditable</code> content attribute.</p>
</dd>

<dt>"<dfn><code data-x="ce-focusBehavior-focusable">focusable</code></dfn>"</dt>
<dd><p>The element is <span>focusable</span> by default. The element's focus-related behavior is
same as general <span>focusable</span> elements such as <span data-x="editing host">editing
hosts</span>.</p></dd>

<dt>"<dfn><code data-x="ce-focusBehavior-simple-control">simple-control</code></dfn>"</dt>
Copy link
Member

Choose a reason for hiding this comment

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

Per https://whatwg.org/style-guide#tone I don't think we should use this name. Probably best discussed at WICG/webcomponents#762 (comment).

<dd>
<p>The element is <span>focusable</span> by default. The element's focus-related behavior is
same as simple controls like <code>button</code> elements.</p>

<p class="note">Behavior differences between "<code
data-x="ce-focusBehavior-focusable">focusable</code>" and "<code
data-x="ce-focusBehavior-simple-control">simple-control</code>" depend on the user agent. They
might affect <span data-x="sequentially focusable">sequential focusability</span>, <span
data-x="click focusable">click focusability</span>, or the <code
data-x="focus-visible-pseudo">:focus-visible</code> <span>pseudo-class</span>.</p>
</dd>
</dl>


<p>The <dfn><code data-x="dom-ElementInternals-focusBehavior">focusBehavior</code></dfn> IDL
attribute, on getting, must return the <span data-x="ce-focus-behavior">focus behavior</span> of
this <code>ElementInternals</code>'s <span data-x="internals-target">target element</span>. On
setting, if the new string is one of "<code data-x="ce-focusBehavior-default">default</code>",
"<code data-x="ce-focusBehavior-focusable">focusable</code>", or "<code
data-x="ce-focusBehavior-simple-control">simple-control</code>", then set the <span
data-x="ce-focus-behavior">focus behavior</span> of this <code>ElementInternals</code>'s <span
data-x="internals-target">target element</span> to the given value. Otherwise, set it to "<code
data-x="ce-focusBehavior-focusable">focusable</code>".</p>

<p class="note">Setting <code data-x="dom-ElementInternals-focusBehavior">focusBehavior</code> to
an unknown value does not throw because new values might be added in the future, and user agents
without support for the new value have to work somehow with documents using the new keyword.</p>
</div>

<h3 split-filename="semantics-other" id="common-idioms">Common idioms without dedicated elements</h3>
Expand Down Expand Up @@ -73466,8 +73538,13 @@ END:VCARD</pre>
Elements that meet all the following criteria:

<ul class="brief">
<li>the element's <span>tabindex value</span> is a non-negative integer, or the element is
determined by the user agent to be focusable;</li>
<li>
<p>the element's <span>tabindex value</span> is a non-negative integer, or the element is
determined by the user agent to be focusable;</p>

<p>See the description of <span data-x="null-tabindex">null tabindex value</span> for the
latter case.</p>
</li>

<li>the element is either not a <span>shadow host</span>, or has a <span
data-x="concept-element-shadow-root">shadow root</span> whose <span>delegates focus</span> is
Expand Down Expand Up @@ -73666,6 +73743,11 @@ END:VCARD</pre>
</li>
</ul>

<p>For <span data-x="focusable area">focusable areas</span> that are
<span data-x="autonomous custom element">autonomous custom elements</span>, user agents should
consider the element's <span data-x="ce-focus-behavior">focus behavior</span> in determining
whether the element is <span>click focusable</span> or <span>sequentially focusable</span>.</p>

<p class="note">Elements which are not <span>focusable</span> are not <span data-x="focusable
area">focusable areas</span>, and thus not <span>sequentially focusable</span> and not <span>click
focusable</span>.</p>
Expand Down Expand Up @@ -73864,7 +73946,7 @@ END:VCARD</pre>

<dl>

<dt>If the value is null</dt>
<dt><dfn data-x="null-tabindex">If the value is null</dfn></dt>

<dd>

Expand Down Expand Up @@ -73911,6 +73993,10 @@ END:VCARD</pre>
<li><span data-x="editing host">Editing hosts</span></li>

<li><span data-x="browsing context container">Browsing context containers</span></li>

<li><span data-x="autonomous custom element">Autonomous custom elements</span> whose <span
data-x="ce-focus-behavior">focus behavior</span> is not "<code
data-x="ce-focusBehavior-default">default</code>".</li>
</ul>

</dd>
Expand Down