docs: S2 docs high priority fixes from testing

packages/dev/s2-docs/pages/index.mdx

@@ -4,6 +4,7 @@ export default Layout;
 
 export const section = 'Getting started';
 export const hideNav = true;
+export const hideFromSearch = true;
 
 <WelcomeHeader />
 

packages/dev/s2-docs/pages/react-aria/GridList.mdx

@@ -412,7 +412,7 @@ function AsyncLoadingExample() {
 
 ### Links
 
-Use the `href` prop on a `<GridListItem>` to create a link. See the **client side routing guide** to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection.html?component=GridList#selection-behavior) for more details.
+Use the `href` prop on a `<GridListItem>` to create a link. See the [framework setup guide](frameworks.html) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection.html?component=GridList#selection-behavior) for more details.
 
 ```tsx render docs={docs.exports.GridList} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Links', selectionMode: 'multiple'}} wide
 "use client";

packages/dev/s2-docs/pages/react-aria/ListBox.mdx

@@ -192,7 +192,7 @@ function AsyncLoadingExample() {
 
 ### Links
 
-Use the `href` prop on a `<ListBoxItem>` to create a link. See the **client side routing guide** to learn how to integrate with your framework.
+Use the `href` prop on a `<ListBoxItem>` to create a link. See the [framework setup guide](frameworks.html) to learn how to integrate with your framework.
 
 By default, link items in a ListBox are not selectable, and only perform navigation when the user interacts with them. However, with `selectionBehavior="replace"`, items will be selected when single clicking or pressing the <Keyboard>Space</Keyboard> key, and navigate to the link when double clicking or pressing the <Keyboard>Enter</Keyboard> key.
 

packages/dev/s2-docs/pages/react-aria/Menu.mdx

@@ -299,7 +299,7 @@ import {Button} from 'vanilla-starter/Button';
 
 ### Links
 
-Use the `href` prop on a `<MenuItem>` to create a link. See the **client side routing guide** to learn how to integrate with your framework.
+Use the `href` prop on a `<MenuItem>` to create a link. See the [framework setup guide](frameworks.html) to learn how to integrate with your framework.
 
 ```tsx render hideImports
 "use client";

packages/dev/s2-docs/pages/react-aria/Table.mdx

@@ -255,7 +255,7 @@ function AsyncSortTable() {
 
 ### Links
 
-Use the `href` prop on a `<Row>` to create a link. See the **client side routing guide** to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection.html) for more details.
+Use the `href` prop on a `<Row>` to create a link. See the [framework setup guide](frameworks.html) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection.html) for more details.
 
 ```tsx render docs={docs.exports.ListBox} links={docs.links} props={['selectionBehavior']} initialProps={{'aria-label': 'Bookmarks', selectionMode: 'multiple'}} wide
 "use client";

packages/dev/s2-docs/pages/react-aria/Tabs.mdx

@@ -175,7 +175,7 @@ function Example() {
 
 ### Links
 
-Use the `href` prop on a `<Tab>` to create a link. See the **client side routing guide** to learn how to integrate with your framework. This example uses a simple hash-based router to sync the selected tab to the URL.
+Use the `href` prop on a `<Tab>` to create a link. See the [framework setup guide](frameworks.html) to learn how to integrate with your framework. This example uses a simple hash-based router to sync the selected tab to the URL.
 
 ```tsx render
 "use client";

packages/dev/s2-docs/pages/react-aria/TagGroup.mdx

@@ -75,7 +75,7 @@ function Example() {
 
 ### Links
 
-Use the `href` prop on a `<Tag>` to create a link. See the **client side routing guide** to learn how to integrate with your framework.
+Use the `href` prop on a `<Tag>` to create a link. See the [framework setup guide](frameworks.html) to learn how to integrate with your framework.
 
 ```tsx render
 "use client";

packages/dev/s2-docs/pages/react-aria/Tree.mdx

@@ -184,7 +184,7 @@ function AsyncLoadingExample() {
 
 ### Links
 
-Use the `href` prop on a `<TreeItem>` to create a link. See the **client side routing guide** to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection.html?component=Tree#selection-behavior) for more details.
+Use the `href` prop on a `<TreeItem>` to create a link. See the [framework setup guide](frameworks.html) to learn how to integrate with your framework. Link interactions vary depending on the selection behavior. See the [selection guide](selection.html?component=Tree#selection-behavior) for more details.
 
 ```tsx render docs={docs.exports.Tree} links={docs.links} props={['selectionBehavior']} initialProps={{selectionMode: 'multiple'}} wide
 "use client";

packages/dev/s2-docs/pages/react-aria/blog/accessible-color-descriptions.mdx

@@ -39,7 +39,7 @@ Accessibility is at the core of all of our work on the React Spectrum team, and
 
 Our initial implementation followed the typical ARIA patterns such as [slider](https://www.w3.org/WAI/ARIA/apg/patterns/slider/) to implement ColorArea, ColorSlider, and ColorWheel, and [listbox](https://www.w3.org/WAI/ARIA/apg/patterns/listbox/) to implement ColorSwatchPicker. This provided good support for mouse, touch, and keyboard input, but the screen reader experience left something to be desired. Out of the box, screen readers would only announce raw channel values like “Red: 182, Green: 96, Blue: 38”. I don’t know about you, but I can’t imagine what color that is just by hearing those numbers!
 
-<video src={initialVideoUrl} style={{width: '100%', display: 'block', margin: '20px auto'}} controls preload="metadata" />
+<video src={initialVideoUrl + '#t=0.1'} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" aria-label="Demo of VoiceOver announcement in ColorArea before improvements" />
 
 ## Improving screen reader announcements
 
@@ -167,6 +167,6 @@ After developing this algorithm to generate color descriptions, we integrated it
 
 The video below shows interacting with a ColorArea with color descriptions. You can also try it yourself with a screen reader in the example above.
 
-<video src={finalVideoUrl} style={{width: '100%', display: 'block', margin: '20px auto'}} controls preload="metadata" />
+<video src={finalVideoUrl + '#t=0.1'} style={{maxWidth: 'min(100%, 700px)', display: 'block', margin: '20px auto'}} controls preload="metadata" aria-label="Demo of VoiceOver announcement in ColorArea after improvements" />
 
 Check out our [ColorPicker](../ColorPicker.html) components in React Aria to build accessible, customizable, and styleable color pickers in your own applications.

packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-1.mdx

@@ -64,7 +64,7 @@ Mobile browsers often introduce delays before emulated mouse events like onClick
 
 The CSS `:active` and `:hover` pseudo-classes are also affected by mouse event emulation. For example, when tapping down on a button and dragging your finger off, the active state persists even when your finger is not over it. This makes it appear like lifting your finger will activate the button when it will not. This is not how native buttons behave, so it can feel inconsistent with user expectations.
 
-<video src={draggingVideoUrl} style={{width: '100%', display: 'block', margin: '20px auto'}} controls preload="metadata" />
+<video src={draggingVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 ## Pointer events
 
@@ -84,7 +84,7 @@ Touch events can also be canceled by scrolling. If you touch a button and then s
 
 Text selection gestures are another case where we need to determine the user's intent. On iOS, for example, a long press begins text selection. However, when pressing a button, you wouldn't usually expect text selection to start.
 
-<video src={textSelectionVideoUrl} style={{width: '100%', display: 'block', margin: '20px auto'}} controls preload="metadata" />
+<video src={textSelectionVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 It is possible to add the `user-select: none` CSS property to the button to make it non-selectable, but even with that enabled, Safari still tries to select elements nearby. The only way to avoid this is to add `user-select: none` to the entire page. We wouldn't want to do this all the time though, because some elements should allow text selection to occur. React Aria automatically handles adding `user-select: none` to the page on touch start on a pressable element, and removes it after a short delay on press up. The delay is necessary because iOS may begin selecting even after touch up within some threshold.
 
@@ -108,7 +108,7 @@ Each of these events receive a unified `PressEvent` object rather than the under
 
 With the [usePress](../usePress.html) hook, our buttons handle interactions consistently. Dragging your pointer off the button correctly removes the active state, text selection is canceled, and issues with emulated mouse events are avoided.
 
-<video src={buttonVideoUrl} style={{width: '100%', display: 'block', margin: '20px auto'}} controls preload="metadata" />
+<video src={buttonVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
 
 Try a live example for yourself in our [Button](../../s2/Button.html) docs!
 

packages/dev/s2-docs/pages/react-aria/blog/building-a-button-part-3.mdx

@@ -45,7 +45,7 @@ There are many aspects of focus management, and perhaps we will cover more in fu
 
 An important feature for keyboard users is a **focus ring**. This is a visual affordance for the currently focused element, which allows a keyboard user to know which element they are currently on. It may only be visible when navigating with a keyboard, however, so as not to distract mouse and touchscreen users.
 
-<video src={focusRingVideoUrl} loop autoPlay muted style={{width: '100%', display: 'block', margin: '20px auto'}} />
+<video src={focusRingVideoUrl} loop autoPlay muted style={{maxWidth: 'min(100%, 640px)', display: 'block', margin: '20px auto'}} />
 
 As you can see in the above video, the focus ring appears around each button when it receives keyboard focus, but when the user interacts with a mouse it does not appear. To implement this, we attach global event listeners for pointer, keyboard, and focus events at the document level and keep track of the most recent input modality that the user was interacting with. If the user most recently interacted with a keyboard or assistive technology, we show the focus ring, otherwise we do not show it.