41143 enable command for #41423

dletorey · 2025-10-07T15:49:41Z

Description

Added working example for custom values of command attribute on:
- API commandEvent() page
- HTMLButtonElement: command property page
Added working examle of request-close value for command attribute

Motivation

Working on MDN issue #41143

Related issues and pull requests

files/en-us/web/api/commandevent/index.md

files/en-us/web/api/htmlbuttonelement/command/index.md

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

github-actions · 2025-10-07T15:51:44Z

Preview URLs

(comment last updated: 2025-10-07 16:01:55)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

files/en-us/web/api/commandevent/index.md

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

… into 41143-enable-commandFor

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

dipikabh · 2025-10-08T18:29:19Z

Would these also need to be updated in BCD (https://github.com/mdn/browser-compat-data/blob/main/html/elements/button.json):

command
commandfor
request-close

They all link to the same bug: ⁨bug 1983523⁩

dipikabh

Review for the <button> page

dipikabh · 2025-10-09T17:31:30Z

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


 ## Examples

+### Basic example


Suggested change

### Basic example

### Creating a basic button

dipikabh · 2025-10-09T17:32:26Z

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

 ```

-{{ EmbedLiveSample('Example', 200, 64) }}
+{{ EmbedLiveSample('basic_example', 200, 64) }}


the macro will need updating if you accept the title change

dipikabh · 2025-10-09T18:08:18Z

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

 ```html
 <button name="button">Press me</button>
 ```


I realize that this example was already on the page and not one you've added. Since we're touching it here anyway, sharing some thoughts I have for improving it slightly. LMK what you think.

If we don't mention the type, its default value is submit but that's true when the button is inside a form. In this case, since we're not showing a form or explaining any other context for the button, let's explicitly specify the type as a best practice. Also suggesting a different name for the button to hint that it doesn't do anything.

Suggested change

```html

<button name="button">Press me</button>

```

This example creates a clickable button.

The `type="button"` attribute ensures the button has no default behavior.

You can make this button interactive using JavaScript or attributes such as `command` and `commandfor`.

```html

<button type="button" name="button">I'm a button</button>

dipikabh · 2025-10-09T18:09:38Z

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

-{{ EmbedLiveSample('Example', 200, 64) }}
+{{ EmbedLiveSample('basic_example', 200, 64) }}
+
+### Command request-close


Suggested change

### Command request-close

### Using the `request-close` value for the `command` attribute

dipikabh · 2025-10-09T18:12:58Z

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

+
+### Command request-close
+
+This example uses the `request-close` value for the command attribute to check if a dialog is [`cancelable`](/en-US/docs/Web/API/Event/cancelable) when clicking a close button. When clicking the close button inside the dialog it checks to see if the radio button is set to yes, if not the dialog will not close.


Let's keep the UI description before the code and move all explanations about what's happening behind the scenes to after the Result frame.

So here, we can keep it as:

Suggested change

This example uses the `request-close` value for the command attribute to check if a dialog is [`cancelable`](/en-US/docs/Web/API/Event/cancelable) when clicking a close button. When clicking the close button inside the dialog it checks to see if the radio button is set to yes, if not the dialog will not close.

The dialog in this example has two radio buttons that control whether or not the dialog can be closed.

Select **Yes** or **No**, and then click **Request to Close** to try to close the dialog.

If **Yes** is selected, the dialog closes; if **No** is selected, the dialog stays open and shows a message instead.

dipikabh · 2025-10-09T18:18:02Z

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

+<dialog id="mydialog">
+  <div class="wrapper">
+    <form>
+      <legend>Would you like to be able to close this dialog:</legend>


How about:

Suggested change

<legend>Would you like to be able to close this dialog:</legend>

<legend>Allow this dialog to close when requested?</legend>

dipikabh · 2025-10-09T18:19:10Z

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

+    <form>
+      <legend>Would you like to be able to close this dialog:</legend>


add a fieldset to the form?

Suggested change

<form>

<legend>Would you like to be able to close this dialog:</legend>

<form>

<fieldset>

<legend>Would you like to be able to close this dialog:</legend>

dipikabh · 2025-10-09T18:21:25Z

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

+      Request to Close
+    </button>
+    <p class="warning" hidden>
+      You have not selected yes so can not close this dialog.


Suggested change

You have not selected yes so can not close this dialog.

You must choose "Yes" to close this dialog.

dipikabh · 2025-10-09T18:23:06Z

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

+});
+```
+
+{{ EmbedLiveSample('command_request-close', 200) }}


macro will need updating if changing the section title

dipikabh · 2025-10-09T19:31:08Z

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

+```
+
+{{ EmbedLiveSample('command_request-close', 200) }}



Let's explain here (after the result frame) what's happening behind the scenes. Just jotting down some rough points to outline the flow:

The Open Dialog button opens the dialog using command="show-modal".

The Request to Close button has command="request-close" and commandfor="mydialog". So when it's clicked, it asks the dialog if it can be closed (unlike the close command, which would close the dialog immediately).

This triggers a cancelable cancel event on the dialog.

The script listening for this event calls preventDefault() when No is selected. in turn keeping dialog open and showing message.

If event is not canceled (when Yes is selected), the browser closes the dialog.

dletorey added 2 commits October 7, 2025 15:48

added working examples for command attribute

7b42b64

Merge branch 'main' into 41143-enable-commandFor

194b4be

dletorey requested review from a team as code owners October 7, 2025 15:49

dletorey requested review from estelle and sideshowbarker and removed request for a team October 7, 2025 15:49

github-actions bot added Content:HTML Hypertext Markup Language docs Content:WebAPI Web API docs labels Oct 7, 2025

dletorey mentioned this pull request Oct 7, 2025

added release note for command & commandfor attributes #41424

Open

github-actions bot added the size/m [PR only] 51-500 LoC changed label Oct 7, 2025

github-actions bot reviewed Oct 7, 2025

View reviewed changes

dletorey requested review from dipikabh and pepelsbey and removed request for estelle and sideshowbarker October 7, 2025 15:50

dletorey and others added 6 commits October 7, 2025 16:53

removed extra An

14f294c

Update files/en-us/web/api/commandevent/index.md

e84dcb0

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/api/commandevent/index.md

77e5e09

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/api/commandevent/index.md

4bfe5f6

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/api/commandevent/index.md

c37c932

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/api/commandevent/index.md

8b8d34f

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

github-actions bot reviewed Oct 7, 2025

View reviewed changes

dletorey and others added 5 commits October 7, 2025 16:55

Update files/en-us/web/api/commandevent/index.md

36b2164

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

removed extra An

fde6b2f

Merge branch '41143-enable-commandFor' of github.com:dletorey/content…

89d0ad9

… into 41143-enable-commandFor

Update files/en-us/web/api/htmlbuttonelement/command/index.md

3f75578

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/api/htmlbuttonelement/command/index.md

13193fb

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

dletorey and others added 8 commits October 7, 2025 16:57

Update files/en-us/web/api/htmlbuttonelement/command/index.md

baa605f

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/api/htmlbuttonelement/command/index.md

2a1dc29

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/api/htmlbuttonelement/command/index.md

26c8d4d

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/api/htmlbuttonelement/command/index.md

7bf46ec

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/html/reference/elements/button/index.md

bd0dc88

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/html/reference/elements/button/index.md

38e6e73

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Update files/en-us/web/html/reference/elements/button/index.md

a4820a6

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

Merge branch 'main' into 41143-enable-commandFor

aa310f0

dipikabh requested changes Oct 9, 2025

View reviewed changes

-```html
-<button name="button">Press me</button>
-```
+This example creates a clickable button.
+The `type="button"` attribute ensures the button has no default behavior.
+You can make this button interactive using JavaScript or attributes such as `command` and `commandfor`.
+```html
+<button type="button" name="button">I'm a button</button>

	### Command request-close
	### Using the `request-close` value for the `command` attribute


		### Command request-close

		This example uses the `request-close` value for the command attribute to check if a dialog is [`cancelable`](/en-US/docs/Web/API/Event/cancelable) when clicking a close button. When clicking the close button inside the dialog it checks to see if the radio button is set to yes, if not the dialog will not close.

-This example uses the `request-close` value for the command attribute to check if a dialog is [`cancelable`](/en-US/docs/Web/API/Event/cancelable) when clicking a close button. When clicking the close button inside the dialog it checks to see if the radio button is set to yes, if not the dialog will not close.
+The dialog in this example has two radio buttons that control whether or not the dialog can be closed.
+Select **Yes** or **No**, and then click **Request to Close** to try to close the dialog.
+If **Yes** is selected, the dialog closes; if **No** is selected, the dialog stays open and shows a message instead.

	<legend>Would you like to be able to close this dialog:</legend>
	<legend>Allow this dialog to close when requested?</legend>

		<form>
		<legend>Would you like to be able to close this dialog:</legend>

	You have not selected yes so can not close this dialog.
	You must choose "Yes" to close this dialog.

41143 enable command for #41423

Are you sure you want to change the base?

41143 enable command for #41423

Uh oh!

Conversation

dletorey commented Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Motivation

Related issues and pull requests

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions bot commented Oct 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

dipikabh commented Oct 8, 2025

Uh oh!

dipikabh left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

dletorey commented Oct 7, 2025 •

edited

Loading

github-actions bot commented Oct 7, 2025 •

edited

Loading