From 8dd227b90abeed60434970aff3da9776d1f24d67 Mon Sep 17 00:00:00 2001 From: Kevin Doughty Date: Thu, 24 Oct 2024 16:33:46 +0100 Subject: [PATCH 01/56] en-US/docs/Web/CSS/transform code typo (#36490) --- files/en-us/web/css/transform/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/css/transform/index.md b/files/en-us/web/css/transform/index.md index a0f74a7cfc4906b..426f33be7042bb1 100644 --- a/files/en-us/web/css/transform/index.md +++ b/files/en-us/web/css/transform/index.md @@ -50,7 +50,7 @@ transform: skewY(1.07rad); /* Multiple function values */ transform: translateX(10px) rotate(10deg) translateY(5px); -transform: perspective(500px) translate(10px, 0, 20px) rotateY(3deg); +transform: perspective(500px) translate3d(10px, 0, 20px) rotateY(30deg); /* Global values */ transform: inherit; From 4982b41a03b0dda8d1c3db43e8e644e77de1390d Mon Sep 17 00:00:00 2001 From: anonymous-gecko <145402283+anonymous-gecko@users.noreply.github.com> Date: Thu, 24 Oct 2024 11:43:11 -0400 Subject: [PATCH 02/56] fix: guidance for setting aria-rowindex on spanning cell (#35761) --- .../web/accessibility/aria/attributes/aria-rowindex/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/accessibility/aria/attributes/aria-rowindex/index.md b/files/en-us/web/accessibility/aria/attributes/aria-rowindex/index.md index bdfd9cc5f790c02..3a234a636c9e77a 100644 --- a/files/en-us/web/accessibility/aria/attributes/aria-rowindex/index.md +++ b/files/en-us/web/accessibility/aria/attributes/aria-rowindex/index.md @@ -21,7 +21,7 @@ The value for `aria-rowindex` is an integer greater than or equal to `1`, greate If all of the rows are loaded and in the DOM, you don't need to include `aria-rowindex` as browsers automatically calculate the index of each row. However, when only a subset of the rows are present in the DOM, `aria-rowindex` is needed to indicate each row's position with respect to the full table. If only a subset of rows are loaded, you also need to include [`aria-rowcount`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-rowcount) on the table ancestor, even if you don't know the total rowcount. -If the table with only a subset of rows has a cell that spans more than one row, both the row and cell need to have the `aria-rowspan` set. If a cell spans more than one row－when a cell role includes the `aria-rowspan` attribute or HTML cell has a `rowspan` attribute set to a value greater than 1－include the row's `aria-rowindex` value on the spanning cell in addition to the appropriate row spanning attribute. The value should be the row index of the row where the span starts. +If the table with only a subset of rows has a cell that spans more than one row, both the row and cell need to have the `aria-rowindex` set. If a cell spans more than one row－when a cell role includes the `aria-rowspan` attribute or HTML cell has a `rowspan` attribute set to a value greater than 1－include the row's `aria-rowindex` value on the spanning cell in addition to the appropriate row spanning attribute. The value should be the row index of the row where the span starts. > [!NOTE] > The `aria-rowindex` must be added to each row, but is optional on the cells, except for cells that span rows: the `aria-rowindex` attribute is required on all spanning cells. From 26ecea937d9349e3526b7acd93f3b33135fe2c26 Mon Sep 17 00:00:00 2001 From: William Durand Date: Thu, 24 Oct 2024 23:20:23 +0200 Subject: [PATCH 03/56] Fix inaccuracy for the "description" field in manifest.json files (#36495) --- .../add-ons/webextensions/manifest.json/description/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/mozilla/add-ons/webextensions/manifest.json/description/index.md b/files/en-us/mozilla/add-ons/webextensions/manifest.json/description/index.md index a117243fb47c681..57508ba65bd7cbc 100644 --- a/files/en-us/mozilla/add-ons/webextensions/manifest.json/description/index.md +++ b/files/en-us/mozilla/add-ons/webextensions/manifest.json/description/index.md @@ -32,7 +32,7 @@ browser-compat: webextensions.manifest.description -A short description of the extension, intended for display in the browser's user interface. In Firefox and Chrome this value can be up to 132 characters. The limit in other browsers may differ. +A short description of the extension, intended for display in the browser's user interface. In Chromium browsers, this value can be up to 132 characters. The limit in other browsers may differ. This is a [localizable property](/en-US/docs/Mozilla/Add-ons/WebExtensions/Internationalization#internationalizing_manifest.json). From 3556f7aca5478c222368dba8a7bd6a007898b36a Mon Sep 17 00:00:00 2001 From: Keith Cirkel Date: Thu, 24 Oct 2024 22:36:59 +0100 Subject: [PATCH 04/56] Add documentation for the "command" and "commandfor" attributes, and "command" event. (#30829) --- .../web/api/commandevent/command/index.md | 49 ++++++++ .../api/commandevent/commandevent/index.md | 51 +++++++++ files/en-us/web/api/commandevent/index.md | 91 +++++++++++++++ .../web/api/commandevent/source/index.md | 51 +++++++++ .../api/htmlbuttonelement/command/index.md | 76 +++++++++++++ .../commandforelement/index.md | 42 +++++++ .../api/htmlelement/command_event/index.md | 77 +++++++++++++ .../web/api/invoker_commands_api/index.md | 105 ++++++++++++++++++ files/en-us/web/html/element/button/index.md | 21 ++++ files/jsondata/GroupData.json | 11 ++ 10 files changed, 574 insertions(+) create mode 100644 files/en-us/web/api/commandevent/command/index.md create mode 100644 files/en-us/web/api/commandevent/commandevent/index.md create mode 100644 files/en-us/web/api/commandevent/index.md create mode 100644 files/en-us/web/api/commandevent/source/index.md create mode 100644 files/en-us/web/api/htmlbuttonelement/command/index.md create mode 100644 files/en-us/web/api/htmlbuttonelement/commandforelement/index.md create mode 100644 files/en-us/web/api/htmlelement/command_event/index.md create mode 100644 files/en-us/web/api/invoker_commands_api/index.md diff --git a/files/en-us/web/api/commandevent/command/index.md b/files/en-us/web/api/commandevent/command/index.md new file mode 100644 index 000000000000000..86e3c30b2d41378 --- /dev/null +++ b/files/en-us/web/api/commandevent/command/index.md @@ -0,0 +1,49 @@ +--- +title: "CommandEvent: command property" +short-title: command +slug: Web/API/CommandEvent/command +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.CommandEvent.command +--- + +{{APIRef("Invoker Commands API")}}{{SeeCompatTable}} + +The **`command`** read-only property of the {{domxref("CommandEvent")}} interface returns a string containing the value of the {{domxref("HTMLButtonElement.command", "command")}} property at the time the event was dispatched. + +## Value + +A string. + +## Examples + +In the following simple example we've set up an event listener to listen for the "show-modal" command: + +```js +document.body.addEventListener( + "command", + (event) => { + const theAction = event.command; + + if (theAction == "show-modal") { + console.log("Showing modal dialog"); + } + }, + { capture: true }, +); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}} +- {{domxref("HTMLButtonElement.command")}} +- {{domxref("HTMLButtonElement.commandForElement")}} diff --git a/files/en-us/web/api/commandevent/commandevent/index.md b/files/en-us/web/api/commandevent/commandevent/index.md new file mode 100644 index 000000000000000..648f80e7f0a6828 --- /dev/null +++ b/files/en-us/web/api/commandevent/commandevent/index.md @@ -0,0 +1,51 @@ +--- +title: "CommandEvent: CommandEvent() constructor" +short-title: CommandEvent() +slug: Web/API/CommandEvent/CommandEvent +page-type: web-api-constructor +status: + - experimental +browser-compat: api.CommandEvent.CommandEvent +--- + +{{APIRef("Invoker Commands API")}}{{SeeCompatTable}} + +The **`CommandEvent()`** constructor creates a new {{domxref("CommandEvent")}} object. + +## Syntax + +```js-nolint +new CommandEvent(type) +new CommandEvent(type, options) +``` + +### Parameters + +- `type` + - : A string with the name of the event. + It is case-sensitive and browsers set it to `beforeinput` or `input`. +- `options` {{optional_inline}} + - : An object that, _in addition of the properties defined in {{domxref("Event/Event", "Event()")}}_, can have the following properties: + - `source` {{optional_inline}} + - : An {{domxref("HTMLButtonElement")}} representing the button that was interacted with to cause this event. This can be any element but we recommend only using button as a source to avoid surprises. + - `command` {{optional_inline}} + - : A string containing the command for the controlled element to take. While manually instantiating a `CommandEvent` it is possible to use any string value, but it is recommended to use one of the built-in names or prefix with two dashes (`--`) to ensure forward compatibility. + +### Return value + +A new {{domxref("CommandEvent")}} object. + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}} +- {{domxref("HTMLButtonElement.command")}} +- {{domxref("HTMLButtonElement.commandForElement")}} +- {{domxref("CommandEvent")}} diff --git a/files/en-us/web/api/commandevent/index.md b/files/en-us/web/api/commandevent/index.md new file mode 100644 index 000000000000000..9978f71d9a445b8 --- /dev/null +++ b/files/en-us/web/api/commandevent/index.md @@ -0,0 +1,91 @@ +--- +title: CommandEvent +slug: Web/API/CommandEvent +page-type: web-api-interface +status: + - experimental +browser-compat: api.CommandEvent +--- + +{{APIRef("Invoker Commands API")}}{{SeeCompatTable}} + +The **`CommandEvent`** interface represents an event notifying the user when a {{domxref("HTMLButtonElement", "button")}} element with valid {{domxref("HTMLButtonElement.commandForElement", "commandForElement")}} and {{domxref("HTMLButtonElement.command", "command")}} attributes is about to invoke an interactive element. + +It is the event object for the `HTMLElement` {{domxref("HTMLElement.command_event", "command")}} event, which represents an action from an Invoker Control it is invoked (for example when it is clicked or pressed). + +{{InheritanceDiagram}} + +## Constructor + +- {{domxref("CommandEvent.CommandEvent", "CommandEvent()")}} + - : Creates an `CommandEvent` object. + +## Instance properties + +_This interface inherits properties from its parent, {{DOMxRef("Event")}}._ + +- {{domxref("CommandEvent.source")}} {{ReadOnlyInline}} + - : An {{domxref("HTMLButtonElement")}} representing the button that caused this invocation. +- {{domxref("CommandEvent.command")}} {{ReadOnlyInline}} + - : A string representing the {{domxref("HTMLButtonElement.command", "command")}} value of the source button. + +## Examples + +### Basic example + +```html + + +
+ + +
+``` + +```js +const popover = document.getElementById("mypopover"); + +// ... + +popover.addEventListener("command", (event) => { + if (event.command === "show-popover") { + console.log("Popover is about to be shown"); + } +}); +``` + +### Custom example + +```html + + + + +[add appropriate alt text here] +``` + +```js +const image = document.getElementById("the-image"); + +image.addEventListener("command", (event) => { + if (event.command == "--rotate-left") { + event.target.style.rotate = "-90deg"; + } else if (event.command == "--rotate-right") { + event.target.style.rotate = "90deg"; + } +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}} +- {{domxref("HTMLButtonElement.command")}} +- {{domxref("HTMLButtonElement.commandForElement")}} diff --git a/files/en-us/web/api/commandevent/source/index.md b/files/en-us/web/api/commandevent/source/index.md new file mode 100644 index 000000000000000..269fa8426aafcc2 --- /dev/null +++ b/files/en-us/web/api/commandevent/source/index.md @@ -0,0 +1,51 @@ +--- +title: "CommandEvent: source property" +short-title: source +slug: Web/API/CommandEvent/source +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.CommandEvent.source +--- + +{{APIRef("Invoker Commands API")}}{{SeeCompatTable}} + +The **`source`** read-only property of the {{domxref("CommandEvent")}} interface returns an {{domxref("EventTarget")}} representing the control that invoked the given command. + +## Value + +An {{domxref("EventTarget")}} object. Usually an {{domxref("HTMLButtonElement")}}. + +## Examples + +In the following simple example we've set up an event listener to add a temporary class to the button element upon a CommandEvent: + +```js +document.body.addEventListener( + "command", + (event) => { + const theButton = event.source; + + theButton.classList.add("just-pressed"); + + setTimeout(() => { + theButton.classList.remove("just-pressed"); + }, 1000); + }, + { capture: true }, +); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}} +- {{domxref("HTMLButtonElement.command")}} +- {{domxref("HTMLButtonElement.commandForElement")}} diff --git a/files/en-us/web/api/htmlbuttonelement/command/index.md b/files/en-us/web/api/htmlbuttonelement/command/index.md new file mode 100644 index 000000000000000..95655f404022543 --- /dev/null +++ b/files/en-us/web/api/htmlbuttonelement/command/index.md @@ -0,0 +1,76 @@ +--- +title: "HTMLButtonElement: command property" +short-title: command +slug: Web/API/HTMLButtonElement/command +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.HTMLButtonElement.command +--- + +{{APIRef("Invoker Commands API")}}{{SeeCompatTable}} + +The **`command`** property of the {{domxref("HTMLButtonElement")}} interface gets and sets the action to be performed on an element being controlled by this button. For this to have an effect, [`commandfor`](/en-US/docs/Web/HTML/Element/button#commandfor) must be set. + +It reflects the [`command`](/en-US/docs/Web/HTML/Element/button#command) HTML attribute. + +## Value + +A string. See the [`command`](/en-US/docs/Web/HTML/Element/button#command) attribute for valid values. + +## Examples + +### Basic example + +```html + + +
+ +
+``` + +```js +const popover = document.getElementById("mypopover"); +const toggleBtn = document.getElementById("toggleBtn"); + +toggleBtn.command = "show-popover"; +``` + +### Custom example, using events + +```html + + + + +[add appropriate alt text here] +``` + +```js +const image = document.getElementById("the-image"); + +image.addEventListener("command", (event) => { + if (event.command == "--rotate-left") { + event.target.style.rotate = "-90deg"; + } else if (event.command == "--rotate-right") { + event.target.style.rotate = "90deg"; + } +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}} +- {{domxref("HTMLButtonElement.commandForElement")}} +- {{domxref("CommandEvent")}} diff --git a/files/en-us/web/api/htmlbuttonelement/commandforelement/index.md b/files/en-us/web/api/htmlbuttonelement/commandforelement/index.md new file mode 100644 index 000000000000000..4db975b978bc10d --- /dev/null +++ b/files/en-us/web/api/htmlbuttonelement/commandforelement/index.md @@ -0,0 +1,42 @@ +--- +title: "HTMLButtonElement: commandForElement property" +short-title: commandForElement +slug: Web/API/HTMLButtonElement/commandForElement +page-type: web-api-instance-property +status: + - experimental +browser-compat: api.HTMLButtonElement.commandForElement +--- + +{{APIRef("Invoker Commands API")}}{{SeeCompatTable}} + +The **`commandForElement`** property of the {{domxref("HTMLButtonElement")}} interface gets and sets the element to control via a button. + +It is the JavaScript equivalent of the [`commandfor`](/en-US/docs/Web/HTML/Element/button#commandfor) HTML attribute. + +## Value + +A reference to an existing {{domxref("Element")}} that the button controls. + +## Examples + +```js +const popover = document.getElementById("mypopover"); +const toggleBtn = document.getElementById("toggleBtn"); + +toggleBtn.commandForElement = popover; +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}} +- {{domxref("HTMLButtonElement.command")}} +- {{domxref("CommandEvent")}} diff --git a/files/en-us/web/api/htmlelement/command_event/index.md b/files/en-us/web/api/htmlelement/command_event/index.md new file mode 100644 index 000000000000000..3c3d0665ae368c7 --- /dev/null +++ b/files/en-us/web/api/htmlelement/command_event/index.md @@ -0,0 +1,77 @@ +--- +title: "HTMLElement: command event" +slug: Web/API/HTMLElement/command_event +page-type: web-api-event +status: + - experimental +browser-compat: api.HTMLElement.command_event +--- + +{{APIRef("Invoker Commands API")}}{{SeeCompatTable}} + +The **`command`** event of the {{domxref("HTMLElement")}} interface fires on an element that is controlled via a {{domxref("HTMLButtonElement", "button")}} with valid {{domxref("HTMLButtonElement.commandForElement", "commandForElement")}} and {{domxref("HTMLButtonElement.command", "command")}} values, whenever the button is interacted with (e.g. it is clicked). + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener("command", (event) => {}); + +oncommand = (event) => {}; +``` + +## Event type + +A {{domxref("CommandEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("CommandEvent")}} + +## Examples + +### Basic example + +```js +const popover = document.getElementById("mypopover"); + +// ... + +popover.addEventListener("command", (event) => { + if (event.action === "show-popover") { + console.log("Popover is about to be shown"); + } +}); +``` + +### Event dispatch and cancellation + +It is worth pointing out that `command` events fire on the element being invoked. If the button is clicked, it will first dispatch a `click` event which, if cancelled, then the `command` event will not fire and the default behavior will not be run. +In addition to cancelling the `click` event on the button, it is also possible to cancel the `command` event. + +For example: + +```js +button.addEventListener("click", (event) => { + event.preventDefault(); // the `command` event will never fire +}); +``` + +```js +element.addEventListener("command", (event) => { + event.preventDefault(); // the `command` event fires but the default behavior is cancelled +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("Invoker Commands API", "Invoker Commands API", "", "nocode")}} +- {{domxref("HTMLButtonElement.command")}} +- {{domxref("HTMLButtonElement.commandForElement")}} diff --git a/files/en-us/web/api/invoker_commands_api/index.md b/files/en-us/web/api/invoker_commands_api/index.md new file mode 100644 index 000000000000000..c8b01fb8a51d9cf --- /dev/null +++ b/files/en-us/web/api/invoker_commands_api/index.md @@ -0,0 +1,105 @@ +--- +title: Invoker Commands API +slug: Web/API/Invoker_Commands_API +page-type: web-api-overview +status: + - experimental +browser-compat: + - api.CommandEvent + - api.HTMLButtonElement.commandForElement + - api.HTMLButtonElement.command +--- + +{{DefaultAPISidebar("Invoker Commands API")}} + +The **Invoker Commands API** provides a way to declaratively assign behaviors to buttons, allowing control of interactive elements when the button is enacted (clicked or invoked via a keypress, such as the spacebar or return key). + +## Concepts and usage + +A common pattern on the web is to have {{HTMLElement("button")}} elements control various aspects of the page, such as opening and closing {{domxref("Popover API", "popovers", "", "nocode")}} or {{HTMLElement("dialog")}} elements, formatting text, and more. + +Historically creating these kinds of controls has required JavaScript event listeners added to the button which can then call the APIs on the element they control. The {{domxref("HTMLButtonElement.commandForElement", "commandForElement")}} and {{domxref("HTMLButtonElement.command", "command")}} properties provide a way to do this declaratively for a limited set of actions. This can be advantageous for built-in commands as the user does not have to wait for JavaScript to download and execute to make these buttons interactive. + +## HTML attributes + +- [`commandfor`](/en-US/docs/Web/HTML/Element/button#commandfor) + - : Turns a {{htmlelement("button")}} element into a button, controlling the given interactive element; takes the ID of the element to control as its value. +- [`command`](/en-US/docs/Web/HTML/Element/button#command) + - : Specifies the action to be performed on an element being controlled by a control ` +
+ + Popover content +
+``` + +### Creating declarative dialogs + +```html + + + + Dialog Content + +``` + +### Creating custom commands + +```html + + +[add appropriate alt text here] +``` + +```js +const myImg = document.getElementById("myimg"); + +myImg.addEventListener("command", (event) => { + if (event.command == "--rotate-left") { + myImg.style.rotate = "-90deg"; + } else if (event.command == "--rotate-right") { + myImg.style.rotate = "90deg"; + } +}); +``` + +## Specifications + +{{Specifications}} + +## Browser compatibility + +{{Compat}} + +## See also + +- {{domxref("HTMLButtonElement.command", "command")}} property +- {{domxref("HTMLButtonElement.commandForElement", "commandForElement")}} property +- {{domxref("CommandEvent", "CommandEvent")}} interface diff --git a/files/en-us/web/html/element/button/index.md b/files/en-us/web/html/element/button/index.md index 40b06c97a9fdafa..0422fc7f147736f 100644 --- a/files/en-us/web/html/element/button/index.md +++ b/files/en-us/web/html/element/button/index.md @@ -18,7 +18,28 @@ By default, HTML buttons are presented in a style resembling the platform the {{ This element's attributes include the [global attributes](/en-US/docs/Web/HTML/Global_attributes). - `autofocus` + - : This Boolean attribute specifies that the button should have input [focus](/en-US/docs/Web/API/HTMLElement/focus) when the page loads. **Only one element in a document can have this attribute.** + +- `command` + + - : Specifies the action to be performed on an element being controlled by a control `