[pull] main from mdn:main

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

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.

files/en-us/web/accessibility/aria/reference/roles/gridcell_role/index.md

@@ -88,7 +88,7 @@ Both `<td>` 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
 

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)

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

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

files/en-us/web/api/rtcrtpsender/dtmf/index.md

@@ -40,15 +40,15 @@ 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}`);
     }
   });
 
   pc.addEventListener("connectionstatechange", () => {
-    if (pc.connectionState == "connected" && dtmfSender.canInsertDTMF) {
+    if (pc.connectionState === "connected" && dtmfSender.canInsertDTMF) {
       dtmfSender.insertDTMF(tones);
     }
   });

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

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

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";

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";

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";

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";

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";

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";

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 = `<code>rule-inset-cap: ${text};</code>`;
-};
+}
 
 update();