Fix typos and pseudo-typos 3 (mdn#36244)

* Fix typos and pseudo-typos 3

* Apply suggestions from code review

Co-authored-by: Dipika Bhattacharya <[email protected]>

* Fix more

---------

Co-authored-by: Dipika Bhattacharya <[email protected]>

files/en-us/web/accessibility/accessibility_colon__what_users_can_to_to_browse_safely/index.md

@@ -33,11 +33,11 @@ CSS Transition events are supported. Examples include:
 
 ### Safari 10.1 and above (Desktop)
 
-Do not enable Auto-Play (does not work for gifs)
+Do not enable Auto-Play (does not work for GIFs)
 
 #### iOS Safari 10.3 and above (Mobile and Tablet)
 
-Select the "Reduce motion option" in OS Accessibility settings for Apple (image source: developers.google.com from Thomas Steiner's article "Move Ya! Or maybe, don't, if the user prefers-reduced-motion!"). This will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings.![Screen shot showing how to reduce motion on a MAC OS](macos-reduce-motion.png)
+Select the "Reduce motion option" in OS Accessibility settings for Apple (image source: developers.google.com from Thomas Steiner's article "Move Ya! Or maybe, don't, if the user prefers-reduced-motion!"). This will not work on animated GIFs; the source of the animation is self-contained within a gif and is not affected by these settings.![Screen shot showing how to reduce motion on a MAC OS](macos-reduce-motion.png)
 
 #### Use Reader Mode on browsers
 
@@ -55,7 +55,7 @@ Browsers offer much power to their users; it's just a matter of knowing where to
 #### Use browser extensions
 
 - [Gif Blocker](https://chromewebstore.google.com/detail/gif-blocker/ahkidgegbmbnggcnmejhobepkaphkfhl?hl=en) For Chrome, GIF Blocker is an extension available at the web store.
-- [Gif Scrubber](https://chromewebstore.google.com/detail/gif-scrubber/gbdacbnhlfdlllckelpdkgeklfjfgcmp?hl=en) Gif Scrubber is a chrome extension that allows you to control gifs like a video player. There is a GitHub repository for it at **<https://github.com/0ui/gif-scrubber>**
+- [Gif Scrubber](https://chromewebstore.google.com/detail/gif-scrubber/gbdacbnhlfdlllckelpdkgeklfjfgcmp?hl=en) Gif Scrubber is a chrome extension that allows you to control GIFs like a video player. There is a GitHub repository for it at **<https://github.com/0ui/gif-scrubber>**
 - [Beeline Reader](https://www.beelinereader.com/) Beeline Reader has a browser extension that allows you to set up for grayscale and Dyslexi font, among other things
 
 ![Screenshot showing modes of Beeline Reader a user can adjust in browser](beelinereader.png)
@@ -66,7 +66,7 @@ Most operating systems such as Windows 10, have accessibility options that are s
 
 #### Turn off animations in the operating system
 
-In the Windows 10 operating system, the user has an ability to turn off animations. This will not work on animated gifs; the source of the animation is self-contained within a gif and is not affected by these settings.
+In the Windows 10 operating system, the user has an ability to turn off animations. This will not work on animated GIFs; the source of the animation is self-contained within a gif and is not affected by these settings.
 
 ![Screen shot showing how to turn off animations in Windows10](turnoffanimationsinwindows.png)
 

files/en-us/web/accessibility/aria/attributes/aria-keyshortcuts/index.md

@@ -93,7 +93,7 @@ The `aria-keyshortcuts` attribute is very similar to the [problematic](https://w
 
 In this example, we ensured the presence of the shortcut was known to sighted users a well by highlighting the non-modifier character.
 
-While the goal of the `accesskey` attribute matches the intention of `aria-keyshortcuts` and to do so natively, `accesskey` is rife with issues. Because of these issues, it is generally advised not to use accesskeys for most general-purpose websites and web apps.
+While the goal of the `accesskey` attribute matches the intention of `aria-keyshortcuts` and to do so natively, `accesskey` is rife with issues. Because of these issues, it is generally advised not to use access keys for most general-purpose websites and web apps.
 
 In addition to poor browser support, the same concerns arise for `accesskey` as exist for `aria-keyshortcuts`:
 

files/en-us/web/accessibility/aria/attributes/aria-labelledby/index.md

@@ -24,7 +24,7 @@ The purpose of `aria-labelledby` is the same as that of `aria-label`. It provide
 The `aria-labelledby` and [`aria-describedby`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-describedby) attributes both reference other elements to calculate text alternatives. `aria-labelledby` should reference brief text that provides the element with an accessible name. `aria-describedby` is used to reference longer content that provides a description. If there is no element in the DOM that provides a brief label appropriate for an accessible name for an interactive element, use `aria-label` to define the accessible name for an interactive element.
 
 > [!NOTE]
-> While in U.S. English the attribute would be assumed to be spelled "labeledby", the "labelledby" spelling has been established and is the spelling used in accessibility APIs.
+> While in American English, "labeled" is spelled with one "l", the "labelledby" spelling has been established and is the spelling used in accessibility APIs.
 
 The following example uses `aria-labelledby` to provide an accessible name for a checkbox input by using the text content of a sibling element:
 

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

@@ -24,7 +24,7 @@ Being a type of dialog, the [`dialog`](/en-US/docs/Web/Accessibility/ARIA/Roles/
 
 Because of its urgent nature, interrupting the user's workflow, alert dialogs must always be [modal](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-modal).
 
-The alert dialog must have at least one focusable control — such as Confirm, Close, and Cancel — and focus must be moved to that control when the alert dialog appears. Alertdialogs can have additional interactive controls such as text fields and checkboxes.
+The alert dialog must have at least one focusable control — such as Confirm, Close, and Cancel — and focus must be moved to that control when the alert dialog appears. Alert dialogs can have additional interactive controls such as text fields and checkboxes.
 
 The `alertdialog` role is not to be used as a replacement for other dialogs, including no-confirmation-required `alert` dialogs ([`Window.alert()`](/en-US/docs/Web/API/Window/alert)) and prompts ([`Window.prompt()`](/en-US/docs/Web/API/Window/prompt)).
 

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

@@ -17,7 +17,7 @@ An element with `role="columnheader"` nested as a descendant for an element with
 
 ### Associated WAI-ARIA roles, states, and properties
 
-All columnheaders should be nested within a [row](/en-US/docs/Web/Accessibility/ARIA/Roles/row_role). Every row, in turn, should be nested within a [grid](/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role), [table](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role), or [treegrid](/en-US/docs/Web/Accessibility/ARIA/Roles/row_role), alternatively within a [rowgroup](/en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role) nested within one of the above.
+All column headers should be nested within a [row](/en-US/docs/Web/Accessibility/ARIA/Roles/row_role). Every row, in turn, should be nested within a [grid](/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role), [table](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role), or [treegrid](/en-US/docs/Web/Accessibility/ARIA/Roles/row_role), alternatively within a [rowgroup](/en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role) nested within one of the above.
 
 - [`aria-sort`](/en-US/docs/Web/Accessibility/ARIA/Attributes/aria-sort)
   - : Only applied to one column header at a time, if any, the `aria-sort` attribute indicates if a column is sorted in the three values of `ascending` or `descending` order, or `none` for not sorted.
@@ -58,7 +58,7 @@ JavaScript is only required if the `aria-sort` attribute is used.
 
 ## Best Practices
 
-Columnheaders should contain a title or header information for the column.
+Column headers should contain a title or header information for the column.
 
 The first rule of ARIA is: if a native HTML element or attribute has the semantics and behavior you require, use it instead of re-purposing an element and adding an ARIA role, state or property to make it accessible. It is recommended to use the native HTML `<th>` element with the `scope` attribute set `<th scope="col">` instead of a `<div>` or other element. If you use semantic HTML's `<th scope="col">` the role attribute is not required, but can be included as a back up to ensure the table retains its semantics should the default semantics be removed with a CSS display property value.
 

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

@@ -50,7 +50,7 @@ The `grid` role is a composite widget containing a collection of one or more row
 
 A grid widget contains one or more rows with one or more cells of thematically related interactive content. While it does not imply a specific visual presentation, it implies a relationship among elements. Uses fall into two categories: presenting tabular information (data grids) and grouping other widgets (layout grids). Even though both data grids and layout grids employ the same ARIA roles, states, and properties, differences in their content and purpose surface factors that are important to consider in keyboard interaction design. See [ARIA Authoring Practices Guide](https://www.w3.org/WAI/ARIA/apg/patterns/grid/) for more details.
 
-Cell elements have the role [`gridcell`](/en-US/docs/Web/Accessibility/ARIA/Roles/gridcell_role), unless they are a row or column header. Then the elements are [`rowheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role) and [`columnheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/columnheader_role), respectively. Cell elements need to be owned by elements with a [`row`](/en-US/docs/Web/Accessibility/ARIA/Roles/row_role) role. Rows can be grouped using `rowgroups`.
+Cell elements have the role [`gridcell`](/en-US/docs/Web/Accessibility/ARIA/Roles/gridcell_role), unless they are a row or column header, in which case, the elements are [`rowheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role) and [`columnheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/columnheader_role), respectively. Cell elements need to be owned by elements with a [`row`](/en-US/docs/Web/Accessibility/ARIA/Roles/row_role) role. Rows can be grouped using the [`rowgroup`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role) role.
 
 If the grid is used as an interactive widget, [keyboard interactions](#keyboard_interactions) need to be implemented.
 
@@ -235,27 +235,27 @@ const selectables = document.querySelectorAll('table td[role="gridcell"]');
 selectables[0].setAttribute("tabindex", 0);
 
 const trs = document.querySelectorAll("table tbody tr");
-let row = 0;
-let col = 0;
-let maxrow = trs.length - 1;
-let maxcol = 0;
-
-trs.forEach((gridrow) => {
-  gridrow.querySelectorAll("td").forEach((el) => {
-    el.dataset.row = row;
-    el.dataset.col = col;
-    col++;
+let rowIndex = 0;
+let colIndex = 0;
+let maxRow = trs.length - 1;
+let maxCol = 0;
+
+trs.forEach((row) => {
+  row.querySelectorAll("td").forEach((el) => {
+    el.dataset.row = rowIndex;
+    el.dataset.col = colIndex;
+    rowIndex++;
   });
-  if (col > maxcol) {
-    maxcol = col - 1;
+  if (colIndex > maxCol) {
+    maxCol = colIndex - 1;
   }
-  col = 0;
-  row++;
+  colIndex = 0;
+  rowIndex++;
 });
 
-function moveto(newrow, newcol) {
+function moveTo(newRow, newCol) {
   const tgt = document.querySelector(
-    `[data-row="${newrow}"][data-col="${newcol}"]`,
+    `[data-row="${newRow}"][data-col="${newCol}"]`,
   );
   if (tgt?.getAttribute("role") === "gridcell") {
     document.querySelectorAll("[role=gridcell]").forEach((el) => {
@@ -274,22 +274,22 @@ document.querySelector("table").addEventListener("keydown", (event) => {
   const row = parseInt(event.target.dataset.row, 10);
   switch (event.key) {
     case "ArrowRight": {
-      const newrow = col === 6 ? row + 1 : row;
-      const newcol = col === 6 ? 0 : col + 1;
-      moveto(newrow, newcol);
+      const newRow = col === 6 ? row + 1 : row;
+      const newCol = col === 6 ? 0 : col + 1;
+      moveTo(newRow, newCol);
       break;
     }
     case "ArrowLeft": {
-      const newrow = col === 0 ? row - 1 : row;
-      const newcol = col === 0 ? 6 : col - 1;
-      moveto(newrow, newcol);
+      const newRow = col === 0 ? row - 1 : row;
+      const newCol = col === 0 ? 6 : col - 1;
+      moveTo(newRow, newCol);
       break;
     }
     case "ArrowDown":
-      moveto(row + 1, col);
+      moveTo(row + 1, col);
       break;
     case "ArrowUp":
-      moveto(row - 1, col);
+      moveTo(row - 1, col);
       break;
     case "Home": {
       if (event.ctrlKey) {
@@ -298,30 +298,30 @@ document.querySelector("table").addEventListener("keydown", (event) => {
         do {
           let j = 0;
           do {
-            result = moveto(i, j);
+            result = moveTo(i, j);
             j++;
           } while (!result);
           i++;
         } while (!result);
       } else {
-        moveto(row, 0);
+        moveTo(row, 0);
       }
       break;
     }
     case "End": {
       if (event.ctrlKey) {
-        let i = maxrow;
+        let i = maxRow;
         let result;
         do {
-          let j = maxcol;
+          let j = maxCol;
           do {
-            result = moveto(i, j);
+            result = moveTo(i, j);
             j--;
           } while (!result);
           i--;
         } while (!result);
       } else {
-        moveto(
+        moveTo(
           row,
           document.querySelector(
             `[data-row="${event.target.dataset.row}"]:last-of-type`,
@@ -334,16 +334,16 @@ document.querySelector("table").addEventListener("keydown", (event) => {
       let i = 0;
       let result;
       do {
-        result = moveto(i, col);
+        result = moveTo(i, col);
         i++;
       } while (!result);
       break;
     }
     case "PageDown": {
-      let i = maxrow;
+      let i = maxRow;
       let result;
       do {
-        result = moveto(i, col);
+        result = moveTo(i, col);
         i--;
       } while (!result);
       break;

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

@@ -63,7 +63,7 @@ for (let i = 0; i < fakeLinks.length; i++) {
   fakeLinks[i].addEventListener("keydown", navigateLink);
 }
 
-//handles clicks and keydowns on the link
+// handles click and keydown events on the link
 function navigateLink(e) {
   if (e.type === "click" || e.key === "Enter") {
     const ref = e.target ?? e.srcElement;

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

@@ -30,15 +30,15 @@ The `note` role can be added to parenthetic or ancillary content if no other nat
 …
 <h2>Career</h2>
 …
-<p role="note" class="hilitebox">
+<p role="note" class="highlight-box">
   At the height of the depression, Madam C. J. Walker trained 20,000 women to
   sell hair pomade door-to-door
 </p>
 <h2>Activism and Philanthropy</h2>
 …
 ```
 
-In the above Wikipedia style entry for Madam C.J. Walker, the `hilitebox` with role `note` could have been a {{HTMLElement('blockquote')}} if it contained a quote or {{HTMLElement('figcaption')}} in a {{HTMLElement('figure')}} if there was an associated image. In this case, as neither of those made sense, the `note` role was added to add semantics to the parenthetic content.
+In the above Wikipedia style entry for Madam C.J. Walker, the `highlight-box` with role `note` could have been a {{HTMLElement('blockquote')}} if it contained a quote or {{HTMLElement('figcaption')}} in a {{HTMLElement('figure')}} if there was an associated image. In this case, as neither of those made sense, the `note` role was added to add semantics to the parenthetic content.
 
 ## Specifications
 

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

@@ -208,9 +208,9 @@ A lot of JavaScript is required to make radio buttons out of non-semantic HTML.
 
 const radioGroups = document.querySelectorAll('[role="radiogroup"]');
 
-for (let i = 0, groups = radioGroups.length; i < groups; i++) {
+for (let i = 0; i < radioGroups.length; i++) {
   const radios = radioGroups[i].querySelectorAll("[role=radio]");
-  for (let j = 0, radiobuttons = radios.length; j < radios; j++) {
+  for (let j = 0; j < radios.length; j++) {
     radios[j].addEventListener("keydown", function () {
       handleKeydown();
     });

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

@@ -38,7 +38,7 @@ An element with `role="row"` is a row of cells within a tabular structure. A row
 
 ## Description
 
-The element `role="row"` is a row within a [`grid`](/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role), [`table`](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role) or [`treegrid`](/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role), and optionally within a [`rowgroup`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role), that is a container for one or more [`cells`](/en-US/docs/Web/Accessibility/ARIA/Roles/cell_role), [`gridcells`](/en-US/docs/Web/Accessibility/ARIA/Roles/gridcell_role), [`columnheaders`](/en-US/docs/Web/Accessibility/ARIA/Roles/columnheader_role), or [`rowheaders`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role) within a static tabular structure. Using native [HTML `<tr>`](/en-US/docs/Web/HTML/Element/tr) elements, whenever possible, is strongly encouraged.
+The element with `role="row"` is a row within a [`grid`](/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role), [`table`](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role), or [`treegrid`](/en-US/docs/Web/Accessibility/ARIA/Roles/treegrid_role), and optionally within a [`rowgroup`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowgroup_role) that contains one or more [`cell`](/en-US/docs/Web/Accessibility/ARIA/Roles/cell_role), [`gridcell`](/en-US/docs/Web/Accessibility/ARIA/Roles/gridcell_role), [`columnheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/columnheader_role), or [`rowheader`](/en-US/docs/Web/Accessibility/ARIA/Roles/rowheader_role) elements within a static tabular structure. Using native [HTML `<tr>`](/en-US/docs/Web/HTML/Element/tr) elements, whenever possible, is strongly encouraged.
 
 To create an ARIA row, add `role="row"` to the container element. That row should be nested within a grid, table or treegrid. A group of rows can be nested within a grid, table or treegrid directly, or within a rowgroup in one of those containers. Each row contains child cells. These cells can be of different types, depending on whether they are column or row headers, or grid or regular cells.
 

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

@@ -36,7 +36,7 @@ An element with `role="rowgroup"` is a group of [rows](/en-US/docs/Web/Accessibi
 
 ## Description
 
-`Rowgroup` establishes a relationship between owned row elements and is a structural equivalent to the {{HTMLElement('thead')}}, {{HTMLElement('tfoot')}} and {{HTMLElement('tbody')}} elements in HTML. There is, however, no differentiation between different types of rowgroups. Their elements must be contained in, or owned by, elements with either the [table](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role) or [grid](/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role) role. Using the native {{HTMLElement('thead')}}, {{HTMLElement('tfoot')}} and {{HTMLElement('tbody')}} HTML elements, whenever possible, is strongly encouraged.
+`Rowgroup` establishes a relationship between owned row elements and is a structural equivalent to the {{HTMLElement('thead')}}, {{HTMLElement('tfoot')}} and {{HTMLElement('tbody')}} elements in HTML. There is, however, no differentiation between different types of row groups. Their elements must be contained in, or owned by, elements with either the [table](/en-US/docs/Web/Accessibility/ARIA/Roles/table_role) or [grid](/en-US/docs/Web/Accessibility/ARIA/Roles/grid_role) role. Using the native {{HTMLElement('thead')}}, {{HTMLElement('tfoot')}} and {{HTMLElement('tbody')}} HTML elements, whenever possible, is strongly encouraged.
 
 To create an ARIA table header, table footer or table body, add `role="rowgroup"` to the element. That rowgroup should be nested within a grid, table or treegrid, encompassing a group of one or more rows. Each row, in turn, contains child cells. These cells can be of different types, depending on whether they are column or row headers, or plain or grid cells.