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.

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

Open
wants to merge 1 commit into
base: main
Choose a base branch
from

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
Copy link
Contributor

Preview URLs

Flaws (18)

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: 3

  • 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/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

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.


- `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.


- `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"?


## 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>?


- `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.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Content:HTML Hypertext Markup Language docs Content:WebAPI Web API docs size/m [PR only] 51-500 LoC changed
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants