docs: Add Quality page

packages/dev/s2-docs/pages/react-aria/blog/introducing-react-spectrum.mdx

@@ -48,9 +48,9 @@ We're excited to announce [React Spectrum](https://react-spectrum.adobe.com/inde
 
 ## Features
 
-- ♿️ [**Accessible**](../concepts.html#accessibility) – Accessibility and behavior is implemented according to [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/), including full screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.
-- 📱 [**Adaptive**](../concepts.html#interactions) – All components are designed to work with mouse, touch, and keyboard interactions. They're built with responsive design principles to deliver a great experience, no matter the device.
-- 🌍 [**International**](../concepts.html#internationalization) – Support for more than 30 languages is included out of the box, with support for right-to-left languages, date and number formatting, and more.
+- ♿️ [**Accessible**](../quality.html#accessibility) – Accessibility and behavior is implemented according to [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/), including full screen reader and keyboard navigation support. All components have been tested across a wide variety of screen readers and devices to ensure the best experience possible for all users.
+- 📱 [**Adaptive**](../quality.html#interactions) – All components are designed to work with mouse, touch, and keyboard interactions. They're built with responsive design principles to deliver a great experience, no matter the device.
+- 🌍 [**International**](../quality.html#internationalization) – Support for more than 30 languages is included out of the box, with support for right-to-left languages, date and number formatting, and more.
 - 🎨 [**Customizable**](../../s2/styling.html) – React Spectrum automatically adapt for dark mode. For even more customizability, you can build your own components with your own DOM structure and styling using the [React Aria](../index.html) and [React Stately](https://react-spectrum.adobe.com/react-stately/index.html) hooks to provide behavior, accessibility, and interactions.
 
 Adobe is a large company with thousands of engineers working on hundreds of products, which must all meet high standards for UI consistency, accessibility, internationalization, and usability. Meeting these standards at our scale has been a challenge, and we're excited to share what we've learned with the community and raise the bar for web applications together.
@@ -79,7 +79,7 @@ React Stately can be used independently in your own components, or paired with R
 
 ### React Aria
 
-[React Aria](../index.html) implements behavior and [accessibility](../concepts.html#accessibility) for the web according to the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/). It includes full screen reader and keyboard navigation support, along with mouse and touch [interactions](../concepts.html#interactions) that have been tested across a wide variety of devices and browsers. It also implements [internationalization](../concepts.html#internationalization) for over 30 languages, with right-to-left specific behavior, localized date and number formatting, and more.
+[React Aria](../index.html) implements behavior and [accessibility](../quality.html#accessibility) for the web according to the [WAI-ARIA Authoring Practices](https://www.w3.org/TR/wai-aria-practices-1.2/). It includes full screen reader and keyboard navigation support, along with mouse and touch [interactions](../quality.html#interactions) that have been tested across a wide variety of devices and browsers. It also implements [internationalization](../quality.html#internationalization) for over 30 languages, with right-to-left specific behavior, localized date and number formatting, and more.
 
 React Aria does not contain any design system specific styling or logic. It implements event handling, accessibility, internationalization, etc. — all the parts of a component that could be shared across multiple design systems. It returns DOM props that can be spread onto the elements rendered by the component. These include semantic properties like [ARIA](https://www.w3.org/TR/wai-aria-1.2/), and event handlers. The event handlers in turn call methods on the state interface to implement the behavior for the component.
 
@@ -118,7 +118,7 @@ function Switch(props) {
 <Switch>Test</Switch>
 ```
 
-[Read more](../concepts.html) about React Aria and the problems it solves, and check out the docs to [get started](../getting-started.html) building your own design system.
+[Read more](../quality.html) about React Aria and the problems it solves, and check out the docs to [get started](../getting-started.html) building your own design system.
 
 ### React Spectrum
 

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

@@ -5,11 +5,11 @@ import docs from 'docs:react-aria-components';
 import {InlineAlert, Heading, Content} from '@react-spectrum/s2'
 
 export const section = 'Guides';
-export const description = 'Implementing collections in React Aria';
+export const description = 'How to load and render collections.';
 
 # Collections
 
-<PageDescription>Many components display a collection of items, and provide functionality such as keyboard navigation, selection, and more. React Aria has a consistent, compositional API to define the items displayed in these components.</PageDescription>
+<PageDescription>Many components display a collection of items, and provide functionality such as keyboard navigation, and selection. Learn how to load and render collections using React Aria's compositional API.</PageDescription>
 
 ## Static collections
 

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

@@ -4,11 +4,11 @@ export default Layout;
 import docs from 'docs:react-aria-components';
 
 export const section = 'Guides';
-export const description = 'Building custom component patterns';
+export const description = 'How to build custom component patterns.';
 
 # Customization
 
-React Aria Components is built using a flexible and composable API that you can extend to build new patterns. If you need even more customizability, drop down to the lower level Hook-based API for even more control over rendering and behavior. Mix and match as needed.
+<PageDescription>React Aria is built using a flexible and composable API. Learn how to use contexts and slots to create custom component patterns, or mix and match with the lower level Hook-based API for even more control over rendering and behavior.</PageDescription>
 
 ## Contexts
 

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

@@ -13,11 +13,11 @@ import {PokemonListBox} from './PokemonListBox';
 import {PokemonGridList} from './PokemonGridList';
 
 export const section = 'Guides';
-export const description = 'Implementing drag and drop in React Aria';
+export const description = 'How to implement drag and drop.';
 
 # Drag and Drop
 
-<PageDescription>Drag and drop is an intuitive way for users to transfer data between locations. React Aria implements drag and drop for mouse and touch interactions, and provides full keyboard and screen reader accessibility.</PageDescription>
+<PageDescription>React Aria collection components support drag and drop with mouse and touch interactions, and full keyboard and screen reader accessibility. Learn how to provide drag data and handle drop events to move, insert, or reorder items.</PageDescription>
 
 ## Introduction
 

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

@@ -5,11 +5,11 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2';
 
 export const section = 'Guides';
 export const tags = ['forms', 'validation'];
-export const description = 'Building accessible forms with React Aria';
+export const description = 'How to build accessible forms with validation.';
 
 # Forms
 
-<PageDescription>Forms allow users to enter and submit data, and provide them with feedback along the way. React Aria includes many components that integrate with HTML forms, with support for custom validation and styling.</PageDescription>
+<PageDescription>Learn how to integrate with HTML forms, validate and submit data, and use React Aria with form libraries.</PageDescription>
 
 ## Labels and help text
 

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

@@ -17,11 +17,11 @@ import Routers from '../../src/routers.mdx';
 
 export const section = 'Guides';
 export const tags = ['framework', 'setup', 'routing', 'ssr'];
-export const description = 'Integrate React Aria with your framework';
+export const description = 'How to integrate with your framework.';
 
 # Framework setup
 
-<PageDescription>How to integrate React Aria with your framework.</PageDescription>
+<PageDescription>Learn how to integrate React Aria with your framework.</PageDescription>
 
 <Tabs aria-label="Frameworks" density="compact">
   <TabList><Tab id="next"><Nextjs /><Text>Next.js</Text></Tab><Tab id="react-router"><ReactRouter /><Text>React Router</Text></Tab><Tab id="parcel"><Parcel /><Text>Parcel</Text></Tab><Tab id="vite"><Vite /><Text>Vite</Text></Tab><Tab id="webpack"><Webpack /><Text>webpack</Text></Tab><Tab id="rollup"><Rollup /><Text>Rollup</Text></Tab><Tab id="esbuild"><ESBuild /><Text>ESBuild</Text></Tab></TabList>

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

@@ -305,7 +305,7 @@ export const hideFromSearch = true;
     <Section className="cyan-gradient-background">
       <h2><GradientText>High quality</GradientText> <span className="bg-clip-text bg-linear-to-t from-cyan-600 to-green-600">interactions</span> <GradientText>on all devices.</GradientText></h2>
       <p className="m-0">React Aria ensures a great experience for users, no matter their device. All components are optimized for mouse, touch, keyboard, and screen reader interactions, with a meticulous attention to detail that makes your app feel responsive and natural on every platform.</p>
-      <LearnMoreLink href="interactions.html" className="text-cyan-700 dark:text-cyan-600 hover:bg-cyan-400/[15%]" />
+      <LearnMoreLink href="quality.html#interactions" className="text-cyan-700 dark:text-cyan-600 hover:bg-cyan-400/[15%]" />
 
       <PaginatedCarousel className="grid gap-4 md:gap-6 grid-cols-[repeat(4,100%)] md:grid-cols-2 md:grid-rows-2 -mx-8 md:mx-0 px-8 md:px-0 py-4 md:py-0 overflow-auto md:overflow-visible snap-x snap-mandatory no-scrollbar" paginationClassName="md:hidden">
         <Card>
@@ -347,7 +347,7 @@ export const hideFromSearch = true;
     <Section className="blue-gradient-background">
       <h2><span className="bg-clip-text bg-linear-to-b from-sky-500 to-indigo-600">Accessibility</span> <GradientText>that's truly first-class.</GradientText></h2>
       <p className="m-0">React Aria is designed with accessibility as a top priority, and battle tested in production applications. All components are built to work across a wide variety of devices and assistive technologies to ensure the best experience possible for all users.</p>
-      <LearnMoreLink href="accessibility.html" className="text-blue-600 dark:text-blue-500 hover:bg-blue-400/[15%]" />
+      <LearnMoreLink href="quality.html#accessibility" className="text-blue-600 dark:text-blue-500 hover:bg-blue-400/[15%]" />
 
       <div className="grid gap-y-6 gap-x-20 md:grid-cols-[min-content_auto] md:grid-flow-col place-items-center">
         <div className="w-full max-w-xs md:w-auto md:max-w-none md:row-span-3 md:h-full aspect-1/2 iphone-frame md:order-4">
@@ -376,7 +376,7 @@ export const hideFromSearch = true;
     <Section className="orange-gradient-background">
       <h2><GradientText>Ready for an</GradientText> <span className="bg-clip-text bg-linear-to-b from-yellow-500 to-orange-600">international</span> <GradientText>audience.</GradientText></h2>
       <p className="m-0">React Aria is engineered for internationalization out of the box, including translations in over 30 languages, localized date and number formatting and parsing, support for 13 calendar systems, 5 numbering systems, right-to-left layout, and more.</p>
-      <LearnMoreLink href="internationalization.html" className="text-orange-700 dark:text-orange-600 hover:bg-orange-400/[15%]" />
+      <LearnMoreLink href="quality.html#internationalization" className="text-orange-700 dark:text-orange-600 hover:bg-orange-400/[15%]" />
       <I18n />
     </Section>
 

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

@@ -5,12 +5,12 @@ import {Link} from '@react-spectrum/s2';
 export default Layout;
 
 export const section = 'Guides';
-export const description = 'MCP Server for React Aria';
+export const description = 'How to use the React Aria MCP Server.';
 export const tags = ['mcp', 'ai', 'documentation', 'tools'];
 
 # MCP Server
 
-The `@react-spectrum/mcp` package allows you to run [Model Context Protocol (MCP)](https://modelcontextprotocol.io/docs/getting-started/intro) servers for React Aria locally. It exposes a set of tools that MCP clients can discover and call to browse the docs.
+<PageDescription>Learn how to use the React Aria [MCP](https://modelcontextprotocol.io/docs/getting-started/intro) server to help AI agents browse the documentation.</PageDescription>
 
 ## Using with an MCP client