[pull] main from mdn:main

files/en-us/learn_web_development/core/frameworks_libraries/react_resources/index.md

@@ -90,7 +90,7 @@ Libraries such as [React Testing Library](https://testing-library.com/docs/react
 
 While routing is traditionally handled by a server and not an application on the user's computer, it is possible to configure a web application to read and update the browser's location, and render certain user interfaces. This is called _client-side routing_. It's possible to create many unique routes for your application (such as `/home`, `/dashboard`, or `/login`).
 
-[React Router](https://reactrouter.com/) is the most popular and most robust client-side routing library for React. It allows developers to define the routes of their application, and associate components with those routes . It also provides a number of useful hooks and components for managing the browser's location and history.
+[React Router](https://reactrouter.com/) is the most popular and most robust client-side routing library for React. It allows developers to define the routes of their application, and associate components with those routes. It also provides a number of useful hooks and components for managing the browser's location and history.
 
 > [!NOTE]
 > Client-side routing can make your application feel fast, but it poses a number of accessibility problems, especially for people who rely on assistive technology. You can read more about this in Marcy Sutton's article, ["The Implications of Client-Side Routing"](https://testingaccessibility.com/implications-of-client-side-routing).

files/en-us/learn_web_development/core/scripting/house_data_ui/index.md

@@ -186,7 +186,7 @@ Next, you need to complete the `renderHouses()` function body. This will filter
 3. Empty the "output" `<section>` element, so it doesn't have any child HTML elements. If you don't do this, each time a search is performed the results will be added to the end of the previous results rather than replacing them.
 4. Create a new function inside `renderHouses()` called `renderHouse()`. This function needs to take a house object as an argument, and do two things:
    1. Calculate the total area of the rooms contained inside the house's `room_sizes` object. This isn't as straightforward as looping through an array of numbers and summing them, but it isn't too tricky.
-   2. Add an `<article>` element inside the "output" `<section>` element containing the house's number, street name, bedroom and bathroom count, total room area, and price. you can vary the structure if you like, we we'd like it to be similar to this HTML snippet:
+   2. Add an `<article>` element inside the "output" `<section>` element containing the house's number, street name, bedroom and bathroom count, total room area, and price. you can vary the structure if you like, we'd like it to be similar to this HTML snippet:
    ```html
    <article>
      <h2>number street name</h2>

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

@@ -24,7 +24,7 @@ A web page can perform audio processing in various ways using APIs such as {{dom
 The API supports several audio session types, which specify the type of audio an application is producing:
 
 - `"auto"` — The default. The user agent automatically chooses the best type based on the audio APIs being used.
-- `"playback"` — For media playback such as music or video. This type should not mix with other audio playback .
+- `"playback"` — For media playback such as music or video. This type should not mix with other audio playback.
 - `"transient"` — For short sounds like notifications. This type usually plays on top of other audio.
 - `"transient-solo"` — For audio that should play exclusively, pausing all other audio (such as voice prompts).
 - `"ambient"` — For audio that can mix with other audio sources.

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

@@ -118,7 +118,7 @@ Next, we add a `click` event listener to the play button so that when it is clic
 
 - Create a new {{domxref("AudioContext")}} and disable the play button so it can't be pressed again.
 - Run some feature detection code that checks if the {{domxref("AudioContext.playbackStats")}} property exists. If it doesn't, we display a "Your browser doesn't support `AudioPlaybackStats`." message in a list item in the output list, and `return` out of the function.
-- Create a basic audio graph consisting of of an {{domxref("OscillatorNode")}} and a {{domxref("GainNode")}} and start the oscillator playing.
+- Create a basic audio graph consisting of an {{domxref("OscillatorNode")}} and a {{domxref("GainNode")}} and start the oscillator playing.
 - Enable the stats button and give it a `click` event listener so that when it is clicked, we write the different stats available in the audio context's `AudioPlaybackStats` object into a text string and display it in a list item in the output list.
 - Enable the reset button and give it a `click` event listener so that when it is clicked, we run the {{domxref("AudioPlaybackStats.resetLatency()")}} method.
 

files/en-us/web/api/fedcm_api/rp_sign-in/index.md

@@ -14,7 +14,7 @@ RPs can call {{domxref("CredentialsContainer.get", "navigator.credentials.get()"
 
 If the user has never signed into an IdP or is logged out, `CredentialsContainer.get()` rejects with an error and the RP can direct the user to an IdP page to sign in or create an account.
 
-Otherwise, if the user identity is successfully validated by the chosen IdP, `CredentialsContainer.get()` returns a promise that fulfills with an {{domxref("IdentityCredential")}} object .
+Otherwise, if the user identity is successfully validated by the chosen IdP, `CredentialsContainer.get()` returns a promise that fulfills with an {{domxref("IdentityCredential")}} object.
 
 ### The `IdentityCredential.token` object
 

files/en-us/web/api/popover_api/using/index.md

@@ -156,8 +156,6 @@ Putting these three together, you can programmatically set up a popover and its
 const popover = document.getElementById("mypopover");
 const toggleBtn = document.getElementById("toggleBtn");
 
-const keyboardHelpPara = document.getElementById("keyboard-help-para");
-
 const popoverSupported = supportsPopover();
 
 if (popoverSupported) {

files/en-us/web/api/svganimatedenumeration/animval/index.md

@@ -8,7 +8,7 @@ browser-compat: api.SVGAnimatedEnumeration.animVal
 
 {{APIRef("SVG")}}
 
-The **`animVal`** read-only property of the {{domxref("SVGAnimatedEnumeration")}} interface interface represents the value of an SVG enumeration.
+The **`animVal`** read-only property of the {{domxref("SVGAnimatedEnumeration")}} interface represents the value of an SVG enumeration.
 
 In SVG 2, `animVal` reflects the non-animated value of the attribute: it is the same as {{domxref("SVGAnimatedEnumeration/baseVal", "baseVal")}} .
 

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

@@ -124,7 +124,7 @@ function log(text) {
 
 The code below toggles the `side.baseVal` property on the `textPath`, causing the text to swap sides.
 
-First we define a function to log each of the properties of the the path element, and call it to log the initial state on load.
+First we define a function to log each of the properties of the path element, and call it to log the initial state on load.
 The `side.baseVale` property is logged first, and demonstrates how the enumerated constants may be read and interpreted (this is done in a `try...catch` block, because `side` is not supported in all browsers).
 The other properties of the text path are also logged, but as raw values of their associated `baseVal` property.
 

files/en-us/web/css/guides/scroll-driven_animations/timeline_insets/index.md

@@ -446,7 +446,7 @@ This image includes the insets from the animation timeline in the previous demon
 
 As before, the yellow represents the position of the element when the `from` keyframe is applied, the red represents the location when the `to` keyframe is applied, and the grey represents the scrollport. The striped areas are where the red and yellow element representations overlap. For illustrative purposes, we've added dashed black horizontal lines `20%` and `60%` way through the scrollport, starting from the bottom.
 
-The animation only begins when the element reaches the `20%` mark along the animation attachment range. This point is `60px`, `100px`, or `150px` from the bottom edge of the scroll port, depending on the the size of the element. The location of the subject element at this point, representing the position of the element when the `from` or `0%` keyframe is applied, is shown in yellow.
+The animation only begins when the element reaches the `20%` mark along the animation attachment range. This point is `60px`, `100px`, or `150px` from the bottom edge of the scroll port, depending on the size of the element. The location of the subject element at this point, representing the position of the element when the `from` or `0%` keyframe is applied, is shown in yellow.
 
 The red represents the location of the animated element relative to the scrollport when the `to` or `100%` keyframe is applied, which is the end of the animation. This point is either `180px`, `300px`, or `450px` from the bottom edge of the scrollport, depending on the subject size. The animation occurs when the element is between the `to` and the `from` positions.
 
@@ -478,7 +478,7 @@ body .animated_element {
 
 The animation lasts `40%` of the animation-attachment range. As you scroll, note how the larger the subject, the longer the range. With exit-crossing, the animation range is not cropped; it is the size of the subject even if the subject is larger than the viewport, with the range abutting the start edge of the scrollport, and extending off the end edge if the subject is larger than the scrollport.
 
-With the `-20%` and `20%` insets, the `50px` subject's will animation over `20px`: the animation starts when the subject's end is `-10px` from range start, or `60px` from exiting the screen, and ends when the subject's end is `40px` from exiting the screen. The middle subject will animate over `100px`: the animation starts when the subject end is `-50px` from range start, which is `50px` off of the scrollport's end edge, and ends when the subject's end is `50px` into the scrollport. The large subject animates over `200px`, starting when the bottom is `600px` from the the container's start edge, with only `150px` in view, and ends when the bottom is 400px from that start edge, when `100px` have scrolled off the start edge.
+With the `-20%` and `20%` insets, the `50px` subject's will animation over `20px`: the animation starts when the subject's end is `-10px` from range start, or `60px` from exiting the screen, and ends when the subject's end is `40px` from exiting the screen. The middle subject will animate over `100px`: the animation starts when the subject end is `-50px` from range start, which is `50px` off of the scrollport's end edge, and ends when the subject's end is `50px` into the scrollport. The large subject animates over `200px`, starting when the bottom is `600px` from the container's start edge, with only `150px` in view, and ends when the bottom is 400px from that start edge, when `100px` have scrolled off the start edge.
 
 ### Percentages equal to the scrollport
 

files/en-us/web/css/reference/properties/column-rule-visibility-items/index.md

@@ -80,7 +80,7 @@ column-rule-visibility-items: unset;
   - : The column rule should be painted in all gap segments, regardless of whether adjacent areas contain an item.
 
 - `around`
-  - : The column rule should be painted in a gap segment if at least one of the two adjacent areas is occupied by a item.
+  - : The column rule should be painted in a gap segment if at least one of the two adjacent areas is occupied by an item.
 
 - `between`
   - : The column rule should be painted in a gap segment if both adjacent areas are occupied by items.

files/en-us/web/css/reference/properties/gap/index.md

@@ -105,7 +105,7 @@ gap: unset;
 - {{CSSxRef("<length>")}}
   - : The size of the gap as a non-negative {{CSSxRef("<length>")}} value.
 - {{CSSxRef("<percentage>")}}
-  - : The size of the gap as a non-negative {{CSSxRef("<percentage>")}} value relative to the the [content box](/en-US/docs/Web/CSS/Guides/Box_model/Introduction#content_area) size of the container element in that dimension.
+  - : The size of the gap as a non-negative {{CSSxRef("<percentage>")}} value relative to the [content box](/en-US/docs/Web/CSS/Guides/Box_model/Introduction#content_area) size of the container element in that dimension.
 
 ## Description
 

files/en-us/web/css/reference/properties/rule-visibility-items/index.md

@@ -87,7 +87,7 @@ rule-visibility-items: unset;
   - : Rules should be painted in all gap segments, regardless of whether adjacent areas contain an item.
 
 - `around`
-  - : A rule should be painted in a gap segment if at least one of the two adjacent areas is occupied by a item.
+  - : A rule should be painted in a gap segment if at least one of the two adjacent areas is occupied by an item.
 
 - `between`
   - : A rule should be painted in a gap segment only if both adjacent areas are occupied by items.