docs: S2 docs testing fixes (12/1/25) (adobe#9268)

reidbarber · web-flow · commit ac027602d0cb · 2025-12-03T02:25:24.000Z
* 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 da60c7d. * Revert "Revert "try disabling minification of html"" This reverts commit 0d6015a.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -160,6 +160,7 @@ export async function Layout(props: PageProps & {children: ReactElement<any>}) {
   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<any>}) {
               </Main>
             </div>
           </div>
-          <ToastContainer placement="bottom" />
+          {!isToastPage && <ToastContainer placement="bottom" />}
         </body>
       </Provider>
     </Router>
diff --git 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) => (
     <React.Fragment key={index}>
       <TableRow>
-        <TableCell role="rowheader" hideBorder={!!prop.description}>
+        <TableCell role="rowheader" hideBorder={!!prop.description} styles={style({whiteSpace: 'nowrap'})}>
           <code className={codeStyle}>
             <span className={codeStyles.attribute}>{prop.name}</span>
           </code>
           {!prop.optional && showRequired
-            ? <Asterisk size="M" className={style({marginStart: 4})} aria-label="Required" />
+            ? <Asterisk
+                size="M"
+                className={style({
+                  marginStart: 4,
+                  '--iconPrimary': {
+                    type: 'fill',
+                    value: 'currentColor'
+                  }
+                })}
+                aria-label="Required" />
             : null
           }
         </TableCell>
diff --git a/packages/dev/s2-docs/src/searchUtils.tsx b/packages/dev/s2-docs/src/searchUtils.tsx
@@ -464,7 +464,8 @@ export function sortItemsForDisplay<T extends {name: string, date?: string}>(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
