wv2 RelNotes for Preview Runtime 153 & Runtime 152

microsoft-edge/accessibility/build/index.md

@@ -21,7 +21,7 @@ Visit [HTML5Accessibility](https://html5accessibility.com) for information on wh
 <!-- ====================================================================== -->
 ## How accessibility works
 
-Assistive technologies add capabilities that computers don't usually have.  For example, a user who has low vision might use their keyboard in combination with assistive technology such as a screen reader, rather than directly using the browser with the mouse and screen.  
+Assistive technologies add capabilities that computers don't usually have.  For example, a user who has low vision might use their keyboard in combination with assistive technology such as a screen reader, rather than directly using the browser with the mouse and screen.
 
 For applications on Microsoft platforms and on the web, the assistive technology interacts with any combination of:
 * Microsoft [UI Automation](/windows/win32/winauto/uiauto-specandcommunitypromise).

microsoft-edge/dev-videos/index.md

@@ -31,15 +31,15 @@ The Microsoft Edge channel includes the following playlists:
 * [Extensions](https://www.youtube.com/playlist?list=PL4z1-7pjJU6ykO2iptfxT7T68W5WEK4ff)
 
 
-<!-- ====================================================================== 
+<!-- ======================================================================
 ## What's new in DevTools 115-125
 
 Date
 
 [![Thumbnail image for video "What's new in DevTools 115-125"](./index-images/devtools-whatsnew-115-125.png)](url)
 
 Covers:
-* 
+*
 
 See also:
 * [What's new in DevTools (Microsoft Edge 125)](../devtools/whats-new/2024/05/devtools-125.md)
@@ -577,7 +577,9 @@ Mar. 17, 2022
 
 Microsoft Edge provides auto-generated alt text for images that don't include it. Auto-generated alt text helps users of assistive technology such as screen readers discover the meaning or intent of an images on the web.
 
-Many people who are blind or low-vision experience the web primarily through a screen reader: an assistive technology that reads the content of each page aloud.  Screen readers depend on having image labels (alternative text or "alt text") provided that allows them to describe visual content - like images and charts - so the user can understand the full content of the page.  Alt text is critical for making the web accessible, yet it's often overlooked.  More than half of the images processed by screen readers are missing alt text. 
+Many people who are blind or low-vision experience the web primarily through a screen reader: an assistive technology that reads the content of each page aloud.  Screen readers depend on having image labels (alternative text or "alt text") provided that allows them to describe visual content - like images and charts - so the user can understand the full content of the page.
+
+Alt text is critical for making the web accessible, yet it's often overlooked.  More than half of the images processed by screen readers are missing alt text.
 
 See also:
 * [Appears to say: Microsoft Edge now provides auto-generated image labels](https://blogs.windows.com/msedgedev/2022/03/17/appears-to-say-microsoft-edge-auto-generated-image-labels/) - blog post
@@ -782,7 +784,7 @@ Sep. 22, 2020
 
 [![Thumbnail image for video "The latest in developer tooling"](./index-images/latest-developer-tooling.png)](https://www.youtube.com/watch?v=BHeF7GV6nUM)
 
-Microsoft Edge developer tools help make web development, testing, and automation easier.  Learn how we prioritize accessibility in our tooling and applications, and how we help to empower others to do the same. 
+Microsoft Edge developer tools help make web development, testing, and automation easier.  Learn how we prioritize accessibility in our tooling and applications, and how we help to empower others to do the same.
 
 Covers:
 * DevTools extension for VS Code.

microsoft-edge/develop-web-microsoft-edge.md

@@ -63,7 +63,7 @@ See [Overview of DevTools](./devtools/overview.md).
 
 <!-- ====================================================================== -->
 ## Microsoft Edge extensions
-   
+
 Create an extension for Microsoft Edge, to add to or modify the browser's features.  Extensions improve the browser experience, to provide a specialized function that's important to a target audience.
 
 You can create a Microsoft Edge extension if you have an idea or product that is based upon either a specific web browser, or improvements to features of specific webpages. Examples of companion experiences include ad blockers and password managers.

microsoft-edge/developer/index.yml

@@ -12,7 +12,7 @@ metadata:
   author: MSEdgeTeam #Required; your GitHub user alias, with correct capitalization.
   ms.author: msedgedevrel #Required; microsoft alias of author; optional team alias.
   ms.date: 02/15/2024 #Required; mm/dd/yyyy format.
-  
+
 # How to create or update a landing page
 # https://review.learn.microsoft.com/help/contribute/contribute-how-to-write-landing-page?branch=main
 

microsoft-edge/devtools/about-tools.md

@@ -155,5 +155,5 @@ To restore all of the default tool tabs in the **Activity Bar** and **Quick View
 
 <!-- ====================================================================== -->
 ## See also
- 
+
 * [Overview of DevTools](overview.md) - Similar to the present article, but broader coverage, with a top-level introduction to DevTools.

microsoft-edge/devtools/accessibility/color-picker.md

@@ -47,7 +47,7 @@ In DevTools, one way to view the contrast ratio of a text element is to use the
    ![The 'Contrast Ratio' section of the Color Picker shows two check marks and a value of 13.97](./color-picker-images/accessibility-elements-styles-paragraph-highlight-color-picker.png)
 
    The **Contrast ratio** section shows a score for the contrast ratio between the text and the background and an icon that indicates whether the contrast ratio meets recommendations:
-   
+
    * A red crossed-out circle means that the element doesn't meet the [minimum recommendation](https://www.w3.org/WAI/WCAG21/quickref/#contrast-minimum).
    * One check mark means that the element meets the minimum recommendation.
    * Two check marks means that the element meets the [enhanced recommendation](https://www.w3.org/WAI/WCAG21/quickref/#contrast-enhanced).

microsoft-edge/devtools/accessibility/emulate-vision-deficiencies.md

@@ -13,7 +13,7 @@ ms.date: 12/04/2023
 To better meet the needs of users with [color vision deficiency](https://www.colourblindawareness.org) (color blindness) or blurred vision, Microsoft Edge DevTools allows you to simulate blurred vision and specific color vision deficiencies.  The **Emulate vision deficiencies** tool simulates the following categories:
 
 | Color vision deficiency | Details |
-|:--- |:--- |
+|---|---|
 | Blurred vision | The user has difficulty focusing on fine details. |
 | Protanopia | The user is unable to perceive any red light. |
 | Deuteranopia | The user is unable to perceive any green light. |

microsoft-edge/devtools/accessibility/focus.md

@@ -1,7 +1,7 @@
 ---
 title: Track which element has focus
 description: Open the Console, create a Live Expression, and set the expression to document.activeElement.
-author: MSEdgeTeam 
+author: MSEdgeTeam
 ms.author: msedgedevrel
 ms.topic: article
 ms.service: microsoft-edge
@@ -78,7 +78,7 @@ The result of the `document.activeElement` Live Expression is only a preview of
 
    ![The focused element, highlighted in the rendered webpage](./focus-images/highlighted-focused-element.png)
 
-1. Right-click the result of the Live Expression, and then select **Reveal in Elements panel**. 
+1. Right-click the result of the Live Expression, and then select **Reveal in Elements panel**.
 
    In the **Elements** tool, the DOM tree automatically expands and selects the DOM node that's currently focused:
 

microsoft-edge/devtools/accessibility/preferred-color-scheme-simulation.md

@@ -14,7 +14,7 @@ Use the **Rendering** tool to see what your webpage looks like with different di
 
 Many operating systems have a way to display any application in darker or lighter colors.  Having a website that has a light scheme in a dark-mode operating system can be hard to read and can be an accessibility issue for some users.
 
-To test how a webpage will render when the user has selected dark or light mode, instead of changing your own machine's dark-mode or light-mode setting, you can select **Emulate CSS prefers-color-scheme: dark** or **light** in Microsoft Edge DevTools.  Or, you can make your webpage automatically select dark or light mode based on your own preferred settings on your machine, by selecting **No emulation**, which is the default. 
+To test how a webpage will render when the user has selected dark or light mode, instead of changing your own machine's dark-mode or light-mode setting, you can select **Emulate CSS prefers-color-scheme: dark** or **light** in Microsoft Edge DevTools.  Or, you can make your webpage automatically select dark or light mode based on your own preferred settings on your machine, by selecting **No emulation**, which is the default.
 
 You can select these settings from the **Rendering** tool or from the **Command Menu**, as described below.
 

microsoft-edge/devtools/accessibility/test-analyze-no-keyboard-support.md

@@ -93,7 +93,7 @@ The form's functionality is created by using JavaScript, and you can test this b
       }
     })
     ```
-    
+
 Using a `click` event listener to run code when a button is used is a good practice, because a `click` event fires both on mouse pointer and keyboard interaction.  However, the **Donate** button is implemented by using a `<div>` HTML element, which can't be focused with the keyboard.  The `click` event only runs when you use a mouse or another source of a `click` event, such as a special button that's available on some keyboards.
 
 This is a classic example where JavaScript was added to recreate the functionality that `<button>` elements provide natively.  Simulating the functionality of buttons by using `<div>` elements ended up producing an inaccessible experience.

microsoft-edge/devtools/accessibility/test-issues-tool.md

@@ -59,9 +59,9 @@ To check whether input fields have labels connected to them, use the **Issues**
 1. Click the **Open in Elements** link.
 
    ![Elements tool showing the problematic HTML after clicking the link in the Issues tool](./test-issues-tool-images/a11y-testing-inspect-problematic-element.png)
-    
+
    The **Elements** tool opens, with the element highlighted in the DOM tree.  The **Styles** pane displays the applied CSS rules for the element.
-  
+
    The following code is now displayed:
 
    ```html

microsoft-edge/devtools/changes/changes-tool.md

@@ -42,7 +42,7 @@ To open the **Changes** tool using the **Command Menu**:
    ![The Show Changes command in the Command Menu](changes-tool-images/changes-tool-command-menu.png)
 
 1. Press **Enter**.  The **Changes** tool opens in the **Quick View** panel:
-   
+
    ![The Changes tool in the Quick View panel](changes-tool-images/changes-tool-in-quick-view.png)
 
 See also:
@@ -98,7 +98,7 @@ If green circles stop appearing on files in DevTools, such as in the **Workspace
 
 * With DevTools displayed, long-click or right-click the **Refresh** button in Microsoft Edge, and then select **Empty cache and hard refresh**.
 
-<!-- 
+<!--
 * In DevTools, select **Customize and Control DevTools** (**...**) > **Restore defaults and refresh**. -->
 
 

microsoft-edge/devtools/console/console-debug-javascript.md

@@ -144,7 +144,7 @@ Use defensive coding techniques to avoid the previous user experiences.  Make su
       return response;
    };
    ```
-   
+
 
 <!-- ====================================================================== -->
 ## Create errors and traces in the Console
@@ -184,7 +184,7 @@ To display two created error messages in the **Console**:
     first('Console');
     first('Microsoft Edge Canary');
     ```
-    
+
    There are three functions that request each other in succession:
 
    *  `first()`
@@ -237,7 +237,7 @@ To display the trace in the **Console**:
    here();
    there();
    ```
-    
+
    The result is a trace to display that `here()` is named `there()` and then `everywhere()`, and in the second example to display that it's named `everywhere()`.
 
    Here's the trace that's produced, in the **Console**:

microsoft-edge/devtools/console/console-dom-interaction.md

@@ -132,7 +132,7 @@ In this example, you use the `$$()` utility function to list all links on the we
    ```javascript
    $$('a');
    ```
-   
+
    ![The result of the $$('a') function in the Console, which is an array of <a> elements](./console-dom-interaction-images/list-of-links.png)
 
    `$$('a')` is short for `document.querySelectorAll('a')`.
@@ -205,7 +205,7 @@ In this example, you get all the headings on the webpage that have an `id` attri
    });
    console.log(headings.join("\n"));
    ```
-   
+
    The result is text that contains content for each section heading, followed by the full URL for the section heading:
 
    ![The Console tool, showing the list of all headings on the page, along with their URLs](./console-dom-interaction-images/heading-links.png)
@@ -335,7 +335,7 @@ unmonitorEvents(document.querySelector('img'));
 unmonitorEvents(document.querySelector('img'), ['mousedown', 'mouseup', 'click']);
 unmonitorEvents(window, ['resize', 'scroll']);
 ```
-   
+
 
 <!-- ====================================================================== -->
 ## Save DOM interaction scripts as snippets

microsoft-edge/devtools/console/console-filters.md

@@ -12,7 +12,7 @@ ms.date: 04/13/2021
 
 Use the filter options of the DevTools **Console** to reduce the noise from excessive console log messages, to better see the type of log messages that you're looking for.
 
-When you go to various webpages, you may find that the **Console** is flooded with all kinds of information.  Often the information isn't relevant to you, such as information about the page that another developer logged.  Or you might see logged information about violations and warnings about the performance of the current site, that you aren't able to change.  
+When you go to various webpages, you may find that the **Console** is flooded with all kinds of information.  Often the information isn't relevant to you, such as information about the page that another developer logged.  Or you might see logged information about violations and warnings about the performance of the current site, that you aren't able to change.
 
 You can filter console log messages in various ways:
 *  Filter by log level.

microsoft-edge/devtools/console/console-javascript.md

@@ -61,7 +61,7 @@ To try autocompletion while writing multi-part expressions:
 <!-- ====================================================================== -->
 ## Console history
 
-As with many other command-line environments, a history of the commands that you entered is available for reuse.  Press **Up Arrow** to display the commands that you entered previously.  
+As with many other command-line environments, a history of the commands that you entered is available for reuse.  Press **Up Arrow** to display the commands that you entered previously.
 
 Similarly, autocompletion keeps a history of the commands you previously typed.  You can type the first few letters of earlier commands, and your previous choices appear in a text box.
 
@@ -164,7 +164,7 @@ To get the last 50 issues that were filed on the [Microsoft Edge Developer Tools
    'https://api.github.com/repos/microsoft/vscode-edge-devtools/issues?state=all&per_page=50&page=1'
    )).json())
    ```
-   
+
 The **Console** is a great way to practice JavaScript and to do some quick calculations.  The real power is the fact that you have access to the [window](https://developer.mozilla.org/docs/Web/API/Window) object.  See [Interact with the DOM using the Console](console-dom-interaction.md).
 
 

microsoft-edge/devtools/console/console-log.md

@@ -34,13 +34,13 @@ The `console` object has methods to log various levels of messages:
 console.log('This is a log message')
 
 // prints the text to the console as an informational message
-console.info('This is some information') 
+console.info('This is some information')
 
 // prints the text to the console as an error message
 console.error('This is an error')
 
 // prints the text to the console as a warning
-console.warn('This is a warning') 
+console.warn('This is a warning')
 ```
 
 
@@ -60,7 +60,7 @@ To try using the logging functions in the **Console**:
    ![The Console shows the messages from different log APIs](./console-log-images/console-log-examples.png)
 
    The `log()` and `info()` methods seem to do the same thing.  Use `info()` and `log()` for different log tasks, because that allows you to [filter Console messages](console-filters.md), to display only a subset of log entries.
-  
+
    The `error()` and `warn()` methods display an icon next to the message and a way to inspect the [stack trace](https://wikipedia.org/wiki/Stack_trace) of the message.
 
 1. Copy and paste any of the examples into the **Console**, and then press **Enter**.
@@ -84,9 +84,9 @@ let x = 2;
 console.log(x);
 
 // logs the name x and value of x
-console.log({x})   
+console.log({x})
 
-// logs a DOM reference  
+// logs a DOM reference
 console.log(document.querySelector('body'));
 
 // logs an Object
@@ -151,16 +151,16 @@ Use format specifiers to log certain values in different formats, and to convert
 console.log('%ix %s developer', 10, 'console');
 
 // logs PI => 3.141592653589793
-console.log(Math.PI); 
+console.log(Math.PI);
 
 // logs PI as an integer = 3
-console.log('%i', Math.PI); 
+console.log('%i', Math.PI);
 
 // logs the document body as a DOM node
-console.log('%o', document.body); 
+console.log('%o', document.body);
 
 // logs the body of the document as a JavaScript object with all properties
-console.log('%O', document.body); 
+console.log('%O', document.body);
 
 // shows the message as red and big
 console.log('%cImportant message follows','color:red;font-size:40px')
@@ -183,7 +183,7 @@ console.log('%cImportant message follows','color:red;font-size:40px')
    ```javascript
    console.log('%ix %s developer', 10, 'console'); // logs "10x console developer"
    ```
-   
+
 1. Click the expander triangles in the output results, to expand the data that's output by the above `log` statements that are in the webpage.
 
 1. If necessary, press **F5** to reload the page and re-populate the **Console** output.

microsoft-edge/devtools/console/index.md

@@ -81,7 +81,7 @@ The most popular use case for the **Console** is logging information from your s
 console.log('This is a log message');
 
 // prints the text to the console as an informational message
-console.info('This is some information'); 
+console.info('This is some information');
 
 // prints the text to the console as an error message
 console.error('This is an error');
@@ -219,7 +219,7 @@ To change the rendered webpage:
 
 
 <!-- ------------------------------ -->
-#### Using the $$ Console utility method to 
+#### Using the $$ Console utility method
 
 The **Console Utility** methods make it easy to access and manipulate the current webpage.
 

microsoft-edge/devtools/console/live-expressions.md

@@ -117,7 +117,7 @@ To use Live Expressions to avoid excessive Console log messages:
 1. Press **Ctrl+Shift+J** (Windows, Linux) or **Command+Option+J** (macOS).  The **Console** tool opens in DevTools, next to the demo webpage.
 
 1. Move your mouse around.
-   
+
    The values of the `x` and `y` variables are updated, but no log messages are displayed.
 
 1. In the **Console** tool, click the **Create live expression** (![The 'Create live expression' icon](./live-expressions-images/live-expression-icon.png)) icon next to the **Filter** text box, and then enter the JavaScript expression `x`.

microsoft-edge/devtools/console/reference.md

@@ -326,7 +326,7 @@ For more information, see [Monitor changes in JavaScript using Live Expressions]
 
 By default, the **Console** tool displays a preview of the value of an expression, as you type the JavaScript expression in the **Console**.
 
-To turn off the live preview as you type: 
+To turn off the live preview as you type:
 
 1. Click the **Console Settings** (![Console Settings icon](./reference-images/settings-button-icon.png)) button.
 

microsoft-edge/devtools/console/utilities.md

@@ -604,7 +604,7 @@ To monitor multiple events:
 You can also specify a collection of events by using one of the predefined sets of events.  The following table shows the available event types and the associated event mappings:
 
 | Event type | Corresponding mapped events |
-|:--- |:--- |
+|---|---|
 | `mouse` | "click", "dblclick", "mousedown", "mousemove", "mouseout", "mouseover", "mouseup", "mousewheel" |
 | `key` | "keydown", "keypress", "keyup", "textInput" |
 | `touch` | "touchcancel", "touchend", "touchmove", "touchstart" |