From ac027602d0cb4185c5b44a380ca483a9491b9a33 Mon Sep 17 00:00:00 2001 From: Reid Barber Date: Tue, 2 Dec 2025 20:25:24 -0600 Subject: [PATCH 1/2] docs: S2 docs testing fixes (12/1/25) (#9268) * sort cards in alphabetically by name * fix asterisk color on props table * fix props table first column wrapping * remove testing pages from search results * update testing page link names * prevent duplicate ToastContainers * try disabling minification of html * Revert "try disabling minification of html" This reverts commit da60c7dd9fb7967d93e9db98fcff633a973992b8. * Revert "Revert "try disabling minification of html"" This reverts commit 0d6015a9404c2cce8bd9172d5423da1611531c2e. --- packages/dev/s2-docs/.parcelrc-s2-docs | 3 +++ .../dev/s2-docs/pages/react-aria/CheckboxGroup.mdx | 2 +- .../pages/react-aria/CheckboxGroup/testing.mdx | 1 + packages/dev/s2-docs/pages/react-aria/ComboBox.mdx | 2 +- .../s2-docs/pages/react-aria/ComboBox/testing.mdx | 1 + packages/dev/s2-docs/pages/react-aria/GridList.mdx | 2 +- .../s2-docs/pages/react-aria/GridList/testing.mdx | 1 + packages/dev/s2-docs/pages/react-aria/ListBox.mdx | 2 +- .../s2-docs/pages/react-aria/ListBox/testing.mdx | 1 + packages/dev/s2-docs/pages/react-aria/Menu.mdx | 2 +- .../dev/s2-docs/pages/react-aria/Menu/testing.mdx | 1 + .../dev/s2-docs/pages/react-aria/RadioGroup.mdx | 2 +- .../s2-docs/pages/react-aria/RadioGroup/testing.mdx | 1 + packages/dev/s2-docs/pages/react-aria/Select.mdx | 2 +- .../dev/s2-docs/pages/react-aria/Select/testing.mdx | 1 + packages/dev/s2-docs/pages/react-aria/Table.mdx | 2 +- .../dev/s2-docs/pages/react-aria/Table/testing.mdx | 1 + packages/dev/s2-docs/pages/react-aria/Tabs.mdx | 2 +- .../dev/s2-docs/pages/react-aria/Tabs/testing.mdx | 1 + packages/dev/s2-docs/pages/react-aria/Tree.mdx | 2 +- .../dev/s2-docs/pages/react-aria/Tree/testing.mdx | 1 + packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx | 2 +- .../dev/s2-docs/pages/s2/CheckboxGroup/testing.mdx | 1 + packages/dev/s2-docs/pages/s2/ComboBox.mdx | 2 +- packages/dev/s2-docs/pages/s2/ComboBox/testing.mdx | 1 + packages/dev/s2-docs/pages/s2/Dialog.mdx | 2 +- packages/dev/s2-docs/pages/s2/Dialog/testing.mdx | 1 + packages/dev/s2-docs/pages/s2/Menu.mdx | 2 +- packages/dev/s2-docs/pages/s2/Menu/testing.mdx | 1 + packages/dev/s2-docs/pages/s2/Picker.mdx | 2 +- packages/dev/s2-docs/pages/s2/Picker/testing.mdx | 1 + packages/dev/s2-docs/pages/s2/ProgressCircle.mdx | 2 +- packages/dev/s2-docs/pages/s2/RadioGroup.mdx | 2 +- .../dev/s2-docs/pages/s2/RadioGroup/testing.mdx | 1 + packages/dev/s2-docs/pages/s2/TableView.mdx | 2 +- packages/dev/s2-docs/pages/s2/TableView/testing.mdx | 1 + packages/dev/s2-docs/pages/s2/Tabs.mdx | 2 +- packages/dev/s2-docs/pages/s2/Tabs/testing.mdx | 1 + packages/dev/s2-docs/pages/s2/TreeView.mdx | 2 +- packages/dev/s2-docs/pages/s2/TreeView/testing.mdx | 1 + packages/dev/s2-docs/src/Layout.tsx | 3 ++- packages/dev/s2-docs/src/PropTable.tsx | 13 +++++++++++-- packages/dev/s2-docs/src/searchUtils.tsx | 3 ++- packages/dev/s2-docs/src/types.tsx | 11 ++++++++++- 44 files changed, 67 insertions(+), 25 deletions(-) diff --git a/packages/dev/s2-docs/.parcelrc-s2-docs b/packages/dev/s2-docs/.parcelrc-s2-docs index 5a95c73d857..3eaac5aa769 100644 --- a/packages/dev/s2-docs/.parcelrc-s2-docs +++ b/packages/dev/s2-docs/.parcelrc-s2-docs @@ -1,6 +1,9 @@ { "extends": "@parcel/config-default", "resolvers": ["@react-aria/parcel-resolver-optimize-locales", "@parcel/resolver-glob", "./S2DocsResolver", "parcel-resolver-docs", "..."], + "optimizers": { + "*.html": [] + }, "transformers": { "docs:*.{js,ts,tsx,json}": ["parcel-transformer-docs", "@parcel/transformer-inline"], "docs-json:*.{js,ts,tsx,json}": ["parcel-transformer-docs"], diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx index 962d178a8ab..45800bf168f 100644 --- a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup.mdx @@ -10,7 +10,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['input']; export const relatedPages = [ {title: 'useCheckboxGroup', url: 'https://react-spectrum.adobe.com/react-aria/useCheckboxGroup.html'}, - {title: 'Testing', url: './CheckboxGroup/testing'} + {title: 'Testing CheckboxGroup', url: './CheckboxGroup/testing'} ]; export const description = 'Allows a user to select multiple items from a list of options.'; diff --git a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/testing.mdx b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/testing.mdx index 2841f7a2984..0a1ba3fb395 100644 --- a/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/testing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/CheckboxGroup/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'checkboxgroup', 'test-utils']; export const description = 'Testing CheckboxGroup with React Aria test utils'; diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx index 3d6723170d2..82f43af6638 100644 --- a/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox.mdx @@ -11,7 +11,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['autocomplete', 'search', 'typeahead', 'input']; export const relatedPages = [ {title: 'useComboBox', url: 'https://react-spectrum.adobe.com/react-aria/useComboBox.html'}, - {title: 'Testing', url: './ComboBox/testing'} + {title: 'Testing ComboBox', url: './ComboBox/testing'} ]; export const description = 'Combines a text input with a listbox, allowing users to filter a list of options to items matching a query.'; diff --git a/packages/dev/s2-docs/pages/react-aria/ComboBox/testing.mdx b/packages/dev/s2-docs/pages/react-aria/ComboBox/testing.mdx index ef1a3389f35..8b99587290b 100644 --- a/packages/dev/s2-docs/pages/react-aria/ComboBox/testing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ComboBox/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'combobox', 'test-utils']; export const description = 'Testing ComboBox with React Aria test utils'; diff --git a/packages/dev/s2-docs/pages/react-aria/GridList.mdx b/packages/dev/s2-docs/pages/react-aria/GridList.mdx index 72df160cfaa..096e79ce1ee 100644 --- a/packages/dev/s2-docs/pages/react-aria/GridList.mdx +++ b/packages/dev/s2-docs/pages/react-aria/GridList.mdx @@ -11,7 +11,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['list view']; export const relatedPages = [ {title: 'useGridList', url: 'https://react-spectrum.adobe.com/react-aria/useGridList.html'}, - {title: 'Testing', url: './GridList/testing'} + {title: 'Testing GridList', url: './GridList/testing'} ]; export const description = 'Displays a list of interactive items, with support for keyboard navigation, selection, and actions.'; diff --git a/packages/dev/s2-docs/pages/react-aria/GridList/testing.mdx b/packages/dev/s2-docs/pages/react-aria/GridList/testing.mdx index 6f6418b3ada..f5d51f7a2ac 100644 --- a/packages/dev/s2-docs/pages/react-aria/GridList/testing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/GridList/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'gridlist', 'test-utils']; export const description = 'Testing GridList with React Aria test utils'; diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx index f974458eb4c..92bc72a2e00 100644 --- a/packages/dev/s2-docs/pages/react-aria/ListBox.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ListBox.mdx @@ -11,7 +11,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['options']; export const relatedPages = [ {title: 'useListBox', url: 'https://react-spectrum.adobe.com/react-aria/useListBox.html'}, - {title: 'Testing', url: './ListBox/testing'} + {title: 'Testing ListBox', url: './ListBox/testing'} ]; export const description = 'Displays a list of options and allows a user to select one or more of them.'; diff --git a/packages/dev/s2-docs/pages/react-aria/ListBox/testing.mdx b/packages/dev/s2-docs/pages/react-aria/ListBox/testing.mdx index 2c66eefd80f..d38310ca6a1 100644 --- a/packages/dev/s2-docs/pages/react-aria/ListBox/testing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/ListBox/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'listbox', 'test-utils']; export const description = 'Testing ListBox with React Aria test utils'; diff --git a/packages/dev/s2-docs/pages/react-aria/Menu.mdx b/packages/dev/s2-docs/pages/react-aria/Menu.mdx index 1c511bfa4b0..65df5f748d7 100644 --- a/packages/dev/s2-docs/pages/react-aria/Menu.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Menu.mdx @@ -9,7 +9,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['dropdown']; export const relatedPages = [ {title: 'useMenu', url: 'https://react-spectrum.adobe.com/react-aria/useMenu.html'}, - {title: 'Testing', url: './Menu/testing'} + {title: 'Testing Menu', url: './Menu/testing'} ]; export const description = 'Displays a list of actions or options that a user can choose.'; diff --git a/packages/dev/s2-docs/pages/react-aria/Menu/testing.mdx b/packages/dev/s2-docs/pages/react-aria/Menu/testing.mdx index ee49dd1d4d8..7ff518d3f7e 100644 --- a/packages/dev/s2-docs/pages/react-aria/Menu/testing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Menu/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'menu', 'test-utils']; export const description = 'Testing Menu with React Aria test utils'; diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx index 318e93ef4c5..a6f56422e71 100644 --- a/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup.mdx @@ -10,7 +10,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['input']; export const relatedPages = [ {title: 'useRadioGroup', url: 'https://react-spectrum.adobe.com/react-aria/useRadioGroup.html'}, - {title: 'Testing', url: './RadioGroup/testing'} + {title: 'Testing RadioGroup', url: './RadioGroup/testing'} ]; export const description = 'Allows a user to select a single item from a list of mutually exclusive options.'; diff --git a/packages/dev/s2-docs/pages/react-aria/RadioGroup/testing.mdx b/packages/dev/s2-docs/pages/react-aria/RadioGroup/testing.mdx index cc9413467c3..bc818613d62 100644 --- a/packages/dev/s2-docs/pages/react-aria/RadioGroup/testing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/RadioGroup/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'radiogroup', 'test-utils']; export const description = 'Testing RadioGroup with React Aria test utils'; diff --git a/packages/dev/s2-docs/pages/react-aria/Select.mdx b/packages/dev/s2-docs/pages/react-aria/Select.mdx index 8724009d5d8..bebd937e869 100644 --- a/packages/dev/s2-docs/pages/react-aria/Select.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Select.mdx @@ -10,7 +10,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['picker', 'dropdown', 'menu', 'input']; export const relatedPages = [ {title: 'useSelect', url: 'https://react-spectrum.adobe.com/react-aria/useSelect.html'}, - {title: 'Testing', url: './Select/testing'} + {title: 'Testing Select', url: './Select/testing'} ]; export const description = 'Displays a collapsible list of options and allows a user to select one of them.'; diff --git a/packages/dev/s2-docs/pages/react-aria/Select/testing.mdx b/packages/dev/s2-docs/pages/react-aria/Select/testing.mdx index 7a442362ad5..016c20d29a8 100644 --- a/packages/dev/s2-docs/pages/react-aria/Select/testing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Select/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'select', 'test-utils']; export const description = 'Testing Select with React Aria test utils'; diff --git a/packages/dev/s2-docs/pages/react-aria/Table.mdx b/packages/dev/s2-docs/pages/react-aria/Table.mdx index 48de1df4a6b..7d16071b52d 100644 --- a/packages/dev/s2-docs/pages/react-aria/Table.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Table.mdx @@ -11,7 +11,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; export const tags = ['data', 'grid']; export const relatedPages = [ {title: 'useTable', url: 'https://react-spectrum.adobe.com/react-aria/useTable.html'}, - {title: 'Testing', url: './Table/testing'} + {title: 'Testing Table', url: './Table/testing'} ]; export const description = 'Displays data in rows and columns and enables a user to navigate its contents via directional navigation keys.'; diff --git a/packages/dev/s2-docs/pages/react-aria/Table/testing.mdx b/packages/dev/s2-docs/pages/react-aria/Table/testing.mdx index 8d59fe98520..483e91d9d35 100644 --- a/packages/dev/s2-docs/pages/react-aria/Table/testing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Table/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'table', 'test-utils']; export const description = 'Testing Table with React Aria test utils'; diff --git a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx index d6990c4bdc0..98cf8ac6917 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tabs.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tabs.mdx @@ -11,7 +11,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['navigation']; export const relatedPages = [ {title: 'useTabs', url: 'https://react-spectrum.adobe.com/react-aria/useTabs.html'}, - {title: 'Testing', url: './Tabs/testing'} + {title: 'Testing Tabs', url: './Tabs/testing'} ]; export const description = 'Organizes content into multiple sections and allows users to navigate between them.'; diff --git a/packages/dev/s2-docs/pages/react-aria/Tabs/testing.mdx b/packages/dev/s2-docs/pages/react-aria/Tabs/testing.mdx index a1aaad1a796..451c22b9e1f 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tabs/testing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tabs/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'tabs', 'test-utils']; export const description = 'Testing Tabs with React Aria test utils'; diff --git a/packages/dev/s2-docs/pages/react-aria/Tree.mdx b/packages/dev/s2-docs/pages/react-aria/Tree.mdx index 51fcd14b12b..7e6ada98408 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tree.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tree.mdx @@ -10,7 +10,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2' export const tags = ['data', 'tree', 'nested', 'hierarchy']; export const relatedPages = [ - {title: 'Testing', url: './Tree/testing'} + {title: 'Testing Tree', url: './Tree/testing'} ]; export const description = 'Provides users with a way to navigate nested hierarchical information.'; diff --git a/packages/dev/s2-docs/pages/react-aria/Tree/testing.mdx b/packages/dev/s2-docs/pages/react-aria/Tree/testing.mdx index 0cd15d3bbfd..d0541598407 100644 --- a/packages/dev/s2-docs/pages/react-aria/Tree/testing.mdx +++ b/packages/dev/s2-docs/pages/react-aria/Tree/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'tree', 'test-utils']; export const description = 'Testing Tree with React Aria test utils'; diff --git a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx index 8c5c7aee934..0857cee6559 100644 --- a/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/CheckboxGroup.mdx @@ -6,7 +6,7 @@ import docs from 'docs:@react-spectrum/s2'; export const tags = []; export const relatedPages = [ - {title: 'Testing', url: './CheckboxGroup/testing'} + {title: 'Testing CheckboxGroup', url: './CheckboxGroup/testing'} ]; export const description = 'Allows a user to select one or more items in a list of options.'; diff --git a/packages/dev/s2-docs/pages/s2/CheckboxGroup/testing.mdx b/packages/dev/s2-docs/pages/s2/CheckboxGroup/testing.mdx index 25bbb96a132..6542894cd46 100644 --- a/packages/dev/s2-docs/pages/s2/CheckboxGroup/testing.mdx +++ b/packages/dev/s2-docs/pages/s2/CheckboxGroup/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'checkboxgroup', 'test-utils']; export const description = 'Testing CheckboxGroup with React Spectrum test utils'; diff --git a/packages/dev/s2-docs/pages/s2/ComboBox.mdx b/packages/dev/s2-docs/pages/s2/ComboBox.mdx index 259a3a8cf26..efd98c057e1 100644 --- a/packages/dev/s2-docs/pages/s2/ComboBox.mdx +++ b/packages/dev/s2-docs/pages/s2/ComboBox.mdx @@ -6,7 +6,7 @@ import docs from 'docs:@react-spectrum/s2'; export const tags = ['autocomplete', 'search', 'typeahead']; export const relatedPages = [ - {title: 'Testing', url: './ComboBox/testing'} + {title: 'Testing ComboBox', url: './ComboBox/testing'} ]; export const description = 'Combines a text input with a listbox, and allows a user to filter a list of options.'; diff --git a/packages/dev/s2-docs/pages/s2/ComboBox/testing.mdx b/packages/dev/s2-docs/pages/s2/ComboBox/testing.mdx index d98e1fb530c..39378b98ed3 100644 --- a/packages/dev/s2-docs/pages/s2/ComboBox/testing.mdx +++ b/packages/dev/s2-docs/pages/s2/ComboBox/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'combobox', 'test-utils']; export const description = 'Testing ComboBox with React Spectrum test utils'; diff --git a/packages/dev/s2-docs/pages/s2/Dialog.mdx b/packages/dev/s2-docs/pages/s2/Dialog.mdx index c906e2c5aa0..29b090220f4 100644 --- a/packages/dev/s2-docs/pages/s2/Dialog.mdx +++ b/packages/dev/s2-docs/pages/s2/Dialog.mdx @@ -6,7 +6,7 @@ import docs from 'docs:@react-spectrum/s2'; export const tags = ['modal', 'popup', 'overlay']; export const relatedPages = [ - {title: 'Testing', url: './Dialog/testing'} + {title: 'Testing Dialog', url: './Dialog/testing'} ]; export const description = 'An overlay shown above other content in an application.'; diff --git a/packages/dev/s2-docs/pages/s2/Dialog/testing.mdx b/packages/dev/s2-docs/pages/s2/Dialog/testing.mdx index 76dfdf32eed..8cbd1a0ab6f 100644 --- a/packages/dev/s2-docs/pages/s2/Dialog/testing.mdx +++ b/packages/dev/s2-docs/pages/s2/Dialog/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'dialog', 'test-utils']; export const description = 'Testing Dialog with React Spectrum test utils'; diff --git a/packages/dev/s2-docs/pages/s2/Menu.mdx b/packages/dev/s2-docs/pages/s2/Menu.mdx index 5b1d2f57bea..003530b8947 100644 --- a/packages/dev/s2-docs/pages/s2/Menu.mdx +++ b/packages/dev/s2-docs/pages/s2/Menu.mdx @@ -6,7 +6,7 @@ import docs from 'docs:@react-spectrum/s2'; export const tags = ['dropdown']; export const relatedPages = [ - {title: 'Testing', url: './Menu/testing'} + {title: 'Testing Menu', url: './Menu/testing'} ]; export const description = 'Displays a list of actions or options that a user can choose.'; diff --git a/packages/dev/s2-docs/pages/s2/Menu/testing.mdx b/packages/dev/s2-docs/pages/s2/Menu/testing.mdx index 6f36eb7d0c0..aecb012989d 100644 --- a/packages/dev/s2-docs/pages/s2/Menu/testing.mdx +++ b/packages/dev/s2-docs/pages/s2/Menu/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'menu', 'test-utils']; export const description = 'Testing Menu with React Spectrum test utils'; diff --git a/packages/dev/s2-docs/pages/s2/Picker.mdx b/packages/dev/s2-docs/pages/s2/Picker.mdx index c86cf901ca3..4ed6c131698 100644 --- a/packages/dev/s2-docs/pages/s2/Picker.mdx +++ b/packages/dev/s2-docs/pages/s2/Picker.mdx @@ -6,7 +6,7 @@ import docs from 'docs:@react-spectrum/s2'; export const tags = ['select', 'dropdown']; export const relatedPages = [ - {title: 'Testing', url: './Picker/testing'} + {title: 'Testing Picker', url: './Picker/testing'} ]; export const description = 'Displays a collapsible list of options, and allows a user to select one of them.'; diff --git a/packages/dev/s2-docs/pages/s2/Picker/testing.mdx b/packages/dev/s2-docs/pages/s2/Picker/testing.mdx index dc950758076..8df691dc74f 100644 --- a/packages/dev/s2-docs/pages/s2/Picker/testing.mdx +++ b/packages/dev/s2-docs/pages/s2/Picker/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'picker', 'test-utils']; export const description = 'Testing Picker with React Spectrum test utils'; diff --git a/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx b/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx index f02bbae35f1..b05aba4dc69 100644 --- a/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx +++ b/packages/dev/s2-docs/pages/s2/ProgressCircle.mdx @@ -30,7 +30,7 @@ By default, the `value` prop is a percentage between 0 and 100. Use the `minValu links={docs.links} props={['minValue', 'maxValue']} initialProps={{ - label: 'Progress', + 'aria-label': 'Progress', minValue: 0, maxValue: 150, value: 50 diff --git a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx index 5f53d242a29..e219a9dbbc6 100644 --- a/packages/dev/s2-docs/pages/s2/RadioGroup.mdx +++ b/packages/dev/s2-docs/pages/s2/RadioGroup.mdx @@ -6,7 +6,7 @@ import docs from 'docs:@react-spectrum/s2'; export const tags = ['input']; export const relatedPages = [ - {title: 'Testing', url: './RadioGroup/testing'} + {title: 'Testing RadioGroup', url: './RadioGroup/testing'} ]; export const description = 'Allows a user to select a single item from a list of options.'; diff --git a/packages/dev/s2-docs/pages/s2/RadioGroup/testing.mdx b/packages/dev/s2-docs/pages/s2/RadioGroup/testing.mdx index 34b9a565d16..6023e0ad243 100644 --- a/packages/dev/s2-docs/pages/s2/RadioGroup/testing.mdx +++ b/packages/dev/s2-docs/pages/s2/RadioGroup/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'radiogroup', 'test-utils']; export const description = 'Testing RadioGroup with React Spectrum test utils'; diff --git a/packages/dev/s2-docs/pages/s2/TableView.mdx b/packages/dev/s2-docs/pages/s2/TableView.mdx index 1225eebf580..05a0b15a9b2 100644 --- a/packages/dev/s2-docs/pages/s2/TableView.mdx +++ b/packages/dev/s2-docs/pages/s2/TableView.mdx @@ -6,7 +6,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; export const tags = ['table', 'data', 'grid']; export const relatedPages = [ - {title: 'Testing', url: './TableView/testing'} + {title: 'Testing TableView', url: './TableView/testing'} ]; export const description = 'Displays data in rows and columns, with row selection and sorting.'; diff --git a/packages/dev/s2-docs/pages/s2/TableView/testing.mdx b/packages/dev/s2-docs/pages/s2/TableView/testing.mdx index ab82bf226ad..fd77ac2f8db 100644 --- a/packages/dev/s2-docs/pages/s2/TableView/testing.mdx +++ b/packages/dev/s2-docs/pages/s2/TableView/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'tableview', 'test-utils']; export const description = 'Testing TableView with React Spectrum test utils'; diff --git a/packages/dev/s2-docs/pages/s2/Tabs.mdx b/packages/dev/s2-docs/pages/s2/Tabs.mdx index 1250663e0e2..5e71b117beb 100644 --- a/packages/dev/s2-docs/pages/s2/Tabs.mdx +++ b/packages/dev/s2-docs/pages/s2/Tabs.mdx @@ -5,7 +5,7 @@ import {InlineAlert, Heading, Content} from '@react-spectrum/s2'; export const tags = ['navigation']; export const relatedPages = [ - {title: 'Testing', url: './Tabs/testing'} + {title: 'Testing Tabs', url: './Tabs/testing'} ]; export const description = 'Organize content into multiple sections, and allow a user to view one at a time.'; diff --git a/packages/dev/s2-docs/pages/s2/Tabs/testing.mdx b/packages/dev/s2-docs/pages/s2/Tabs/testing.mdx index 8aa53e1dcc7..6bf054ffbe6 100644 --- a/packages/dev/s2-docs/pages/s2/Tabs/testing.mdx +++ b/packages/dev/s2-docs/pages/s2/Tabs/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'tabs', 'test-utils']; export const description = 'Testing Tabs with React Spectrum test utils'; diff --git a/packages/dev/s2-docs/pages/s2/TreeView.mdx b/packages/dev/s2-docs/pages/s2/TreeView.mdx index 699d49edf16..88c33f765ed 100644 --- a/packages/dev/s2-docs/pages/s2/TreeView.mdx +++ b/packages/dev/s2-docs/pages/s2/TreeView.mdx @@ -6,7 +6,7 @@ import docs from 'docs:@react-spectrum/s2'; export const tags = ['hierarchy', 'data', 'nested']; export const relatedPages = [ - {title: 'Testing', url: './TreeView/testing'} + {title: 'Testing TreeView', url: './TreeView/testing'} ]; export const description = 'Displays hierarchical data with selection and collapsing.'; diff --git a/packages/dev/s2-docs/pages/s2/TreeView/testing.mdx b/packages/dev/s2-docs/pages/s2/TreeView/testing.mdx index 436847ca71d..f5016fa95bf 100644 --- a/packages/dev/s2-docs/pages/s2/TreeView/testing.mdx +++ b/packages/dev/s2-docs/pages/s2/TreeView/testing.mdx @@ -7,6 +7,7 @@ import {InstallCommand} from '../../../src/InstallCommand'; import {PatternTestingFAQ} from '../../../src/PatternTestingFAQ'; export const isSubpage = true; +export const hideFromSearch = true; export const tags = ['testing', 'treeview', 'test-utils']; export const description = 'Testing TreeView with React Spectrum test utils'; diff --git a/packages/dev/s2-docs/src/Layout.tsx b/packages/dev/s2-docs/src/Layout.tsx index 883eb40983a..7c0a19d9457 100644 --- a/packages/dev/s2-docs/src/Layout.tsx +++ b/packages/dev/s2-docs/src/Layout.tsx @@ -160,6 +160,7 @@ export async function Layout(props: PageProps & {children: ReactElement}) { let {children} = props; let pages = await getPages(); let currentPage = getCurrentPage(props.currentPage); + let isToastPage = currentPage.name === 'Toast.mdx' || currentPage.url?.includes('/s2/Toast'); let isSubpage = currentPage.exports?.isSubpage; let section = currentPage.exports?.section; let isLongForm = isSubpage && section === 'Blog'; @@ -293,7 +294,7 @@ export async function Layout(props: PageProps & {children: ReactElement}) { - + {!isToastPage && } diff --git a/packages/dev/s2-docs/src/PropTable.tsx b/packages/dev/s2-docs/src/PropTable.tsx index e4e0416bc14..8f45cfb0d1c 100644 --- a/packages/dev/s2-docs/src/PropTable.tsx +++ b/packages/dev/s2-docs/src/PropTable.tsx @@ -162,12 +162,21 @@ function Rows({props, showDefault, showRequired}: {props: TInterface['properties return properties.map((prop, index) => ( - + {prop.name} {!prop.optional && showRequired - ? + ? : null } diff --git a/packages/dev/s2-docs/src/searchUtils.tsx b/packages/dev/s2-docs/src/searchUtils.tsx index 9cd92bc3ca7..35811ea6aac 100644 --- a/packages/dev/s2-docs/src/searchUtils.tsx +++ b/packages/dev/s2-docs/src/searchUtils.tsx @@ -464,7 +464,8 @@ export function sortItemsForDisplay(ite if (!aIsIntro && bIsIntro) { return 1; } - return 0; + // Sort alphabetically by name + return a.name.localeCompare(b.name); }); } return items; diff --git a/packages/dev/s2-docs/src/types.tsx b/packages/dev/s2-docs/src/types.tsx index d9295b9278d..68b6aba53fb 100644 --- a/packages/dev/s2-docs/src/types.tsx +++ b/packages/dev/s2-docs/src/types.tsx @@ -543,7 +543,16 @@ export function InterfaceType({properties: props, showRequired, showDefault, isC {prop.name} {!prop.optional && showRequired - ? + ? : null } From 4180e42f7ade507bdc38201aa7b58e24dedcb605 Mon Sep 17 00:00:00 2001 From: WK Date: Wed, 3 Dec 2025 13:27:06 +0800 Subject: [PATCH 2/2] fix: typos (#9269) Co-authored-by: Reid Barber --- packages/@react-aria/button/docs/useToggleButtonGroup.mdx | 2 +- packages/@react-aria/overlays/docs/usePopover.mdx | 2 +- .../autocomplete/docs/SearchAutocomplete.mdx | 2 +- packages/@react-spectrum/filetrigger/docs/FileTrigger.mdx | 2 +- packages/@react-spectrum/icon/docs/custom-icons.mdx | 2 +- packages/@react-spectrum/progress/docs/ProgressCircle.mdx | 2 +- packages/@react-spectrum/tabs/stories/Tabs.stories.tsx | 6 +++--- packages/@react-spectrum/tabs/test/Tabs.test.js | 2 +- .../@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx | 2 +- packages/@react-types/calendar/src/index.d.ts | 2 +- packages/@react-types/card/src/index.d.ts | 4 ++-- packages/dev/docs/pages/blog/building-a-button-part-3.mdx | 4 ++-- packages/dev/docs/pages/blog/rtl-date-time.mdx | 6 +++--- packages/dev/docs/pages/react-aria/forms.mdx | 2 +- packages/dev/docs/pages/react-spectrum/forms.mdx | 2 +- .../pages/react-aria/blog/building-a-button-part-3.mdx | 4 ++-- .../dev/s2-docs/pages/react-aria/blog/rtl-date-time.mdx | 6 +++--- packages/dev/s2-docs/pages/s2/forms.mdx | 2 +- packages/react-aria-components/docs/FileTrigger.mdx | 2 +- packages/react-aria-components/docs/ToggleButtonGroup.mdx | 2 +- 20 files changed, 29 insertions(+), 29 deletions(-) diff --git a/packages/@react-aria/button/docs/useToggleButtonGroup.mdx b/packages/@react-aria/button/docs/useToggleButtonGroup.mdx index f46f37cd6e5..983360bb9dd 100644 --- a/packages/@react-aria/button/docs/useToggleButtonGroup.mdx +++ b/packages/@react-aria/button/docs/useToggleButtonGroup.mdx @@ -252,7 +252,7 @@ By default, toggle button groups are horizontally oriented. The orientation prop ``` -## Accessiblity +## Accessibility A `ToggleButtonGroup` can be labeled using the `aria-label` or `aria-labelledby` props. diff --git a/packages/@react-aria/overlays/docs/usePopover.mdx b/packages/@react-aria/overlays/docs/usePopover.mdx index b7187bf2152..1820d926502 100644 --- a/packages/@react-aria/overlays/docs/usePopover.mdx +++ b/packages/@react-aria/overlays/docs/usePopover.mdx @@ -78,7 +78,7 @@ with . The `Popover` component uses an <> to render its contents in a React [Portal](https://reactjs.org/docs/portals.html) at the end of the document body, which ensures it is not clipped by other elements. It also acts as a focus scope, containing focus within the popover and restoring it to the trigger when it unmounts. handles positioning the popover relative to the trigger element, and closing it when the user interacts outside or presses the Escape key. - also hides content outside the popover from screen readers, which is important since the surrounding content won't be in context of the original trigger due to the portal. To allow screen reader users to dismiss the popover without a keyboard (e.g. on mobile), visually hidden <> elements are added at the start and end of the popover. An underlay is also used to prevent scrolling and interacting with elements outside the popover with a pointer, to avoid unintentially repositioning or closing it. + also hides content outside the popover from screen readers, which is important since the surrounding content won't be in context of the original trigger due to the portal. To allow screen reader users to dismiss the popover without a keyboard (e.g. on mobile), visually hidden <> elements are added at the start and end of the popover. An underlay is also used to prevent scrolling and interacting with elements outside the popover with a pointer, to avoid unintentionally repositioning or closing it. ```tsx example export=true render=false import type {AriaPopoverProps} from 'react-aria'; diff --git a/packages/@react-spectrum/autocomplete/docs/SearchAutocomplete.mdx b/packages/@react-spectrum/autocomplete/docs/SearchAutocomplete.mdx index 9649f5426ca..1a55e40e0f6 100644 --- a/packages/@react-spectrum/autocomplete/docs/SearchAutocomplete.mdx +++ b/packages/@react-spectrum/autocomplete/docs/SearchAutocomplete.mdx @@ -234,7 +234,7 @@ See Icon's [labeling](workflow-icons.html#labeling) section and Avatar's [access Mail - Send and recieve emails + Send and receive emails diff --git a/packages/@react-spectrum/filetrigger/docs/FileTrigger.mdx b/packages/@react-spectrum/filetrigger/docs/FileTrigger.mdx index 78af9195adc..5e83c3d440d 100644 --- a/packages/@react-spectrum/filetrigger/docs/FileTrigger.mdx +++ b/packages/@react-spectrum/filetrigger/docs/FileTrigger.mdx @@ -85,7 +85,7 @@ By default, the file trigger will accept any file type. To support only certain ## Multiple files -A file trigger can accept multiple files by passsing the `allowsMultiple` property. +A file trigger can accept multiple files by passing the `allowsMultiple` property. ```tsx example diff --git a/packages/@react-spectrum/icon/docs/custom-icons.mdx b/packages/@react-spectrum/icon/docs/custom-icons.mdx index 3a52da9d4e6..a52edff48e8 100644 --- a/packages/@react-spectrum/icon/docs/custom-icons.mdx +++ b/packages/@react-spectrum/icon/docs/custom-icons.mdx @@ -51,7 +51,7 @@ function CustomIcon(props) { ``` -Wrapping the SVG with Icon will ensure it recieves proper styling when used within React Spectrum components: +Wrapping the SVG with Icon will ensure it receives proper styling when used within React Spectrum components: ```tsx example import {Button, Text} from '@adobe/react-spectrum'; diff --git a/packages/@react-spectrum/progress/docs/ProgressCircle.mdx b/packages/@react-spectrum/progress/docs/ProgressCircle.mdx index 438db581757..061a1b4a401 100644 --- a/packages/@react-spectrum/progress/docs/ProgressCircle.mdx +++ b/packages/@react-spectrum/progress/docs/ProgressCircle.mdx @@ -45,7 +45,7 @@ keywords: [progress circle] ## Value ProgressCircles are controlled with the `value` prop. -By default, the `value` prop represents the current percentage of progress, as the minimum and maxiumum values default to 0 and 100, respectively. +By default, the `value` prop represents the current percentage of progress, as the minimum and maximum values default to 0 and 100, respectively. ```tsx example diff --git a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx index a3cb3fc4337..a40a80533f3 100644 --- a/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx +++ b/packages/@react-spectrum/tabs/stories/Tabs.stories.tsx @@ -374,10 +374,10 @@ ChangingTabTitles.story = { name: 'changing tab titles' }; -export const ChangingSelectionProgramatically: TabsStory = () => ; +export const ChangingSelectionProgrammatically: TabsStory = () => ; -ChangingSelectionProgramatically.story = { - name: 'changing selection programatically' +ChangingSelectionProgrammatically.story = { + name: 'changing selection programmatically' }; export const Links: StoryFn & {collapsed?: boolean}> = (args) => { diff --git a/packages/@react-spectrum/tabs/test/Tabs.test.js b/packages/@react-spectrum/tabs/test/Tabs.test.js index cfa024e2d40..46f1a0fa8e1 100644 --- a/packages/@react-spectrum/tabs/test/Tabs.test.js +++ b/packages/@react-spectrum/tabs/test/Tabs.test.js @@ -880,7 +880,7 @@ describe('Tabs', function () { expect(onSelectionChange).toHaveBeenCalledWith(defaultItems[0].name); }); - it('updates the tab index of the selected tab if programatically changed', function () { + it('updates the tab index of the selected tab if programmatically changed', function () { let Example = (props) => ( diff --git a/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx b/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx index 135fc8021dc..74e2df5d0c6 100644 --- a/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx +++ b/packages/@react-spectrum/tree/chromatic-fc/TreeView.stories.tsx @@ -135,6 +135,6 @@ export const DisabledBehaviorAll: TreeViewStoryProps = () => ( ); -export const HiglightSelectionWithDisabledBehaviorAll: TreeViewStoryProps = () => ( +export const HighlightSelectionWithDisabledBehaviorAll: TreeViewStoryProps = () => ( ); diff --git a/packages/@react-types/calendar/src/index.d.ts b/packages/@react-types/calendar/src/index.d.ts index 53df3c72ce1..8d9e1e2381d 100644 --- a/packages/@react-types/calendar/src/index.d.ts +++ b/packages/@react-types/calendar/src/index.d.ts @@ -45,7 +45,7 @@ export interface CalendarPropsBase { autoFocus?: boolean, /** Controls the currently focused date within the calendar. */ focusedValue?: DateValue | null, - /** The date that is focused when the calendar first mounts (uncountrolled). */ + /** The date that is focused when the calendar first mounts (uncontrolled). */ defaultFocusedValue?: DateValue | null, /** Handler that is called when the focused date changes. */ onFocusChange?: (date: CalendarDate) => void, diff --git a/packages/@react-types/card/src/index.d.ts b/packages/@react-types/card/src/index.d.ts index 0c3cb1dae3b..ebd945b6887 100644 --- a/packages/@react-types/card/src/index.d.ts +++ b/packages/@react-types/card/src/index.d.ts @@ -32,7 +32,7 @@ interface LayoutOptions { collator?: Intl.Collator, // TODO: is this valid or is scale a spectrum specific thing that should be left out of the layouts? // Added here so we can keep the default item padding options within the layouts instead of having to - // do extra work in CardView to accomodate different sizing for scales + // do extra work in CardView to accommodate different sizing for scales scale?: Scale } @@ -51,7 +51,7 @@ export interface CardViewLayoutConstructor { } interface CardViewProps extends CollectionBase, MultipleSelection, Omit { - // TODO: Does LayoutContructor and Layout give enough info for a user to know what to put in their own custom layout? + // TODO: Does LayoutConstructor and Layout give enough info for a user to know what to put in their own custom layout? // Replaced with CardViewLayout so that they know they need to have keyboardDelegate stuff as well as collection, disabledKeys, etc layout: CardViewLayoutConstructor | CardViewLayout, // TODO: readd size when we get updated designs from spectrum diff --git a/packages/dev/docs/pages/blog/building-a-button-part-3.mdx b/packages/dev/docs/pages/blog/building-a-button-part-3.mdx index 5d4ee42cd7b..292a49aad0f 100644 --- a/packages/dev/docs/pages/blog/building-a-button-part-3.mdx +++ b/packages/dev/docs/pages/blog/building-a-button-part-3.mdx @@ -49,7 +49,7 @@ There are many nuances to this, however. For example, when clicking a text input Another challenge is that focus events may occur without any preceding user event. For example, when navigating through a form with the next and previous buttons on the software keyboard in iOS, only a focus event is fired, with no keyboard or pointer events before it. This can also occur when navigating with an assistive technology like a screen reader. In these cases, we don’t know how the navigation occurred, so we default to showing the focus ring to ensure the user knows where focus went. -However, we do not want programmatic `focus()` calls to affect the current input modality. The user may click on an element with the mouse, and in response focus is moved somewhere else programatically. For example, when clicking on a button to open a menu, focus is typically moved to the first menu item. However, because `focus` events are still fired when focusing an element programmatically, we need to ignore these events to ensure the focus ring does not appear or disappear based on programatic focus movement. +However, we do not want programmatic `focus()` calls to affect the current input modality. The user may click on an element with the mouse, and in response focus is moved somewhere else programmatically. For example, when clicking on a button to open a menu, focus is typically moved to the first menu item. However, because `focus` events are still fired when focusing an element programmatically, we need to ignore these events to ensure the focus ring does not appear or disappear based on programmatic focus movement. There are also various inconsistencies in the number and order of focus events across browsers. For example, Firefox fires two extra focus events when the user first clicks on any element in an iframe: first on the window, then on the document. Finally, it fires a focus event on the element itself. We need to ignore these extra focus events so they don’t unintentionally cause the focus ring to appear when using a mouse. @@ -67,7 +67,7 @@ Unfortunately, Safari both on macOS and iOS reaaaally doesn’t want to do this. Even with this setting turned on, however, Safari still does not focus buttons and other native form elements on mouse down or touch start. A [bug](https://bugs.webkit.org/show_bug.cgi?id=22261) for this has been open against WebKit since 2008, and it seems unlikely to be fixed any time soon. In this case, we do need to normalize this to ensure browsers are consistent. We can handle focusing the element programmatically on mouse down ourselves. -However, it gets even more tricky on iOS. While on macOS, Safari will respect our programatic focus, on iOS the browser attempts to forcibly blur the element *asynchronously* sometime after the `onClick` event is fired. This means that even programmatically, focusing the button will not work. 🤯 +However, it gets even more tricky on iOS. While on macOS, Safari will respect our programmatic focus, on iOS the browser attempts to forcibly blur the element *asynchronously* sometime after the `onClick` event is fired. This means that even programmatically, focusing the button will not work. 🤯 The only solution is to call `event.preventDefault()` on all mouse and touch events on the element, and handle focusing ourselves. This ensures that the browser does not perform any of its default behavior, including this forced blur, but it means that we’ll have to handle all of the default browser behavior ourselves. diff --git a/packages/dev/docs/pages/blog/rtl-date-time.mdx b/packages/dev/docs/pages/blog/rtl-date-time.mdx index b415d34d36e..7021c140b34 100644 --- a/packages/dev/docs/pages/blog/rtl-date-time.mdx +++ b/packages/dev/docs/pages/blog/rtl-date-time.mdx @@ -77,7 +77,7 @@ Below is a simplified code example of how we utilize Unicode characters to enfor ## DateFields -Date fields, on the other hand, were much more complicated to solve in comparsion. Since we were relying on `display: flex` to format the date segments, the resulting format appeared to mirror the order in which the segments were stored, as returned by [DateFormatter](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html#dateformatter). This suggested that we could apply a similar approach to what we used for time fields — forcing a left-to-right direction on the date segments. +Date fields, on the other hand, were much more complicated to solve in comparison. Since we were relying on `display: flex` to format the date segments, the resulting format appeared to mirror the order in which the segments were stored, as returned by [DateFormatter](https://react-spectrum.adobe.com/internationalized/date/DateFormatter.html#dateformatter). This suggested that we could apply a similar approach to what we used for time fields — forcing a left-to-right direction on the date segments. However, this assumption proved too broad. In some locales, such as Arabic (`ar-AE`), the date segments were already correctly formatted. In particular, we found that in Arabic, the separators between date segments contained [right-to-left marks](https://en.wikipedia.org/wiki/Implicit_directional_marks) which were returned by the `Intl.DateTimeFormat` API. This causes the separators to be positioned to the left of the preceding text. When we tried enforcing a left-to-right direction like we did in time field using the same solution, the date field was formatted as `2 2022/ 12/` instead of `2022/12/2` due to the presence of the right-to-left marks interfering with the LRI Unicode. In contrast, Hebrew did not have such markers. Therefore, we had to adopt a different approach that accounted for these variations. @@ -111,7 +111,7 @@ However, this assumption proved too broad. In some locales, such as Arabic (`ar- ``` -Through much trial and error, we discovered that appplying the [left-to-right embedding (LRE) Unicode](https://unicode.org/reports/tr9/#Explicit_Directional_Embeddings) on each date segment displayed date fields in Hebrew as left-to-right but also preserved the right-to-left marks on the separaters in Arabic, ensuring that dates in both languages were formatted correctly. While we could have added Unicode to the segments like we did with the time fields, we opted for the [equivalent CSS](https://unicode.org/reports/tr9/#Markup_And_Formatting) approach instead to avoid modifying the DOM. This CSS is applied on date segments with placeholder or actual values to avoid the behavior discussed earlier with shifting segments. Through additional testing, we found that we should only apply left-to-right embedding on numeric values. If the value was displayed as text (e.g. "November" instead of "11"), we did not apply this CSS. +Through much trial and error, we discovered that applying the [left-to-right embedding (LRE) Unicode](https://unicode.org/reports/tr9/#Explicit_Directional_Embeddings) on each date segment displayed date fields in Hebrew as left-to-right but also preserved the right-to-left marks on the separaters in Arabic, ensuring that dates in both languages were formatted correctly. While we could have added Unicode to the segments like we did with the time fields, we opted for the [equivalent CSS](https://unicode.org/reports/tr9/#Markup_And_Formatting) approach instead to avoid modifying the DOM. This CSS is applied on date segments with placeholder or actual values to avoid the behavior discussed earlier with shifting segments. Through additional testing, we found that we should only apply left-to-right embedding on numeric values. If the value was displayed as text (e.g. "November" instead of "11"), we did not apply this CSS. ## Keyboard Navigation @@ -136,7 +136,7 @@ Below is an example of a date field in Hebrew with the correct date format but i