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
 

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

@@ -0,0 +1,145 @@
+import {Layout} from '../../src/Layout';
+export default Layout;
+
+export const section = 'Guides';
+export const description = 'How to build with accessibility, internationalization, and interactions.';
+
+# Quality
+
+<PageDescription>React Aria is built around three core principles: **Accessibility**, **Internationalization**, and **Interactions**. Learn how to apply these tools to build high quality UIs that work for everyone, everywhere, and on every device.</PageDescription>
+
+## Accessibility
+
+Accessible applications are usable by everyone, including people with disabilities. Accessibility benefits all users — not just those using assistive technologies — by improving efficiency, consistency, and usability.
+
+React Aria provides built-in support for screen readers and keyboard navigation, following the [WAI-ARIA](https://www.w3.org/TR/wai-aria-1.2/) and [ARIA Authoring Practices](https://www.w3.org/WAI/ARIA/apg/) guidelines. It supplies the correct semantics via ARIA roles and attributes, handles keyboard and pointer events, manages focus, and provides screen reader announcements. React Aria components are tested across a wide variety of devices, browsers, and screen readers.
+
+Be sure to create an accessible visual design with meaningful labels, sufficient [color contrast](https://www.w3.org/WAI/WCAG22/Understanding/non-text-contrast) and [hit target sizes](https://www.w3.org/WAI/WCAG22/Understanding/target-size-enhanced), visible [focus rings](https://www.w3.org/WAI/WCAG22/Understanding/focus-appearance), and respect [motion preferences](https://www.w3.org/WAI/WCAG21/Understanding/animation-from-interactions). The [WCAG guidelines](https://www.w3.org/WAI/WCAG22/Understanding/) are a good resource to reference when designing and building components with React Aria.
+
+### Labeling
+
+Most components should have a visible label, which is usually provided by rendering a `<Label>` element within it. This is associated with the component automatically.
+
+```tsx
+import {TextField, Label, Input} from 'react-aria-components';
+
+<TextField>
+  {/*- begin highlight -*/}
+  <Label>First name</Label>
+  {/*- end highlight -*/}
+  <Input />
+</TextField>
+```
+
+When a component doesn't have a visible label, it must have an [aria-label](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-label) or [aria-labelledby](https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Reference/Attributes/aria-labelledby) prop to provide an accessible name.
+
+```tsx
+import {ProgressBar} from 'react-aria-components';
+
+<ProgressBar
+  /*- begin highlight -*/
+  aria-label="Processing" />
+  /*- end highlight -*/
+```
+
+### Supported screen readers
+
+React Aria is tested across a variety of devices, browsers, and screen readers.
+
+* [VoiceOver on macOS](https://www.apple.com/accessibility/mac/vision/) in Safari and Chrome
+* [JAWS](https://www.freedomscientific.com/products/software/jaws/) on Windows in Firefox and Chrome
+* [NVDA](https://www.nvaccess.org) on Windows in Firefox and Chrome
+* [VoiceOver on iOS](https://www.apple.com/accessibility/iphone/vision/)
+* [TalkBack](https://www.android.com/accessibility/) on Android in Chrome
+
+### Automated testing
+
+Automated accessibility testing tools sometimes catch false positives in React Aria. These are documented in our [wiki](https://github.com/adobe/react-spectrum/wiki/Known-accessibility-false-positives).
+
+## Internationalization
+
+Localization is an important way to make your application usable by the widest number of people. React Aria includes localized strings for 30+ languages, handles dates and numbers in many calendar and numbering systems, and supports right-to-left interactions (e.g. keyboard navigation).
+
+Make sure your design supports right-to-left layout, and adapts to different languages (e.g. using appropriate fonts). Modern CSS grid and flex layouts are automatically mirrored depending on the direction, and [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values) can be used to adapt margins, paddings, borders, etc.
+
+### Setting the locale
+
+React Aria automatically detects the user's current language by default. Use the `I18nProvider` component to set the locale to a specific value. You should also set the `lang` and `dir` attributes on the root-most element of your application.
+
+```tsx
+import {I18nProvider, useLocale} from 'react-aria-components';
+
+<I18nProvider locale="fr-FR">
+  <App />
+</I18nProvider>
+
+function App() {
+  let {locale, direction} = useLocale();
+
+  return (
+    <html lang={locale} dir={direction}>
+      {/* your app here */}
+    </html>
+  );
+}
+```
+
+### Supported locales
+
+<ul style={{columnWidth: 200, paddingLeft: 16, fontFamily: 'adobe-clean-spectrum-vf'}}>
+  <li>Arabic (United Arab Emirates)</li>
+  <li>Bulgarian (Bulgaria)</li>
+  <li>Chinese (Simplified)</li>
+  <li>Chinese (Traditional)</li>
+  <li>Croatian (Croatia)</li>
+  <li>Czech (Czech Republic)</li>
+  <li>Danish (Denmark)</li>
+  <li>Dutch (Netherlands)</li>
+  <li>English (Great Britain)</li>
+  <li>English (United States)</li>
+  <li>Estonian (Estonia)</li>
+  <li>Finnish (Finland)</li>
+  <li>French (Canada)</li>
+  <li>French (France)</li>
+  <li>German (Germany)</li>
+  <li>Greek (Greece)</li>
+  <li>Hebrew (Israel)</li>
+  <li>Hungarian (Hungary)</li>
+  <li>Italian (Italy)</li>
+  <li>Japanese (Japan)</li>
+  <li>Korean (Korea)</li>
+  <li>Latvian (Latvia)</li>
+  <li>Lithuanian (Lithuania)</li>
+  <li>Norwegian (Norway)</li>
+  <li>Polish (Poland)</li>
+  <li>Portuguese (Brazil)</li>
+  <li>Romanian (Romania)</li>
+  <li>Russian (Russia)</li>
+  <li>Serbian (Serbia)</li>
+  <li>Slovakian (Slovakia)</li>
+  <li>Slovenian (Slovenia)</li>
+  <li>Spanish (Spain)</li>
+  <li>Swedish (Sweden)</li>
+  <li>Turkish (Turkey)</li>
+  <li>Ukrainian (Ukraine)</li>
+</ul>
+
+## Interactions
+
+Modern web apps run on everything from desktops to mobile devices to TVs, with users interacting through mouse, touch, keyboard, and assistive technologies. React Aria normalizes these differences, delivering consistent “press”, “hover”, and “focus” behaviors across all browsers and input types.
+
+React Aria components provide data attributes and render props to style these states:
+
+* `data-pressed` – like the `:active` pseudo class, but removed when the pointer is dragged off.
+* `data-hovered` – like `:hover`, but not applied on touch devices, preventing sticky hover states.
+* `data-focus-visible` – like `:focus-visible`, but not on input click or programmatic focus.
+
+These states also come with corresponding events such as `onPress` and `onHoverStart`. To use these events in your own custom components, see hooks such as [usePress](usePress.html), [useHover](useHover.html), [useMove](useMove.html), and [useFocusRing](useFocusRing.html).
+
+Read our blog post series to learn more about the intricacies behind these interactions.
+
+* [Building a Button Part 1: Press Events](blog/building-a-button-part-1.html)
+* [Building a Button Part 2: Hover Interactions](blog/building-a-button-part-2.html)
+* [Building a Button Part 3: Keyboard Focus Behavior](blog/building-a-button-part-3.html)
+
+Higher level interaction patterns such as [selection](selection.html) and [drag and drop](dnd.html) are also built on top of these low level primitives.