Skip to content

Implement dialog initial focus proposal #8199

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

Merged
merged 35 commits into from
Jan 26, 2023
Merged

Implement dialog initial focus proposal #8199

Changes from 1 commit
Commits
Show all changes
35 commits
Select commit Hold shift + click to select a range
2394e21
Implement dialog initial focus proposal
josepharhar Jun 3, 2022
fd9c31d
add missing text from the proposal
josepharhar Aug 25, 2022
b52e9b6
add example
josepharhar Aug 25, 2022
8da9666
add second example
josepharhar Aug 25, 2022
2070d76
DialogShowOptions
josepharhar Aug 25, 2022
50c821f
Add showmodal autofocus logic
josepharhar Aug 26, 2022
844c49f
Merge remote-tracking branch 'upstream/main' into dialogsequentialfocus
josepharhar Sep 7, 2022
c15e1fc
remove a sentence with should
josepharhar Sep 7, 2022
4727fc0
link to methods
josepharhar Sep 7, 2022
8ff0298
dialogshowoptions
josepharhar Sep 7, 2022
da545c2
code input
josepharhar Sep 7, 2022
7003f1f
non-normative -> normative
josepharhar Sep 7, 2022
1ca7cbb
remove space
josepharhar Sep 7, 2022
7dae27e
add links to element types and attributes
josepharhar Sep 7, 2022
5907549
more normativeness
josepharhar Sep 7, 2022
b09e68c
dialog focusing steps link
josepharhar Sep 7, 2022
136592c
dialogshowoptions -> options
josepharhar Sep 7, 2022
1f0a278
preventinitialfocus stuff
josepharhar Sep 7, 2022
c6de43e
more preventinitialfocus linking
josepharhar Sep 7, 2022
e4046aa
remove explicit is modal parameter
josepharhar Sep 7, 2022
f60b5e2
more method
josepharhar Sep 7, 2022
3f56f1f
Merge with some upstream commits
josepharhar Oct 11, 2022
000aea4
respond to comments
josepharhar Oct 11, 2022
30683ac
make dialog element focusable sort of
josepharhar Oct 11, 2022
c95c97b
some nits
josepharhar Oct 17, 2022
133d817
Merge branch 'main' into dialogsequentialfocus
domenic Oct 22, 2022
76ed03e
annevk nits
josepharhar Oct 24, 2022
572a1c8
Merge branch 'main' into dialogsequentialfocus
josepharhar Oct 26, 2022
7585ed6
replace product number with add product
josepharhar Oct 26, 2022
9fe975a
remove extra space
josepharhar Oct 27, 2022
ca5d8e9
add pointer-events:none
josepharhar Nov 3, 2022
1763b9c
Revert "add pointer-events:none"
josepharhar Jan 11, 2023
ee1a835
Merge branch 'main' into dialogsequentialfocus
josepharhar Jan 17, 2023
b9c63ca
remove modeless note
josepharhar Jan 17, 2023
494d638
Revert "replace product number with add product"
josepharhar Jan 20, 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
Next Next commit
Implement dialog initial focus proposal 
This implements the changes proposed here:
https://github.com/whatwg/html/wiki/dialog--initial-focus,-a-proposal#dialog-draft-text

Specifically:
1. Add a parameter to dialog.show() called preventInitialFocus, which
   prevents the dialog focusing steps from running.
2. Make the dialog focusing steps look at sequentially focusable
   elements instead of any focusable element.

There are additional open issues around dialog initial focus listed here:
#4184 (comment)

TODO add a conformance requirement about autofocus:
#7709

TODO consider adding a <p class=XXX> for tab trapping:
#7707
  • Loading branch information
@josepharhar
josepharhar committed Aug 16, 2022
commit 2394e2181ffebee2e57eca5674f635207ecf4480
29 changes: 21 additions & 8 deletions source
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -59158,7 +59158,7 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

[<span>CEReactions</span>] attribute boolean <span data-x="dom-dialog-open">open</span>;
Copy link
Member

@domenic domenic Jan 20, 2023

Choose a reason for hiding this comment

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

I'm sorry, this is totally on me, but I forgot why we changed this from the example at https://github.com/whatwg/html/wiki/dialog--initial-focus,-a-proposal#example . @scottaohara I vaguely remember you being involved?

I'm not very happy with this example because it's just hard to believe the web developer would put the button before the input. The example at https://github.com/whatwg/html/wiki/dialog--initial-focus,-a-proposal#example is more believable. If there's something wrong with my initial version (I vaguely recall there was), could we try to come up with a more believable example here?

Copy link
Member

@domenic domenic Jan 20, 2023

Choose a reason for hiding this comment

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

Ah, I found the conversation. It's at #8199 (comment) (collapsed by default). I guess @annevk didn't like the example because it relied on the focusablity of readonly controls? I don't think that's so strange. The point of readonly (as opposed to disabled) is explicitly to be focusable/selectable. E.g. it's what I use in the second textbox in https://domenic.github.io/rewrapper/ .

@annevk , are you OK reverting this to the previous example?

Copy link
Collaborator

@scottaohara scottaohara Jan 20, 2023

Choose a reason for hiding this comment

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

agreed @domenic, far prefer the original example as this new one doesn't make sense. the original example is something i can point to many instances of in microsoft products.

i'm confused by the original comment, indicating that Firefox did not autofocus readonly controls. testing today, focus goes to the readonly text field just fine (chrome and firefox), as i'd expect. So maybe Firefox has reversed course to match up with other implementations since october?

Copy link
Contributor Author

@josepharhar josepharhar Jan 20, 2023

Choose a reason for hiding this comment

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

Ok I tentatively reverted back to the previous example

Copy link
Member

@annevk annevk Jan 26, 2023

Choose a reason for hiding this comment

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

Alright, fair enough.

attribute DOMString <span data-x="dom-dialog-returnValue">returnValue</span>;
[<span>CEReactions</span>] undefined <span data-x="dom-dialog-show">show</span>();
[<span>CEReactions</span>] undefined <span data-x="dom-dialog-show">show</span>(optional boolean preventInitialFocus);
[<span>CEReactions</span>] undefined <span data-x="dom-dialog-showModal">showModal</span>();
[<span>CEReactions</span>] undefined <span data-x="dom-dialog-close">close</span>(optional DOMString returnValue);
};</code></pre>
Expand Down Expand Up @@ -59243,8 +59243,9 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {

<div w-nodev>

<p>When the <dfn method for="HTMLDialogElement"><code data-x="dom-dialog-show">show()</code></dfn>
method is invoked, the user agent must run the following steps:</p>
<p>When the <dfn method for="HTMLDialogElement"><code
data-x="dom-dialog-show">show(preventInitialFocus)</code></dfn> method is invoked, the user agent
must run the following steps:</p>

<ol>
<li><p>If the element already has an <code data-x="attr-dialog-open">open</code> attribute, then
Expand All @@ -59256,7 +59257,8 @@ interface <dfn interface>HTMLDialogElement</dfn> : <span>HTMLElement</span> {
<li><p>Set the <code>dialog</code> element's <span>previously focused element</span> to the
<span>focused</span> element.</p></li>

<li><p>Run the <span>dialog focusing steps</span> for the <code>dialog</code> element.</p></li>
<li><p>If <var>preventInitialFocus</var> flag is not present or is set to false, run the
<span>dialog focusing steps</span> for the <code>dialog</code> element.</p></li>
</ol>

<p>When the <dfn method for="HTMLDialogElement"><code
Expand Down Expand Up @@ -76934,10 +76936,21 @@ END:VCARD</pre>

<ol>
<li>
<p>Let <var>focusable area</var> be <var>child</var>, if <var>child</var> is a
<span>focusable area</span>; otherwise let <var>focusable area</var> be the result of <span
data-x="get the focusable area">getting the focusable area</span> for <var>child</var> given
<var>focus trigger</var>.</p>
<p>Let <var>focusable area</var> be null.</p>

<ol>
<li><p>If <var>focus target</var> is a <code>dialog</code> element and <var>child</var> is
<span>sequentially focusable</span>, let <var>focusable area</var> be
<var>child</var>.</p></li>

<li><p>Otherwise, if <var>focus target</var> is not a <code>dialog</code> element and
<var>child</var> is a <span>focusable area</span>, let <var>focusable area</var> be
<var>child</var>.</p></li>

<li><p>Otherwise, let <var>focusable area</var> be the result of <span data-x="get the
focusable area">getting the focusable area</span> for <var>child</var> given <var>focus
trigger</var>.</p></li>
</ol>

<p class="note">This step can end up recursing, i.e., the <span>get the focusable area</span>
steps might return the <span>focus delegate</span> of <var>child</var>.</p>
Expand Down