Skip to content

Technical review: Document <dialog> closeby attribute #39082

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

Jump to bottom
Open
wants to merge 2 commits into
base: main
Choose a base branch
from
Open

Technical review: Document <dialog> closeby attribute #39082

wants to merge 2 commits into from
+205 −0

Conversation

chrisdavidmills
Copy link
Contributor

Description

Chrome 134 supports the closedby attribute of the <dialog> element: see https://chromestatus.com/feature/5097714453577728.

This PR documents the new attribute, plus the equivalent DOM property.

Motivation

Additional details

Related issues and pull requests

@chrisdavidmills chrisdavidmills requested review from a team as code owners April 11, 2025 16:14
@chrisdavidmills chrisdavidmills requested review from estelle and wbamberg and removed request for a team April 11, 2025 16:14
@github-actions github-actions bot added Content:HTML Hypertext Markup Language docs Content:WebAPI Web API docs labels Apr 11, 2025
@chrisdavidmills chrisdavidmills changed the title Document <dialog> closeby attribute Technical review: Document <dialog> closeby attribute Apr 11, 2025
@github-actions github-actions bot added the size/m [PR only] 51-500 LoC changed label Apr 11, 2025
@github-actions GitHub Actions
Copy link
Contributor

github-actions bot commented Apr 11, 2025 •
edited
Loading

Preview URLs

Flaws (19)

URL: /en-US/docs/Web/API/HTMLDialogElement
Title: HTMLDialogElement
Flaw count: 6

  • macros:
    • Macro produces link /en-US/docs/Web/HTML/Element/dialog which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/dialog which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/button which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/dialog which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/select which is a redirect
    • and 1 more flaws omitted

URL: /en-US/docs/Web/API/HTMLDialogElement/closedBy
Title: HTMLDialogElement: closedBy property
Flaw count: 4

  • macros:
    • Macro produces link /en-US/docs/Web/HTML/Element/dialog which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/button which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/form which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/dialog which is a redirect

URL: /en-US/docs/Web/HTML/Reference/Elements/dialog
Title: <dialog>: The Dialog element
Flaw count: 9

  • macros:
    • Macro produces link /en-US/docs/Web/HTML/Element/button which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/form which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/form which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/select which is a redirect
    • Macro produces link /en-US/docs/Web/HTML/Element/button which is a redirect
    • and 4 more flaws omitted

(comment last updated: 2025-04-15 09:38:05)

mfreed7
mfreed7 reviewed Apr 14, 2025
View reviewed changes
Copy link

@mfreed7 mfreed7 left a comment

Choose a reason for hiding this comment

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

LGTM! Thanks for documenting this.

files/en-us/web/api/htmldialogelement/closedby/index.md Outdated

- `none`

- : No user actions can be used to close the `<dialog>` element, only developer-specified mechanisms such as a JavaScript-powered "Close" {{htmlelement("button")}} or a {{htmlelement("form")}} submission.
Copy link

Choose a reason for hiding this comment

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

It might be helpful to add a few more bits here. Something like "e.g. <button onclick="dialog.close()">". As I read this sentence, it sounded like there was some magic declarative way to make a button close the dialog.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

This is a good point. We don't tend to use HTML handler attributes on MDN, but I've solved the problem differently:

No user actions can be used to close the <dialog> element, only developer-specified mechanisms such as a close {{htmlelement("button")}} (for example with a click handler that invokes {{domxref("HTMLDialogElement.close()")}}) or a {{htmlelement("form")}} submission.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

I've made this change on the HTML ref page too.

files/en-us/web/api/htmldialogelement/closedby/index.md Outdated

- `any`

- : The `<dialog>` element can be closed via relevant platform-specific close requests, or by pressing outside the `<dialog>`. This is equivalent to the ["light dismiss" behavior of "auto" state popovers](/en-US/docs/Web/API/Popover_API/Using#auto_state_and_light_dismiss).
Copy link

Choose a reason for hiding this comment

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

The word "pressing" is weird. Perhaps "clicking or tapping"?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

OK, point taken. I try not to just write "click" in these situations to be mindful of mobile users, but it does sound a bit weird in this context. Updated to "clicking or tapping" throughout.

files/en-us/web/api/htmldialogelement/closedby/index.md

## Examples

```js
Copy link

Choose a reason for hiding this comment

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

Would an HTML example be good to include, perhaps first? <dialog closedby=any>?

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Good idea. I've done so, and added some more explanation.

files/en-us/web/html/reference/elements/dialog/index.md Outdated

- `none`

- : No user actions can be used to close the `<dialog>` element, only developer-specified mechanisms such as a JavaScript-powered "Close" {{htmlelement("button")}} or a {{htmlelement("form")}} submission.
Copy link

Choose a reason for hiding this comment

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

Same comments as above here and below.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

All done.

Copy link
Contributor Author

Choose a reason for hiding this comment

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

Let me know if you think this PR needs anything else.

@chrisdavidmills chrisdavidmills requested a review from mfreed7 April 15, 2025 09:36
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers

@estelle estelle Awaiting requested review from estelle estelle is a code owner automatically assigned from mdn/yari-content-html

@wbamberg wbamberg Awaiting requested review from wbamberg wbamberg is a code owner automatically assigned from mdn/yari-content-web-api

@mfreed7 mfreed7 Awaiting requested review from mfreed7

At least 1 approving review is required to merge this pull request.

Assignees
No one assigned
Labels
Content:HTML Hypertext Markup Language docs Content:WebAPI Web API docs size/m [PR only] 51-500 LoC changed
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.
2 participants
@chrisdavidmills @mfreed7