[pull] main from mdn:main

.github/workflows/pr-test.yml

@@ -136,10 +136,10 @@ jobs:
 
           npx @mdn/rari build --no-basic --json-issues --data-issues "${ARGS[@]}"
 
-          # Workaround, as fred-ssr doesn't copy assets.
+          # Workaround, as `fred ssr` doesn't copy assets.
           cp -vR node_modules/@mdn/fred/out/. "$BUILD_OUT_ROOT"
 
-          npx --package=@mdn/fred fred-ssr
+          npx @mdn/fred ssr
 
           echo "Disk usage size of the build"
           du -sh $BUILD_OUT_ROOT

files/en-us/learn_web_development/core/css_layout/grids/index.md

@@ -43,7 +43,7 @@ A grid is a collection of horizontal and vertical lines creating a pattern again
 
 A grid will typically have **columns**, **rows**, and then gaps between each row and column. The gaps are commonly referred to as **gutters**.
 
-![CSS grid with parts labelled as rows, columns and gutters. Rows are the horizontal segments of the grid and Columns are the vertical segments of the grid. The space between two rows is called as 'row gutter' and the space between 2 columns is called as 'column gutter'.](grid.png)
+![CSS grid with parts labeled as rows, columns and gutters. Rows are the horizontal segments of the grid and Columns are the vertical segments of the grid. The space between two rows is called as 'row gutter' and the space between 2 columns is called as 'column gutter'.](grid.png)
 
 ## Creating your grid in CSS
 

files/en-us/learn_web_development/core/structuring_content/debugging_html/index.md

@@ -95,7 +95,7 @@ You can open the devtools in a similar way in each browser — see [How to open
 For this article, the only relevant devtools function is the **DOM inspector**, which shows the currently-rendered HTML DOM and allows you to edit it. Let's look at this now:
 
 1. Open the devtools in your browser.
-2. Open the DOM inspector. It is in the same place in each browser — the first tab in the devtools at the start of the row. In Firefox it is labelled _Inspector_, while in Safari, Edge, and Chrome it is labeled _Elements_. This should be the tab selected by default when you first open the devtools, but select it if it isn't.
+2. Open the DOM inspector. It is in the same place in each browser — the first tab in the devtools at the start of the row. In Firefox it is labeled _Inspector_, while in Safari, Edge, and Chrome it is labeled _Elements_. This should be the tab selected by default when you first open the devtools, but select it if it isn't.
 3. Examine the DOM tree structure shown in the tab, and note how you can click the little expansion arrows at the start of each DOM node to expand and collapse them and reveal their descendant nodes. You can also use the up and down cursor keys to move up and down the nodes, and the right and left cursor keys to expand and collapse the nodes.
 4. Also try hovering over the nodes (or selecting them with the cursor keys) and note how the currently-hovered (or selected) element is highlighted in the viewport.
 5. You can also edit the rendered DOM. We won't use the editing functionality in this article, but take some time to look up how to do this if you are curious.

files/en-us/learn_web_development/extensions/client-side_apis/client-side_storage/index.md

@@ -143,7 +143,7 @@ Let's apply this new-found knowledge by writing a working example to give you an
 
 You can find the example HTML at [personal-greeting.html](https://github.com/mdn/learning-area/blob/main/javascript/apis/client-side-storage/web-storage/personal-greeting.html) — this contains a website with a header, content, and footer, and a form for entering your name.
 
-![A Screenshot of a website that has a header, content and footer sections. The header has a welcome text to the left-hand side and a button labelled 'forget' to the right-hand side. The content has a heading followed by a two paragraphs of dummy text. The footer reads 'Copyright nobody. Use the code as you like'.](web-storage-demo.png)
+![A Screenshot of a website that has a header, content and footer sections. The header has a welcome text to the left-hand side and a button labeled 'forget' to the right-hand side. The content has a heading followed by a two paragraphs of dummy text. The footer reads 'Copyright nobody. Use the code as you like'.](web-storage-demo.png)
 
 Let's build up the example, so you can understand how it works.
 

files/en-us/learn_web_development/extensions/server-side/express_nodejs/forms/delete_author_form/index.md

@@ -149,7 +149,7 @@ p
 
 The control should now appear as a link, as shown below on the _Author detail_ page.
 
-![The Author details section of the Local library application. The left column has a vertical navigation bar. The right section contains the author details with a heading that has the Author's name followed by the life dates of the author and lists the books written by the author below it. There is a button labelled 'Delete Author' at the bottom.](locallibary_express_author_detail_delete.png)
+![The Author details section of the Local library application. The left column has a vertical navigation bar. The right section contains the author details with a heading that has the Author's name followed by the life dates of the author and lists the books written by the author below it. There is a button labeled 'Delete Author' at the bottom.](locallibary_express_author_detail_delete.png)
 
 ## What does it look like?
 

files/en-us/learn_web_development/extensions/server-side/express_nodejs/forms/update_book_form/index.md

@@ -159,7 +159,7 @@ Run the application, open your browser to `http://localhost:3000/`, select the _
 
 The form should look just like the _Create book_ page, only with a title of 'Update book', and pre-populated with record values.
 
-![The update book section of the Local library application. The left column has a vertical navigation bar. The right column has a form to update the book with a heading that reads 'Update book'. There are five input fields labelled Title, Author, Summary, ISBN, Genre. Genre is a checkbox option field. There is a button labelled 'Submit' at the end.](locallibary_express_book_update_noerrors.png)
+![The update book section of the Local library application. The left column has a vertical navigation bar. The right column has a form to update the book with a heading that reads 'Update book'. There are five input fields labeled Title, Author, Summary, ISBN, Genre. Genre is a checkbox option field. There is a button labeled 'Submit' at the end.](locallibary_express_book_update_noerrors.png)
 
 > [!NOTE]
 > The other pages for updating objects can be implemented in much the same way. We've left that as a challenge.

files/en-us/learn_web_development/getting_started/web_standards/how_the_web_works/index.md

@@ -42,7 +42,7 @@ This theory is not essential to writing web code in the short term, but before l
 
 Computers connected to the internet are called **clients** and **servers**. A simplified diagram of how they interact might look like this:
 
-![Two circles representing client and server. An arrow labelled request is going from client to server, and an arrow labelled responses is going from server to client](simple-client-server.png)
+![Two circles representing client and server. An arrow labeled request is going from client to server, and an arrow labeled responses is going from server to client](simple-client-server.png)
 
 - Clients are the typical web user's internet-connected devices (for example, your computer connected to your Wi-Fi, or your phone connected to your mobile network) and web-accessing software available on those devices (usually a web browser like Firefox or Chrome).
 - Servers are computers that store webpages, sites, or apps. When a client wants to access a webpage, a copy of the webpage code is downloaded from the server to the client machine, where it is rendered by the browser and displayed to the user.

files/en-us/learn_web_development/getting_started/your_first_website/styling_the_content/index.md

@@ -200,7 +200,7 @@ Let's return to our example and use CSS to improve the appearance of the text. W
 
 Something you'll notice about CSS as you use it more is that a lot of it is about boxes. Most HTML elements on a page can be thought of as boxes that sit on top of (or alongside) other boxes. You can set values on these boxes for size, color, positioning, etc. This is referred to as [**the box model**](/en-US/docs/Learn_web_development/Core/Styling_basics/Box_model).
 
-![Three boxes sat inside one another. From outside to in they are labelled margin, border and padding](box-model.png)
+![Three boxes sat inside one another. From outside to in they are labeled margin, border and padding](box-model.png)
 
 Each box that takes up space on your page has properties like:
 

files/en-us/mozilla/firefox/experimental_features/index.md

@@ -79,6 +79,21 @@ The HTML [`<input type="color">`](/en-US/docs/Web/HTML/Reference/Elements/input/
 
 ## CSS
 
+### `circle()` and `ellipse()` allow `farthest-corner` and `closest-corner` keywords
+
+The `farthest-corner` and `closest-corner` keywords can now be used for specifying the radii values of the [`ellipse()`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/ellipse) and [`circle()`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/circle) CSS basic shapes.
+(See [Firefox bug 2037673](https://bugzil.la/2037673) for more details.)
+
+| Release channel   | Version added | Enabled by default? |
+| ----------------- | ------------- | ------------------- |
+| Nightly           | 153           | Yes                 |
+| Developer Edition | 153           | No                  |
+| Beta              | 153           | No                  |
+| Release           | 153           | No                  |
+
+- `layout.css.ellipse-corners.enabled`
+  - : Set to `true` to enable.
+
 ### Hex boxes to display stray control characters
 
 This feature renders control characters (Unicode category Cc) other than _tab_ (`U+0009`), _line feed_ (`U+000A`), _form feed_ (`U+000C`), and _carriage return_ (`U+000D`) as a hex box when they are not expected. (See [Firefox bug 1099557](https://bugzil.la/1099557) for more details.)

files/en-us/mozilla/firefox/releases/153/index.md

@@ -16,7 +16,11 @@ Firefox 153 is the current [Beta version of Firefox](https://www.firefox.com/en-
 
 ## Changes for web developers
 
-<!-- ### Developer Tools -->
+### Developer Tools
+
+- The developer tools now provide the heading level for a heading element in the accessibility highlighter and accessibility tree (previously just the fact that it was a heading was shown).
+  The information can be found in the [Accessibility Inspector panel](https://firefox-source-docs.mozilla.org/devtools-user/accessibility_inspector/index.html).
+  ([Firefox bug 1588784](https://bugzil.la/1588784) and [Firefox bug 2044904](https://bugzil.la/2044904)).
 
 ### HTML
 
@@ -154,3 +158,8 @@ You can find more such features on the [Experimental features](/en-US/docs/Mozil
 
   The {{cssxref("sibling-count")}} and {{cssxref("sibling-index")}} function are now supported. The `sibling-count()` function returns the number sibling elements as well as the element itself. The `sibling-index()` function returns the index number of the element in relation to its siblings, this starts from `1` and not `0`.
   ([Firefox bug 2042063](https://bugzil.la/2042063)).
+
+- **CSS basic shapes allow `farthest-corner` and `closest-corner` keywords** (Nightly): `layout.css.ellipse-corners.enabled`
+
+  The `farthest-corner` and `closest-corner` keywords can now be used for specifying the radii values of the [`ellipse()`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/ellipse) and [`circle()`](/en-US/docs/Web/CSS/Reference/Values/basic-shape/circle) CSS basic shapes.
+  ([Firefox bug 2037673](https://bugzil.la/2037673)).

files/en-us/web/api/canvasrenderingcontext2d/lang/index.md

@@ -77,7 +77,7 @@ The HTML features a {{htmlelement("select")}} element that allows you to choose
 
 #### JavaScript
 
-In the JavaScript, we first grab references to the `<canvas>` element, its `CanvasRenderingContext2D`, and the `<select>` element, then load the language-dependant font using the [CSS Font Loading API](/en-US/docs/Web/API/CSS_Font_Loading_API). Once the font is loaded, we run an `init()` function. This function defines another function — `drawText()`, which draws some text to the canvas context that uses the loaded font, adds a [`change`](/en-US/docs/Web/API/HTMLElement/change_event) [event listener](/en-US/docs/Web/API/EventTarget/addEventListener) to the `<select>` element, then calls `drawText()` so that the text is immediately drawn to the canvas when the page first loads.
+In the JavaScript, we first grab references to the `<canvas>` element, its `CanvasRenderingContext2D`, and the `<select>` element, then load the language-dependent font using the [CSS Font Loading API](/en-US/docs/Web/API/CSS_Font_Loading_API). Once the font is loaded, we run an `init()` function. This function defines another function — `drawText()`, which draws some text to the canvas context that uses the loaded font, adds a [`change`](/en-US/docs/Web/API/HTMLElement/change_event) [event listener](/en-US/docs/Web/API/EventTarget/addEventListener) to the `<select>` element, then calls `drawText()` so that the text is immediately drawn to the canvas when the page first loads.
 
 ```js live-example___canvas-l10n
 const canvasElem = document.querySelector("canvas");

files/en-us/web/api/languagedetector/create_static/index.md

@@ -30,7 +30,7 @@ LanguageDetector.create(options)
     - `monitor` {{optional_inline}}
       - : A callback function with a {{domxref("CreateMonitor")}} argument that enables monitoring download progress of the AI model.
     - `signal` {{optional_inline}}
-      - : An {{domxref("AbortSignal")}} object instance, which allows a `create()` operation to be aborted via the associated {{domxref("AbortController")}}. The exact effect is dependant on when {{domxref("AbortController.abort()")}} is called:
+      - : An {{domxref("AbortSignal")}} object instance, which allows a `create()` operation to be aborted via the associated {{domxref("AbortController")}}. The exact effect is dependent on when {{domxref("AbortController.abort()")}} is called:
         - If `abort()` is called before the `create()` promise resolves, the `create()` operation is cancelled.
         - If `abort()` is called after the `create()` promise fulfills, it has the same effect as calling {{domxref("LanguageDetector.destroy()")}}: The resources assigned to the resulting `LanguageDetector` instance are released, and any ongoing and subsequent `LanguageDetector` method calls will reject with an `AbortError`.
 

files/en-us/web/api/languagedetector/inputquota/index.md

@@ -16,7 +16,7 @@ The **`inputQuota`** read-only property of the {{domxref("LanguageDetector")}} i
 
 A number specifying the available input quota.
 
-This number is implementation-dependant. For example, it might be {{jsxref("Infinity")}} if there are no limits beyond the user's memory and the maximum length of JavaScript strings, or it might be a number of tokens in the case of AI models that use a token/credits scheme.
+This number is implementation-dependent. For example, it might be {{jsxref("Infinity")}} if there are no limits beyond the user's memory and the maximum length of JavaScript strings, or it might be a number of tokens in the case of AI models that use a token/credits scheme.
 
 The only guarantee is that `inputQuota` - {{domxref("LanguageDetector.measureInputUsage", "measureInputUsage()")}} will be non-negative if there is sufficient quota to detect the text's language.
 

files/en-us/web/api/languagedetector/measureinputusage/index.md

@@ -32,7 +32,7 @@ measureInputUsage(input, options)
 
 A {{jsxref("Promise")}} that fulfills with a number specifying the {{domxref("LanguageDetector.inputQuota", "inputQuota")}} usage of the given input text.
 
-This number is implementation-dependant; if it is less than the {{domxref("LanguageDetector.inputQuota", "inputQuota")}}, the string's language can be detected.
+This number is implementation-dependent; if it is less than the {{domxref("LanguageDetector.inputQuota", "inputQuota")}}, the string's language can be detected.
 
 ### Exceptions
 

files/en-us/web/api/summarizer/create_static/index.md

@@ -41,7 +41,7 @@ Summarizer.create(options)
     - `sharedContext`
       - : A {{domxref("Summarizer.sharedContext", "sharedContext")}} string describing the context the pieces of text to summarize are being used in, which helps the `Summarizer` generate more suitable summaries.
     - `signal`
-      - : An {{domxref("AbortSignal")}} object instance, which allows a `create()` operation to be aborted via the associated {{domxref("AbortController")}}. The exact effect is dependant on when {{domxref("AbortController.abort()")}} is called:
+      - : An {{domxref("AbortSignal")}} object instance, which allows a `create()` operation to be aborted via the associated {{domxref("AbortController")}}. The exact effect is dependent on when {{domxref("AbortController.abort()")}} is called:
         - If `abort()` is called before the `create()` promise resolves, the `create()` operation is cancelled.
         - If `abort()` is called after the `create()` promise fulfills, it has the same effect as calling {{domxref("Summarizer.destroy()")}}: The resources assigned to the resulting `Summarizer` instance are released, and any ongoing and subsequent `Summarizer` method calls will reject with an `AbortError`.
     - `type`

files/en-us/web/api/translator/create_static/index.md

@@ -32,7 +32,7 @@ Translator.create(options)
     - `monitor` {{optional_inline}}
       - : A callback function with a {{domxref("CreateMonitor")}} argument that enables monitoring download progress of the AI model.
     - `signal` {{optional_inline}}
-      - : An {{domxref("AbortSignal")}} object instance, which allows a `create()` operation to be aborted via the associated {{domxref("AbortController")}}. The exact effect is dependant on when {{domxref("AbortController.abort()")}} is called:
+      - : An {{domxref("AbortSignal")}} object instance, which allows a `create()` operation to be aborted via the associated {{domxref("AbortController")}}. The exact effect is dependent on when {{domxref("AbortController.abort()")}} is called:
         - If `abort()` is called before the `create()` promise resolves, the `create()` operation is cancelled.
         - If `abort()` is called after the `create()` promise fulfills, it has the same effect as calling {{domxref("Translator.destroy()")}}: The resources assigned to the resulting `Translator` instance are released, and any ongoing and subsequent `Translator` method calls will reject with an `AbortError`.
 

files/en-us/web/api/translator/inputquota/index.md

@@ -16,7 +16,7 @@ The **`inputQuota`** read-only property of the {{domxref("Translator")}} interfa
 
 A number specifying the available input quota.
 
-This number is implementation-dependant. For example, it might be {{jsxref("Infinity")}} if there are no limits beyond the user's memory and the maximum length of JavaScript strings, or it might be a number of tokens in the case of AI models that use a token/credits scheme.
+This number is implementation-dependent. For example, it might be {{jsxref("Infinity")}} if there are no limits beyond the user's memory and the maximum length of JavaScript strings, or it might be a number of tokens in the case of AI models that use a token/credits scheme.
 
 The only guarantee is that `inputQuota` - {{domxref("Translator.measureInputUsage", "measureInputUsage()")}} will be non-negative if there is sufficient quota to translate the text.
 

files/en-us/web/api/translator/measureinputusage/index.md

@@ -32,7 +32,7 @@ measureInputUsage(input, options)
 
 A {{jsxref("Promise")}} that fulfills with a number specifying the {{domxref("Translator.inputQuota", "inputQuota")}} usage of the given input text.
 
-This number is implementation-dependant; if it is less than the {{domxref("Translator.inputQuota", "inputQuota")}}, the string can be translated.
+This number is implementation-dependent; if it is less than the {{domxref("Translator.inputQuota", "inputQuota")}}, the string can be translated.
 
 ### Exceptions
 

files/en-us/web/javascript/reference/global_objects/intl/numberformat/format/index.md

@@ -83,7 +83,7 @@ console.log(numberFormat.format(654321.987));
 
 Use the `format` getter function for formatting all numbers in an array.
 Note that the function is bound to the {{jsxref("Intl.NumberFormat")}} from which it was obtained, so it can be passed directly to {{jsxref("Array.prototype.map")}}.
-This is considered a historical artefact, as part of a convention which is no longer followed for new features, but is preserved to maintain compatibility with existing programs.
+This is considered a historical artifact, as part of a convention which is no longer followed for new features, but is preserved to maintain compatibility with existing programs.
 
 ```js
 const a = [123456.789, 987654.321, 456789.123];