[pull] main from adobe:main

packages/@react-aria/test-utils/src/index.ts

@@ -14,5 +14,16 @@ export {triggerLongPress} from './events';
 export {installMouseEvent, installPointerEvent} from './testSetup';
 export {pointerMap} from './userEventMaps';
 export {User} from './user';
+export type {CheckboxGroupTester} from './checkboxgroup';
+export type {ComboBoxTester} from './combobox';
+export type {DialogTester} from './dialog';
+export type {GridListTester} from './gridlist';
+export type {ListBoxTester} from './listbox';
+export type {MenuTester} from './menu';
+export type {RadioGroupTester} from './radiogroup';
+export type {SelectTester} from './select';
+export type {TableTester} from './table';
+export type {TabsTester} from './tabs';
+export type {TreeTester} from './tree';
 
 export type {UserOpts} from './types';

packages/@react-spectrum/checkbox/docs/CheckboxGroup.mdx

@@ -11,8 +11,9 @@ import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/checkbox';
+import checkboxgroupUtil from 'docs:@react-aria/test-utils/src/checkboxgroup.ts';
 import packageData from '@react-spectrum/checkbox/package.json';
-import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
+import {HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs';
 
 ```jsx import
  import {Checkbox, CheckboxGroup} from '@react-spectrum/checkbox';
@@ -332,3 +333,43 @@ See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/
   <Checkbox value="basketball">Basketball</Checkbox>
 </CheckboxGroup>
 ```
+
+## Testing
+
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+
+`@react-spectrum/test-utils` offers common checkbox group interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
+in your tests. Below is the full definition of the checkbox group tester and a sample of how you could use it in your test suite.
+
+```ts
+// CheckboxGroup.test.ts
+import {render} from '@testing-library/react';
+import {theme} from '@react-spectrum/theme-default';
+import {User} from '@react-spectrum/test-utils';
+
+let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});
+// ...
+
+it('CheckboxGroup can select multiple checkboxes', async function () {
+  // Render your test component/app and initialize the checkbox group tester
+  let {getByTestId} = render(
+    <Provider theme={defaultTheme}>
+      <CheckboxGroup data-testid="test-checkboxgroup">
+      ...
+      </CheckboxGroup>
+    </Provider>
+  );
+  let checkboxGroupTester = testUtilUser.createTester('CheckboxGroup', {root: getByTestId('test-checkboxgroup')});
+  expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(0);
+
+  await checkboxGroupTester.toggleCheckbox({checkbox: 0});
+  expect(checkboxGroupTester.checkboxes[0]).toBeChecked();
+  expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(1);
+
+  await checkboxGroupTester.toggleCheckbox({checkbox: 4});
+  expect(checkboxGroupTester.checkboxes[4]).toBeChecked();
+  expect(checkboxGroupTester.selectedCheckboxes).toHaveLength(2);
+});
+```
+
+<ClassAPI links={checkboxgroupUtil.links} class={checkboxgroupUtil.exports.CheckboxGroupTester} />

packages/@react-spectrum/combobox/docs/ComboBox.mdx

@@ -996,7 +996,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common combobox interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common combobox interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the combobox tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/dialog/docs/Dialog.mdx

@@ -12,7 +12,8 @@ export default Layout;
 
 import DialogAnatomy from './images/DialogAnatomy.svg';
 import docs from 'docs:@react-spectrum/dialog';
-import {Image, HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
+import dialogUtil from 'docs:@react-aria/test-utils/src/dialog.ts';
+import {Image, HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs';
 import packageData from '@react-spectrum/dialog/package.json';
 import styles from '@react-spectrum/docs/src/docs.css';
 
@@ -398,3 +399,43 @@ respectively for container sizing considerations. Modal sizes on mobile devices
   )}
 </DialogTrigger>
 ```
+
+## Testing
+
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+
+`@react-spectrum/test-utils` offers common dialog interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
+in your tests. Below is the full definition of the dialog tester and a sample of how you could use it in your test suite.
+
+```ts
+// Dialog.test.ts
+import {render} from '@testing-library/react';
+import {theme} from '@react-spectrum/theme-default';
+import {User} from '@react-spectrum/test-utils';
+
+let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});
+// ...
+
+it('Dialog can be opened and closed', async function () {
+  // Render your test component/app and initialize the dialog tester
+  let {getByTestId, getByRole} = render(
+    <Provider theme={defaultTheme}>
+      <DialogTrigger>
+        <ActionButton>Trigger</ActionButton>
+        <Dialog>
+          ...
+        </Dialog>
+      </DialogTrigger>
+    </Provider>
+  );
+  let button = getByRole('button');
+  let dialogTester = testUtilUser.createTester('Dialog', {root: button, overlayType: 'modal'});
+  await dialogTester.open();
+  let dialog = dialogTester.dialog;
+  expect(dialog).toBeVisible();
+  await dialogTester.close();
+  expect(dialog).not.toBeInTheDocument();
+});
+```
+
+<ClassAPI links={dialogUtil.links} class={dialogUtil.exports.DialogTester} />

packages/@react-spectrum/list/docs/ListView.mdx

@@ -1195,7 +1195,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common gridlist interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common gridlist interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the gridlist tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/listbox/docs/ListBox.mdx

@@ -413,7 +413,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common listbox interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common listbox interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the listbox tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/menu/docs/MenuTrigger.mdx

@@ -260,7 +260,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common menu interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common menu interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the menu tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/picker/docs/Picker.mdx

@@ -592,7 +592,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common select interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common select interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the select tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/radio/docs/RadioGroup.mdx

@@ -11,8 +11,9 @@ import {Layout} from '@react-spectrum/docs';
 export default Layout;
 
 import docs from 'docs:@react-spectrum/radio';
+import radiogroupUtil from 'docs:@react-aria/test-utils/src/radiogroup.ts';
 import packageData from '@react-spectrum/radio/package.json';
-import {HeaderInfo, PropTable, PageDescription} from '@react-spectrum/docs';
+import {HeaderInfo, PropTable, PageDescription, VersionBadge, ClassAPI} from '@react-spectrum/docs';
 
 ```jsx import
 import {Radio, RadioGroup} from '@react-spectrum/radio';
@@ -306,3 +307,43 @@ See the [MDN docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/
   <Radio value="dragon">Dragon</Radio>
 </RadioGroup>
 ```
+
+## Testing
+
+### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
+
+`@react-spectrum/test-utils` offers common radio group interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
+in your tests. Below is the full definition of the radio group tester and a sample of how you could use it in your test suite.
+
+```ts
+// RadioGroup.test.ts
+import {render} from '@testing-library/react';
+import {theme} from '@react-spectrum/theme-default';
+import {User} from '@react-spectrum/test-utils';
+
+let testUtilUser = new User({interactionType: 'mouse', advanceTimer: jest.advanceTimersByTime});
+// ...
+
+it('RadioGroup can switch the selected radio', async function () {
+  // Render your test component/app and initialize the radiogroup tester
+  let {getByRole} = render(
+    <Provider theme={defaultTheme}>
+      <RadioGroup>
+        ...
+      </RadioGroup>
+    </Provider>
+  );
+
+  let radioGroupTester = testUtilUser.createTester('RadioGroup', {root: getByRole('radiogroup')});
+  let radios = radioGroupTester.radios;
+  expect(radioGroupTester.selectedRadio).toBeFalsy();
+
+  await radioGroupTester.triggerRadio({radio: radios[0]});
+  expect(radioGroupTester.selectedRadio).toBe(radios[0]);
+
+  await radioGroupTester.triggerRadio({radio: radios[1]});
+  expect(radioGroupTester.selectedRadio).toBe(radios[1]);
+});
+```
+
+<ClassAPI links={radiogroupUtil.links} class={radiogroupUtil.exports.RadioGroupTester} />

packages/@react-spectrum/s2/src/Accordion.tsx

@@ -55,7 +55,7 @@ const accordion = style({
 export const AccordionContext = createContext<ContextValue<Partial<AccordionProps>, DOMRefValue<HTMLDivElement>>>(null);
 
 /**
- * An accordion is a container for multiple disclosures.
+ * An accordion is a container for multiple accordion items.
  */
 export const Accordion = forwardRef(function Accordion(props: AccordionProps, ref: DOMRef<HTMLDivElement>) {
   [props, ref] = useSpectrumContextProps(props, ref, AccordionContext);

packages/@react-spectrum/s2/style/__tests__/style-macro.test.js

@@ -173,6 +173,23 @@ describe('style-macro', () => {
     expect(js({}, overrides)).toMatchInlineSnapshot('"  Tm12 Qm12 Sm12 Rm12"');
   });
 
+  it('should support allowed overrides for fontSize', () => {
+    let {js} = testStyle(
+      {
+        fontSize: 'heading-3xl'
+      },
+      ['fontSize']
+    );
+
+    let {js: overrides} = testStyle({
+      fontSize: 'ui-xs'
+    });
+
+    expect(js()).toMatchInlineSnapshot('"  -_6BNtrc-woabcc12 vx12"');
+    expect(overrides).toMatchInlineSnapshot('" -_6BNtrc-a12 vx12"');
+    expect(js({}, overrides)).toMatchInlineSnapshot('"  -_6BNtrc-a12 vx12"');
+  });
+
   it("should support allowed overrides for values that aren't defined", () => {
     let {js} = testStyle(
       {

packages/@react-spectrum/s2/style/spectrum-theme.ts

@@ -757,7 +757,7 @@ export const style = createTheme({
       },
       code: 'source-code-pro, "Source Code Pro", Monaco, monospace'
     },
-    fontSize: new ExpandedProperty<keyof typeof fontSize>(['fontSize', 'lineHeight'], (value) => {
+    fontSize: new ExpandedProperty<keyof typeof fontSize>(['--fs', 'fontSize'], (value) => {
       if (typeof value === 'number') {
         return {
           '--fs': `pow(1.125, ${value})`,

packages/@react-spectrum/table/docs/TableView.mdx

@@ -1964,7 +1964,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common table interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common table interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the table tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/tabs/docs/Tabs.mdx

@@ -639,7 +639,7 @@ Tabs features automatic tab collapse behavior and may need specific mocks to tes
 [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/326f48154e301edab425c8198c5c3af72422462b/packages/%40react-spectrum/tabs/test/Tabs.test.js#L58-L62) if you
 run into any issues with your tests.
 
-`@react-spectrum/test-utils` offers common tabs interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common tabs interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the tabs tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/@react-spectrum/tree/docs/TreeView.mdx

@@ -533,7 +533,7 @@ isn't sufficient when resolving issues in your own test cases.
 
 ### Test utils <VersionBadge version="beta" style={{marginLeft: 4, verticalAlign: 'bottom'}} />
 
-`@react-spectrum/test-utils` offers common tree interaction utilities which you may find helpful when writing tests. See [here](../react-aria/testing.html#react-aria-test-utils) for more information on how to setup these utilities
+`@react-spectrum/test-utils` offers common tree interaction utilities which you may find helpful when writing tests. See [here](./testing.html#react-spectrum-test-utils) for more information on how to setup these utilities
 in your tests. Below is the full definition of the tree tester and a sample of how you could use it in your test suite.
 
 ```ts

packages/dev/docs/pages/react-aria/components.mdx

@@ -167,7 +167,7 @@ order: 5
 <ExampleCard
   url="Tree.html"
   title="Tree"
-  description="A tree displays heirarchical data with selection and collapsing.">
+  description="A tree displays hierarchical data with selection and collapsing.">
   <Tree />
 </ExampleCard>
 

packages/dev/docs/pages/react-aria/testing.mdx

@@ -201,14 +201,20 @@ See below for the full definition of the `User` object.
 Below is a list of the ARIA patterns testers currently supported by `createTester`. See the accompanying component testing docs pages for a sample of how to use
 the testers in your test suite.
 
+-  [CheckboxGroup](CheckboxGroup.html#test-utils)
+
 -  [ComboBox](ComboBox.html#test-utils)
 
+-  [Dialog](Dialog.html#test-utils)
+
 -  [GridList](GridList.html#test-utils)
 
 -  [ListBox](ListBox.html#test-utils)
 
 -  [Menu](Menu.html#test-utils)
 
+-  [RadioGroup](RadioGroup.html#test-utils)
+
 -  [Select](Select.html#test-utils)
 
 -  [Table](Table.html#test-utils)

packages/dev/docs/pages/react-spectrum/index.mdx

@@ -231,7 +231,7 @@ A React implementation of Spectrum, Adobe’s design system.
 <ExampleCard
   url="TreeView.html"
   title="TreeView"
-  description="A tree view displays heirarchical data with selection and collapsing.">
+  description="A tree view displays hierarchical data with selection and collapsing.">
   <Tree />
 </ExampleCard>
 

packages/dev/docs/pages/react-spectrum/testing.mdx

@@ -395,14 +395,20 @@ See below for the full definition of the `User` object.
 Below is a list of the ARIA patterns testers currently supported by `createTester`. See the accompanying component testing docs pages for a sample of how to use
 the testers in your test suite.
 
+-  [CheckboxGroup](CheckboxGroup.html#test-utils)
+
 -  [ComboBox](ComboBox.html#test-utils)
 
+-  [Dialog](Dialog.html#test-utils)
+
 -  [ListView](ListView.html#test-utils)
 
 -  [ListBox](ListBox.html#test-utils)
 
 -  [MenuTrigger](MenuTrigger.html#test-utils)
 
+-  [RadioGroup](RadioGroup.html#test-utils)
+
 -  [Picker](Picker.html#test-utils)
 
 -  [TableView](TableView.html#test-utils)

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 description = 'Adobe\'s collection of libraries and tools for building adaptive, accessible, and robust user experiences.';
 export const hideFromSearch = true;
 
 <WelcomeHeader />

packages/dev/s2-docs/pages/internationalized/date/Calendar.mdx

@@ -15,6 +15,7 @@ import {StaticTable} from '../../../src/StaticTable';
 
 export const section = 'Date and Time';
 export const group = 'Internationalized';
+export const description = 'Calendar systems for international date calculations.';
 
 # Calendar
 

packages/dev/s2-docs/pages/internationalized/date/CalendarDate.mdx

@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
 export const group = 'Internationalized';
+export const description = 'A date without time in a specific calendar system.';
 
 # CalendarDate
 

packages/dev/s2-docs/pages/internationalized/date/CalendarDateTime.mdx

@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
 export const group = 'Internationalized';
+export const description = 'A date and time without a time zone.';
 
 # CalendarDateTime
 

packages/dev/s2-docs/pages/internationalized/date/DateFormatter.mdx

@@ -14,6 +14,7 @@ import docs from 'docs:@internationalized/date';
 
 export const section = 'Date and Time';
 export const group = 'Internationalized';
+export const description = 'Provides locale-aware date formatting with browser bug fixes.';
 
 # DateFormatter