fix: release audit pt 2 (#8576)

yihuiliao · web-flow · commit 123e3eeeba1f · 2025-07-21T17:59:02.000Z
* fix: release audit pt 2

* fix tests

* update toast testid

* fix lint

* add testing docs to toast

* remove zindex

* fix rac and rsp togglebutton types

* updates from reviews
diff --git a/packages/@react-spectrum/dialog/docs/AlertDialog.mdx b/packages/@react-spectrum/dialog/docs/AlertDialog.mdx
@@ -250,3 +250,8 @@ Please see the following sections in the testing docs for more information on ho
 
 Please also refer to [React Spectrum's test suite](https://github.com/adobe/react-spectrum/blob/main/packages/%40react-spectrum/contextualhelp/test/ContextualHelp.test.js) if you find that the above
 isn't sufficient when resolving issues in your own test cases.
+
+To identify a particular instance of the cancel, secondary, or confirm button, you can use the following data-testid's respectively:
+- `"rsp-AlertDialog-cancelButton"`
+- `"rsp-AlertDialog-secondaryButton"`
+- `"rsp-AlertDialog-confirmButton"`
diff --git a/packages/@react-spectrum/dialog/src/AlertDialog.tsx b/packages/@react-spectrum/dialog/src/AlertDialog.tsx
@@ -87,7 +87,7 @@ export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertD
             variant="secondary"
             onPress={() => chain(onClose(), onCancel())}
             autoFocus={autoFocusButton === 'cancel'}
-            data-testid="rsp-alertDialog-cancelButton">
+            data-testid="rsp-AlertDialog-cancelButton">
             {cancelLabel}
           </Button>
         }
@@ -97,7 +97,7 @@ export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertD
             onPress={() => chain(onClose(), onSecondaryAction())}
             isDisabled={isSecondaryActionDisabled}
             autoFocus={autoFocusButton === 'secondary'}
-            data-testid="rsp-alertDialog-secondaryButton">
+            data-testid="rsp-AlertDialog-secondaryButton">
             {secondaryActionLabel}
           </Button>
         }
@@ -106,7 +106,7 @@ export const AlertDialog = forwardRef(function AlertDialog(props: SpectrumAlertD
           onPress={() => chain(onClose(), onPrimaryAction())}
           isDisabled={isPrimaryActionDisabled}
           autoFocus={autoFocusButton === 'primary'}
-          data-testid="rsp-alertDialog-confirmButton">
+          data-testid="rsp-AlertDialog-confirmButton">
           {primaryActionLabel}
         </Button>
       </ButtonGroup>
diff --git a/packages/@react-spectrum/dialog/test/AlertDialog.test.js b/packages/@react-spectrum/dialog/test/AlertDialog.test.js
@@ -196,11 +196,11 @@ describe('AlertDialog', function () {
 
     let dialog = getByTestId('alert-dialog');
     expect(dialog).toBeDefined();
-    let cancelBtn = getByTestId('rsp-alertDialog-cancelButton');
+    let cancelBtn = getByTestId('rsp-AlertDialog-cancelButton');
     expect(cancelBtn).toBeDefined();
-    let secondaryBtn = getByTestId('rsp-alertDialog-secondaryButton');
+    let secondaryBtn = getByTestId('rsp-AlertDialog-secondaryButton');
     expect(secondaryBtn).toBeDefined();
-    let primaryBtn = getByTestId('rsp-alertDialog-confirmButton');
+    let primaryBtn = getByTestId('rsp-AlertDialog-confirmButton');
     expect(primaryBtn).toBeDefined();
   });
 });
diff --git a/packages/@react-spectrum/s2/src/AlertDialog.tsx b/packages/@react-spectrum/s2/src/AlertDialog.tsx
@@ -129,7 +129,8 @@ export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogPro
                 onPress={() => chain(close(), onCancel())}
                 variant="secondary"
                 fillStyle="outline"
-                autoFocus={autoFocusButton === 'cancel'}>
+                autoFocus={autoFocusButton === 'cancel'}
+                data-testid="rsp-AlertDialog-cancelButton">
                 {cancelLabel}
               </Button>
             }
@@ -139,15 +140,17 @@ export const AlertDialog = forwardRef(function AlertDialog(props: AlertDialogPro
                 variant="secondary"
                 isDisabled={isSecondaryActionDisabled}
                 fillStyle="outline"
-                autoFocus={autoFocusButton === 'secondary'}>
+                autoFocus={autoFocusButton === 'secondary'}
+                data-testid="rsp-AlertDialog-secondaryButton">
                 {secondaryActionLabel}
               </Button>
             }
             <Button
               variant={buttonVariant as 'primary' | 'accent' | 'negative'}
               isDisabled={isPrimaryActionDisabled}
               autoFocus={autoFocusButton === 'primary'}
-              onPress={() => chain(close(), onPrimaryAction())}>
+              onPress={() => chain(close(), onPrimaryAction())}
+              data-testid="rsp-AlertDialog-confirmButton">
               {primaryActionLabel}
             </Button>
           </ButtonGroup>
diff --git a/packages/@react-spectrum/s2/src/Content.tsx b/packages/@react-spectrum/s2/src/Content.tsx
@@ -28,7 +28,7 @@ interface ContentProps extends UnsafeStyles, SlotProps {
 }
 
 interface HeadingProps extends Omit<ContentProps, 'children'> {
-  children?: ReactNode,
+  children: ReactNode,
   level?: number
 }
 
diff --git a/packages/@react-spectrum/s2/src/Modal.tsx b/packages/@react-spectrum/s2/src/Modal.tsx
@@ -44,8 +44,7 @@ const modalOverlayStyles = style({
   transitionDuration: {
     default: 250,
     isExiting: 130
-  },
-  zIndex: 9999
+  }
 });
 
 /**
diff --git a/packages/@react-spectrum/s2/src/Picker.tsx b/packages/@react-spectrum/s2/src/Picker.tsx
@@ -86,6 +86,7 @@ export interface PickerStyleProps {
   size?: 'S' | 'M' | 'L' | 'XL',
   /**
    * Whether the picker should be displayed with a quiet style.
+   * @private
    */
   isQuiet?: boolean
 }
diff --git a/packages/@react-spectrum/s2/src/Popover.tsx b/packages/@react-spectrum/s2/src/Popover.tsx
@@ -116,7 +116,6 @@ let popover = style({
     isExiting: 'in'
   },
   isolation: 'isolate',
-  zIndex: 9999,
   pointerEvents: {
     isExiting: 'none'
   },
diff --git a/packages/@react-spectrum/s2/src/Provider.tsx b/packages/@react-spectrum/s2/src/Provider.tsx
@@ -91,7 +91,8 @@ let providerStyles = style({
       'layer-1': '--s2-container-bg',
       'layer-2': '--s2-container-bg'
     }
-  }
+  },
+  isolation: 'isolate'
 });
 
 function ProviderInner(props: ProviderProps) {
diff --git a/packages/@react-spectrum/toast/docs/Toast.mdx b/packages/@react-spectrum/toast/docs/Toast.mdx
@@ -196,3 +196,9 @@ By default, toasts are displayed at the bottom center of the screen. This can be
 <TypeContext.Provider value={docs.links}>
   <InterfaceType properties={docs.exports.ToastContainer.props.properties} showRequired showDefault isComponent />
 </TypeContext.Provider>
+
+## Testing
+
+To identify a particular instance of the secondary or close button, you can use the following data-testid's respectively:
+- `"rsp-Toast-secondaryButton"`
+- `"rsp-Toast-closeButton"`
diff --git a/packages/@react-spectrum/toast/src/Toast.tsx b/packages/@react-spectrum/toast/src/Toast.tsx
@@ -119,14 +119,14 @@ export const Toast = React.forwardRef(function Toast(props: SpectrumToastProps,
               UNSAFE_className={classNames(styles, 'spectrum-Button')}
               variant="secondary"
               staticColor="white"
-              data-testid="rsp-toast-secondaryButton">
+              data-testid="rsp-Toast-secondaryButton">
               {actionLabel}
             </Button>
           }
         </div>
       </div>
       <div className={classNames(styles, 'spectrum-Toast-buttons')}>
-        <ClearButton {...closeButtonProps} variant="overBackground" data-testid="rsp-toast-closeButton">
+        <ClearButton {...closeButtonProps} variant="overBackground" data-testid="rsp-Toast-closeButton">
           <CrossMedium />
         </ClearButton>
       </div>
diff --git a/packages/@react-spectrum/toast/test/ToastContainer.test.js b/packages/@react-spectrum/toast/test/ToastContainer.test.js
@@ -85,13 +85,18 @@ describe('Toast Provider and Container', function () {
     const domProps = {
       'data-testid': testid
     };
-    let {getByRole, queryByTestId, getByTestId, queryByText} = renderComponent(<RenderToastButton {...domProps} />);
+    let {getByRole, queryByTestId, getByTestId, queryByText} = renderComponent(<RenderToastButton {...domProps} actionLabel="Update" />);
     let button = getByRole('button');
 
     expect(queryByTestId(testid)).toBeNull();
     await user.click(button);
     expect(getByTestId(testid)).not.toBeNull();
     expect(queryByText(/Show Default Toast/)).not.toBeNull();
+    let secondaryButton = getByTestId('rsp-Toast-secondaryButton');
+    expect(secondaryButton).toBeDefined();
+    let closeButton = getByTestId('rsp-Toast-closeButton');
+    expect(closeButton).toBeDefined();
+
   });
 
   it('should label icon by variant', async () => {
diff --git a/packages/@react-types/button/src/index.d.ts b/packages/@react-types/button/src/index.d.ts
@@ -95,7 +95,7 @@ interface AriaBaseButtonProps extends FocusableDOMProps, AriaLabelingProps {
 }
 
 export interface AriaButtonProps<T extends ElementType = 'button'> extends ButtonProps, LinkButtonProps<T>, AriaBaseButtonProps {}
-export interface AriaToggleButtonProps<T extends ElementType = 'button'> extends ToggleButtonProps, Omit<AriaBaseButtonProps, 'aria-current'>, AriaButtonElementTypeProps<T> {}
+export interface AriaToggleButtonProps<T extends ElementType = 'button'> extends ToggleButtonProps, Omit<AriaBaseButtonProps, 'aria-current' | 'form' | 'formAction' | 'formEncType' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'name' | 'value' | 'type'>, AriaButtonElementTypeProps<T> {}
 export interface AriaToggleButtonGroupItemProps<E extends ElementType = 'button'> extends Omit<AriaToggleButtonProps<E>, 'id' | 'isSelected' | 'defaultSelected' | 'onChange'> {
   /** An identifier for the item in the `selectedKeys` of a ToggleButtonGroup. */
   id: Key
@@ -133,7 +133,7 @@ export interface SpectrumLogicButtonProps extends AriaBaseButtonProps, Omit<Butt
   variant: 'and' | 'or'
 }
 
-export interface SpectrumToggleButtonProps extends Omit<ToggleButtonProps, 'onClick'>, Omit<SpectrumActionButtonProps, 'aria-current'> {
+export interface SpectrumToggleButtonProps extends Omit<ToggleButtonProps, 'onClick'>, Omit<SpectrumActionButtonProps, 'aria-current' | 'type' | 'form' | 'formAction' | 'formEncType' | 'formMethod' | 'formNoValidate' | 'formTarget' | 'name' | 'value'> {
   /** Whether the button should be displayed with an [emphasized style](https://spectrum.adobe.com/page/action-button/#Emphasis). */
   isEmphasized?: boolean
 }
diff --git a/packages/@react-types/datepicker/src/index.d.ts b/packages/@react-types/datepicker/src/index.d.ts
@@ -59,17 +59,18 @@ interface DateFieldBase<T extends DateValue> extends InputBase, Validation<Mappe
    * Whether to always show leading zeros in the month, day, and hour fields.
    * By default, this is determined by the user's locale.
    */
-  shouldForceLeadingZeros?: boolean,
+  shouldForceLeadingZeros?: boolean
+}
+
+interface AriaDateFieldBaseProps<T extends DateValue> extends DateFieldBase<T>, AriaLabelingProps, DOMProps {}
+export interface DateFieldProps<T extends DateValue> extends DateFieldBase<T>, ValueBase<T | null, MappedDateValue<T> | null> {}
+export interface AriaDateFieldProps<T extends DateValue> extends DateFieldProps<T>, AriaDateFieldBaseProps<T>, InputDOMProps {
   /**
    * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
    */
   autoComplete?: string
 }
 
-interface AriaDateFieldBaseProps<T extends DateValue> extends DateFieldBase<T>, AriaLabelingProps, DOMProps {}
-export interface DateFieldProps<T extends DateValue> extends DateFieldBase<T>, ValueBase<T | null, MappedDateValue<T> | null> {}
-export interface AriaDateFieldProps<T extends DateValue> extends DateFieldProps<T>, AriaDateFieldBaseProps<T>, InputDOMProps {}
-
 interface DatePickerBase<T extends DateValue> extends DateFieldBase<T>, OverlayTriggerProps {
   /**
    * Controls the behavior of paging. Pagination either works by advancing the visible page by visibleDuration (default) or one unit of visibleDuration.
@@ -84,10 +85,15 @@ interface DatePickerBase<T extends DateValue> extends DateFieldBase<T>, OverlayT
 export interface AriaDatePickerBaseProps<T extends DateValue> extends DatePickerBase<T>, AriaLabelingProps, InputDOMProps, DOMProps {}
 
 export interface DatePickerProps<T extends DateValue> extends DatePickerBase<T>, ValueBase<T | null, MappedDateValue<T> | null> {}
-export interface AriaDatePickerProps<T extends DateValue> extends DatePickerProps<T>, AriaDatePickerBaseProps<T> {}
+export interface AriaDatePickerProps<T extends DateValue> extends DatePickerProps<T>, AriaDatePickerBaseProps<T>, InputDOMProps {
+  /**
+   * Describes the type of autocomplete functionality the input should provide if any. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautocomplete).
+   */
+  autoComplete?: string
+}
 
 export type DateRange = RangeValue<DateValue>;
-export interface DateRangePickerProps<T extends DateValue> extends Omit<DatePickerBase<T>, 'validate' | 'autoComplete'>, Validation<RangeValue<MappedDateValue<T>>>, ValueBase<RangeValue<T> | null, RangeValue<MappedDateValue<T>> | null> {
+export interface DateRangePickerProps<T extends DateValue> extends Omit<DatePickerBase<T>, 'validate'>, Validation<RangeValue<MappedDateValue<T>>>, ValueBase<RangeValue<T> | null, RangeValue<MappedDateValue<T>> | null> {
   /**
    * When combined with `isDateUnavailable`, determines whether non-contiguous ranges,
    * i.e. ranges containing unavailable dates, may be selected.
@@ -103,7 +109,7 @@ export interface DateRangePickerProps<T extends DateValue> extends Omit<DatePick
   endName?: string
 }
 
-export interface AriaDateRangePickerProps<T extends DateValue> extends Omit<AriaDatePickerBaseProps<T>, 'validate' | 'autoComplete'>, DateRangePickerProps<T> {}
+export interface AriaDateRangePickerProps<T extends DateValue> extends Omit<AriaDatePickerBaseProps<T>, 'validate'>, DateRangePickerProps<T> {}
 
 interface SpectrumDateFieldBase<T extends DateValue> extends SpectrumLabelableProps, HelpTextProps, SpectrumFieldValidation<MappedDateValue<T>>, StyleProps {
   /**

Original file line number	Diff line number	Diff line change
`@@ -28,7 +28,7 @@ interface ContentProps extends UnsafeStyles, SlotProps {`
`28`	`28`	`}`
`29`	`29`
`30`	`30`	`interface HeadingProps extends Omit<ContentProps, 'children'> {`
`31`		`- children?: ReactNode,`
	`31`	`+ children: ReactNode,`
`32`	`32`	`level?: number`
`33`	`33`	`}`
`34`	`34`
Original file line number	Diff line number	Diff line change
`@@ -86,6 +86,7 @@ export interface PickerStyleProps {`
`86`	`86`	`size?: 'S' \| 'M' \| 'L' \| 'XL',`
`87`	`87`	`/**`
`88`	`88`	`* Whether the picker should be displayed with a quiet style.`
	`89`	`+ * @private`
`89`	`90`	`*/`
`90`	`91`	`isQuiet?: boolean`
`91`	`92`	`}`
Original file line number	Diff line number	Diff line change
`@@ -91,7 +91,8 @@ let providerStyles = style({`
`91`	`91`	`'layer-1': '--s2-container-bg',`
`92`	`92`	`'layer-2': '--s2-container-bg'`
`93`	`93`	`}`
`94`		`- }`
	`94`	`+ },`
	`95`	`+ isolation: 'isolate'`
`95`	`96`	`});`
`96`	`97`
`97`	`98`	`function ProviderInner(props: ProviderProps) {`