Implement dialog initial focus proposal #8199

josepharhar · 2022-08-16T22:55:06Z

This implements the changes proposed here:
https://github.com/whatwg/html/wiki/dialog--initial-focus,-a-proposal#dialog-draft-text

Specifically:

Make the dialog focusing steps look at sequentially focusable elements instead of any focusable element.
Make the dialog element itself get focus if it has the autofocus attribute set.
Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element.

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

At least two implementers are interested (and none opposed):
Tests are written and can be reviewed and commented upon at:
- Implement dialog initial focus proposal web-platform-tests/wpt#36831
Implementation bugs are filed:
- Chrome: https://bugs.chromium.org/p/chromium/issues/detail?id=1193482
- Firefox: https://bugzilla.mozilla.org/show_bug.cgi?id=1811129
- Safari: https://bugs.webkit.org/show_bug.cgi?id=250795

(See WHATWG Working Mode: Changes for more details.)

/interaction.html ( diff )
/interactive-elements.html ( diff )

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: whatwg#4184 (comment) TODO add a conformance requirement about autofocus: whatwg#7709 TODO consider adding a <p class=XXX> for tab trapping: whatwg#7707

domenic

This does not implement the change where calling showModal() on <dialog autofocus> will cause the dialog itself to get focus. Probably the best way to spec that is to change the showModal() spec to check for the autofocus attribute and, if present, focus the dialog instead of going into the focus delegate steps.
A big part of the proposal was writing up https://github.com/whatwg/html/wiki/dialog--initial-focus,-a-proposal#improving-conformance-requirements-and-examples as spec text, to replace the current single sentence "The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window."

source

josepharhar · 2022-08-25T22:34:22Z

A big part of the proposal was writing up https://github.com/whatwg/html/wiki/dialog--initial-focus,-a-proposal#improving-conformance-requirements-and-examples as spec text, to replace the current single sentence "The dialog element represents a part of an application that a user interacts with to perform a task, for example a dialog box, inspector, or window."

Ah thanks, I totally missed this. It is now in the PR

josepharhar · 2022-08-26T16:52:22Z

This does not implement the change where calling showModal() on <dialog autofocus> will cause the dialog itself to get focus. Probably the best way to spec that is to change the showModal() spec to check for the autofocus attribute and, if present, focus the dialog instead of going into the focus delegate steps.

I added a commit to do this. Instead of doing it all in showModal I changed the dialog focusing steps because I figured that it would still be important to run the other autofocus related steps at the end of the dialog focusing steps

zcorpan · 2022-09-01T11:58:55Z

source

+  application, or manually closed by the user.</p>
+
+  <p>Especially for modal dialogs, which are a familiar pattern across all types of applications,
+  authors should work to ensure that dialogs in their web applications behave in a way that is


Is this intended to be non-normative? If so, don't use "should".

I intended this to be normative when I wrote it. Do you think it's a bad normative requirement, e.g. because it's too vague? I'm not sure on the precedent there.

Sorry for the delay. Yes, I think it's not a good requirement because it's vague and not testable. Further, the wording "authors should work to ensure" makes the requirement about the work the author does, which is a bit off.

If it's not testable, I think making it non-normative is better. e.g. s/should work/are encouraged/

I don't see any remaining normative text in the section we're talking about, so I think this is resolved?

This paragraph is still there and still says "authors should work to ensure".
Perhaps we could just change it to "authors are encouraged"?

source

domenic · 2022-09-05T09:02:34Z

source

+  application, or manually closed by the user.</p>
+
+  <p>Especially for modal dialogs, which are a familiar pattern across all types of applications,
+  authors should work to ensure that dialogs in their web applications behave in a way that is


I intended this to be normative when I wrote it. Do you think it's a bad normative requirement, e.g. because it's too vague? I'm not sure on the precedent there.

source

josepharhar · 2022-09-07T22:32:44Z

Thanks for the review @domenic! I believe I've addressed all your comments

This reverts commit 7585ed6.

annevk

I'm okay with merging this.

annevk · 2023-01-26T09:36:21Z

source

+   <p>In the following example, a dialog is used for editing the details of a product in an
+   inventory management web application.</p>
+
+   <pre><code class="html">&lt;dialog>


Alright, fair enough.

This has been discussed here: whatwg/html#4184 whatwg/html#8199 The gist of the changes are: 1. Make the dialog focusing steps look at keyboard focusable elements instead of any focusable element. 2. Make the dialog element itself get focus if it has the autofocus attribute set. 3. Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. This patch also adds "outline:none" to several WPTs because this patch causes the dialog element to become initially focused in some cases and get a focus ring. I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/CEL3wWHrTAQ Fixed: 1193482 Change-Id: I1fee5981f72039a4467cbb35b2317832dd31bbea

This has been discussed here: whatwg/html#4184 whatwg/html#8199 The gist of the changes are: 1. Make the dialog focusing steps look at keyboard focusable elements instead of any focusable element. 2. Make the dialog element itself get focus if it has the autofocus attribute set. 3. Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. This patch also adds "outline:none" to several WPTs because this patch causes the dialog element to become initially focused in some cases and get a focus ring. I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/CEL3wWHrTAQ Fixed: 1193482 Change-Id: I1fee5981f72039a4467cbb35b2317832dd31bbea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3984630 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1100024}

This has been discussed here: whatwg/html#4184 whatwg/html#8199 The gist of the changes are: 1. Make the dialog focusing steps look at keyboard focusable elements instead of any focusable element. 2. Make the dialog element itself get focus if it has the autofocus attribute set. 3. Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. This patch also adds "outline:none" to several WPTs because this patch causes the dialog element to become initially focused in some cases and get a focus ring. I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/CEL3wWHrTAQ Fixed: 1193482 Change-Id: I1fee5981f72039a4467cbb35b2317832dd31bbea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3984630 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1100024}

… a=testonly Automatic update from web-platform-tests Implement dialog initial focus proposal This has been discussed here: whatwg/html#4184 whatwg/html#8199 The gist of the changes are: 1. Make the dialog focusing steps look at keyboard focusable elements instead of any focusable element. 2. Make the dialog element itself get focus if it has the autofocus attribute set. 3. Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. This patch also adds "outline:none" to several WPTs because this patch causes the dialog element to become initially focused in some cases and get a focus ring. I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/CEL3wWHrTAQ Fixed: 1193482 Change-Id: I1fee5981f72039a4467cbb35b2317832dd31bbea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3984630 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1100024} -- wpt-commits: 95f9b15d9aad3354f440e4e4cced5ccc405b0069 wpt-pr: 36831

This has been discussed here: whatwg/html#4184 whatwg/html#8199 The gist of the changes are: 1. Make the dialog focusing steps look at keyboard focusable elements instead of any focusable element. 2. Make the dialog element itself get focus if it has the autofocus attribute set. 3. Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. This patch also adds "outline:none" to several WPTs because this patch causes the dialog element to become initially focused in some cases and get a focus ring. I2S: https://groups.google.com/a/chromium.org/g/blink-dev/c/CEL3wWHrTAQ Fixed: 1193482 Change-Id: I1fee5981f72039a4467cbb35b2317832dd31bbea Reviewed-on: https://chromium-review.googlesource.com/c/chromium/src/+/3984630 Commit-Queue: Joey Arhar <[email protected]> Reviewed-by: Mason Freed <[email protected]> Cr-Commit-Position: refs/heads/main@{#1100024}

The main changes of the new algorithm are * Make the dialog focusing steps look at sequentially focusable elements instead of any focusable element. * Make the dialog element itself get focus if it has the autofocus attribute set. * Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. Spec PR (merged): whatwg/html#8199 Differential Revision: https://phabricator.services.mozilla.com/D181263

The main changes of the new algorithm are * Make the dialog focusing steps look at sequentially focusable elements instead of any focusable element. * Make the dialog element itself get focus if it has the autofocus attribute set. * Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. Spec PR (merged): whatwg/html#8199 Differential Revision: https://phabricator.services.mozilla.com/D181263 UltraBlame original commit: cbf5ea1b17d2b0fbea7c1849ab2a1902396ad291

The main changes of the new algorithm are * Make the dialog focusing steps look at sequentially focusable elements instead of any focusable element. * Make the dialog element itself get focus if it has the autofocus attribute set. * Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. Spec PR (merged): whatwg/html#8199 Differential Revision: https://phabricator.services.mozilla.com/D181263 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1811129 gecko-commit: 94d3ff1570f4ef28436d580200a642fc1ab41883 gecko-reviewers: emilio

The main changes of the new algorithm are * Make the dialog focusing steps look at sequentially focusable elements instead of any focusable element. * Make the dialog element itself get focus if it has the autofocus attribute set. * Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. Spec PR (merged): whatwg/html#8199 Differential Revision: https://phabricator.services.mozilla.com/D181263

The main changes of the new algorithm are * Make the dialog focusing steps look at sequentially focusable elements instead of any focusable element. * Make the dialog element itself get focus if it has the autofocus attribute set. * Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. Spec PR (merged): whatwg/html#8199 Differential Revision: https://phabricator.services.mozilla.com/D181263 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1811129 gecko-commit: 94d3ff1570f4ef28436d580200a642fc1ab41883 gecko-reviewers: emilio

The main changes of the new algorithm are * Make the dialog focusing steps look at sequentially focusable elements instead of any focusable element. * Make the dialog element itself get focus if it has the autofocus attribute set. * Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. Spec PR (merged): whatwg/html#8199 Differential Revision: https://phabricator.services.mozilla.com/D181263

The main changes of the new algorithm are * Make the dialog focusing steps look at sequentially focusable elements instead of any focusable element. * Make the dialog element itself get focus if it has the autofocus attribute set. * Make the dialog element itself get focus as a fallback instead of focus being "reset" to the body element. Spec PR (merged): whatwg/html#8199 Differential Revision: https://phabricator.services.mozilla.com/D181263 bugzilla-url: https://bugzilla.mozilla.org/show_bug.cgi?id=1811129 gecko-commit: 94d3ff1570f4ef28436d580200a642fc1ab41883 gecko-reviewers: emilio

https://bugs.webkit.org/show_bug.cgi?id=250795 Reviewed by NOBODY (OOPS!). Updates the dialog focusing steps and the focus delegate steps to match latest spec. Spec PR: whatwg/html#8199 * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/focus-previous-iframe.tentative-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-focus-expected.txt: * Source/WebCore/dom/Element.cpp: (WebCore::Element::findFocusDelegateForTarget): * Source/WebCore/html/HTMLDialogElement.cpp: (WebCore::HTMLDialogElement::runFocusingSteps): (WebCore::HTMLDialogElement::supportsFocus const): * Source/WebCore/html/HTMLDialogElement.h:

https://bugs.webkit.org/show_bug.cgi?id=250795 Reviewed by NOBODY (OOPS!). Updates the dialog focusing steps and the focus delegate steps to match latest spec. Spec PR: whatwg/html#8199 * LayoutTests/fast/layers/layer-order-after-top-layer.html: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/focus-previous-iframe.tentative-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-focus-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-dialog-initial-focus-expected.txt: Removed. * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-dialog-initial-focus.html: Removed. These tests no longer exist in upstream WPT repo. * Source/WebCore/dom/Element.cpp: (WebCore::Element::findFocusDelegateForTarget): * Source/WebCore/html/HTMLDialogElement.cpp: (WebCore::HTMLDialogElement::runFocusingSteps): (WebCore::HTMLDialogElement::supportsFocus const): * Source/WebCore/html/HTMLDialogElement.h:

https://bugs.webkit.org/show_bug.cgi?id=250795 Reviewed by Tim Nguyen. Updates the dialog focusing steps and the focus delegate steps to match latest spec. Spec PR: whatwg/html#8199 * LayoutTests/fast/layers/layer-order-after-top-layer.html: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/child-sequential-focus-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-focus-shadow-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/dialog-showModal-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/focus-previous-iframe.tentative-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/interactive-elements/the-dialog-element/show-modal-focusing-steps-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-focus-expected.txt: * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-dialog-initial-focus-expected.txt: Removed. * LayoutTests/imported/w3c/web-platform-tests/html/semantics/popovers/popover-dialog-initial-focus.html: Removed. These tests no longer exist in upstream WPT repo. * Source/WebCore/dom/Element.cpp: (WebCore::Element::findFocusDelegateForTarget): * Source/WebCore/html/HTMLDialogElement.cpp: (WebCore::HTMLDialogElement::runFocusingSteps): (WebCore::HTMLDialogElement::supportsFocus const): * Source/WebCore/html/HTMLDialogElement.h: Canonical link: https://commits.webkit.org/281215@main

josepharhar mentioned this pull request Aug 16, 2022

Focus the dialog element instead of the first focusable item #4184

Closed

domenic reviewed Aug 19, 2022

View reviewed changes

source Show resolved Hide resolved

source Outdated Show resolved Hide resolved

domenic mentioned this pull request Aug 24, 2022

Clarify UX (keyboard) and further a11y expectations for modeless dialogs #7707

Open

add missing text from the proposal

fd9c31d

josepharhar mentioned this pull request Aug 25, 2022

Consider conformance guidance for dialogs which contain large blocks of text #7708

Closed

josepharhar added 2 commits August 25, 2022 15:17

add example

b52e9b6

add second example

8da9666

josepharhar added 2 commits August 25, 2022 15:50

DialogShowOptions

2070d76

Add showmodal autofocus logic

50c821f

zcorpan reviewed Sep 1, 2022

View reviewed changes

domenic reviewed Sep 5, 2022

View reviewed changes

josepharhar added 15 commits September 7, 2022 14:18

Merge remote-tracking branch 'upstream/main' into dialogsequentialfocus

844c49f

remove a sentence with should

c15e1fc

link to methods

4727fc0

dialogshowoptions

8ff0298

code input

da545c2

non-normative -> normative

7003f1f

remove space

1ca7cbb

add links to element types and attributes

7dae27e

more normativeness

5907549

dialog focusing steps link

b09e68c

dialogshowoptions -> options

136592c

preventinitialfocus stuff

1f0a278

more preventinitialfocus linking

c6de43e

remove explicit is modal parameter

e4046aa

more method

f60b5e2

Revert "replace product number with add product"

494d638

This reverts commit 7585ed6.

annevk approved these changes Jan 26, 2023

View reviewed changes

domenic merged commit a9f103c into whatwg:main Jan 26, 2023

past mentioned this pull request Jan 26, 2023

Upcoming HTML standard issue triage meeting on 1/26/2023 #8723

Closed

YusukeHirao mentioned this pull request Jan 27, 2023

Add requiring autofocus in <dialog> to preset markuplint/markuplint#689

Open

past mentioned this pull request Feb 9, 2023

Upcoming HTML standard issue triage meeting on 2/9/2023 #8786

Closed

rwlbuis mentioned this pull request May 2, 2023

[popover] Use dialog focus algorithm for dialog popovers WebKit/WebKit#13362

Merged

moz-wptsync-bot mentioned this pull request Aug 2, 2023

[Gecko Bug 1811129] Implement the new dialog initial focus algorithm web-platform-tests/wpt#41289

Merged

josepharhar mentioned this pull request Aug 26, 2023

Dialog initial focus when dialog contains a slot element #9640

Closed

lukewarlow mentioned this pull request Jul 17, 2024

Implement new dialog initial focus algorithm WebKit/WebKit#30915

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Implement dialog initial focus proposal #8199

Implement dialog initial focus proposal #8199

josepharhar commented Aug 16, 2022 •

edited by pr-preview bot

Loading

domenic left a comment

josepharhar commented Aug 25, 2022

josepharhar commented Aug 26, 2022

zcorpan Sep 1, 2022

domenic Sep 5, 2022

zcorpan Jan 19, 2023

domenic Jan 20, 2023

josepharhar Jan 20, 2023

domenic Sep 5, 2022

josepharhar commented Sep 7, 2022

annevk left a comment

annevk Jan 26, 2023

Implement dialog initial focus proposal #8199

Implement dialog initial focus proposal #8199

Conversation

josepharhar commented Aug 16, 2022 • edited by pr-preview bot Loading

domenic left a comment

Choose a reason for hiding this comment

josepharhar commented Aug 25, 2022

josepharhar commented Aug 26, 2022

zcorpan Sep 1, 2022

Choose a reason for hiding this comment

domenic Sep 5, 2022

Choose a reason for hiding this comment

zcorpan Jan 19, 2023

Choose a reason for hiding this comment

domenic Jan 20, 2023

Choose a reason for hiding this comment

josepharhar Jan 20, 2023

Choose a reason for hiding this comment

domenic Sep 5, 2022

Choose a reason for hiding this comment

josepharhar commented Sep 7, 2022

annevk left a comment

Choose a reason for hiding this comment

annevk Jan 26, 2023

Choose a reason for hiding this comment

josepharhar commented Aug 16, 2022 •

edited by pr-preview bot

Loading