Merge branch 'main' into fix/unrelated_change_in_alternate_css

.github/workflows/pr-check-lint_content.yml

@@ -101,6 +101,12 @@ jobs:
           echo "FM_LINT_FAILED=${FM_LINT_FAILED}" >> $GITHUB_ENV
 
           echo "Running Prettier"
+          PRETTIER_FAILED=false
+          PRETTIER_LOG=$(yarn prettier --check ${files_to_lint} 2>&1) || PRETTIER_FAILED=true
+          echo "PRETTIER_LOG<<${EOF}" >> $GITHUB_ENV
+          echo "${PRETTIER_LOG}" >> $GITHUB_ENV
+          echo "${EOF}" >> $GITHUB_ENV
+          echo "PRETTIER_FAILED=${PRETTIER_FAILED}" >> $GITHUB_ENV
           yarn prettier -w ${files_to_lint}
 
           if [[ -n $(git diff) ]]; then
@@ -110,16 +116,17 @@ jobs:
           # info for troubleshooting
           echo MD_LINT_FAILED=${MD_LINT_FAILED}
           echo FM_LINT_FAILED=${FM_LINT_FAILED}
+          echo PRETTIER_FAILED=${PRETTIER_FAILED}
           git diff
 
       - name: Setup reviewdog
-        if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true'
+        if: ${{ env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' }}
         uses: reviewdog/action-setup@v1
         with:
           reviewdog_version: latest
 
       - name: Suggest changes using diff
-        if: env.FILES_MODIFIED == 'true'
+        if: ${{ env.FILES_MODIFIED == 'true' }}
         env:
           REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
@@ -134,7 +141,7 @@ jobs:
             -reporter=github-pr-review < "${TMPFILE}"
 
       - name: Add reviews for markdownlint errors
-        if: env.MD_LINT_FAILED == 'true'
+        if: ${{ env.MD_LINT_FAILED == 'true' }}
         env:
           REVIEWDOG_GITHUB_API_TOKEN: ${{ secrets.GITHUB_TOKEN }}
         run: |
@@ -147,11 +154,31 @@ jobs:
             -reporter="github-pr-review"
 
       - name: Fail if any issues pending
-        if: env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true'
+        if: ${{ env.FILES_MODIFIED == 'true' || env.MD_LINT_FAILED == 'true' || env.FM_LINT_FAILED == 'true' }}
+        env:
+          MD_LINT_FAILED: ${{ env.MD_LINT_FAILED }}
+          FM_LINT_FAILED: ${{ env.FM_LINT_FAILED }}
+          PRETTIER_FAILED: ${{ env.PRETTIER_FAILED }}
+          MD_LINT_LOG: ${{ env.MD_LINT_LOG }}
+          FM_LINT_LOG: ${{ env.FM_LINT_LOG }}
+          PRETTIER_LOG: ${{ env.PRETTIER_LOG }}
         run: |
-          echo -e "\nLogs from markdownlint:"
-          echo "${MD_LINT_LOG}"
-          echo -e "\nLogs from front-matter linter:"
-          echo "${FM_LINT_LOG}"
-          echo -e "\nPlease fix all the linting issues mentioned in above logs and in the review comments."
+          echo -e "\nPlease fix all the linting issues mentioned in the following logs and in the PR review comments."
+
+          if [[ ${MD_LINT_FAILED} == 'true' ]]; then
+            echo -e "\n\n🪵 Logs from markdownlint:"
+            echo "${MD_LINT_LOG}"
+          fi
+
+          if [[ ${FM_LINT_FAILED} == 'true' ]]; then
+            echo -e "\n\n🪵 Logs from front-matter linter:"
+            echo "${FM_LINT_LOG}"
+          fi
+
+          if [[ ${PRETTIER_FAILED} == 'true' ]]; then
+            echo -e "\n\n🪵 Logs from Prettier formatter:"
+            echo "${PRETTIER_LOG}"
+            echo -e "\nYou can use Prettier playground to format the files online (configuration pre-filled): https://prettier.io/playground/#N4Igxg9gdgLgprEAuEBiABABwIYGd7owAWc6CMAlgE6kBmFANqSTSADQgSaXS7KjYqVCAHcACoIR8U2BiOwBPPhwBGVbGADWcGAGVsAWzgAZClDjIYVAK5xV6rTt04wZgOaWbdkLjgGKnrYccAAemHBUFEawsgAqEVCCFHDStLK+HLjuTACK1hDwyGkMGSAAVrghutlweQUWSMWlAI758GLCmNIgeAC05nAAJkPsIFbYjO4AwhAGBtjIPQwMo1lQbkwAgjBWFCrW7RGm5kXp3kQwBgwA6kQU8LgucLpS9xQAbvcKi2C4yiDvWwASSgw1gujAkW4m1BuhgCiYpxK3kwwl813UmEWqJSEXeFg4Zl8VBgHWwbnmSNKOCoxMW8yomkGoigo1RZhg1wog2IyAAHAAGDg0VrUOBkikLRpnDgwbAqLk8ojIABMHGsvli8tSMpAfhUQ2Gg2M2HW1nJcAAYhAqPMdu5FtgDhAQABfV1AA \n"
+          fi
+
           exit 1

.vscode/dictionaries/terms-abbreviations.txt

@@ -21,6 +21,7 @@ ANMF
 anonymization
 antialiasing
 antitracking
+apideck
 APNG
 appcontent
 arcosh
@@ -529,6 +530,7 @@ quickmenu
 qvalues
 QWERTZ
 randomizer
+rari
 rasterizes
 RDBMS
 RDBMSes
@@ -562,6 +564,7 @@ retarget
 retargeted
 retargeting
 retargetings
+reviewdog
 RFCOMM
 RGTC
 roadmaps
@@ -879,6 +882,7 @@ xrayed
 Xrays
 XRCPU
 XSSI
+yari
 yearless
 Zalgo
 zoomable

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

@@ -309,6 +309,7 @@ On mobile the heading is smaller, but on desktop, we see the larger heading size
 ```html live-sample___type-rwd
 <div class="wrapper">
   <div class="col1">
+    <h1>Watch my size!</h1>
     <p>
       This layout is responsive. See what happens if you make the browser window
       wider or narrow.

files/en-us/learn_web_development/core/styling_basics/cascade_tasks/index.md

@@ -68,7 +68,9 @@ Then you need to remember there are special keyword values for all properties. I
 
 ## Task 2
 
-In this task, we want you to make your changes by leveraging the [order of cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts#order_of_cascade_layers) section. Edit an existing declaration, without touching the lightgreen declaration, using the cascade layer order to make the links rebeccapurple.
+In this task, we want you to manipulate the cascade layer order to color the links `rebeccapurple`. No editing the `lightgreen` declaration!
+
+This task is a stretch goal — it requires knowledge of cascade layers, which we didn't cover in the [Handling conflicts](/en-US/docs/Learn_web_development/Core/Styling_basics/Handling_conflicts) article. You can find the information you need to attempt this task at [Cascade layers > Determining the precedence based on the order of layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers#determining_the_precedence_based_on_the_order_of_layers).
 
 Your final result should look like the image below:
 

files/en-us/learn_web_development/core/styling_basics/handling_conflicts/index.md

@@ -49,7 +49,7 @@ Let's start by taking a quick look at the key things we are dealing with, then w
 
 ### Cascade
 
-Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin, the cascade layer, and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used.
+Stylesheets [**cascade**](/en-US/docs/Web/CSS/Cascade) — at a very simple level, this means that the origin and the order of CSS rules matter. When two rules both have equal specificity, the one that is defined last in the stylesheet is the one that will be used. There are other concepts that have an effect, such as [cascade layers](/en-US/docs/Learn_web_development/Core/Styling_basics/Cascade_layers), but these are more advanced and we won't cover them in any detail here.
 
 In the below example, we have two rules that could apply to the `<h1>` element. The `<h1>` content ends up being colored blue. This is because both the rules are from the same source, have an identical element selector, and therefore, carry the same specificity, but the last one in the source order wins.
 
@@ -479,18 +479,16 @@ Let's walk through this to see what's happening — try removing some of the pro
 4. The 2nd element _does_ get the red background color, but no border. Why? Because of the `!important` flag in the second rule. Adding the `!important` flag after `border: none` means that this declaration will win over the `border` value in the previous rule, even though the ID selector has higher specificity.
 
 > [!NOTE]
-> The only way to override an important declaration is to include another important declaration with the _same specificity_ later in the source order, or one with higher specificity, or to include an important declaration in a prior cascade layer (we haven't covered cascade layers yet).
+> The only way to override an important declaration is to include another important declaration with the _same specificity_ later in the source order, or one with higher specificity.
 
 One situation in which you may have to use the `!important` flag is when you are working on a CMS where you can't edit the core CSS modules, and you really want to override an inline style or an important declaration that can't be overridden in any other way. But really, don't use it if you can avoid it.
 
 ## The effect of CSS location
 
-Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet and cascade layer it is specified in.
+Finally, it is important to note that the precedence of a CSS declaration depends on what stylesheet it is specified in.
 
 It is possible for users to set custom stylesheets to override the developer's styles. For example, a visually impaired user might want to set the font size on all web pages they visit to be double the normal size to allow for easier reading.
 
-It is also possible to declare developer styles in cascade layers: you can make non-layered styles override styles declared in layers or you can make styles declared in later layers override styles from earlier declared layers. For example, as a developer you may not be able to edit a third-party stylesheet, but you can import the external stylesheet into a cascade layer so that all of your styles easily override the imported styles without worrying about third-party selector specificity.
-
 ### Order of overriding declarations
 
 Conflicting declarations will be applied in the following order, with later ones overriding earlier ones:

files/en-us/learn_web_development/extensions/forms/ui_pseudo-classes/index.md

@@ -118,7 +118,7 @@ In previous articles, we've seen the usage of [generated content](/en-US/docs/We
 
 The idea is that we can use the [`::before`](/en-US/docs/Web/CSS/::before) and [`::after`](/en-US/docs/Web/CSS/::after) pseudo-elements along with the [`content`](/en-US/docs/Web/CSS/content) property to make a chunk of content appear before or after the affected element. The chunk of content is not added to the DOM, so it may be invisible to some screen readers. Because it is a pseudo-element, it can be targeted with styles in the same way that any actual DOM node can.
 
-This is really useful when you want to add a visual indicator to an element, such as a label or icon, when alternative indicators are also available to ensure accessibility for all users. For example, in our [custom radio buttons example](https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html), we use generated content to handle the placement and animation of the a custom radio button's inner circle when a radio button is selected:
+This is really useful when you want to add a visual indicator to an element, such as a label or icon, when alternative indicators are also available to ensure accessibility for all users. For example, in our [custom radio buttons example](https://mdn.github.io/learning-area/html/forms/styling-examples/radios-styled.html), we use generated content to handle the placement and animation of the custom radio button's inner circle when a radio button is selected:
 
 ```css
 input[type="radio"]::before {

files/en-us/learn_web_development/getting_started/environment_setup/dealing_with_files/index.md

@@ -45,15 +45,15 @@ In general, you should:
 1. Choose a place to store your projects. This is where all your website projects will live.
 2. Inside this first folder, create other folders to store each project in. For example, you could call your first project `test-site` (or something more imaginative).
 
-Choose a place now to store you projects. Inside your chosen place, create a new folder called `web-projects`.
+Choose a place now to store your projects. Inside your chosen place, create a new folder called `web-projects`.
 
 ## An aside on casing and spacing
 
 You'll notice that throughout MDN, we ask you to name folders and files completely in lowercase with no spaces. This is because:
 
 1. Many computers, particularly web servers, are case-sensitive. So for example, if you put an image on your website at `test-site/MyImage.jpg` and then in a different file you try to reference the image with `test-site/myimage.jpg`, it may not work.
 2. There are many ways in which using spaces in file names creates issues:
-   - When you invoke commands in the commend line, you have to put quotes around file names with spaces in them, or the path will be interpreted as two separate items.
+   - When you invoke commands in the command line, you have to put quotes around file names with spaces in them, or the path will be interpreted as two separate items.
    - Some programming languages (for example, Python) do not work well with spaces in file names in certain circumstances (for example, if these files are modules to be imported).
 
 File names also map to URLs. For example, if you have a file called `my_file.html` at the root of your server-served directory, generally it will be accessible at `https://example.com/my_file.html` by most web servers' default behavior. Some servers will replace the spaces in your filenames with "%20" (the character code for spaces in URLs), which can create subtle bugs with some server-side logic if they assume that file names and URLs match perfectly.

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

@@ -74,12 +74,8 @@ When the value to be announced, either the actual value or the value as a percen
 The first rule of ARIA use is "if you can use a native feature with the semantics and behavior you require already built in, instead of repurposing an element and **adding** an ARIA role, state or property to make it accessible, then do so."
 
 ```html
-<label for="temperature">
-  Oven Temperature
-</p>
-<input type="range" id="temperature"
-  value="205" min="70" max="250" step="5"/>
-</meter>
+<label for="temperature">Oven Temperature</label>
+<input type="range" id="temperature" value="205" min="70" max="250" step="5" />
 ```
 
 If we employ native HTML semantics with {{HTMLElement('input')}} we get styles and semantics for free.

files/en-us/web/api/element/ariamultiselectable/index.md

@@ -27,11 +27,18 @@ A string with one of the following values:
 In this example the `aria-multiselectable` attribute on the element with an ID of `listbox1` is set to "true" indicating that this input accepts multiple selected items. Using `ariaMultiSelectable` we update the value to "false".
 
 ```html
-<div role="listbox" tabindex="0" id="listbox1"
-  aria-multiselectable="true" aria-labelledby="listbox1label" aria-activedescendant="listbox1-1">
-  <div role="option" id="listbox1-1" class="selected" aria-selected="true">Green</div>
+<div
+  role="listbox"
+  tabindex="0"
+  id="listbox1"
+  aria-multiselectable="true"
+  aria-labelledby="listbox1label"
+  aria-activedescendant="listbox1-1">
+  <div role="option" id="listbox1-1" class="selected" aria-selected="true">
+    Green
+  </div>
   <div role="option" id="listbox1-2">Orange</div>
-  <div role="option" id="listbox1-3">Red</div<
+  <div role="option" id="listbox1-3">Red</div>
 </div>
 ```