mdn · Josh-Cena · Jul 22, 2025 · Jul 21, 2025 · Jul 22, 2025
@@ -22,6 +22,8 @@ accessibility.disablecache
 accessibilitysidebar
 acodec
 activetitlebarcolor
+addonsidebar
+addonsidebarmain
 addstream
 adduser
 adlm
@@ -528,6 +530,7 @@ ontextformatupdate
 ontextupdate
 onuncapturederror
 onwebkitmouseforcewillbegin
+onzoomlevelchange
 opendocument
 openidconnect
 openpgp4fpr
@@ -740,6 +743,7 @@ tnsa
 todoapp
 togglecamera
 togglemicrophone
+togglescreenshare
 toolbar-bgalignment
 toolbar-bgimage
 toolbaritem
@@ -870,3 +874,4 @@ xpcnativewrappers
 xpidl
 xpinstall
 xywh
+zoomlevelchange
@@ -74,6 +74,7 @@ Bynens
 Béziers
 caitmuenster
 Camino
+Cammy
 Camtasia
 Canva
 Carakan
@@ -92,6 +93,7 @@ Choyce
 chrisdavidmills
 Chromecast
 Chromeo
+Chun-Li
 Cinepak
 Cipherlist.eu
 Clippy
@@ -167,6 +169,7 @@ Eichenwald
 Eisenberg
 Elaina
 Elchi
+Elfie
 Elly
 Emscripten
 Endtest
@@ -241,6 +244,7 @@ Hoshi
 Hoth
 Hyperaudio
 Hönigswald
+Ibuki
 Icecast
 idb-keyval
 Igalia
@@ -252,6 +256,7 @@ Ionos
 Irena
 ITCSS
 ITEC
+Jada
 Jalkhov
 jamiedoe
 Janc
@@ -272,10 +277,12 @@ jpmedley
 JSCAMP
 jswebm
 Junxia
+Juri
 Júnior
 Kadlec
 Kahlo
 Kaku
+Kang
 Kaply
 Kaspersky
 Katari
@@ -471,7 +478,9 @@ Roushan
 rsvg
 Rumyra
 Ryuno
+Sagat
 Saionaro
+Sakura
 Salame
 Salva
 Sandrina
@@ -549,6 +558,7 @@ Tokopedia
 Tomayac
 Tonisha
 Transcribear
+Transfonter
 Transformiix
 Trekhleb
 Trint
@@ -613,6 +623,7 @@ Yuki
 Yura
 Zakas
 Zakirt
+Zangief
 zantroke
 zantrokeregular
 Zaptec

@@ -321,7 +321,7 @@ header {
 
 The accessibility issues are:
 
-1. The header image is decorative, so doesn't need alt text. The best solution if you are going to use decorative HTML images is to put `alt=""`, so a screenreader will just read out nothing — rather than a description, or the image file name. It is not part of the content.
+1. The header image is decorative, so doesn't need alt text. The best solution if you are going to use decorative HTML images is to put `alt=""`, so a screen reader will just read out nothing — rather than a description, or the image file name. It is not part of the content.
 2. The gallery images need alt text, and they are part of the content.
 
 The updated HTML could look something like this:

@@ -149,7 +149,7 @@ The problem we have now is that when the DOM changes to show a new description,
 To complete the task:
 
 1. Click **"Play"** in the code block below to edit the example in the MDN Playground.
-2. Update the HTML so that the description updates are announced by the screenreader.
+2. Update the HTML so that the description updates are announced by the screen reader.
 
 > [!CALLOUT]
 >
@@ -238,7 +238,7 @@ function handleSelection(e) {
 
 There are two ways to solve the problem outlined in this task:
 
-- Add an `aria-live=""` attribute to the animal-description `<div>` to turn it into a live region, so when its content changes, the updated content will be read out by a screenreader. The best value is probably `assertive`, which makes the screenreader read out the updated content as soon as it changed. `polite` means that the screenreader will wait until other descriptions have finished before it starts reading out the changed content.
-- Add a `role="alert"` attribute to the animal-description `<div>`, to make it have alert box semantics. This has the same effect on the screenreader as setting `aria-live="assertive"` on it.
+- Add an `aria-live=""` attribute to the animal-description `<div>` to turn it into a live region, so when its content changes, the updated content will be read out by a screen reader. The best value is probably `assertive`, which makes the screen reader read out the updated content as soon as it changed. `polite` means that the screen reader will wait until other descriptions have finished before it starts reading out the changed content.
+- Add a `role="alert"` attribute to the animal-description `<div>`, to make it have alert box semantics. This has the same effect on the screen reader as setting `aria-live="assertive"` on it.
 
 </details>
@@ -95,7 +95,7 @@ Firefox 141 is the current [Beta version of Firefox](https://www.firefox.com/en-
 
 #### Marionette
 
-- To avoid unnecessary 200ms delays for each call to `WebDriver:ElementClick` - even when no navigation occurrs - we lowered the click-and-wait timeout for a potential navigation to 50ms for backward compatibility. The [timeout is now also configurable](https://firefox-source-docs.mozilla.org/testing/marionette/Prefs.html#marionette-navigate-after-click-timeout) and [can be completely disabled](https://firefox-source-docs.mozilla.org/testing/marionette/Prefs.html#marionette-navigate-after-click-enabled) by users through a preference ([Firefox bug 1972271](https://bugzil.la/1972271)).
+- To avoid unnecessary 200ms delays for each call to `WebDriver:ElementClick` - even when no navigation occurs - we lowered the click-and-wait timeout for a potential navigation to 50ms for backward compatibility. The [timeout is now also configurable](https://firefox-source-docs.mozilla.org/testing/marionette/Prefs.html#marionette-navigate-after-click-timeout) and [can be completely disabled](https://firefox-source-docs.mozilla.org/testing/marionette/Prefs.html#marionette-navigate-after-click-enabled) by users through a preference ([Firefox bug 1972271](https://bugzil.la/1972271)).
 - Added support in Marionette for interacting with CHIPS cookies (Cookies Having Independent Partitioned State) ([Firefox bug 1972830](https://bugzil.la/1972830)).
 
 ## Changes for add-on developers

@@ -19,7 +19,7 @@ A string. Possible values are:
   - : The audio context has been closed (with the
     {{domxref("AudioContext.close()")}} method.)
 - `interrupted` {{experimental_inline}}
-  - : The audio context has been interrupted by an occurence outside the control of the web app.
+  - : The audio context has been interrupted by an occurrence outside the control of the web app.
 - `running`
   - : The audio context is running normally.
 - `suspended`

@@ -154,7 +154,7 @@ recordBtn.addEventListener("click", async () => {
         video.src = window.URL.createObjectURL(blob);
       });
       mediaRecorder.addEventListener("error", (e) => {
-        console.error("An error occured:", e);
+        console.error("An error occurred:", e);
       });
     }
     isRecording = true;

@@ -87,7 +87,7 @@ Finally, we include a {{htmlelement("video")}} element to display the captured d
 
 ## App CSS
 
-The app CSS is minimal; it is worth noting that we have given the `<video>` a {{cssxref("max-width")}} of `100%`, so that it is constrained inside the `<body>`. The `<video>` could grow dramatically when the captured display surface is embedded inside it (its size is the capture's intrisic size), which could cause overflow issues if we didn't constrain it.
+The app CSS is minimal; it is worth noting that we have given the `<video>` a {{cssxref("max-width")}} of `100%`, so that it is constrained inside the `<body>`. The `<video>` could grow dramatically when the captured display surface is embedded inside it (its size is the capture's intrinsic size), which could cause overflow issues if we didn't constrain it.
 
 ```css live-sample___surface-control-demo
 body {
@@ -142,13 +142,13 @@ startBtn.addEventListener("click", startCapture);
 stopBtn.addEventListener("click", stopCapture);
 ```
 
-The `startCapture()` function, which starts screen capture, looks like so. We first create a new `CaptureController`, and pass it into our [`MediaDisplayOptions`](/en-US/docs/Web/API/MediaDevices/getDisplayMedia#options) object, along with a [`displaysurface`](/en-US/docs/Web/API/MediaTrackConstraints/displaySurface) constraint that causes the app to recommend sharing browser tabs.
+The `startCapture()` function, which starts screen capture, looks like so. We first create a new `CaptureController`, and pass it into our [`MediaDisplayOptions`](/en-US/docs/Web/API/MediaDevices/getDisplayMedia#options) object, along with a [`displaySurface`](/en-US/docs/Web/API/MediaTrackConstraints/displaySurface) constraint that causes the app to recommend sharing browser tabs.
 
 Now it's time to capture our media; we do so using a {{domxref("MediaDevices.getDisplayMedia()")}} call, to which we pass our options, and set the resulting promise as the value of the `<video>` element's {{domxref("HTMLMediaElement.srcObject", "srcObject")}} property. When it resolves, we continue the function by calling {{domxref("CaptureController.resetZoomLevel()")}} and setting the `<output>` element's contents to `100%`. This is not strictly necessary, but it can be a bit confusing when you capture a tab to find it is already zoomed out or in. Setting the zoom level to `100%` on capture feels a bit more logical. These lines of code deal with the case where the app is refreshed without pressing "Stop Capture", then capture is started again.
 
 Our next step is to call {{domxref("CaptureController.getSupportedZoomLevels()")}} to retrieve the zoom levels the captured display surface supports, and store the resulting array in the `zoomLevels` variable.
 
-Next, we use the controller's {{domxref("CaptureController.zoomlevelchange_event", "zoomlevelchange")}} event to detect when the zoom level is changed, print the current {{domxref("CaptureController.zoomlevel", "zoomlevel")}} to the `<output>` element, and call the user-defined `updateZoomButtonState()` function. This function will query the `zoomLevels` array to check whether the user can zoom in or out any further after each zoom change. We'll explain `updateZoomButtonState()` later on.
+Next, we use the controller's {{domxref("CaptureController.zoomlevelchange_event", "zoomlevelchange")}} event to detect when the zoom level is changed, print the current {{domxref("CaptureController.zoomLevel", "zoomLevel")}} to the `<output>` element, and call the user-defined `updateZoomButtonState()` function. This function will query the `zoomLevels` array to check whether the user can zoom in or out any further after each zoom change. We'll explain `updateZoomButtonState()` later on.
 
 We next unhide our zoom controls with `display: block`, enable our stop button, and disable our start button, so that the state of the controls makes sense after capture has bene started.
 

@@ -342,7 +342,7 @@ worker.onmessage = (event) => {
       event.data.queryMethodArguments,
     );
   } else {
-    this.defaultListener.call(this, event.data);
+    this.defaultListener(event.data);
   }
 };
 ```
@@ -477,7 +477,7 @@ function QueryableWorker(url, defaultListener, onError) {
         event.data.queryMethodArguments,
       );
     } else {
-      this.defaultListener.call(this, event.data);
+      this.defaultListener(event.data);
     }
   };
 }

@@ -30,7 +30,7 @@ To enable styling text ranges on a webpage using the CSS Custom Highlight API, y
 </label>
 ```
 
-This example uses the {{cssxref("text-decoration")}} property to strike throgh the `steps` highlight range defined by our JavaScript:
+This example uses the {{cssxref("text-decoration")}} property to strike through the `steps` highlight range defined by our JavaScript:
 
 ```css
 ::highlight(steps) {

@@ -54,6 +54,8 @@ This method does not mutate the string value it's called on. It returns a new st
 
 Unlike [`replace()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/String/replace), this method replaces all occurrences of a string, not just the first one. While it is also possible to use `replace()` with a global regex dynamically constructed with [`RegExp()`](/en-US/docs/Web/JavaScript/Reference/Global_Objects/RegExp/RegExp) to replace all instances of a string, this can have unintended consequences if the string contains special characters that have meaning in regular expressions (which might happen if the replacement string comes from user input). While you can mitigate this case using {{jsxref("RegExp.escape()")}} to make the regular expression string into a literal pattern, it is simpler to pass the string to `replaceAll()` directly, without converting it to a regex.
 
+<!-- cSpell:ignore acke -->
+
 ```js
 function unsafeRedactName(text, name) {
   return text.replace(new RegExp(name, "g"), "[REDACTED]");