From b60c5dad8cf10d8492f2aff491abb40bf1851b03 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Wed, 30 Sep 2026 06:02:29 -0700 Subject: [PATCH 1/2] Fix JS code problems (#45866) --- .../baseaudiocontext/decodeaudiodata/index.md | 17 +++++++++++++++++ .../en-us/web/api/paymentrequestevent/index.md | 2 +- files/en-us/web/api/rtcrtpsender/dtmf/index.md | 4 ++-- .../paymentrequest_event/index.md | 2 +- .../api/web-based_payment_handler_api/index.md | 2 +- .../column-rule-inset-cap-start/index.md | 2 +- .../properties/column-rule-inset-cap/index.md | 8 ++++---- .../column-rule-inset-junction-end/index.md | 8 ++++---- .../properties/row-rule-inset-cap-end/index.md | 8 ++++---- .../row-rule-inset-cap-start/index.md | 2 +- .../properties/row-rule-inset-cap/index.md | 8 ++++---- .../properties/rule-inset-cap/index.md | 4 ++-- 12 files changed, 42 insertions(+), 25 deletions(-) diff --git a/files/en-us/web/api/baseaudiocontext/decodeaudiodata/index.md b/files/en-us/web/api/baseaudiocontext/decodeaudiodata/index.md index 6a153ad70e86e4b..5f7afb8ac4fb177 100644 --- a/files/en-us/web/api/baseaudiocontext/decodeaudiodata/index.md +++ b/files/en-us/web/api/baseaudiocontext/decodeaudiodata/index.md @@ -78,6 +78,14 @@ async function loadAudio() { console.error(`Unable to fetch the audio file. Error: ${err.message}`); } } + +play.addEventListener("click", async () => { + if (!audioCtx) { + audioCtx = new AudioContext(); + await loadAudio(); + } + // … +}); ``` ### Callback syntax @@ -110,6 +118,15 @@ async function loadAudio() { console.error(`Unable to fetch the audio file. Error: ${err.message}`); } } + +play.addEventListener("click", async () => { + if (!audioCtx) { + audioCtx = new AudioContext(); + await loadAudio(); + } else { + playBuffer(); + } +}); ``` ## Specifications diff --git a/files/en-us/web/api/paymentrequestevent/index.md b/files/en-us/web/api/paymentrequestevent/index.md index 35c37f7f9bd891f..55ea8428f368667 100644 --- a/files/en-us/web/api/paymentrequestevent/index.md +++ b/files/en-us/web/api/paymentrequestevent/index.md @@ -48,7 +48,7 @@ When the {{domxref("PaymentRequest.show()")}} method is invoked, a {{domxref("Se ```js let paymentRequestEvent; -let resolver; +const resolver = Promise.withResolvers(); let client; // `self` is the global object in service worker diff --git a/files/en-us/web/api/rtcrtpsender/dtmf/index.md b/files/en-us/web/api/rtcrtpsender/dtmf/index.md index c56528c05b10bba..db99905b250a0d6 100644 --- a/files/en-us/web/api/rtcrtpsender/dtmf/index.md +++ b/files/en-us/web/api/rtcrtpsender/dtmf/index.md @@ -40,7 +40,7 @@ async function dial(tones) { const dtmfSender = sender.dtmf; dtmfSender.addEventListener("tonechange", (event) => { - if (event.tone == "") { + if (event.tone === "") { console.log("Finished sending tones."); } else { console.log(`Sent tone: ${event.tone}`); @@ -48,7 +48,7 @@ async function dial(tones) { }); pc.addEventListener("connectionstatechange", () => { - if (pc.connectionState == "connected" && dtmfSender.canInsertDTMF) { + if (pc.connectionState === "connected" && dtmfSender.canInsertDTMF) { dtmfSender.insertDTMF(tones); } }); diff --git a/files/en-us/web/api/serviceworkerglobalscope/paymentrequest_event/index.md b/files/en-us/web/api/serviceworkerglobalscope/paymentrequest_event/index.md index 350432fa8332485..3195ed8365dfb4d 100644 --- a/files/en-us/web/api/serviceworkerglobalscope/paymentrequest_event/index.md +++ b/files/en-us/web/api/serviceworkerglobalscope/paymentrequest_event/index.md @@ -34,7 +34,7 @@ When the {{domxref("PaymentRequest.show()")}} method is invoked, a `paymentreque ```js let paymentRequestEvent; -let resolver; +const resolver = Promise.withResolvers(); let client; // `self` is the global object in service worker diff --git a/files/en-us/web/api/web-based_payment_handler_api/index.md b/files/en-us/web/api/web-based_payment_handler_api/index.md index e377999597d9004..398be3880532c67 100644 --- a/files/en-us/web/api/web-based_payment_handler_api/index.md +++ b/files/en-us/web/api/web-based_payment_handler_api/index.md @@ -174,7 +174,7 @@ After the {{domxref("PaymentRequest.show()")}} method is invoked, a {{domxref("S ```js let paymentRequestEvent; -let resolver; +const resolver = Promise.withResolvers(); let client; // `self` is the global object in service worker diff --git a/files/en-us/web/css/reference/properties/column-rule-inset-cap-start/index.md b/files/en-us/web/css/reference/properties/column-rule-inset-cap-start/index.md index af6cdbdbf4740f0..8b572801ab14244 100644 --- a/files/en-us/web/css/reference/properties/column-rule-inset-cap-start/index.md +++ b/files/en-us/web/css/reference/properties/column-rule-inset-cap-start/index.md @@ -294,7 +294,7 @@ inset.addEventListener("input", () => { ```js hidden live-sample___caps live-sample___percents visibility.addEventListener("change", () => { ul.style.ruleVisibilityItems = `${visibility.value}`; - if (visibility.value == "between") { + if (visibility.value === "between") { ul.style.columnRuleStyle = "solid, repeat(2, double)"; } else { ul.style.columnRuleStyle = "solid"; diff --git a/files/en-us/web/css/reference/properties/column-rule-inset-cap/index.md b/files/en-us/web/css/reference/properties/column-rule-inset-cap/index.md index 36a800a66e8cc36..0df95bf4497acc4 100644 --- a/files/en-us/web/css/reference/properties/column-rule-inset-cap/index.md +++ b/files/en-us/web/css/reference/properties/column-rule-inset-cap/index.md @@ -291,9 +291,9 @@ inset.addEventListener("input", () => { ```js hidden live-sample___caps visibility.addEventListener("change", () => { ul.style.ruleVisibilityItems = `${visibility.value}`; - if (visibility.value == "between") { + if (visibility.value === "between") { ul.style.columnRuleStyle = "repeat(2, solid), double"; - } else if (visibility.value == "around") { + } else if (visibility.value === "around") { ul.style.columnRuleStyle = "repeat(3, solid), repeat(2, double)"; } else { ul.style.columnRuleStyle = "solid"; @@ -304,9 +304,9 @@ visibility.addEventListener("change", () => { ```js hidden live-sample___percents visibility.addEventListener("change", () => { ul.style.ruleVisibilityItems = `${visibility.value}`; - if (visibility.value == "between") { + if (visibility.value === "between") { ul.style.columnRuleStyle = "repeat(2, inset), double, repeat(2, solid)"; - } else if (visibility.value == "around") { + } else if (visibility.value === "around") { ul.style.columnRuleStyle = "repeat(3, inset), repeat(2, double)"; } else { ul.style.columnRuleStyle = "solid"; diff --git a/files/en-us/web/css/reference/properties/column-rule-inset-junction-end/index.md b/files/en-us/web/css/reference/properties/column-rule-inset-junction-end/index.md index d23a75c7b9d4c66..bd7ffc6fdd00688 100644 --- a/files/en-us/web/css/reference/properties/column-rule-inset-junction-end/index.md +++ b/files/en-us/web/css/reference/properties/column-rule-inset-junction-end/index.md @@ -253,9 +253,9 @@ inset.addEventListener("input", () => { ```js hidden live-sample___junctions visibility.addEventListener("change", () => { ul.style.ruleVisibilityItems = `${visibility.value}`; - if (visibility.value == "between") { + if (visibility.value === "between") { ul.style.columnRuleStyle = "repeat(3, solid), repeat(2, double)"; - } else if (visibility.value == "around") { + } else if (visibility.value === "around") { ul.style.columnRuleStyle = "repeat(3, solid), repeat(2, double)"; } else { ul.style.columnRuleStyle = "solid"; @@ -266,9 +266,9 @@ visibility.addEventListener("change", () => { ```js hidden live-sample___percents visibility.addEventListener("change", () => { ul.style.ruleVisibilityItems = `${visibility.value}`; - if (visibility.value == "between") { + if (visibility.value === "between") { ul.style.columnRuleStyle = "repeat(2, inset), double, repeat(2, solid)"; - } else if (visibility.value == "around") { + } else if (visibility.value === "around") { ul.style.columnRuleStyle = "repeat(3, inset), repeat(2, double)"; } else { ul.style.columnRuleStyle = "solid"; diff --git a/files/en-us/web/css/reference/properties/row-rule-inset-cap-end/index.md b/files/en-us/web/css/reference/properties/row-rule-inset-cap-end/index.md index 4d8136bce56efd0..d1cdd73d91f9a12 100644 --- a/files/en-us/web/css/reference/properties/row-rule-inset-cap-end/index.md +++ b/files/en-us/web/css/reference/properties/row-rule-inset-cap-end/index.md @@ -306,9 +306,9 @@ inset.addEventListener("input", () => { ```js hidden live-sample___caps visibility.addEventListener("change", () => { ul.style.ruleVisibilityItems = `${visibility.value}`; - if (visibility.value == "between") { + if (visibility.value === "between") { ul.style.rowRuleStyle = "repeat(2, solid), double"; - } else if (visibility.value == "around") { + } else if (visibility.value === "around") { ul.style.rowRuleStyle = "repeat(3, solid), repeat(2, double)"; } else { ul.style.rowRuleStyle = "solid"; @@ -319,9 +319,9 @@ visibility.addEventListener("change", () => { ```js hidden live-sample___percents visibility.addEventListener("change", () => { ul.style.ruleVisibilityItems = `${visibility.value}`; - if (visibility.value == "between") { + if (visibility.value === "between") { ul.style.rowRuleStyle = "repeat(2, inset), double, repeat(2, solid)"; - } else if (visibility.value == "around") { + } else if (visibility.value === "around") { ul.style.rowRuleStyle = "repeat(3, inset), repeat(2, double)"; } else { ul.style.rowRuleStyle = "solid"; diff --git a/files/en-us/web/css/reference/properties/row-rule-inset-cap-start/index.md b/files/en-us/web/css/reference/properties/row-rule-inset-cap-start/index.md index dd8d00644b1c916..eb3f9b51a61fb71 100644 --- a/files/en-us/web/css/reference/properties/row-rule-inset-cap-start/index.md +++ b/files/en-us/web/css/reference/properties/row-rule-inset-cap-start/index.md @@ -301,7 +301,7 @@ inset.addEventListener("input", () => { ```js hidden live-sample___caps live-sample___percents visibility.addEventListener("change", () => { ul.style.ruleVisibilityItems = `${visibility.value}`; - if (visibility.value == "between") { + if (visibility.value === "between") { ul.style.rowRuleStyle = "repeat(2, solid), double"; } else { ul.style.rowRuleStyle = "solid"; diff --git a/files/en-us/web/css/reference/properties/row-rule-inset-cap/index.md b/files/en-us/web/css/reference/properties/row-rule-inset-cap/index.md index 1833fb3e149bcc1..8b0300f27fdc843 100644 --- a/files/en-us/web/css/reference/properties/row-rule-inset-cap/index.md +++ b/files/en-us/web/css/reference/properties/row-rule-inset-cap/index.md @@ -310,9 +310,9 @@ inset.addEventListener("input", () => { ```js hidden live-sample___caps visibility.addEventListener("change", () => { ul.style.ruleVisibilityItems = `${visibility.value}`; - if (visibility.value == "between") { + if (visibility.value === "between") { ul.style.rowRuleStyle = "repeat(2, solid), double"; - } else if (visibility.value == "around") { + } else if (visibility.value === "around") { ul.style.rowRuleStyle = "repeat(3, solid), repeat(2, double)"; } else { ul.style.rowRuleStyle = "solid"; @@ -323,9 +323,9 @@ visibility.addEventListener("change", () => { ```js hidden live-sample___percents visibility.addEventListener("change", () => { ul.style.ruleVisibilityItems = `${visibility.value}`; - if (visibility.value == "between") { + if (visibility.value === "between") { ul.style.rowRuleStyle = "repeat(2, inset), double, repeat(2, solid)"; - } else if (visibility.value == "around") { + } else if (visibility.value === "around") { ul.style.rowRuleStyle = "repeat(3, inset), repeat(2, double)"; } else { ul.style.rowRuleStyle = "solid"; diff --git a/files/en-us/web/css/reference/properties/rule-inset-cap/index.md b/files/en-us/web/css/reference/properties/rule-inset-cap/index.md index 55667963a62a5b9..b84a12867ddfd62 100644 --- a/files/en-us/web/css/reference/properties/rule-inset-cap/index.md +++ b/files/en-us/web/css/reference/properties/rule-inset-cap/index.md @@ -410,10 +410,10 @@ const colSize = document.getElementById("col"); const ow = document.getElementById("ow"); const cell = document.querySelector("li:nth-of-type(6)"); let text = ""; -const update = function () { +function update() { ul.style.ruleInsetCap = text = `${rowSize.value}px ${colSize.value}px`; cell.innerHTML = `rule-inset-cap: ${text};`; -}; +} update(); From 96758f3d8ce1e5fbd9d58053bdef103eec1de108 Mon Sep 17 00:00:00 2001 From: Joshua Chen Date: Wed, 30 Sep 2026 06:49:13 -0700 Subject: [PATCH 2/2] Treegrids are not assumed to be editable (#45598) * Treegrids are not assumed to be editable * Update files/en-us/web/accessibility/aria/reference/roles/gridcell_role/index.md * Update index.md --- .../aria/reference/attributes/aria-readonly/index.md | 2 +- .../accessibility/aria/reference/roles/grid_role/index.md | 6 +++--- .../aria/reference/roles/gridcell_role/index.md | 2 +- .../aria/reference/roles/treegrid_role/index.md | 8 ++------ 4 files changed, 7 insertions(+), 11 deletions(-) diff --git a/files/en-us/web/accessibility/aria/reference/attributes/aria-readonly/index.md b/files/en-us/web/accessibility/aria/reference/attributes/aria-readonly/index.md index b0d6d83e420bdab..c468a182e02f71c 100644 --- a/files/en-us/web/accessibility/aria/reference/attributes/aria-readonly/index.md +++ b/files/en-us/web/accessibility/aria/reference/attributes/aria-readonly/index.md @@ -21,7 +21,7 @@ Examples include: - Row and column headers in a spreadsheet. - The total value in a shopping cart. -If the non-changeable value shouldn't be able to receive focus, use [`aria-disabled`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-disabled) instead. +If the element is unavailable for interaction, use [`aria-disabled`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-disabled) instead. > [!NOTE] > When using semantic HTML form controls, if you set the `readonly` attribute, you don't need to include `aria-readonly="true"`. diff --git a/files/en-us/web/accessibility/aria/reference/roles/grid_role/index.md b/files/en-us/web/accessibility/aria/reference/roles/grid_role/index.md index d47829c018d2b38..ad31a6b3621347c 100644 --- a/files/en-us/web/accessibility/aria/reference/roles/grid_role/index.md +++ b/files/en-us/web/accessibility/aria/reference/roles/grid_role/index.md @@ -52,7 +52,7 @@ A grid widget contains one or more rows with one or more cells of thematically r Cell elements have the role [`gridcell`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/gridcell_role), unless they are a row or column header, in which case, the elements are [`rowheader`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/rowheader_role) and [`columnheader`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/columnheader_role), respectively. Cell elements need to be owned by elements with a [`row`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/row_role) role. Rows can be grouped using the [`rowgroup`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/rowgroup_role) role. -If the grid is used as an interactive widget, [keyboard interactions](#keyboard_interactions) need to be implemented. +The grid is an interactive widget, so [keyboard interactions](#keyboard_interactions) need to be implemented. An accessible name is strongly recommended for the `grid` role, although not required by ARIA. Use [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby) to reference a visible label, or [`aria-label`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) if no visible label is present. @@ -61,7 +61,7 @@ An accessible name is strongly recommended for the `grid` role, although not req #### Roles - [treegrid](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/treegrid_role) (subclass) - - : If a grid has columns that can be expanded or collapsed, a treegrid can be used. + - : If a grid has rows that can be expanded or collapsed to show or hide child rows, a treegrid can be used. - [row](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/row_role) - : A row inside the grid. - [rowgroup](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/rowgroup_role) @@ -74,7 +74,7 @@ An accessible name is strongly recommended for the `grid` role, although not req - [aria-multiselectable](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-multiselectable) - : If `aria-multiselectable` is set to `true`, multiple items in the grid can be selected. The default value is `false`. - [aria-readonly](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-readonly) - - : If the user can navigate the grid but not change the value or values of the grid, the [`aria-readonly`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-readonly) should be set to `true`. The default value is `false`. + - : If the grid provides cell content editing but editing is unavailable for all cells, the [`aria-readonly`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-readonly) can be set to `true`. The default value is `false`, but omitting the attribute does not imply that the grid contains editable content. Omit the attribute if the grid does not provide cell content editing. The value set on the grid propagates to its gridcells and can be overridden on individual gridcells. > [!NOTE] > For many use cases, an HTML {{HTMLElement('table')}} element is sufficient as it and the various table elements already include many ARIA roles. diff --git a/files/en-us/web/accessibility/aria/reference/roles/gridcell_role/index.md b/files/en-us/web/accessibility/aria/reference/roles/gridcell_role/index.md index c4fcc02fc4a49d7..1d0585388a97639 100644 --- a/files/en-us/web/accessibility/aria/reference/roles/gridcell_role/index.md +++ b/files/en-us/web/accessibility/aria/reference/roles/gridcell_role/index.md @@ -88,7 +88,7 @@ Both `` elements and elements with a role of `gridcell` applied to them can #### Expandable cells -In a [treegrid](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/treegrid_role), gridcells may be made expandable by toggling the [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded) attribute. Note that if this attribute is provided, it applies only to the individual gridcell. +In a [treegrid](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/treegrid_role), gridcells may indicate expansion and collapse by toggling the [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded) attribute. Note that if this attribute is provided, it applies only to the individual gridcell, not the container row. The main use case is pivot tables, where you present grouped data in a hierarchical fashion. ### Associated WAI-ARIA roles, states, and properties diff --git a/files/en-us/web/accessibility/aria/reference/roles/treegrid_role/index.md b/files/en-us/web/accessibility/aria/reference/roles/treegrid_role/index.md index 639ebb953a20ba7..896dbe34429373c 100644 --- a/files/en-us/web/accessibility/aria/reference/roles/treegrid_role/index.md +++ b/files/en-us/web/accessibility/aria/reference/roles/treegrid_role/index.md @@ -58,12 +58,6 @@ If the treegrid provides sort functions, the [`aria-sort`](/en-US/docs/Web/Acces If the `treegrid` has an attached [`menu`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/menu_role) that opens when right clicked, include [`aria-haspopup="true"`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-haspopup) on the `treegrid` element. This informs assistive technologies that the `treegrid` has an associated popup. The ability for both keyboard and pointer device users to open and set focus in the menu must be added with JavaScript. -### Read-only treegrids - -By default, treegrids are assumed to be editable. If a tree grid is not editable, use the [`aria-readonly`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-readonly) attribute to inform assistive technologies the `treegrid` is readonly. The attribute value, when set on the element with the `treegrid` role, propagates down to all `columnheader`, `rowheader`, and `gridcell` elements. That global value can be overridden for individual `gridcell` elements by including `aria-readonly` on individual tree grid element descendants. - -Like all ARIA attributes, adding `aria-readonly` only informs assistive technologies that the content is or is not editable, but it does nothing to enable or disable interactivity. That must be done with HTML's global [`contenteditable`](/en-US/docs/Web/HTML/Reference/Global_attributes/contenteditable) attribute or with JavaScript. - ### Associated WAI-ARIA roles, states, and properties - [`row`](/en-US/docs/Web/Accessibility/ARIA/Reference/Roles/row_role) role @@ -78,6 +72,8 @@ Like all ARIA attributes, adding `aria-readonly` only informs assistive technolo - : A cell containing header information for a `row` within a tabular structure. - [`aria-expanded`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-expanded) - : For expandable items, the value is `true` or `false`. Also indicates that the item is expandable, so should not be present if the item cannot be expanded. +- [`aria-readonly`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-readonly) + - : Indicates whether cell contents can be edited in a treegrid that provides editing functions. Omit this attribute if the treegrid does not provide cell content editing. Note that expanding and collapsing rows does not constitute cell content editing. The value set on the treegrid propagates to its gridcells and can be overridden on individual gridcells. The attribute only informs assistive technologies; it does not enable or disable editing. - [`aria-owns`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-owns) - : Identifies a contextual relationship between a parent and its child elements when the DOM hierarchy cannot be used to represent the relationship - [`aria-labelledby`](/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby)