Merge remote-tracking branch 'upstream/main' into fix-dd-js

* upstream/main:
  Fix some typos: (mdn#4620)
  Fix information for fullscreenchange event (mdn#4603)
  FF89 large ArrayBuffers (mdn#4470)
  fix: HTML Validation issues (mdn#4612)
  Make warnings consistent in the JS docs (mdn#4609)
  fixed typo (mdn#4617)
  chore(deps): bump @mdn/yari from 0.4.412 to 0.4.413 (mdn#4616)
  chore(deps): bump technote-space/get-diff-action from v4.0.6 to v4.1.1 (mdn#4615)

.github/workflows/pr-test.yml

@@ -55,7 +55,7 @@ jobs:
           # Now, this gets used by the `git diff ...` inside get-diff-action.
           git config --global core.quotePath false
 
-      - uses: technote-space/get-diff-action@v4.0.6
+      - uses: technote-space/get-diff-action@v4.1.1
         id: git_diff_content
         with:
           PATTERNS: files/**/*.html
@@ -142,7 +142,7 @@ jobs:
           name: build
           path: build/
 
-      - uses: technote-space/get-diff-action@v4.0.6
+      - uses: technote-space/get-diff-action@v4.1.1
         with:
           PATTERNS: files/**/*.+(png|jpeg|jpg|gif|svg|webp)
           ABSOLUTE: true
@@ -156,7 +156,7 @@ jobs:
           export CONTENT_ROOT=$(pwd)/files
           yarn filecheck ${{ env.GIT_DIFF_FILES }}
 
-      - uses: technote-space/get-diff-action@v4.0.6
+      - uses: technote-space/get-diff-action@v4.1.1
         id: git_diff_redirects
         with:
           PATTERNS: files/**/_redirects.txt

files/en-us/glossary/iife/index.html

@@ -26,16 +26,16 @@
 <h2 id="use_cases">Use cases</h2>
 
 <h3 id="avoid_polluting_the_global_namespace">Avoid polluting the global namespace</h3>
-<p>Because our application could include many functions and global variables from different source files, it's 
+<p>Because our application could include many functions and global variables from different source files, it's
 important to limit the number of global variables. If we have some initiation code that we don't need to use
-again, we could use the IIFE pattern. As we will not reuse the code again, using IIFE in this case is better than 
+again, we could use the IIFE pattern. As we will not reuse the code again, using IIFE in this case is better than
 using a function declaration or a function expression.</p>
 
 <pre class="brush: js">
 (function () {
-  // some initiation code 
+  // some initiation code
   let firstVariable;
-  let secondVariable; 
+  let secondVariable;
 })();
 
 // firstVariable and secondVariable will be discarded after the function is executed.</pre>
@@ -49,7 +49,7 @@ <h3 id="the_module_pattern">The module pattern</h3>
 const makeWithdraw = balance => (function(copyBalance) {
   let balance = copyBalance; // This variable is private
   let doBadThings = function() {
-    console.log("I will do bad things with your money");      
+    console.log("I will do bad things with your money");
   };
   doBadThings();
   return {
@@ -60,28 +60,28 @@ <h3 id="the_module_pattern">The module pattern</h3>
       } else {
         return "Insufficient money";
       }
-    }, 
+    },
   }
 })(balance);
 
 const firstAccount = makeWithdraw(100); // "I will do bad things with your money"
 console.log(firstAccount.balance); // undefined
 console.log(firstAccount.withdraw(20)); // 80
 console.log(firstAccount.withdraw(30)); // 50
-console.log(firstAccount.doBadThings); // undefined, this method is private  
+console.log(firstAccount.doBadThings); // undefined, this method is private
 const secondAccount = makeWithdraw(20);
 secondAccount.withdraw(30); // "Insufficient money"
 secondAccount.withdraw(20);  // 0</pre>
 
 <h3 id="for_loop_with_var_before_es6">For loop with var before ES6</h3>
 
-<p>We could see the following use of IIFE in some old code, before the introduction of the statements <strong>let</strong> and <strong>const</strong> 
-in <strong>ES6</strong> and the block scope. With the statement <strong>var</strong>, we have only function scopes and the global scope. 
+<p>We could see the following use of IIFE in some old code, before the introduction of the statements <strong>let</strong> and <strong>const</strong>
+in <strong>ES6</strong> and the block scope. With the statement <strong>var</strong>, we have only function scopes and the global scope.
 Suppose we want to create 2 buttons with the texts Button 0 and Button 1 and we click
 them, we would like them to alert 0 and 1. The following code doesn't work:</p>
 
 <pre class="brush: js">
-for (var i = 0; i < 2; i++) {
+for (var i = 0; i &lt; 2; i++) {
   const button = document.createElement("button");
   button.innerText = "Button " + i;
   button.onclick = function () {
@@ -91,11 +91,11 @@ <h3 id="for_loop_with_var_before_es6">For loop with var before ES6</h3>
 }
 console.log(i); // 2</pre>
 
-<p>When clicked, both Button 0 and Button 1 alert 2 because <code>i</code> is global, 
+<p>When clicked, both Button 0 and Button 1 alert 2 because <code>i</code> is global,
 with the last value 2. To fix this problem before ES6, we could use the IIFE pattern:</p>
 
 <pre class="brush: js">
-for (var i = 0; i < 2; i++) {
+for (var i = 0; i &lt; 2; i++) {
   const button = document.createElement("button");
   button.innerText = "Button " + i;
   button.onclick = (function (copyOfI) {
@@ -105,12 +105,12 @@ <h3 id="for_loop_with_var_before_es6">For loop with var before ES6</h3>
 }
 console.log(i); // 2</pre>
 
-<p>When clicked, Buttons 0 and 1 alert 0 and 1. 
-The variable <code>i</code> is globally defined. 
+<p>When clicked, Buttons 0 and 1 alert 0 and 1.
+The variable <code>i</code> is globally defined.
 Using the statement <strong>let</strong>, we could simply do:</p>
 
 <pre class="brush: js">
-for (let i = 0; i < 2; i++) {
+for (let i = 0; i &lt; 2; i++) {
   const button = document.createElement("button");
   button.innerText = "Button " + i;
   button.onclick = function () {

files/en-us/learn/javascript/client-side_web_apis/video_and_audio_apis/index.html

@@ -71,7 +71,7 @@ <h4 id="Exploring_the_HTML">Exploring the HTML</h4>
 
 <p>Open the HTML index file. You'll see a number of features; the HTML is dominated by the video player and its controls:</p>
 
-<pre>&lt;div class="player"&gt;
+<pre class="brush: html">&lt;div class="player"&gt;
   &lt;video controls&gt;
     &lt;source src="video/sintel-short.mp4" type="video/mp4"&gt;
     &lt;source src="video/sintel-short.webm" type="video/webm"&gt;

files/en-us/learn/tools_and_testing/cross_browser_testing/accessibility/index.html

@@ -190,7 +190,7 @@ <h4 id="Element_relationships_and_context">Element relationships and context</h4
 
 <p>There are certain features and best practices in HTML designed to provide context and relationships between elements where none otherwise exists. The three most common examples are links, form labels, and data tables.</p>
 
-<p>The key to accessible link text is that people using screen readers will often use a common feature whereby they pull up a list of all the links on the page. In this case, the link text needs to make sense out of context. For example, a list of links labeled "click here", "click here", etc. is really bad for accessibility. It is better for link text to make sense in context and out of context.</p>
+<p>The key to accessible link text is that people using screen readers will often use a common feature whereby they pull up a list of all the links on the page. In this case, the link text needs to make sense out of context. For example, a list of links labeled "click here", "click me", etc. is really bad for accessibility. It is better for link text to make sense in context and out of context.</p>
 
 <p>Next on our list, the form {{htmlelement("label")}} element is one of the central features that allows us to make forms accessible. The trouble with forms is that you need labels to say what data should be entered into each form input. Each label needs to be included inside a {{htmlelement("label")}} to link it unambiguously to its partner form input (each <code>&lt;label&gt;</code> <code>for</code> attribute value needs to match the form element <code>id</code> value), and it will make sense even if the source order is not completely logical (which to be fair it should be).</p>
 
@@ -331,7 +331,7 @@ <h3 id="Automation_tools">Automation tools</h3>
 
 <p><img alt="" src="axe-screenshot.png" style="display: block; margin: 0px auto;"></p>
 
-<p>aXe is also installable using <code>npm</code>, and can be integrated with task runners like <a href="https://gruntjs.com/">Grunt</a> and <a href="https://gulpjs.com/">Gulp</a>, automation frameworks like <a href="https://www.seleniumhq.org/">Selenium</a> and <a href="https://cucumber.io/">Cucumber</a>, unit testing frameworks like <a href="https://jasmine.github.io/">Jasmin</a>, and more besides (again, see the <a href="https://www.deque.com/products/axe/">main aXe page</a> for details).</p>
+<p>aXe is also installable using <code>npm</code>, and can be integrated with task runners like <a href="https://gruntjs.com/">Grunt</a> and <a href="https://gulpjs.com/">Gulp</a>, automation frameworks like <a href="https://www.seleniumhq.org/">Selenium</a> and <a href="https://cucumber.io/">Cucumber</a>, unit testing frameworks like <a href="https://jasmine.github.io/">Jasmine</a>, and more besides (again, see the <a href="https://www.deque.com/products/axe/">main aXe page</a> for details).</p>
 
 <h3 id="Screenreaders">Screenreaders</h3>
 

files/en-us/mozilla/firefox/releases/89/index.html

@@ -32,6 +32,10 @@ <h4 id="removals_css">Removals</h4>
 
 <h3 id="JavaScript">JavaScript</h3>
 
+<ul>
+  <li><a href="/en-US/docs/Web/JavaScript/Reference/Global_Objects/ArrayBuffer">ArrayBuffer</a>s can now be created with a length greater than 2GB-1 (up to 8GB) on 64-bit systems ({{bug(1703505)}}).</li>
+</ul>
+
 <h4 id="removals_js">Removals</h4>
 
 <h3 id="HTTP">HTTP</h3>

files/en-us/web/api/fullscreen_api/index.html

@@ -72,9 +72,9 @@ <h4 id="Event_handlers_on_documents">Event handlers on documents</h4>
 
 <dl>
  <dt>{{DOMxRef("Document.onfullscreenchange")}}</dt>
- <dd>An event handler for the {{Event("fullscreenchange")}} event that's sent to a {{DOMxRef("Document")}} when that document is placed into full-screen mode, or when that document exits full-screen mode. This handler is called only when the entire document is presented in full-screen mode.</dd>
+ <dd>An event handler for the {{Event("fullscreenchange")}} event that's bubbled up to the {{DOMxRef("Document")}} when any {{DOMxRef("Element")}} in that document is placed into full-screen mode, or exits full-screen mode.</dd>
  <dt>{{DOMxRef("Document.onfullscreenerror")}}</dt>
- <dd>An event handler for the {{Event("fullscreenerror")}} event that gets sent to a {{DOMxRef("Document")}} when an error occurs while trying to enable or disable full-screen mode for the entire document.</dd>
+ <dd>An event handler for the {{Event("fullscreenerror")}} event that gets bubbled up to the {{DOMxRef("Document")}} when an error occurs while trying to enable or disable full-screen mode for any {{DOMxRef("Element")}} in that document.</dd>
 </dl>
 
 <h4 id="Event_handlers_on_elements">Event handlers on elements</h4>
@@ -101,9 +101,9 @@ <h2 id="Events">Events</h2>
 
 <dl>
  <dt>{{Event("fullscreenchange")}}</dt>
- <dd>Sent to a {{DOMxRef("Document")}} or {{DOMxRef("Element")}} when it transitions into or out of full-screen mode.</dd>
+ <dd>Sent to an {{DOMxRef("Element")}} when it transitions into or out of full-screen mode.</dd>
  <dt>{{Event("fullscreenerror")}}</dt>
- <dd>Sent to a <code>Document</code> or <code>Element</code> if an error occurs while attempting to switch it into or out of full-screen mode.</dd>
+ <dd>Sent to an <code>Element</code> if an error occurs while attempting to switch it into or out of full-screen mode.</dd>
 </dl>
 
 <h2 id="Dictionaries">Dictionaries</h2>

files/en-us/web/javascript/guide/grammar_and_types/index.html

@@ -495,7 +495,7 @@ <h3 id="Object_literals">Object literals</h3>
 <p>An object literal is a list of zero or more pairs of property names and associated values of an object, enclosed in curly braces (<code>{}</code>).</p>
 
 <div class="notecard warning">
-<p><strong>Note:</strong> Do not use an object literal at the beginning of a statement! This will lead to an error (or not behave as you expect), because the <code>{</code> will be interpreted as the beginning of a block.</p>
+<p><strong>Warning:</strong> Do not use an object literal at the beginning of a statement! This will lead to an error (or not behave as you expect), because the <code>{</code> will be interpreted as the beginning of a block.</p>
 </div>
 
 <p>The following is an example of an object literal. The first element of the <code>car</code> object defines a property, <code>myCar</code>, and assigns to it a new string, "<code>Saturn</code>"; the second element, the <code>getCar</code> property, is immediately assigned the result of invoking the function <code>(carTypes("Honda"))</code>; the third element, the <code>special</code> property, uses an existing variable (<code>sales</code>).</p>

files/en-us/web/javascript/inheritance_and_the_prototype_chain/index.html

@@ -378,7 +378,7 @@ <h3 id="Summary_of_methods_for_extending_the_prototype_chain">Summary of methods
 
 <h4 class="name">#1: New initialization</h4>
 <div class="notecard warning">
-<p>One misfeature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p>
+<p><strong>Warning:</strong> One misfeature that is often used is to extend <code>Object.prototype</code> or one of the other built-in prototypes.</p>
 
 <p>This technique is called monkey patching and breaks <em>encapsulation</em>. While used by popular frameworks such as Prototype.js, there is still no good reason for cluttering built-in types with additional <em>non-standard</em> functionality.</p>
 

files/en-us/web/javascript/reference/classes/index.html

@@ -217,7 +217,7 @@ <h3 id="Instance_properties">Instance properties</h3>
 <h3 id="Field_declarations">Field declarations</h3>
 
 <div class="warning">
-<p>Public and private field declarations are an <a href="https://github.com/tc39/proposal-class-fields">experimental feature (stage 3)</a> proposed at <a href="https://tc39.es">TC39</a>, the JavaScript standards committee. Support in browsers is limited, but the feature can be used through a build step with systems like <a href="https://babeljs.io/">Babel</a>.</p>
+<p><strong>Warning:</strong> Public and private field declarations are an <a href="https://github.com/tc39/proposal-class-fields">experimental feature (stage 3)</a> proposed at <a href="https://tc39.es">TC39</a>, the JavaScript standards committee. Support in browsers is limited, but the feature can be used through a build step with systems like <a href="https://babeljs.io/">Babel</a>.</p>
 </div>
 
 <h4 id="Public_field_declarations">Public field declarations</h4>

files/en-us/web/javascript/reference/deprecated_and_obsolete_features/the_legacy_iterator_protocol/index.html

@@ -10,7 +10,7 @@
 ---
 <div>{{jsSidebar("More")}}</div>
 
-<div class="warning"><strong>Non-standard.</strong> The legacy iterator protocol was a SpiderMonkey-specific feature, which is removed in Firefox 58+. For future-facing usages, consider using <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for..of</a> loops and the <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterator protocol</a>.</div>
+<div class="warning"><p><strong>Warning:</strong> The legacy iterator protocol was a SpiderMonkey-specific feature, which is removed in Firefox 58+. For future-facing usages, consider using <a href="/en-US/docs/Web/JavaScript/Reference/Statements/for...of">for..of</a> loops and the <a href="/en-US/docs/Web/JavaScript/Reference/Iteration_protocols">iterator protocol</a>.</p></div>
 
 <h2 id="The_deprecated_Firefox-only_iterator_protocol">The deprecated Firefox-only iterator protocol</h2>
 

files/en-us/web/javascript/reference/errors/invalid_array_length/index.html

@@ -9,20 +9,22 @@
 ---
 <div>{{jsSidebar("Errors")}}</div>
 
-<p>The JavaScript exception "Invalid array length" occurs when creating
-  an {{jsxref("Array")}} or an {{jsxref("ArrayBuffer")}} which has a length which is
-  either negative or larger or equal to 2<sup>32</sup>, or when setting the
-  {{jsxref("Array.length")}} property to a value which is either negative or larger or
-  equal to 2<sup>32</sup>.</p>
+<p>The JavaScript exception "Invalid array length" occurs when specifying an array length that is either negative or exceeds the maximum supported by the platform (i.e when creating an {{jsxref("Array")}} or {{jsxref("ArrayBuffer")}}, or when setting the {{jsxref("Array.length")}} property).</p>
+
+<p>The maximum allowed array length depends on the platform, browser and browser version. For {{jsxref("Array")}} the maximum length is 2GB-1 (2^32-1). For {{jsxref("ArrayBuffer")}} the maximum is 2GB-1 on 32-bit systems (2^32-1). From Firefox version 89 the maximum value of {{jsxref("ArrayBuffer")}} is 8GB on 64-bit systems (2^33).</p>
+
+<div class="notecard note">
+  <p><strong>Note:</strong> <code>Array</code> and <code>ArrayBuffer</code> are independent data structures (the implementation of one does not affect the other)..</p>
+</div>
 
 <h2 id="Message">Message</h2>
 
-<pre class="brush: js">RangeError: Array length must be a finite positive integer (Edge)
-RangeError: invalid array length (Firefox)
-RangeError: Invalid array length (Chrome)
-RangeError: Invalid array buffer length (Chrome)
+<pre class="brush: js">RangeError: invalid array length (Firefox)
+RangeError: Invalid array length (Chromium-based)
+RangeError: Array buffer allocation failed (Chromium-based)
 </pre>
 
+
 <h2 id="Error_type">Error type</h2>
 
 <p>{{jsxref("RangeError")}}</p>
@@ -32,17 +34,12 @@ <h2 id="What_went_wrong">What went wrong?</h2>
 <p>An invalid array length might appear in these situations:</p>
 
 <ul>
-  <li>When creating an {{jsxref("Array")}} or an {{jsxref("ArrayBuffer")}} which has a
-    length which is either negative or larger or equal to 2<sup>32</sup>, or</li>
-  <li>when setting the {{jsxref("Array.length")}} property to a value which is either
-    negative or larger or equal to 2<sup>32</sup>.</li>
+  <li>Creating an {{jsxref("Array")}} or {{jsxref("ArrayBuffer")}} with a negative length, or setting a negative value for the {{jsxref("Array.length")}} property.</li>
+  <li>Creating an {{jsxref("Array")}} or setting the {{jsxref("Array.length")}} property greater than 2GB-1 (2^32-1).</li>
+  <li>Creating an {{jsxref("ArrayBuffer")}} that is bigger than 2GB-1 (2^32-1) on a 32-bit system or 8GB (2^33) on a 64-bit system.</li>
+  <li>Before Firefox 89: Creating an {{jsxref("ArrayBuffer")}} that is bigger than 2GB-1 (2^32-1).</li>
 </ul>
 
-<p>Why are <code>Array</code> and <code>ArrayBuffer</code> length limited? The
-  <code>length</code> property of an <code>Array</code> or an <code>ArrayBuffer</code> is
-  represented with an unsigned 32-bit integer, that can only store values which are in the
-  range from 0 to 2<sup>32</sup>-1.</p>
-
 <p>If you are creating an <code>Array</code>, using the constructor, you probably want to
   use the literal notation instead, as the first argument is interpreted as the length of
   the <code>Array</code>.</p>
@@ -56,7 +53,7 @@ <h3 id="Invalid_cases">Invalid cases</h3>
 
 <pre class="brush: js example-bad">new Array(Math.pow(2, 40))
 new Array(-1)
-new ArrayBuffer(Math.pow(2, 32))
+new ArrayBuffer(Math.pow(2, 32)) //32-bit system
 new ArrayBuffer(-1)
 
 let a = [];
@@ -71,6 +68,7 @@ <h3 id="Valid_cases">Valid cases</h3>
 <pre class="brush: js example-good">[ Math.pow(2, 40) ]                     // [ 1099511627776 ]
 [ -1 ]                                  // [ -1 ]
 new ArrayBuffer(Math.pow(2, 32) - 1)
+new ArrayBuffer(Math.pow(2, 33))  // 64-bit systems after Firefox 89
 new ArrayBuffer(0)
 
 let a = [];

files/en-us/web/javascript/reference/functions/arguments/callee/index.html

@@ -17,7 +17,7 @@ <h2 id="Description">Description</h2>
 
 <p><code>callee</code> is a property of the <code>arguments</code> object. It can be used to refer to the currently executing function inside the function body of that function. This is useful when the name of the function is unknown, such as within a function expression with no name (also called "anonymous functions").</p>
 
-<div class="warning"><strong>Warning:</strong> The 5th edition of ECMAScript (ES5) forbids use of <code>arguments.callee()</code> in <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>. Avoid using <code>arguments.callee()</code> by either giving function expressions a name or use a function declaration where a function must call itself.</div>
+<div class="warning"><p><strong>Warning:</strong> The 5th edition of ECMAScript (ES5) forbids use of <code>arguments.callee()</code> in <a href="/en-US/docs/JavaScript/Reference/Functions_and_function_scope/Strict_mode">strict mode</a>. Avoid using <code>arguments.callee()</code> by either giving function expressions a name or use a function declaration where a function must call itself.</p></div>
 
 <h3 id="Why_was_arguments.callee_removed_from_ES5_strict_mode">Why was <code>arguments.callee</code> removed from ES5 strict mode?</h3>