From e245cc828157535b5c3f045a988fcef37f9dc410 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 30 May 2025 13:27:20 -0700
Subject: [PATCH 1/3] chore: Pass through more DOM events and attributes

---
 .../@react-aria/utils/src/filterDOMProps.ts   |  56 ++++++++-
 packages/@react-types/shared/src/dom.d.ts     | 113 +++++++++++++++++-
 .../DocsTransformer.js                        |   8 +-
 .../react-aria-components/src/Breadcrumbs.tsx |  16 ++-
 packages/react-aria-components/src/Button.tsx |  13 +-
 .../react-aria-components/src/Calendar.tsx    |  45 ++++---
 .../react-aria-components/src/Checkbox.tsx    |  13 +-
 .../react-aria-components/src/Collection.tsx  |   4 +-
 .../react-aria-components/src/ColorArea.tsx   |  11 +-
 .../react-aria-components/src/ColorField.tsx  |   6 +-
 .../react-aria-components/src/ColorSlider.tsx |   5 +-
 .../react-aria-components/src/ColorSwatch.tsx |   9 +-
 .../src/ColorSwatchPicker.tsx                 |   6 +-
 .../react-aria-components/src/ColorThumb.tsx  |   6 +-
 .../react-aria-components/src/ColorWheel.tsx  |   9 +-
 .../react-aria-components/src/ComboBox.tsx    |   6 +-
 .../react-aria-components/src/DateField.tsx   |  18 +--
 .../react-aria-components/src/DatePicker.tsx  |  20 ++--
 packages/react-aria-components/src/Dialog.tsx |  12 +-
 .../react-aria-components/src/Disclosure.tsx  |  24 ++--
 .../react-aria-components/src/DropZone.tsx    |   9 +-
 .../react-aria-components/src/FieldError.tsx  |   6 +-
 .../react-aria-components/src/FileTrigger.tsx |   5 +-
 packages/react-aria-components/src/Form.tsx   |   3 +-
 .../react-aria-components/src/GridList.tsx    |  21 ++--
 packages/react-aria-components/src/Link.tsx   |   9 +-
 .../react-aria-components/src/ListBox.tsx     |  31 ++---
 packages/react-aria-components/src/Menu.tsx   |  27 +++--
 packages/react-aria-components/src/Meter.tsx  |   9 +-
 packages/react-aria-components/src/Modal.tsx  |  10 +-
 .../react-aria-components/src/NumberField.tsx |   6 +-
 .../react-aria-components/src/Popover.tsx     |   6 +-
 .../react-aria-components/src/ProgressBar.tsx |   8 +-
 .../react-aria-components/src/RadioGroup.tsx  |  13 +-
 .../react-aria-components/src/SearchField.tsx |   5 +-
 packages/react-aria-components/src/Select.tsx |  12 +-
 .../react-aria-components/src/Separator.tsx   |  10 +-
 packages/react-aria-components/src/Slider.tsx |  20 ++--
 packages/react-aria-components/src/Switch.tsx |   6 +-
 packages/react-aria-components/src/Table.tsx  |  62 +++++-----
 packages/react-aria-components/src/Tabs.tsx   |  30 ++---
 .../react-aria-components/src/TagGroup.tsx    |  18 +--
 .../react-aria-components/src/TextField.tsx   |   5 +-
 packages/react-aria-components/src/Toast.tsx  |  18 +--
 .../src/ToggleButton.tsx                      |  11 +-
 .../src/ToggleButtonGroup.tsx                 |  10 +-
 .../react-aria-components/src/Toolbar.tsx     |   9 +-
 .../react-aria-components/src/Tooltip.tsx     |  11 +-
 packages/react-aria-components/src/Tree.tsx   |  16 +--
 packages/react-aria-components/src/utils.tsx  |   7 +-
 50 files changed, 507 insertions(+), 306 deletions(-)

diff --git a/packages/@react-aria/utils/src/filterDOMProps.ts b/packages/@react-aria/utils/src/filterDOMProps.ts
index 7912334f985..b5819d8bd6a 100644
--- a/packages/@react-aria/utils/src/filterDOMProps.ts
+++ b/packages/@react-aria/utils/src/filterDOMProps.ts
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, DOMProps, LinkDOMProps} from '@react-types/shared';
+import {AriaLabelingProps, DOMProps, GlobalDOMAttributes, LinkDOMProps} from '@react-types/shared';
 
 const DOMPropNames = new Set([
   'id'
@@ -34,6 +34,50 @@ const linkPropNames = new Set([
   'referrerPolicy'
 ]);
 
+const globalAttrs = new Set([
+  'dir',
+  'lang',
+  'hidden',
+  'inert',
+  'translate'
+]);
+
+const globalEvents = new Set([
+  'onAuxClick',
+  'onContextMenu',
+  'onDoubleClick',
+  'onMouseDown',
+  'onMouseEnter',
+  'onMouseLeave',
+  'onMouseMove',
+  'onMouseOut',
+  'onMouseOver',
+  'onMouseUp',
+  'onTouchCancel',
+  'onTouchEnd',
+  'onTouchMove',
+  'onTouchStart',
+  'onPointerDown',
+  'onPointerMove',
+  'onPointerUp',
+  'onPointerCancel',
+  'onPointerEnter',
+  'onPointerLeave',
+  'onPointerOver',
+  'onPointerOut',
+  'onGotPointerCapture',
+  'onLostPointerCapture',
+  'onScroll',
+  'onWheel',
+  'onAnimationStart',
+  'onAnimationEnd',
+  'onAnimationIteration',
+  'onTransitionCancel',
+  'onTransitionEnd',
+  'onTransitionRun',
+  'onTransitionStart'
+]);
+
 interface Options {
   /**
    * If labelling associated aria properties should be included in the filter.
@@ -41,6 +85,10 @@ interface Options {
   labelable?: boolean,
   /** Whether the element is a link and should include DOM props for <a> elements. */
   isLink?: boolean,
+  /** Whether to include global DOM attributes. */
+  global?: boolean,
+  /** Whether to include DOM events. */
+  events?: boolean,
   /**
    * A Set of other property names that should be included in the filter.
    */
@@ -54,8 +102,8 @@ const propRe = /^(data-.*)$/;
  * @param props - The component props to be filtered.
  * @param opts - Props to override.
  */
-export function filterDOMProps(props: DOMProps & AriaLabelingProps & LinkDOMProps, opts: Options = {}): DOMProps & AriaLabelingProps {
-  let {labelable, isLink, propNames} = opts;
+export function filterDOMProps(props: DOMProps & AriaLabelingProps & LinkDOMProps & GlobalDOMAttributes, opts: Options = {}): DOMProps & AriaLabelingProps {
+  let {labelable, isLink, global, events = global, propNames} = opts;
   let filteredProps = {};
 
   for (const prop in props) {
@@ -64,6 +112,8 @@ export function filterDOMProps(props: DOMProps & AriaLabelingProps & LinkDOMProp
         DOMPropNames.has(prop) ||
         (labelable && labelablePropNames.has(prop)) ||
         (isLink && linkPropNames.has(prop)) ||
+        (global && globalAttrs.has(prop)) ||
+        (events && globalEvents.has(prop) || (prop.endsWith('Capture') && globalEvents.has(prop.slice(0, -7)))) ||
         propNames?.has(prop) ||
         propRe.test(prop)
       )
diff --git a/packages/@react-types/shared/src/dom.d.ts b/packages/@react-types/shared/src/dom.d.ts
index d6acd30ba68..9e49190f117 100644
--- a/packages/@react-types/shared/src/dom.d.ts
+++ b/packages/@react-types/shared/src/dom.d.ts
@@ -11,6 +11,7 @@
  */
 
 import {
+  AnimationEventHandler,
   AriaAttributes,
   AriaRole,
   ClipboardEventHandler,
@@ -19,8 +20,14 @@ import {
   FormEventHandler,
   HTMLAttributeAnchorTarget,
   HTMLAttributeReferrerPolicy,
+  MouseEventHandler,
+  PointerEventHandler,
   DOMAttributes as ReactDOMAttributes,
-  ReactEventHandler
+  ReactEventHandler,
+  TouchEventHandler,
+  TransitionEventHandler,
+  UIEventHandler,
+  WheelEventHandler
 } from 'react';
 
 export interface AriaLabelingProps {
@@ -223,3 +230,107 @@ export interface DOMAttributes<T = FocusableElement> extends AriaAttributes, Rea
 export interface GroupDOMAttributes extends Omit<DOMAttributes<HTMLElement>, 'role'> {
   role?: 'group' | 'region' | 'presentation'
 }
+
+/**
+ * Global attributes that can be applied to any DOM element.
+ * @private
+ */
+// NOTE: id is handled elsewhere (DOMProps).
+export interface GlobalDOMAttributes<T = Element> extends GlobalDOMEvents<T> {
+  dir?: string | undefined,
+  lang?: string | undefined,
+  hidden?: boolean | undefined,
+  inert?: boolean | undefined,
+  translate?: 'yes' | 'no' | undefined
+}
+
+/**
+ * Global DOM events that are supported on all DOM elements.
+ * @private
+ */
+// NOTES:
+//   - Drag and drop events are omitted for now.
+//   - Keyboard and focus events are supported directly on focusable elements (FocusableProps).
+//   - Text input events (e.g. onInput, onCompositionStart, onCopy) are 
+//     supported only directly on input elements (TextInputDOMProps).
+//     We don't support contentEditable on our components.
+//   - Media events should be handled directly on the <video>/<audio><img> element.
+export interface GlobalDOMEvents<T = Element> {
+  // MouseEvents
+  onClick?: MouseEventHandler<T> | undefined,
+  onClickCapture?: MouseEventHandler<T> | undefined,
+  onAuxClick?: MouseEventHandler<T> | undefined,
+  onAuxClickCapture?: MouseEventHandler<T> | undefined,
+  onContextMenu?: MouseEventHandler<T> | undefined,
+  onContextMenuCapture?: MouseEventHandler<T> | undefined,
+  onDoubleClick?: MouseEventHandler<T> | undefined,
+  onDoubleClickCapture?: MouseEventHandler<T> | undefined,
+  onMouseDown?: MouseEventHandler<T> | undefined,
+  onMouseDownCapture?: MouseEventHandler<T> | undefined,
+  onMouseEnter?: MouseEventHandler<T> | undefined,
+  onMouseLeave?: MouseEventHandler<T> | undefined,
+  onMouseMove?: MouseEventHandler<T> | undefined,
+  onMouseMoveCapture?: MouseEventHandler<T> | undefined,
+  onMouseOut?: MouseEventHandler<T> | undefined,
+  onMouseOutCapture?: MouseEventHandler<T> | undefined,
+  onMouseOver?: MouseEventHandler<T> | undefined,
+  onMouseOverCapture?: MouseEventHandler<T> | undefined,
+  onMouseUp?: MouseEventHandler<T> | undefined,
+  onMouseUpCapture?: MouseEventHandler<T> | undefined,
+
+  // Touch Events
+  onTouchCancel?: TouchEventHandler<T> | undefined,
+  onTouchCancelCapture?: TouchEventHandler<T> | undefined,
+  onTouchEnd?: TouchEventHandler<T> | undefined,
+  onTouchEndCapture?: TouchEventHandler<T> | undefined,
+  onTouchMove?: TouchEventHandler<T> | undefined,
+  onTouchMoveCapture?: TouchEventHandler<T> | undefined,
+  onTouchStart?: TouchEventHandler<T> | undefined,
+  onTouchStartCapture?: TouchEventHandler<T> | undefined,
+
+  // Pointer Events
+  onPointerDown?: PointerEventHandler<T> | undefined,
+  onPointerDownCapture?: PointerEventHandler<T> | undefined,
+  onPointerMove?: PointerEventHandler<T> | undefined,
+  onPointerMoveCapture?: PointerEventHandler<T> | undefined,
+  onPointerUp?: PointerEventHandler<T> | undefined,
+  onPointerUpCapture?: PointerEventHandler<T> | undefined,
+  onPointerCancel?: PointerEventHandler<T> | undefined,
+  onPointerCancelCapture?: PointerEventHandler<T> | undefined,
+  onPointerEnter?: PointerEventHandler<T> | undefined,
+  onPointerLeave?: PointerEventHandler<T> | undefined,
+  onPointerOver?: PointerEventHandler<T> | undefined,
+  onPointerOverCapture?: PointerEventHandler<T> | undefined,
+  onPointerOut?: PointerEventHandler<T> | undefined,
+  onPointerOutCapture?: PointerEventHandler<T> | undefined,
+  onGotPointerCapture?: PointerEventHandler<T> | undefined,
+  onGotPointerCaptureCapture?: PointerEventHandler<T> | undefined,
+  onLostPointerCapture?: PointerEventHandler<T> | undefined,
+  onLostPointerCaptureCapture?: PointerEventHandler<T> | undefined,
+
+  // UI Events
+  onScroll?: UIEventHandler<T> | undefined,
+  onScrollCapture?: UIEventHandler<T> | undefined,
+
+  // Wheel Events
+  onWheel?: WheelEventHandler<T> | undefined,
+  onWheelCapture?: WheelEventHandler<T> | undefined,
+
+  // Animation Events
+  onAnimationStart?: AnimationEventHandler<T> | undefined,
+  onAnimationStartCapture?: AnimationEventHandler<T> | undefined,
+  onAnimationEnd?: AnimationEventHandler<T> | undefined,
+  onAnimationEndCapture?: AnimationEventHandler<T> | undefined,
+  onAnimationIteration?: AnimationEventHandler<T> | undefined,
+  onAnimationIterationCapture?: AnimationEventHandler<T> | undefined,
+
+  // Transition Events
+  onTransitionCancel?: TransitionEventHandler<T> | undefined,
+  onTransitionCancelCapture?: TransitionEventHandler<T> | undefined,
+  onTransitionEnd?: TransitionEventHandler<T> | undefined,
+  onTransitionEndCapture?: TransitionEventHandler<T> | undefined,
+  onTransitionRun?: TransitionEventHandler<T> | undefined,
+  onTransitionRunCapture?: TransitionEventHandler<T> | undefined,
+  onTransitionStart?: TransitionEventHandler<T> | undefined,
+  onTransitionStartCapture?: TransitionEventHandler<T> | undefined
+}
diff --git a/packages/dev/parcel-transformer-docs/DocsTransformer.js b/packages/dev/parcel-transformer-docs/DocsTransformer.js
index 29f258c10b8..3a6ca7f0205 100644
--- a/packages/dev/parcel-transformer-docs/DocsTransformer.js
+++ b/packages/dev/parcel-transformer-docs/DocsTransformer.js
@@ -376,7 +376,7 @@ module.exports = new Transformer({
         let exts = path.node.extends ? path.get('extends').map(e => processExport(e)) : [];
         let docs = getJSDocs(path);
 
-        return Object.assign(node, addDocs({
+        let res = Object.assign(node, addDocs({
           type: 'interface',
           id: `${asset.filePath}:${path.node.id.name}`,
           name: path.node.id.name,
@@ -384,6 +384,12 @@ module.exports = new Transformer({
           properties,
           typeParameters: path.node.typeParameters ? path.get('typeParameters.params').map(p => processExport(p)) : []
         }, docs));
+        if (res.access === 'private') {
+          for (let prop in res.properties) {
+            res.properties[prop].access = 'private';
+          }
+        }
+        return res;
       }
 
       if (path.isTSTypeLiteral()) {
diff --git a/packages/react-aria-components/src/Breadcrumbs.tsx b/packages/react-aria-components/src/Breadcrumbs.tsx
index fab3127041d..832a5121158 100644
--- a/packages/react-aria-components/src/Breadcrumbs.tsx
+++ b/packages/react-aria-components/src/Breadcrumbs.tsx
@@ -13,13 +13,13 @@ import {AriaBreadcrumbsProps, useBreadcrumbs} from 'react-aria';
 import {Collection, CollectionBuilder, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext} from './Collection';
 import {ContextValue, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
-import {filterDOMProps} from '@react-aria/utils';
-import {forwardRefType, Key} from '@react-types/shared';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
 import {LinkContext} from './Link';
 import {Node} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 
-export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps {
+export interface BreadcrumbsProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, AriaBreadcrumbsProps, StyleProps, SlotProps, GlobalDOMAttributes<HTMLOListElement> {
   /** Whether the breadcrumbs are disabled. */
   isDisabled?: boolean,
   /** Handler that is called when a breadcrumb is clicked. */
@@ -35,13 +35,14 @@ export const Breadcrumbs = /*#__PURE__*/ (forwardRef as forwardRefType)(function
   [props, ref] = useContextProps(props, ref, BreadcrumbsContext);
   let {CollectionRoot} = useContext(CollectionRendererContext);
   let {navProps} = useBreadcrumbs(props);
+  let DOMProps = filterDOMProps(props, {global: true});
 
   return (
     <CollectionBuilder content={<Collection {...props} />}>
       {collection => (
         <ol
           ref={ref}
-          {...navProps}
+          {...mergeProps(DOMProps, navProps)}
           slot={props.slot || undefined}
           style={props.style}
           className={props.className ?? 'react-aria-Breadcrumbs'}>
@@ -67,7 +68,7 @@ export interface BreadcrumbRenderProps {
   isDisabled: boolean
 }
 
-export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>  {
+export interface BreadcrumbProps extends RenderProps<BreadcrumbRenderProps>, GlobalDOMAttributes<HTMLLIElement>  {
   /** A unique id for the breadcrumb, which will be passed to `onAction` when the breadcrumb is pressed. */
   id?: Key
 }
@@ -92,9 +93,12 @@ export const Breadcrumb = /*#__PURE__*/ createLeafComponent('item', function Bre
     defaultClassName: 'react-aria-Breadcrumb'
   });
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+
   return (
     <li
-      {...filterDOMProps(props as any)}
+      {...DOMProps}
       {...renderProps}
       ref={ref}
       data-disabled={isDisabled || isCurrent || undefined}
diff --git a/packages/react-aria-components/src/Button.tsx b/packages/react-aria-components/src/Button.tsx
index 808e169332b..ceaab6449a6 100644
--- a/packages/react-aria-components/src/Button.tsx
+++ b/packages/react-aria-components/src/Button.tsx
@@ -29,6 +29,7 @@ import {
 } from './utils';
 import {createHideableComponent} from '@react-aria/collections';
 import {filterDOMProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import {ProgressBarContext} from './ProgressBar';
 import React, {createContext, ForwardedRef, useEffect, useRef} from 'react';
 
@@ -65,7 +66,7 @@ export interface ButtonRenderProps {
   isPending: boolean
 }
 
-export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ButtonRenderProps> {
+export interface ButtonProps extends Omit<AriaButtonProps, 'children' | 'href' | 'target' | 'rel' | 'elementType'>, HoverEvents, SlotProps, RenderProps<ButtonRenderProps>, Omit<GlobalDOMAttributes<HTMLButtonElement>, 'onClick'> {
   /**
    * The `<form>` element to associate the button with.
    * The value of this attribute must be the id of a `<form>` in the same document.
@@ -157,13 +158,13 @@ export const Button = /*#__PURE__*/ createHideableComponent(function Button(prop
     wasPending.current = isPending;
   }, [isPending, isFocused, ariaLabelledby, buttonId]);
 
-  // When the button is in a pending state, we want to stop implicit form submission (ie. when the user presses enter on a text input).
-  // We do this by changing the button's type to button.
+  let DOMProps = filterDOMProps(props, {global: true, propNames: additionalButtonHTMLAttributes});
+
   return (
     <button
-      {...filterDOMProps(props, {propNames: additionalButtonHTMLAttributes})}
-      {...mergeProps(buttonProps, focusProps, hoverProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, buttonProps, focusProps, hoverProps)}
+      // When the button is in a pending state, we want to stop implicit form submission (ie. when the user presses enter on a text input).
+      // We do this by changing the button's type to button.
       type={buttonProps.type === 'submit' && isPending ? 'button' : buttonProps.type}
       id={buttonId}
       ref={ref}
diff --git a/packages/react-aria-components/src/Calendar.tsx b/packages/react-aria-components/src/Calendar.tsx
index f3ed804b892..8f03875227e 100644
--- a/packages/react-aria-components/src/Calendar.tsx
+++ b/packages/react-aria-components/src/Calendar.tsx
@@ -27,7 +27,7 @@ import {ButtonContext} from './Button';
 import {CalendarDate, CalendarIdentifier, createCalendar, DateDuration, endOfMonth, Calendar as ICalendar, isSameDay, isSameMonth} from '@internationalized/date';
 import {CalendarState, RangeCalendarState, useCalendarState, useRangeCalendarState} from 'react-stately';
 import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleProps, useContextProps, useRenderProps, useSlottedContext} from './utils';
-import {DOMAttributes, FocusableElement, forwardRefType, HoverEvents} from '@react-types/shared';
+import {DOMAttributes, FocusableElement, forwardRefType, GlobalDOMAttributes, HoverEvents} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import {HeadingContext} from './RSPContexts';
 import React, {createContext, ForwardedRef, forwardRef, ReactElement, useContext, useRef} from 'react';
@@ -57,7 +57,7 @@ export interface RangeCalendarRenderProps extends Omit<CalendarRenderProps, 'sta
   state: RangeCalendarState
 }
 
-export interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarProps<T>, 'errorMessage' | 'validationState'>, RenderProps<CalendarRenderProps>, SlotProps {
+export interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarProps<T>, 'errorMessage' | 'validationState'>, RenderProps<CalendarRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The amount of days that will be displayed at once. This affects how pagination works.
    * @default {months: 1}
@@ -72,7 +72,7 @@ export interface CalendarProps<T extends DateValue> extends Omit<AriaCalendarPro
   createCalendar?: (identifier: CalendarIdentifier) => ICalendar
 }
 
-export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeCalendarProps<T>, 'errorMessage' | 'validationState'>, RenderProps<RangeCalendarRenderProps>, SlotProps {
+export interface RangeCalendarProps<T extends DateValue> extends Omit<AriaRangeCalendarProps<T>, 'errorMessage' | 'validationState'>, RenderProps<RangeCalendarRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The amount of days that will be displayed at once. This affects how pagination works.
    * @default {months: 1}
@@ -116,10 +116,11 @@ export const Calendar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ca
     defaultClassName: 'react-aria-Calendar'
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...renderProps}
-      {...calendarProps}
+      {...mergeProps(DOMProps, renderProps, calendarProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-disabled={props.isDisabled || undefined}
@@ -193,10 +194,11 @@ export const RangeCalendar = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
     defaultClassName: 'react-aria-RangeCalendar'
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...renderProps}
-      {...calendarProps}
+      {...mergeProps(renderProps, DOMProps, calendarProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-disabled={props.isDisabled || undefined}
@@ -318,7 +320,7 @@ export interface CalendarCellRenderProps {
   isInvalid: boolean
 }
 
-export interface CalendarGridProps extends StyleProps {
+export interface CalendarGridProps extends StyleProps, GlobalDOMAttributes<HTMLTableElement> {
   /**
    * Either a function to render calendar cells for each date in the month,
    * or children containing a `<CalendarGridHeader>`` and `<CalendarGridBody>`
@@ -372,11 +374,12 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
     firstDayOfWeek
   }, state);
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <InternalCalendarGridContext.Provider value={{headerProps, weekDays, startDate, weeksInMonth}}>
       <table
-        {...filterDOMProps(props as any)}
-        {...gridProps}
+        {...mergeProps(DOMProps, gridProps)}
         ref={ref}
         style={props.style}
         className={props.className ?? 'react-aria-CalendarGrid'}>
@@ -396,7 +399,7 @@ export const CalendarGrid = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
   );
 });
 
-export interface CalendarGridHeaderProps extends StyleProps {
+export interface CalendarGridHeaderProps extends StyleProps, GlobalDOMAttributes<HTMLTableSectionElement> {
   /** A function to render a `<CalendarHeaderCell>` for a weekday name. */
   children: (day: string) => ReactElement
 }
@@ -404,11 +407,11 @@ export interface CalendarGridHeaderProps extends StyleProps {
 function CalendarGridHeader(props: CalendarGridHeaderProps, ref: ForwardedRef<HTMLTableSectionElement>) {
   let {children, style, className} = props;
   let {headerProps, weekDays} = useContext(InternalCalendarGridContext)!;
+  let DOMProps = filterDOMProps(props, {global: true});
 
   return (
     <thead
-      {...filterDOMProps(props as any)}
-      {...headerProps}
+      {...mergeProps(DOMProps, headerProps)}
       ref={ref}
       style={style}
       className={className || 'react-aria-CalendarGridHeader'}>
@@ -425,13 +428,14 @@ function CalendarGridHeader(props: CalendarGridHeaderProps, ref: ForwardedRef<HT
 const CalendarGridHeaderForwardRef = /*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridHeader);
 export {CalendarGridHeaderForwardRef as CalendarGridHeader};
 
-export interface CalendarHeaderCellProps extends DOMProps {}
+export interface CalendarHeaderCellProps extends DOMProps, GlobalDOMAttributes<HTMLTableHeaderCellElement> {}
 
 function CalendarHeaderCell(props: CalendarHeaderCellProps, ref: ForwardedRef<HTMLTableCellElement>) {
   let {children, style, className} = props;
+  let DOMProps = filterDOMProps(props, {global: true});
   return (
     <th
-      {...filterDOMProps(props as any)}
+      {...DOMProps}
       ref={ref}
       style={style}
       className={className || 'react-aria-CalendarHeaderCell'}>
@@ -446,7 +450,7 @@ function CalendarHeaderCell(props: CalendarHeaderCellProps, ref: ForwardedRef<HT
 const CalendarHeaderCellForwardRef = forwardRef(CalendarHeaderCell);
 export {CalendarHeaderCellForwardRef as CalendarHeaderCell};
 
-export interface CalendarGridBodyProps extends StyleProps {
+export interface CalendarGridBodyProps extends StyleProps, GlobalDOMAttributes<HTMLTableSectionElement> {
   /** A function to render a `<CalendarCell>` for a given date. */
   children: (date: CalendarDate) => ReactElement
 }
@@ -457,10 +461,11 @@ function CalendarGridBody(props: CalendarGridBodyProps, ref: ForwardedRef<HTMLTa
   let rangeCalendarState = useContext(RangeCalendarStateContext);
   let state = calendarState ?? rangeCalendarState!;
   let {startDate, weeksInMonth} = useContext(InternalCalendarGridContext)!;
+  let DOMProps = filterDOMProps(props, {global: true});
 
   return (
     <tbody
-      {...filterDOMProps(props as any)}
+      {...DOMProps}
       ref={ref}
       style={style}
       className={className || 'react-aria-CalendarGridBody'}>
@@ -483,7 +488,7 @@ function CalendarGridBody(props: CalendarGridBodyProps, ref: ForwardedRef<HTMLTa
 const CalendarGridBodyForwardRef = /*#__PURE__*/ (forwardRef as forwardRefType)(CalendarGridBody);
 export {CalendarGridBodyForwardRef as CalendarGridBody};
 
-export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps>, HoverEvents {
+export interface CalendarCellProps extends RenderProps<CalendarCellRenderProps>, HoverEvents, GlobalDOMAttributes<HTMLTableCellElement> {
   /** The date to render in the cell. */
   date: CalendarDate
 }
@@ -544,9 +549,11 @@ export const CalendarCell = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
     'data-invalid': states.isInvalid || undefined
   };
 
+  let DOMProps = filterDOMProps(otherProps, {global: true});
+
   return (
     <td {...cellProps} ref={ref}>
-      <div {...mergeProps(filterDOMProps(otherProps as any), buttonProps, focusProps, hoverProps, dataAttrs, renderProps)} ref={buttonRef} />
+      <div {...mergeProps(DOMProps, buttonProps, focusProps, hoverProps, dataAttrs, renderProps)} ref={buttonRef} />
     </td>
   );
 });
diff --git a/packages/react-aria-components/src/Checkbox.tsx b/packages/react-aria-components/src/Checkbox.tsx
index 5b3796f53c2..969b1ab071e 100644
--- a/packages/react-aria-components/src/Checkbox.tsx
+++ b/packages/react-aria-components/src/Checkbox.tsx
@@ -16,13 +16,13 @@ import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType, RefObject} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {TextContext} from './Text';
 
-export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps>, SlotProps {}
-export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps>, SlotProps {
+export interface CheckboxGroupProps extends Omit<AriaCheckboxGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<CheckboxGroupRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
+export interface CheckboxProps extends Omit<AriaCheckboxProps, 'children' | 'validationState' | 'validationBehavior'>, HoverEvents, RACValidation, RenderProps<CheckboxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLLabelElement> {
   /**
    * A ref for the HTML input element.
    */
@@ -144,10 +144,11 @@ export const CheckboxGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(functi
     defaultClassName: 'react-aria-CheckboxGroup'
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...groupProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, groupProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-readonly={state.isReadOnly || undefined}
@@ -229,7 +230,7 @@ export const Checkbox = /*#__PURE__*/ (forwardRef as forwardRefType)(function Ch
     }
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/Collection.tsx b/packages/react-aria-components/src/Collection.tsx
index 9508272bbf9..ed1bc25174b 100644
--- a/packages/react-aria-components/src/Collection.tsx
+++ b/packages/react-aria-components/src/Collection.tsx
@@ -9,7 +9,7 @@
  * OF ANY KIND, either express or implied. See the License for the specific language
  * governing permissions and limitations under the License.
  */
-import {CollectionBase, DropTargetDelegate, ItemDropTarget, Key, LayoutDelegate, RefObject} from '@react-types/shared';
+import {CollectionBase, DropTargetDelegate, GlobalDOMAttributes, ItemDropTarget, Key, LayoutDelegate, RefObject} from '@react-types/shared';
 import {createBranchComponent, useCachedChildren} from '@react-aria/collections';
 import {Collection as ICollection, Node, SelectionBehavior, SelectionMode, SectionProps as SharedSectionProps} from 'react-stately';
 import React, {cloneElement, createContext, ForwardedRef, HTMLAttributes, isValidElement, JSX, ReactElement, ReactNode, useContext, useMemo} from 'react';
@@ -81,7 +81,7 @@ export interface ItemRenderProps {
   isDropTarget?: boolean
 }
 
-export interface SectionProps<T> extends Omit<SharedSectionProps<T>, 'children' | 'title'>, StyleProps {
+export interface SectionProps<T> extends Omit<SharedSectionProps<T>, 'children' | 'title'>, StyleProps, GlobalDOMAttributes<HTMLElement> {
   /** The unique id of the section. */
   id?: Key,
   /** The object value that this section represents. When using dynamic collections, this is set automatically. */
diff --git a/packages/react-aria-components/src/ColorArea.tsx b/packages/react-aria-components/src/ColorArea.tsx
index 52b23c85621..c13467d9ed5 100644
--- a/packages/react-aria-components/src/ColorArea.tsx
+++ b/packages/react-aria-components/src/ColorArea.tsx
@@ -1,7 +1,8 @@
 import {AriaColorAreaProps, useColorArea} from 'react-aria';
 import {ColorAreaContext} from './RSPContexts';
 import {ColorAreaState, useColorAreaState} from 'react-stately';
-import {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import {InternalColorThumbContext} from './ColorThumb';
 import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import React, {createContext, ForwardedRef, forwardRef, useRef} from 'react';
@@ -18,7 +19,7 @@ export interface ColorAreaRenderProps {
   state: ColorAreaState
 }
 
-export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, SlotProps {}
+export interface ColorAreaProps extends AriaColorAreaProps, RenderProps<ColorAreaRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const ColorAreaStateContext = createContext<ColorAreaState | null>(null);
 
@@ -53,15 +54,13 @@ export const ColorArea = forwardRef(function ColorArea(props: ColorAreaProps, re
     }
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
     <div
       ref={ref}
-      {...colorAreaProps}
-      {...DOMProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, colorAreaProps)}
       slot={props.slot || undefined}
       data-disabled={props.isDisabled || undefined}>
       <Provider
diff --git a/packages/react-aria-components/src/ColorField.tsx b/packages/react-aria-components/src/ColorField.tsx
index 7ac9326601a..fae4d9b961e 100644
--- a/packages/react-aria-components/src/ColorField.tsx
+++ b/packages/react-aria-components/src/ColorField.tsx
@@ -15,8 +15,8 @@ import {ColorChannel, ColorFieldState, ColorSpace, useColorChannelFieldState, us
 import {ColorFieldContext} from './RSPContexts';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps} from '@react-aria/utils';
+import {GlobalDOMAttributes, InputDOMProps, ValidationResult} from '@react-types/shared';
 import {InputContext} from './Input';
-import {InputDOMProps, ValidationResult} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, LabelHTMLAttributes, Ref, useRef} from 'react';
@@ -44,7 +44,7 @@ export interface ColorFieldRenderProps {
   state: ColorFieldState
 }
 
-export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, SlotProps {
+export interface ColorFieldProps extends Omit<AriaColorFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<ColorFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The color channel that this field edits. If not provided, 
    * the color is edited as a hex value.
@@ -181,7 +181,7 @@ function useChildren(
     defaultClassName: 'react-aria-ColorField'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/ColorSlider.tsx b/packages/react-aria-components/src/ColorSlider.tsx
index 9b2924a5c64..d545a55680a 100644
--- a/packages/react-aria-components/src/ColorSlider.tsx
+++ b/packages/react-aria-components/src/ColorSlider.tsx
@@ -2,6 +2,7 @@ import {AriaColorSliderProps, Orientation, useColorSlider, useLocale} from 'reac
 import {ColorSliderContext} from './RSPContexts';
 import {ColorSliderState, useColorSliderState} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import {InternalColorThumbContext} from './ColorThumb';
 import {LabelContext} from './Label';
 import {Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
@@ -25,7 +26,7 @@ export interface ColorSliderRenderProps {
   state: ColorSliderState
 }
 
-export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, SlotProps {}
+export interface ColorSliderProps extends Omit<AriaColorSliderProps, 'label'>, RenderProps<ColorSliderRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const ColorSliderStateContext = createContext<ColorSliderState | null>(null);
 
@@ -65,7 +66,7 @@ export const ColorSlider = forwardRef(function ColorSlider(props: ColorSliderPro
     defaultClassName: 'react-aria-ColorSlider'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/ColorSwatch.tsx b/packages/react-aria-components/src/ColorSwatch.tsx
index a19eb138502..28a672b2e70 100644
--- a/packages/react-aria-components/src/ColorSwatch.tsx
+++ b/packages/react-aria-components/src/ColorSwatch.tsx
@@ -1,6 +1,8 @@
 import {AriaColorSwatchProps, useColorSwatch} from 'react-aria';
 import {Color} from 'react-stately';
 import {ContextValue, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 
 export interface ColorSwatchRenderProps {
@@ -8,7 +10,7 @@ export interface ColorSwatchRenderProps {
   color: Color
 }
 
-export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, SlotProps {}
+export interface ColorSwatchProps extends AriaColorSwatchProps, StyleRenderProps<ColorSwatchRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const ColorSwatchContext = createContext<ContextValue<ColorSwatchProps, HTMLDivElement>>(null);
 
@@ -26,11 +28,12 @@ export const ColorSwatch = forwardRef(function ColorSwatch(props: ColorSwatchPro
       color
     }
   });
+
+  let DOMProps = filterDOMProps(props, {global: true});
   
   return (
     <div
-      {...colorSwatchProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, colorSwatchProps)}
       slot={props.slot || undefined}
       ref={ref} />
   );
diff --git a/packages/react-aria-components/src/ColorSwatchPicker.tsx b/packages/react-aria-components/src/ColorSwatchPicker.tsx
index 3df54e518e6..22fa2760edd 100644
--- a/packages/react-aria-components/src/ColorSwatchPicker.tsx
+++ b/packages/react-aria-components/src/ColorSwatchPicker.tsx
@@ -1,4 +1,4 @@
-import {AriaLabelingProps, HoverEvents, ValueBase} from '@react-types/shared';
+import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents, ValueBase} from '@react-types/shared';
 import {Color, parseColor, useColorPickerState} from 'react-stately';
 import {ColorSwatchContext} from './ColorSwatch';
 import {composeRenderProps, ContextValue, RenderProps, StyleRenderProps, useContextProps} from './utils';
@@ -10,7 +10,7 @@ import React, {createContext, ForwardedRef, forwardRef, ReactNode, useContext, u
 import {useLocale, useLocalizedStringFormatter} from 'react-aria';
 
 export interface ColorSwatchPickerRenderProps extends Omit<ListBoxRenderProps, 'isDropTarget'> {}
-export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps> {
+export interface ColorSwatchPickerProps extends ValueBase<string | Color, Color>, AriaLabelingProps, StyleRenderProps<ColorSwatchPickerRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   /** The children of the ColorSwatchPicker. */
   children?: ReactNode,
   /**
@@ -61,7 +61,7 @@ export interface ColorSwatchPickerItemRenderProps extends Omit<ListBoxItemRender
   color: Color
 }
 
-export interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents {
+export interface ColorSwatchPickerItemProps extends RenderProps<ColorSwatchPickerItemRenderProps>, HoverEvents, GlobalDOMAttributes<HTMLDivElement> {
   /** The color of the swatch. */
   color: string | Color,
   /** Whether the color swatch is disabled. */
diff --git a/packages/react-aria-components/src/ColorThumb.tsx b/packages/react-aria-components/src/ColorThumb.tsx
index b33b07b912b..41fa7b8f4e3 100644
--- a/packages/react-aria-components/src/ColorThumb.tsx
+++ b/packages/react-aria-components/src/ColorThumb.tsx
@@ -1,6 +1,6 @@
 import {Color} from 'react-stately';
 import {filterDOMProps} from '@react-aria/utils';
-import {HoverEvents, RefObject} from '@react-types/shared';
+import {GlobalDOMAttributes, HoverEvents, RefObject} from '@react-types/shared';
 import {mergeProps, useFocusRing, useHover} from 'react-aria';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, InputHTMLAttributes, useContext} from 'react';
 import {RenderProps, useRenderProps} from './utils';
@@ -54,7 +54,7 @@ export interface ColorThumbRenderProps {
   isDisabled: boolean
 }
 
-export interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps> {}
+export interface ColorThumbProps extends HoverEvents, RenderProps<ColorThumbRenderProps>, GlobalDOMAttributes<HTMLDivElement> {}
 
 /**
  * A color thumb appears within a ColorArea, ColorSlider, or ColorWheel and allows a user to drag to adjust the color value.
@@ -81,7 +81,7 @@ export const ColorThumb = forwardRef(function ColorThumb(props: ColorThumbProps,
     }
   });
 
-  let DOMProps = filterDOMProps(props as any);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/ColorWheel.tsx b/packages/react-aria-components/src/ColorWheel.tsx
index 71dd0301849..103fdd55acc 100644
--- a/packages/react-aria-components/src/ColorWheel.tsx
+++ b/packages/react-aria-components/src/ColorWheel.tsx
@@ -3,6 +3,7 @@ import {ColorWheelContext} from './RSPContexts';
 import {ColorWheelState, useColorWheelState} from 'react-stately';
 import {ContextValue, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import {InternalColorThumbContext} from './ColorThumb';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, useContext, useRef} from 'react';
 
@@ -18,7 +19,7 @@ export interface ColorWheelRenderProps {
   state: ColorWheelState
 }
 
-export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps {}
+export interface ColorWheelProps extends AriaColorWheelOptions, RenderProps<ColorWheelRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const ColorWheelStateContext = createContext<ColorWheelState | null>(null);
 
@@ -43,7 +44,7 @@ export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps,
     }
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
@@ -66,8 +67,8 @@ export const ColorWheel = forwardRef(function ColorWheel(props: ColorWheelProps,
 });
 
 export interface ColorWheelTrackRenderProps extends ColorWheelRenderProps {}
-export interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps> {}
-interface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, ColorWheelTrackProps {}
+export interface ColorWheelTrackProps extends StyleRenderProps<ColorWheelTrackRenderProps>, GlobalDOMAttributes<HTMLDivElement> {}
+interface ColorWheelTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, StyleRenderProps<ColorWheelTrackRenderProps> {}
 
 export const ColorWheelTrackContext = createContext<ContextValue<ColorWheelTrackContextValue, HTMLDivElement>>(null);
 
diff --git a/packages/react-aria-components/src/ComboBox.tsx b/packages/react-aria-components/src/ComboBox.tsx
index a3804b1d5a9..49a851db4ec 100644
--- a/packages/react-aria-components/src/ComboBox.tsx
+++ b/packages/react-aria-components/src/ComboBox.tsx
@@ -17,7 +17,7 @@ import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType, RefObject} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {GroupContext} from './Group';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
@@ -50,7 +50,7 @@ export interface ComboBoxRenderProps {
   isRequired: boolean
 }
 
-export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps {
+export interface ComboBoxProps<T extends object> extends Omit<AriaComboBoxProps<T>, 'children' | 'placeholder' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<ComboBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /** The filter function used to determine if a option should be included in the combo box list. */
   defaultFilter?: (textValue: string, inputValue: string) => boolean,
   /**
@@ -182,7 +182,7 @@ function ComboBoxInner<T extends object>({props, collection, comboBoxRef: ref}:
     defaultClassName: 'react-aria-ComboBox'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/DateField.tsx b/packages/react-aria-components/src/DateField.tsx
index 6d4a385cb36..bea71301c32 100644
--- a/packages/react-aria-components/src/DateField.tsx
+++ b/packages/react-aria-components/src/DateField.tsx
@@ -16,7 +16,7 @@ import {DateFieldState, DateSegmentType, DateSegment as IDateSegment, TimeFieldS
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {Group, GroupContext} from './Group';
 import {Input, InputContext} from './Input';
 import {LabelContext} from './Label';
@@ -39,8 +39,8 @@ export interface DateFieldRenderProps {
    */
   isDisabled: boolean
 }
-export interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps {}
-export interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps {}
+export interface DateFieldProps<T extends DateValue> extends Omit<AriaDateFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
+export interface TimeFieldProps<T extends TimeValue> extends Omit<AriaTimeFieldProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<DateFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const DateFieldContext = createContext<ContextValue<DateFieldProps<any>, HTMLDivElement>>(null);
 export const TimeFieldContext = createContext<ContextValue<TimeFieldProps<any>, HTMLDivElement>>(null);
@@ -85,7 +85,7 @@ export const DateField = /*#__PURE__*/ (forwardRef as forwardRefType)(function D
     defaultClassName: 'react-aria-DateField'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
@@ -151,7 +151,7 @@ export const TimeField = /*#__PURE__*/ (forwardRef as forwardRefType)(function T
     defaultClassName: 'react-aria-TimeField'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
@@ -209,7 +209,7 @@ export interface DateInputRenderProps {
   isInvalid: boolean
 }
 
-export interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRenderProps> {
+export interface DateInputProps extends SlotProps, StyleRenderProps<DateInputRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   children: (segment: IDateSegment) => ReactElement
 }
 
@@ -315,7 +315,7 @@ export interface DateSegmentRenderProps extends Omit<IDateSegment, 'isEditable'>
   type: DateSegmentType
 }
 
-export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps>, HoverEvents {
+export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps>, HoverEvents, GlobalDOMAttributes<HTMLSpanElement> {
   segment: IDateSegment
 }
 
@@ -323,7 +323,7 @@ export interface DateSegmentProps extends RenderProps<DateSegmentRenderProps>, H
  * A date segment displays an individual unit of a date and time, and allows users to edit
  * the value by typing or using the arrow keys to increment and decrement.
  */
-export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLDivElement>) {
+export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function DateSegment({segment, ...otherProps}: DateSegmentProps, ref: ForwardedRef<HTMLSpanElement>) {
   let dateFieldState = useContext(DateFieldStateContext);
   let timeFieldState = useContext(TimeFieldStateContext);
   let state = dateFieldState ?? timeFieldState!;
@@ -350,7 +350,7 @@ export const DateSegment = /*#__PURE__*/ (forwardRef as forwardRefType)(function
 
   return (
     <span
-      {...mergeProps(filterDOMProps(otherProps as any), segmentProps, focusProps, hoverProps)}
+      {...mergeProps(filterDOMProps(otherProps, {global: true}), segmentProps, focusProps, hoverProps)}
       {...renderProps}
       style={segmentProps.style}
       ref={domRef}
diff --git a/packages/react-aria-components/src/DatePicker.tsx b/packages/react-aria-components/src/DatePicker.tsx
index 55e03a122bf..c6d6e5442d9 100644
--- a/packages/react-aria-components/src/DatePicker.tsx
+++ b/packages/react-aria-components/src/DatePicker.tsx
@@ -17,9 +17,9 @@ import {DateFieldContext} from './DateField';
 import {DatePickerState, DatePickerStateOptions, DateRangePickerState, DateRangePickerStateOptions, useDatePickerState, useDateRangePickerState} from 'react-stately';
 import {DialogContext, OverlayTriggerStateContext} from './Dialog';
 import {FieldErrorContext} from './FieldError';
-import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useResizeObserver} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {GroupContext} from './Group';
 import {LabelContext} from './Label';
 import {PopoverContext} from './Popover';
@@ -64,8 +64,8 @@ export interface DateRangePickerRenderProps extends Omit<DatePickerRenderProps,
   state: DateRangePickerState
 }
 
-export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DatePickerRenderProps>, SlotProps {}
-export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps {}
+export interface DatePickerProps<T extends DateValue> extends Omit<AriaDatePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DatePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DatePickerRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
+export interface DateRangePickerProps<T extends DateValue> extends Omit<AriaDateRangePickerProps<T>, 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, Pick<DateRangePickerStateOptions<T>, 'shouldCloseOnSelect'>, RACValidation, RenderProps<DateRangePickerRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const DatePickerContext = createContext<ContextValue<DatePickerProps<any>, HTMLDivElement>>(null);
 export const DateRangePickerContext = createContext<ContextValue<DateRangePickerProps<any>, HTMLDivElement>>(null);
@@ -134,7 +134,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     defaultClassName: 'react-aria-DatePicker'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
@@ -164,9 +164,7 @@ export const DatePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         [FieldErrorContext, validation]
       ]}>
       <div
-        {...focusProps}
-        {...DOMProps}
-        {...renderProps}
+        {...mergeProps(DOMProps, renderProps, focusProps)}
         ref={ref}
         slot={props.slot || undefined}
         data-focus-within={isFocused || undefined}
@@ -239,7 +237,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
     defaultClassName: 'react-aria-DateRangePicker'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
@@ -274,9 +272,7 @@ export const DateRangePicker = /*#__PURE__*/ (forwardRef as forwardRefType)(func
         [FieldErrorContext, validation]
       ]}>
       <div
-        {...focusProps}
-        {...DOMProps}
-        {...renderProps}
+        {...mergeProps(DOMProps, renderProps, focusProps)}
         ref={ref}
         slot={props.slot || undefined}
         data-focus-within={isFocused || undefined}
diff --git a/packages/react-aria-components/src/Dialog.tsx b/packages/react-aria-components/src/Dialog.tsx
index 9520550ba23..f1881c8940e 100644
--- a/packages/react-aria-components/src/Dialog.tsx
+++ b/packages/react-aria-components/src/Dialog.tsx
@@ -12,8 +12,8 @@
 import {AriaDialogProps, useDialog, useId, useOverlayTrigger} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, DEFAULT_SLOT, Provider, SlotProps, StyleProps, useContextProps, useRenderProps} from './utils';
-import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
-import {forwardRefType} from '@react-types/shared';
+import {filterDOMProps, mergeProps, useResizeObserver} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {HeadingContext} from './RSPContexts';
 import {OverlayTriggerProps, OverlayTriggerState, useMenuTriggerState} from 'react-stately';
 import {PopoverContext} from './Popover';
@@ -29,7 +29,7 @@ export interface DialogRenderProps {
   close: () => void
 }
 
-export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps {
+export interface DialogProps extends AriaDialogProps, StyleProps, SlotProps, GlobalDOMAttributes<HTMLElement> {
   /** Children of the dialog. A function may be provided to access a function to close the dialog. */
   children?: ReactNode | ((opts: DialogRenderProps) => ReactNode)
 }
@@ -122,11 +122,11 @@ export const Dialog = /*#__PURE__*/ (forwardRef as forwardRefType)(function Dial
     }
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <section
-      {...filterDOMProps(props)}
-      {...dialogProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, dialogProps)}
       ref={ref}
       slot={props.slot || undefined}>
       <Provider
diff --git a/packages/react-aria-components/src/Disclosure.tsx b/packages/react-aria-components/src/Disclosure.tsx
index 392bf517d31..060340338d6 100644
--- a/packages/react-aria-components/src/Disclosure.tsx
+++ b/packages/react-aria-components/src/Disclosure.tsx
@@ -14,11 +14,11 @@ import {AriaDisclosureProps, useDisclosure, useFocusRing} from 'react-aria';
 import {ButtonContext} from './Button';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {DisclosureGroupState, DisclosureState, DisclosureGroupProps as StatelyDisclosureGroupProps, useDisclosureGroupState, useDisclosureState} from 'react-stately';
-import {DOMProps, forwardRefType, Key} from '@react-types/shared';
+import {DOMProps, forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
 import {filterDOMProps, mergeProps, mergeRefs, useId} from '@react-aria/utils';
 import React, {createContext, DOMAttributes, ForwardedRef, forwardRef, ReactNode, useContext} from 'react';
 
-export interface DisclosureGroupProps extends StatelyDisclosureGroupProps, RenderProps<DisclosureGroupRenderProps>, DOMProps {}
+export interface DisclosureGroupProps extends StatelyDisclosureGroupProps, RenderProps<DisclosureGroupRenderProps>, DOMProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export interface DisclosureGroupRenderProps {
   /**
@@ -50,7 +50,7 @@ export const DisclosureGroup = forwardRef(function DisclosureGroup(props: Disclo
     }
   });
 
-  let domProps = filterDOMProps(props);
+  let domProps = filterDOMProps(props, {global: true});
 
   return (
     <div
@@ -65,7 +65,7 @@ export const DisclosureGroup = forwardRef(function DisclosureGroup(props: Disclo
   );
 });
 
-export interface DisclosureProps extends Omit<AriaDisclosureProps, 'children'>, RenderProps<DisclosureRenderProps>, SlotProps {
+export interface DisclosureProps extends Omit<AriaDisclosureProps, 'children'>, RenderProps<DisclosureRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /** An id for the disclosure when used within a DisclosureGroup, matching the id used in `expandedKeys`. */
   id?: Key
 }
@@ -152,7 +152,7 @@ export const Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     }
   });
 
-  let domProps = filterDOMProps(otherProps as any);
+  let domProps = filterDOMProps(otherProps, {global: true});
 
   return (
     <Provider
@@ -167,13 +167,11 @@ export const Disclosure = /*#__PURE__*/ (forwardRef as forwardRefType)(function
         [DisclosureStateContext, state]
       ]}>
       <div
+        {...mergeProps(domProps, renderProps, focusWithinProps)}
         ref={ref}
         data-expanded={state.isExpanded || undefined}
         data-disabled={isDisabled || undefined}
-        data-focus-visible-within={isFocusVisibleWithin || undefined}
-        {...domProps}
-        {...focusWithinProps}
-        {...renderProps}>
+        data-focus-visible-within={isFocusVisibleWithin || undefined}>
         {renderProps.children}
       </div>
     </Provider>
@@ -188,7 +186,7 @@ export interface DisclosurePanelRenderProps {
   isFocusVisibleWithin: boolean
 }
 
-export interface DisclosurePanelProps extends RenderProps<DisclosurePanelRenderProps>, DOMProps {
+export interface DisclosurePanelProps extends RenderProps<DisclosurePanelRenderProps>, DOMProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The accessibility role for the disclosure's panel.
    * @default 'group'
@@ -217,13 +215,11 @@ export const DisclosurePanel = /*#__PURE__*/ (forwardRef as forwardRefType)(func
       isFocusVisibleWithin
     }
   });
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   return (
     <div
-      {...DOMProps}
+      {...mergeProps(DOMProps, renderProps, panelProps, focusWithinProps)}
       ref={mergeRefs(ref, panelRef)}
-      {...mergeProps(panelProps, focusWithinProps)}
-      {...renderProps}
       role={role}
       data-focus-visible-within={isFocusVisibleWithin || undefined}>
       <Provider
diff --git a/packages/react-aria-components/src/DropZone.tsx b/packages/react-aria-components/src/DropZone.tsx
index 5a163e90202..ebb32507584 100644
--- a/packages/react-aria-components/src/DropZone.tsx
+++ b/packages/react-aria-components/src/DropZone.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, HoverEvents} from '@react-types/shared';
+import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents} from '@react-types/shared';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {DropOptions, mergeProps, useButton, useClipboard, useDrop, useFocusRing, useHover, useLocalizedStringFormatter, VisuallyHidden} from 'react-aria';
 import {filterDOMProps, isFocusable, useLabels, useObjectRef, useSlotId} from '@react-aria/utils';
@@ -47,7 +47,7 @@ export interface DropZoneRenderProps {
   isDisabled: boolean
 }
 
-export interface DropZoneProps extends Omit<DropOptions, 'getDropOperationForPoint' | 'ref' | 'hasDropButton'>, HoverEvents, RenderProps<DropZoneRenderProps>, SlotProps, AriaLabelingProps {}
+export interface DropZoneProps extends Omit<DropOptions, 'getDropOperationForPoint' | 'ref' | 'hasDropButton'>, HoverEvents, RenderProps<DropZoneRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const DropZoneContext = createContext<ContextValue<DropZoneProps, HTMLDivElement>>(null);
 
@@ -88,7 +88,7 @@ export const DropZone = forwardRef(function DropZone(props: DropZoneProps, ref:
     values: {isHovered, isFocused, isFocusVisible, isDropTarget, isDisabled},
     defaultClassName: 'react-aria-DropZone'
   });
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
@@ -98,8 +98,7 @@ export const DropZone = forwardRef(function DropZone(props: DropZoneProps, ref:
       ]}>
       {/* eslint-disable-next-line */}
       <div
-        {...mergeProps(dropProps, hoverProps, DOMProps)}
-        {...renderProps}
+        {...mergeProps(DOMProps, renderProps, dropProps, hoverProps)}
         slot={props.slot || undefined}
         ref={dropzoneRef}
         onClick={(e) => {
diff --git a/packages/react-aria-components/src/FieldError.tsx b/packages/react-aria-components/src/FieldError.tsx
index fba03ee6e92..6022d9dba61 100644
--- a/packages/react-aria-components/src/FieldError.tsx
+++ b/packages/react-aria-components/src/FieldError.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {DOMProps, ValidationResult} from '@react-types/shared';
+import {DOMProps, GlobalDOMAttributes, ValidationResult} from '@react-types/shared';
 import {filterDOMProps} from '@react-aria/utils';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {RenderProps, useRenderProps} from './utils';
@@ -19,7 +19,7 @@ import {Text} from './Text';
 export const FieldErrorContext = createContext<ValidationResult | null>(null);
 
 export interface FieldErrorRenderProps extends ValidationResult {}
-export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, DOMProps {}
+export interface FieldErrorProps extends RenderProps<FieldErrorRenderProps>, DOMProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 /**
  * A FieldError displays validation errors for a form field.
@@ -35,7 +35,7 @@ export const FieldError = forwardRef(function FieldError(props: FieldErrorProps,
 
 const FieldErrorInner = forwardRef((props: FieldErrorProps, ref: ForwardedRef<HTMLElement>) => {
   let validation = useContext(FieldErrorContext)!;
-  let domProps = filterDOMProps(props)!;
+  let domProps = filterDOMProps(props, {global: true})!;
   let renderProps = useRenderProps({
     ...props,
     defaultClassName: 'react-aria-FieldError',
diff --git a/packages/react-aria-components/src/FileTrigger.tsx b/packages/react-aria-components/src/FileTrigger.tsx
index 26e3f773d36..3389452a742 100644
--- a/packages/react-aria-components/src/FileTrigger.tsx
+++ b/packages/react-aria-components/src/FileTrigger.tsx
@@ -11,11 +11,12 @@
  */
 
 import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import {Input} from './Input';
 import {PressResponder} from '@react-aria/interactions';
 import React, {ForwardedRef, forwardRef, ReactNode} from 'react';
 
-export interface FileTriggerProps {
+export interface FileTriggerProps extends GlobalDOMAttributes<HTMLInputElement> {
   /**
    * Specifies what mime type of files are allowed.
    */
@@ -48,7 +49,7 @@ export interface FileTriggerProps {
 export const FileTrigger = forwardRef(function FileTrigger(props: FileTriggerProps, ref: ForwardedRef<HTMLInputElement>) {
   let {onSelect, acceptedFileTypes, allowsMultiple, defaultCamera, children, acceptDirectory, ...rest} = props;
   let inputRef = useObjectRef(ref);
-  let domProps = filterDOMProps(rest);
+  let domProps = filterDOMProps(rest, {global: true});
 
   return (
     <>
diff --git a/packages/react-aria-components/src/Form.tsx b/packages/react-aria-components/src/Form.tsx
index e9ea21896b3..f255ea382ae 100644
--- a/packages/react-aria-components/src/Form.tsx
+++ b/packages/react-aria-components/src/Form.tsx
@@ -12,10 +12,11 @@
 
 import {ContextValue, DOMProps, useContextProps} from './utils';
 import {FormValidationContext} from 'react-stately';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {FormProps as SharedFormProps} from '@react-types/form';
 
-export interface FormProps extends SharedFormProps, DOMProps {
+export interface FormProps extends SharedFormProps, DOMProps, GlobalDOMAttributes<HTMLFormElement> {
   /**
    * Whether to use native HTML form validation to prevent form submission
    * when a field value is missing or invalid, or mark fields as required
diff --git a/packages/react-aria-components/src/GridList.tsx b/packages/react-aria-components/src/GridList.tsx
index 191cb9a2612..aaa09e1beb1 100644
--- a/packages/react-aria-components/src/GridList.tsx
+++ b/packages/react-aria-components/src/GridList.tsx
@@ -14,12 +14,12 @@ import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, ListState, Node, SelectionBehavior, useListState} from 'react-stately';
 import {filterDOMProps, inertValue, LoadMoreSentinelProps, UNSTABLE_useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {ListStateContext} from './ListBox';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {TextContext} from './Text';
@@ -56,7 +56,7 @@ export interface GridListRenderProps {
   state: ListState<unknown>
 }
 
-export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<GridListRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+export interface GridListProps<T> extends Omit<AriaGridListProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<GridListRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * Whether typeahead navigation is disabled.
    * @default false
@@ -225,12 +225,12 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
     );
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <FocusScope>
       <div
-        {...filterDOMProps(props)}
-        {...renderProps}
-        {...mergeProps(gridProps, focusProps, droppableCollection?.collectionProps, emptyStatePropOverrides)}
+        {...mergeProps(DOMProps, renderProps, gridProps, focusProps, droppableCollection?.collectionProps, emptyStatePropOverrides)}
         ref={ref}
         slot={props.slot || undefined}
         onScroll={props.onScroll}
@@ -261,7 +261,7 @@ function GridListInner<T extends object>({props, collection, gridListRef: ref}:
 
 export interface GridListItemRenderProps extends ItemRenderProps {}
 
-export interface GridListItemProps<T = object> extends RenderProps<GridListItemRenderProps>, LinkDOMProps, HoverEvents {
+export interface GridListItemProps<T = object> extends RenderProps<GridListItemRenderProps>, LinkDOMProps, HoverEvents, GlobalDOMAttributes<HTMLDivElement> {
   /** The unique id of the item. */
   id?: Key,
   /** The object value that this item represents. When using dynamic collections, this is set automatically. */
@@ -366,8 +366,7 @@ export const GridListItem = /*#__PURE__*/ createLeafComponent('item', function G
         </div>
       }
       <div
-        {...mergeProps(filterDOMProps(props as any), rowProps, focusProps, hoverProps, draggableItem?.dragProps)}
-        {...renderProps}
+        {...mergeProps(filterDOMProps(props as any, {global: true}), renderProps, rowProps, focusProps, hoverProps, draggableItem?.dragProps)}
         ref={ref}
         data-selected={states.isSelected || undefined}
         data-disabled={states.isDisabled || undefined}
@@ -497,7 +496,7 @@ function RootDropIndicator() {
   );
 }
 
-export interface GridListLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps {
+export interface GridListLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The load more spinner to render when loading additional items.
    */
@@ -540,7 +539,7 @@ export const UNSTABLE_GridListLoadingSentinel = createLeafComponent('loader', fu
       {isLoading && renderProps.children && (
         <div
           {...renderProps}
-          {...mergeProps(filterDOMProps(props as any))}
+          {...filterDOMProps(props, {global: true})}
           role="row"
           aria-rowindex={isVirtualized ? item.index + 1 : undefined}
           ref={ref}>
diff --git a/packages/react-aria-components/src/Link.tsx b/packages/react-aria-components/src/Link.tsx
index 061bd0f3fa6..3a9c41e95cb 100644
--- a/packages/react-aria-components/src/Link.tsx
+++ b/packages/react-aria-components/src/Link.tsx
@@ -12,10 +12,11 @@
 
 import {AriaLinkOptions, HoverEvents, mergeProps, useFocusRing, useHover, useLink} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {forwardRefType} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import React, {createContext, ElementType, ForwardedRef, forwardRef} from 'react';
 
-export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, HoverEvents, RenderProps<LinkRenderProps>, SlotProps {}
+export interface LinkProps extends Omit<AriaLinkOptions, 'elementType'>, HoverEvents, RenderProps<LinkRenderProps>, SlotProps, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {}
 
 export interface LinkRenderProps {
   /**
@@ -78,11 +79,13 @@ export const Link = /*#__PURE__*/ (forwardRef as forwardRefType)(function Link(p
     }
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <ElementType
       ref={ref}
       slot={props.slot || undefined}
-      {...mergeProps(renderProps, linkProps, hoverProps, focusProps)}
+      {...mergeProps(DOMProps, renderProps, linkProps, hoverProps, focusProps)}
       data-focused={isFocused || undefined}
       data-hovered={isHovered || undefined}
       data-pressed={isPressed || undefined}
diff --git a/packages/react-aria-components/src/ListBox.tsx b/packages/react-aria-components/src/ListBox.tsx
index 098758e46f9..f0654b0a6bb 100644
--- a/packages/react-aria-components/src/ListBox.tsx
+++ b/packages/react-aria-components/src/ListBox.tsx
@@ -13,12 +13,12 @@
 import {AriaListBoxOptions, AriaListBoxProps, DraggableItemResult, DragPreviewRenderer, DroppableCollectionResult, DroppableItemResult, FocusScope, ListKeyboardDelegate, mergeProps, useCollator, useFocusRing, useHover, useListBox, useListBoxSection, useLocale, useOption} from 'react-aria';
 import {Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, ListState, Node, Orientation, SelectionBehavior, UNSTABLE_useFilteredListState, useListState} from 'react-stately';
 import {filterDOMProps, inertValue, LoadMoreSentinelProps, mergeRefs, UNSTABLE_useLoadMoreSentinel, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {HeaderContext} from './Header';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useMemo, useRef} from 'react';
 import {SeparatorContext} from './Separator';
@@ -57,7 +57,7 @@ export interface ListBoxRenderProps {
   state: ListState<unknown>
 }
 
-export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' | 'label'>, CollectionProps<T>, StyleRenderProps<ListBoxRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+export interface ListBoxProps<T> extends Omit<AriaListBoxProps<T>, 'children' | 'label'>, CollectionProps<T>, StyleRenderProps<ListBoxRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /** How multiple selection should behave in the collection. */
   selectionBehavior?: SelectionBehavior,
   /** The drag and drop hooks returned by `useDragAndDrop` used to enable drag and drop behavior for the ListBox. */
@@ -230,12 +230,12 @@ function ListBoxInner<T extends object>({state: inputState, props, listBoxRef}:
     );
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <FocusScope>
       <div
-        {...filterDOMProps(props)}
-        {...mergeProps(listBoxProps, focusProps, droppableCollection?.collectionProps)}
-        {...renderProps}
+        {...mergeProps(DOMProps, renderProps, listBoxProps, focusProps, droppableCollection?.collectionProps)}
         ref={listBoxRef}
         slot={props.slot || undefined}
         onScroll={props.onScroll}
@@ -285,11 +285,12 @@ function ListBoxSectionInner<T extends object>(props: ListBoxSectionProps<T>, re
     values: {}
   });
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+
   return (
     <section
-      {...filterDOMProps(props as any)}
-      {...groupProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, groupProps)}
       ref={ref}>
       <HeaderContext.Provider value={{...headingProps, ref: headingRef}}>
         <CollectionBranch
@@ -308,7 +309,7 @@ export const ListBoxSection = /*#__PURE__*/ createBranchComponent('section', Lis
 
 export interface ListBoxItemRenderProps extends ItemRenderProps {}
 
-export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, LinkDOMProps, HoverEvents {
+export interface ListBoxItemProps<T = object> extends RenderProps<ListBoxItemRenderProps>, LinkDOMProps, HoverEvents, GlobalDOMAttributes<HTMLDivElement> {
   /** The unique id of the item. */
   id?: Key,
   /** The object value that this item represents. When using dynamic collections, this is set automatically. */
@@ -383,10 +384,12 @@ export const ListBoxItem = /*#__PURE__*/ createLeafComponent('item', function Li
 
   let ElementType: React.ElementType = props.href ? 'a' : 'div';
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+
   return (
     <ElementType
-      {...mergeProps(optionProps, hoverProps, draggableItem?.dragProps, droppableItem?.dropProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, optionProps, hoverProps, draggableItem?.dragProps, droppableItem?.dropProps)}
       ref={ref}
       data-allows-dragging={!!dragState || undefined}
       data-selected={states.isSelected || undefined}
@@ -465,7 +468,7 @@ function ListBoxDropIndicator(props: ListBoxDropIndicatorProps, ref: ForwardedRe
 
 const ListBoxDropIndicatorForwardRef = forwardRef(ListBoxDropIndicator);
 
-export interface ListBoxLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps {
+export interface ListBoxLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The load more spinner to render when loading additional items.
    */
@@ -516,7 +519,7 @@ export const UNSTABLE_ListBoxLoadingSentinel = createLeafComponent('loader', fun
       </div>
       {isLoading && renderProps.children && (
         <div
-          {...mergeProps(filterDOMProps(props as any), optionProps)}
+          {...mergeProps(filterDOMProps(props, {global: true}), optionProps)}
           {...renderProps}
           // aria-selected isn't needed here since this option is not selectable.
           // eslint-disable-next-line jsx-a11y/role-has-required-aria-props
diff --git a/packages/react-aria-components/src/Menu.tsx b/packages/react-aria-components/src/Menu.tsx
index ec734898577..70a77def3f3 100644
--- a/packages/react-aria-components/src/Menu.tsx
+++ b/packages/react-aria-components/src/Menu.tsx
@@ -14,9 +14,9 @@ import {AriaMenuProps, FocusScope, mergeProps, useHover, useMenu, useMenuItem, u
 import {BaseCollection, Collection, CollectionBuilder, createBranchComponent, createLeafComponent} from '@react-aria/collections';
 import {MenuTriggerProps as BaseMenuTriggerProps, Collection as ICollection, Node, RootMenuTriggerState, TreeState, useMenuTriggerState, useSubmenuTriggerState, useTreeState} from 'react-stately';
 import {CollectionProps, CollectionRendererContext, ItemRenderProps, SectionContext, SectionProps, usePersistedKeys} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {filterDOMProps, mergeRefs, useObjectRef, useResizeObserver} from '@react-aria/utils';
-import {FocusStrategy, forwardRefType, HoverEvents, Key, LinkDOMProps, MultipleSelection} from '@react-types/shared';
+import {FocusStrategy, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, MultipleSelection} from '@react-types/shared';
 import {HeaderContext} from './Header';
 import {KeyboardContext} from './Keyboard';
 import {MultipleSelectionState, SelectionManager, useMultipleSelectionState} from '@react-stately/selection';
@@ -156,7 +156,7 @@ export interface MenuRenderProps {
   isEmpty: boolean
 }
 
-export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<MenuRenderProps>, SlotProps, ScrollableProps<HTMLDivElement> {
+export interface MenuProps<T> extends Omit<AriaMenuProps<T>, 'children'>, CollectionProps<T>, StyleRenderProps<MenuRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /** Provides content to display when there are no items in the list. */
   renderEmptyState?: () => ReactNode
 }
@@ -214,12 +214,12 @@ function MenuInner<T extends object>({props, collection, menuRef: ref}: MenuInne
     );
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <FocusScope>
       <div
-        {...filterDOMProps(props)}
-        {...menuProps}
-        {...renderProps}
+        {...mergeProps(DOMProps, renderProps, menuProps)}
         ref={ref}
         slot={props.slot || undefined}
         data-empty={state.collection.size === 0 || undefined}
@@ -301,11 +301,12 @@ function MenuSectionInner<T extends object>(props: MenuSectionProps<T>, ref: For
   let selectionState = useMultipleSelectionState(props);
   let manager = props.selectionMode != null ? new GroupSelectionManager(parent, selectionState) : parent;
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+
   return (
     <section
-      {...filterDOMProps(props as any)}
-      {...groupProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, groupProps)}
       ref={ref}>
       <Provider
         values={[
@@ -338,7 +339,7 @@ export interface MenuItemRenderProps extends ItemRenderProps {
   isOpen: boolean
 }
 
-export interface MenuItemProps<T = object> extends RenderProps<MenuItemRenderProps>, LinkDOMProps, HoverEvents {
+export interface MenuItemProps<T = object> extends RenderProps<MenuItemRenderProps>, LinkDOMProps, HoverEvents, GlobalDOMAttributes<HTMLDivElement> {
   /** The unique id of the item. */
   id?: Key,
   /** The object value that this item represents. When using dynamic collections, this is set automatically. */
@@ -367,6 +368,7 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
 
   let {menuItemProps, labelProps, descriptionProps, keyboardShortcutProps, ...states} = useMenuItem({
     ...props,
+    onClick: undefined,
     id,
     key: item.key,
     selectionManager
@@ -392,11 +394,12 @@ export const MenuItem = /*#__PURE__*/ createLeafComponent('item', function MenuI
   });
 
   let ElementType: React.ElementType = props.href ? 'a' : 'div';
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
 
   return (
     <ElementType
-      {...mergeProps(menuItemProps, hoverProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, menuItemProps, hoverProps)}
       ref={ref}
       data-disabled={states.isDisabled || undefined}
       data-hovered={isHovered || undefined}
diff --git a/packages/react-aria-components/src/Meter.tsx b/packages/react-aria-components/src/Meter.tsx
index d74a1c226b2..bf33dc43a60 100644
--- a/packages/react-aria-components/src/Meter.tsx
+++ b/packages/react-aria-components/src/Meter.tsx
@@ -13,11 +13,12 @@
 import {AriaMeterProps, useMeter} from 'react-aria';
 import {clamp} from '@react-stately/utils';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
-import {forwardRefType} from '@react-types/shared';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 
-export interface MeterProps extends Omit<AriaMeterProps, 'label'>, RenderProps<MeterRenderProps>, SlotProps {}
+export interface MeterProps extends Omit<AriaMeterProps, 'label'>, RenderProps<MeterRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export interface MeterRenderProps {
   /**
@@ -65,8 +66,10 @@ export const Meter = /*#__PURE__*/ (forwardRef as forwardRefType)(function Meter
     }
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
-    <div {...meterProps} {...renderProps} ref={ref} slot={props.slot || undefined}>
+    <div {...mergeProps(DOMProps, renderProps, meterProps)} ref={ref} slot={props.slot || undefined}>
       <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>
         {renderProps.children}
       </LabelContext.Provider>
diff --git a/packages/react-aria-components/src/Modal.tsx b/packages/react-aria-components/src/Modal.tsx
index e76520fc10b..e638c4ff19d 100644
--- a/packages/react-aria-components/src/Modal.tsx
+++ b/packages/react-aria-components/src/Modal.tsx
@@ -12,13 +12,13 @@
 
 import {AriaModalOverlayProps, DismissButton, Overlay, useIsSSR, useModalOverlay} from 'react-aria';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {DOMAttributes, forwardRefType, RefObject} from '@react-types/shared';
+import {DOMAttributes, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {filterDOMProps, mergeProps, mergeRefs, useEnterAnimation, useExitAnimation, useObjectRef, useViewportSize} from '@react-aria/utils';
 import {OverlayTriggerProps, OverlayTriggerState, useOverlayTriggerState} from 'react-stately';
 import {OverlayTriggerStateContext} from './Dialog';
 import React, {createContext, ForwardedRef, forwardRef, useContext, useMemo, useRef} from 'react';
 
-export interface ModalOverlayProps extends AriaModalOverlayProps, OverlayTriggerProps, RenderProps<ModalRenderProps>, SlotProps {
+export interface ModalOverlayProps extends AriaModalOverlayProps, OverlayTriggerProps, RenderProps<ModalRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * Whether the modal is currently performing an entry animation.
    */
@@ -168,7 +168,7 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   return (
     <Overlay isExiting={props.isExiting} portalContainer={UNSTABLE_portalContainer}>
       <div
-        {...mergeProps(filterDOMProps(props as any), underlayProps)}
+        {...mergeProps(filterDOMProps(props, {global: true}), underlayProps)}
         {...renderProps}
         style={style}
         ref={props.overlayRef}
@@ -186,7 +186,7 @@ function ModalOverlayInner({UNSTABLE_portalContainer, ...props}: ModalOverlayInn
   );
 }
 
-interface ModalContentProps extends RenderProps<ModalRenderProps> {
+interface ModalContentProps extends RenderProps<ModalRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   modalRef: ForwardedRef<HTMLDivElement>
 }
 
@@ -209,7 +209,7 @@ function ModalContent(props: ModalContentProps) {
 
   return (
     <div
-      {...mergeProps(filterDOMProps(props as any), modalProps)}
+      {...mergeProps(filterDOMProps(props, {global: true}), modalProps)}
       {...renderProps}
       ref={ref}
       data-entering={entering || undefined}
diff --git a/packages/react-aria-components/src/NumberField.tsx b/packages/react-aria-components/src/NumberField.tsx
index 375b9ff7ab0..edc2288778f 100644
--- a/packages/react-aria-components/src/NumberField.tsx
+++ b/packages/react-aria-components/src/NumberField.tsx
@@ -16,7 +16,7 @@ import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType, InputDOMProps} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, InputDOMProps} from '@react-types/shared';
 import {GroupContext} from './Group';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
@@ -46,7 +46,7 @@ export interface NumberFieldRenderProps {
   state: NumberFieldState
 }
 
-export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<NumberFieldRenderProps>, SlotProps {}
+export interface NumberFieldProps extends Omit<AriaNumberFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, InputDOMProps, RenderProps<NumberFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const NumberFieldContext = createContext<ContextValue<NumberFieldProps, HTMLDivElement>>(null);
 export const NumberFieldStateContext = createContext<NumberFieldState | null>(null);
@@ -95,7 +95,7 @@ export const NumberField = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     defaultClassName: 'react-aria-NumberField'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/Popover.tsx b/packages/react-aria-components/src/Popover.tsx
index 0ab82a28e31..4a4573e0f25 100644
--- a/packages/react-aria-components/src/Popover.tsx
+++ b/packages/react-aria-components/src/Popover.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, forwardRefType, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {AriaPopoverProps, DismissButton, Overlay, PlacementAxis, PositionProps, useLocale, usePopover} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps, mergeProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
@@ -21,7 +21,7 @@ import {OverlayTriggerStateContext} from './Dialog';
 import React, {Context, createContext, ForwardedRef, forwardRef, useContext, useEffect, useMemo, useRef, useState} from 'react';
 import {useIsHidden} from '@react-aria/collections';
 
-export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps {
+export interface PopoverProps extends Omit<PositionProps, 'isOpen'>, Omit<AriaPopoverProps, 'popoverRef' | 'triggerRef' | 'groupRef' | 'offset' | 'arrowSize'>, OverlayTriggerProps, RenderProps<PopoverRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The name of the component that triggered the popover. This is reflected on the element
    * as the `data-trigger` attribute, and can be used to provide specific
@@ -209,7 +209,7 @@ function PopoverInner({state, isExiting, UNSTABLE_portalContainer, clearContexts
   let style = {...popoverProps.style, ...renderProps.style};
   let overlay = (
     <div
-      {...mergeProps(filterDOMProps(props as any), popoverProps)}
+      {...mergeProps(filterDOMProps(props, {global: true}), popoverProps)}
       {...renderProps}
       role={isDialog ? 'dialog' : undefined}
       tabIndex={isDialog ? -1 : undefined}
diff --git a/packages/react-aria-components/src/ProgressBar.tsx b/packages/react-aria-components/src/ProgressBar.tsx
index f18c67f7f22..58e073fc1ea 100644
--- a/packages/react-aria-components/src/ProgressBar.tsx
+++ b/packages/react-aria-components/src/ProgressBar.tsx
@@ -13,10 +13,12 @@
 import {AriaProgressBarProps, useProgressBar} from 'react-aria';
 import {clamp} from '@react-stately/utils';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot} from './utils';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 
-export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'label'>, RenderProps<ProgressBarRenderProps>, SlotProps {}
+export interface ProgressBarProps extends Omit<AriaProgressBarProps, 'label'>, RenderProps<ProgressBarRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export interface ProgressBarRenderProps {
   /**
@@ -72,8 +74,10 @@ export const ProgressBar = forwardRef(function ProgressBar(props: ProgressBarPro
     }
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
-    <div {...progressBarProps} {...renderProps} ref={ref} slot={props.slot || undefined}>
+    <div {...mergeProps(DOMProps, renderProps, progressBarProps)} ref={ref} slot={props.slot || undefined}>
       <LabelContext.Provider value={{...labelProps, ref: labelRef, elementType: 'span'}}>
         {renderProps.children}
       </LabelContext.Provider>
diff --git a/packages/react-aria-components/src/RadioGroup.tsx b/packages/react-aria-components/src/RadioGroup.tsx
index 32926cd69fc..555373e28ed 100644
--- a/packages/react-aria-components/src/RadioGroup.tsx
+++ b/packages/react-aria-components/src/RadioGroup.tsx
@@ -15,14 +15,14 @@ import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeProps, mergeRefs, useObjectRef} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType, RefObject} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {RadioGroupState, useRadioGroupState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, useMemo} from 'react';
 import {TextContext} from './Text';
 
-export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<RadioGroupRenderProps>, SlotProps {}
-export interface RadioProps extends Omit<AriaRadioProps, 'children'>, HoverEvents, RenderProps<RadioRenderProps>, SlotProps {
+export interface RadioGroupProps extends Omit<AriaRadioGroupProps, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<RadioGroupRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
+export interface RadioProps extends Omit<AriaRadioProps, 'children'>, HoverEvents, RenderProps<RadioRenderProps>, SlotProps, GlobalDOMAttributes<HTMLLabelElement> {
   /**
    * A ref for the HTML input element.
    */
@@ -147,10 +147,11 @@ export const RadioGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     defaultClassName: 'react-aria-RadioGroup'
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...radioGroupProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, radioGroupProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-orientation={props.orientation || 'vertical'}
@@ -216,7 +217,7 @@ export const Radio = /*#__PURE__*/ (forwardRef as forwardRefType)(function Radio
     }
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/SearchField.tsx b/packages/react-aria-components/src/SearchField.tsx
index 29d322f65cf..3695385688d 100644
--- a/packages/react-aria-components/src/SearchField.tsx
+++ b/packages/react-aria-components/src/SearchField.tsx
@@ -17,6 +17,7 @@ import {createHideableComponent} from '@react-aria/collections';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {FormContext} from './Form';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import {GroupContext} from './Group';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
@@ -46,7 +47,7 @@ export interface SearchFieldRenderProps {
   state: SearchFieldState
 }
 
-export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<SearchFieldRenderProps>, SlotProps {}
+export interface SearchFieldProps extends Omit<AriaSearchFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, RenderProps<SearchFieldRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const SearchFieldContext = createContext<ContextValue<SearchFieldProps, HTMLDivElement>>(null);
 
@@ -84,7 +85,7 @@ export const SearchField = /*#__PURE__*/ createHideableComponent(function Search
     defaultClassName: 'react-aria-SearchField'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
index d96efb4dc23..05e8b38ea59 100644
--- a/packages/react-aria-components/src/Select.tsx
+++ b/packages/react-aria-components/src/Select.tsx
@@ -16,9 +16,9 @@ import {Collection, Node, SelectState, useSelectState} from 'react-stately';
 import {CollectionBuilder} from '@react-aria/collections';
 import {ContextValue, Provider, RACValidation, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {FieldErrorContext} from './FieldError';
-import {filterDOMProps, useResizeObserver} from '@react-aria/utils';
+import {filterDOMProps, mergeProps, useResizeObserver} from '@react-aria/utils';
 import {FormContext} from './Form';
-import {forwardRefType} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 // @ts-ignore
 import intlMessages from '../intl/*.json';
 import {ItemRenderProps} from './Collection';
@@ -62,7 +62,7 @@ export interface SelectRenderProps {
   isRequired: boolean
 }
 
-export interface SelectProps<T extends object = {}> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior' | 'items'>, RACValidation, RenderProps<SelectRenderProps>, SlotProps {
+export interface SelectProps<T extends object = {}> extends Omit<AriaSelectProps<T>, 'children' | 'label' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior' | 'items'>, RACValidation, RenderProps<SelectRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * Temporary text that occupies the select when it is empty.
    * @default 'Select an item' (localized)
@@ -169,7 +169,7 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
     defaultClassName: 'react-aria-Select'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   let scrollRef = useRef(null);
@@ -203,9 +203,7 @@ function SelectInner<T extends object>({props, selectRef: ref, collection}: Sele
         [FieldErrorContext, validation]
       ]}>
       <div
-        {...DOMProps}
-        {...renderProps}
-        {...focusProps}
+        {...mergeProps(DOMProps, renderProps, focusProps)}
         ref={ref}
         slot={props.slot || undefined}
         data-focused={state.isFocused || undefined}
diff --git a/packages/react-aria-components/src/Separator.tsx b/packages/react-aria-components/src/Separator.tsx
index 4e14b71b47d..f3b9e7b24f1 100644
--- a/packages/react-aria-components/src/Separator.tsx
+++ b/packages/react-aria-components/src/Separator.tsx
@@ -13,10 +13,11 @@
 import {SeparatorProps as AriaSeparatorProps, useSeparator} from 'react-aria';
 import {ContextValue, SlotProps, StyleProps, useContextProps} from './utils';
 import {createLeafComponent} from '@react-aria/collections';
-import {filterDOMProps} from '@react-aria/utils';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import React, {createContext, ElementType, ForwardedRef} from 'react';
 
-export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProps {}
+export interface SeparatorProps extends AriaSeparatorProps, StyleProps, SlotProps, GlobalDOMAttributes<HTMLElement> {}
 
 export const SeparatorContext = createContext<ContextValue<SeparatorProps, HTMLElement>>({});
 
@@ -35,10 +36,11 @@ export const Separator = /*#__PURE__*/ createLeafComponent('separator', function
     orientation
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <Element
-      {...filterDOMProps(props)}
-      {...separatorProps}
+      {...mergeProps(DOMProps, separatorProps)}
       style={style}
       className={className ?? 'react-aria-Separator'}
       ref={ref}
diff --git a/packages/react-aria-components/src/Slider.tsx b/packages/react-aria-components/src/Slider.tsx
index ad7f1ebf77e..c982f5b12f8 100644
--- a/packages/react-aria-components/src/Slider.tsx
+++ b/packages/react-aria-components/src/Slider.tsx
@@ -13,12 +13,12 @@
 import {AriaSliderProps, AriaSliderThumbProps, HoverEvents, mergeProps, Orientation, useFocusRing, useHover, useNumberFormatter, useSlider, useSliderThumb, VisuallyHidden} from 'react-aria';
 import {ContextValue, Provider, RenderProps, SlotProps, useContextProps, useRenderProps, useSlot, useSlottedContext} from './utils';
 import {filterDOMProps} from '@react-aria/utils';
-import {forwardRefType, RefObject} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, OutputHTMLAttributes, useContext, useRef} from 'react';
 import {SliderState, useSliderState} from 'react-stately';
 
-export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps<T>, 'label'>, RenderProps<SliderRenderProps>, SlotProps {
+export interface SliderProps<T = number | number[]> extends Omit<AriaSliderProps<T>, 'label'>, RenderProps<SliderRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The display format of the value label.
    */
@@ -75,7 +75,7 @@ export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slid
     defaultClassName: 'react-aria-Slider'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
@@ -87,9 +87,7 @@ export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slid
         [LabelContext, {...labelProps, ref: labelRef}]
       ]}>
       <div
-        {...DOMProps}
-        {...groupProps}
-        {...renderProps}
+        {...mergeProps(DOMProps, renderProps, groupProps)}
         ref={ref}
         slot={props.slot || undefined}
         data-orientation={state.orientation}
@@ -98,7 +96,7 @@ export const Slider = /*#__PURE__*/ (forwardRef as forwardRefType)(function Slid
   );
 });
 
-export interface SliderOutputProps extends RenderProps<SliderRenderProps> {}
+export interface SliderOutputProps extends RenderProps<SliderRenderProps>, GlobalDOMAttributes<HTMLOutputElement> {}
 interface SliderOutputContextValue extends Omit<OutputHTMLAttributes<HTMLOutputElement>, 'children' | 'className' | 'style'>, SliderOutputProps {}
 
 /**
@@ -139,8 +137,8 @@ export interface SliderTrackRenderProps extends SliderRenderProps {
   isHovered: boolean
 }
 
-export interface SliderTrackProps extends HoverEvents, RenderProps<SliderTrackRenderProps> {}
-interface SliderTrackContextValue extends Omit<HTMLAttributes<HTMLElement>, 'children' | 'className' | 'style'>, SliderTrackProps {}
+export interface SliderTrackProps extends HoverEvents, RenderProps<SliderTrackRenderProps>, GlobalDOMAttributes<HTMLDivElement> {}
+interface SliderTrackContextValue extends Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'className' | 'style'>, SliderTrackProps {}
 
 /**
  * A slider track is a container for one or more slider thumbs.
@@ -204,7 +202,7 @@ export interface SliderThumbRenderProps {
   isDisabled: boolean
 }
 
-export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | 'validationState'>, HoverEvents, RenderProps<SliderThumbRenderProps> {
+export interface SliderThumbProps extends Omit<AriaSliderThumbProps, 'label' | 'validationState'>, HoverEvents, RenderProps<SliderThumbRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * A ref for the HTML input element.
    */
@@ -250,7 +248,7 @@ export const SliderThumb = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     }
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/Switch.tsx b/packages/react-aria-components/src/Switch.tsx
index 67e264efd6e..3e4006598e2 100644
--- a/packages/react-aria-components/src/Switch.tsx
+++ b/packages/react-aria-components/src/Switch.tsx
@@ -13,11 +13,11 @@
 import {AriaSwitchProps, HoverEvents, mergeProps, useFocusRing, useHover, useSwitch, VisuallyHidden} from 'react-aria';
 import {ContextValue, removeDataAttributes, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps, mergeRefs, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, RefObject} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {ToggleState, useToggleState} from 'react-stately';
 
-export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps>, SlotProps {
+export interface SwitchProps extends Omit<AriaSwitchProps, 'children'>, HoverEvents, RenderProps<SwitchRenderProps>, SlotProps, GlobalDOMAttributes<HTMLLabelElement> {
   /**
    * A ref for the HTML input element.
    */
@@ -107,7 +107,7 @@ export const Switch = /*#__PURE__*/ (forwardRef as forwardRefType)(function Swit
     }
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/Table.tsx b/packages/react-aria-components/src/Table.tsx
index b0559e64713..51e7c2fa362 100644
--- a/packages/react-aria-components/src/Table.tsx
+++ b/packages/react-aria-components/src/Table.tsx
@@ -1,11 +1,11 @@
-import {AriaLabelingProps, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {BaseCollection, Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';
 import {buildHeaderRows, TableColumnResizeState} from '@react-stately/table';
 import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
 import {ColumnSize, ColumnStaticSize, TableCollection as ITableCollection, TableProps as SharedTableProps} from '@react-types/table';
-import {ContextValue, DEFAULT_SLOT, DOMProps, Provider, RenderProps, ScrollableProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {ContextValue, DEFAULT_SLOT, DOMProps, Provider, RenderProps, SlotProps, StyleProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {DisabledBehavior, DraggableCollectionState, DroppableCollectionState, MultipleSelectionState, Node, SelectionBehavior, SelectionMode, SortDirection, TableState, useMultipleSelectionState, useTableColumnResizeState, useTableState} from 'react-stately';
 import {DragAndDropContext, DropIndicatorContext, DropIndicatorProps, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
@@ -209,7 +209,7 @@ interface ResizableTableContainerContextValue {
 
 const ResizableTableContainerContext = createContext<ResizableTableContainerContextValue | null>(null);
 
-export interface ResizableTableContainerProps extends DOMProps, ScrollableProps<HTMLDivElement> {
+export interface ResizableTableContainerProps extends DOMProps, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * Handler that is called when a user starts a column resize.
    */
@@ -270,7 +270,7 @@ export const ResizableTableContainer = forwardRef(function ResizableTableContain
 
   return (
     <div
-      {...filterDOMProps(props as any)}
+      {...filterDOMProps(props, {global: true})}
       ref={containerRef}
       className={props.className || 'react-aria-ResizableTableContainer'}
       style={props.style}
@@ -308,7 +308,7 @@ export interface TableRenderProps {
   state: TableState<unknown>
 }
 
-export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, StyleRenderProps<TableRenderProps>, SlotProps, AriaLabelingProps, ScrollableProps<HTMLTableElement> {
+export interface TableProps extends Omit<SharedTableProps<any>, 'children'>, StyleRenderProps<TableRenderProps>, SlotProps, AriaLabelingProps, GlobalDOMAttributes<HTMLTableElement> {
   /** The elements that make up the table. Includes the TableHeader, TableBody, Columns, and Rows. */
   children?: ReactNode,
   /**
@@ -474,6 +474,7 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
   }
 
   let ElementType = useElementType('table');
+  let DOMProps = filterDOMProps(props, {global: true});
 
   return (
     <Provider
@@ -485,9 +486,7 @@ function TableInner({props, forwardedRef: ref, selectionState, collection}: Tabl
       ]}>
       <FocusScope>
         <ElementType
-          {...filterDOMProps(props)}
-          {...renderProps}
-          {...mergeProps(gridProps, focusProps, droppableCollection?.collectionProps)}
+          {...mergeProps(DOMProps, renderProps, gridProps, focusProps, droppableCollection?.collectionProps)}
           style={style}
           ref={ref}
           slot={props.slot || undefined}
@@ -540,7 +539,7 @@ export interface TableHeaderRenderProps {
   isHovered: boolean
 }
 
-export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps>, HoverEvents {
+export interface TableHeaderProps<T> extends StyleRenderProps<TableHeaderRenderProps>, HoverEvents, GlobalDOMAttributes<HTMLTableSectionElement> {
   /** A list of table columns. */
   columns?: Iterable<T>,
   /** A list of `Column(s)` or a function. If the latter, a list of columns must be provided using the `columns` prop. */
@@ -587,7 +586,7 @@ export const TableHeader =  /*#__PURE__*/ createBranchComponent(
 
     return (
       <THead
-        {...mergeProps(filterDOMProps(props as any), rowGroupProps, hoverProps)}
+        {...mergeProps(filterDOMProps(props, {global: true}), rowGroupProps, hoverProps)}
         {...renderProps}
         ref={ref}
         data-hovered={isHovered || undefined}>
@@ -667,7 +666,7 @@ export interface ColumnRenderProps {
   startResize(): void
 }
 
-export interface ColumnProps extends RenderProps<ColumnRenderProps> {
+export interface ColumnProps extends RenderProps<ColumnRenderProps>, GlobalDOMAttributes<HTMLTableHeaderCellElement> {
   /** The unique id of the column. */
   id?: Key,
   /** Whether the column allows sorting. */
@@ -747,10 +746,12 @@ export const Column = /*#__PURE__*/ createLeafComponent('column', (props: Column
   }
 
   let TH = useElementType('th');
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
 
   return (
     <TH
-      {...mergeProps(filterDOMProps(props as any), columnHeaderProps, focusProps, hoverProps)}
+      {...mergeProps(DOMProps, columnHeaderProps, focusProps, hoverProps)}
       {...renderProps}
       style={style}
       ref={ref}
@@ -799,7 +800,7 @@ export interface ColumnResizerRenderProps {
   resizableDirection: 'right' | 'left' | 'both'
 }
 
-export interface ColumnResizerProps extends HoverEvents, RenderProps<ColumnResizerRenderProps> {
+export interface ColumnResizerProps extends HoverEvents, RenderProps<ColumnResizerRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   /** A custom accessibility label for the resizer. */
   'aria-label'?: string
 }
@@ -881,13 +882,13 @@ export const ColumnResizer = forwardRef(function ColumnResizer(props: ColumnResi
     setMouseDown(false);
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
       ref={objectRef}
       role="presentation"
-      {...filterDOMProps(props as any)}
-      {...renderProps}
-      {...mergeProps(resizerProps, {onPointerDown}, hoverProps)}
+      {...mergeProps(DOMProps, renderProps, resizerProps, {onPointerDown}, hoverProps)}
       data-hovered={isHovered || undefined}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
@@ -915,7 +916,7 @@ export interface TableBodyRenderProps {
   isDropTarget: boolean
 }
 
-export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TableBodyRenderProps> {
+export interface TableBodyProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TableBodyRenderProps>, GlobalDOMAttributes<HTMLTableSectionElement> {
   /** Provides content to display when there are no rows in the table. */
   renderEmptyState?: (props: TableBodyRenderProps) => ReactNode
 }
@@ -973,12 +974,13 @@ export const TableBody = /*#__PURE__*/ createBranchComponent('tablebody', <T ext
   let {rowGroupProps} = useTableRowGroup();
   let TBody = useElementType('tbody');
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   // TODO: TableBody doesn't support being the scrollable body of the table yet, to revisit if needed. Would need to
   // call useLoadMore here and walk up the DOM to the nearest scrollable element to set scrollRef
   return (
     <TBody
-      {...mergeProps(filterDOMProps(props as any), rowGroupProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, rowGroupProps)}
       ref={ref}
       data-empty={isEmpty || undefined}>
       {isDroppable && <RootDropIndicator />}
@@ -998,7 +1000,7 @@ export interface RowRenderProps extends ItemRenderProps {
   id?: Key
 }
 
-export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMProps, HoverEvents {
+export interface RowProps<T> extends StyleRenderProps<RowRenderProps>, LinkDOMProps, HoverEvents, GlobalDOMAttributes<HTMLTableRowElement> {
   /** A list of columns used when dynamically rendering cells. */
   columns?: Iterable<T>,
   /** The cells within the row. Supports static items or a function for dynamic rendering. */
@@ -1101,6 +1103,8 @@ export const Row = /*#__PURE__*/ createBranchComponent(
 
     let TR = useElementType('tr');
     let TD = useElementType('td');
+    let DOMProps = filterDOMProps(props as any, {global: true});
+    delete DOMProps.id;
 
     return (
       <>
@@ -1112,8 +1116,7 @@ export const Row = /*#__PURE__*/ createBranchComponent(
           </TR>
         )}
         <TR
-          {...mergeProps(filterDOMProps(props as any), rowProps, focusProps, hoverProps, draggableItem?.dragProps, focusWithinProps)}
-          {...renderProps}
+          {...mergeProps(DOMProps, renderProps, rowProps, focusProps, hoverProps, draggableItem?.dragProps, focusWithinProps)}
           ref={ref}
           data-disabled={states.isDisabled || undefined}
           data-selected={states.isSelected || undefined}
@@ -1193,7 +1196,7 @@ export interface CellRenderProps {
   id?: Key
 }
 
-export interface CellProps extends RenderProps<CellRenderProps> {
+export interface CellProps extends RenderProps<CellRenderProps>, GlobalDOMAttributes<HTMLTableCellElement> {
   /** The unique id of the cell. */
   id?: Key,
   /** A string representation of the cell's contents, used for features like typeahead. */
@@ -1235,11 +1238,12 @@ export const Cell = /*#__PURE__*/ createLeafComponent('cell', (props: CellProps,
   });
 
   let TD = useElementType('td');
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
 
   return (
     <TD
-      {...mergeProps(filterDOMProps(props as any), gridCellProps, focusProps, hoverProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, gridCellProps, focusProps, hoverProps)}
       ref={ref}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
@@ -1270,7 +1274,7 @@ function TableDropIndicatorWrapper(props: DropIndicatorProps, ref: ForwardedRef<
   );
 }
 
-interface TableDropIndicatorProps extends DropIndicatorProps {
+interface TableDropIndicatorProps extends DropIndicatorProps, GlobalDOMAttributes<HTMLTableRowElement> {
   dropIndicatorProps: React.HTMLAttributes<HTMLElement>,
   isDropTarget: boolean,
   buttonRef: RefObject<HTMLDivElement | null>
@@ -1299,7 +1303,7 @@ function TableDropIndicator(props: TableDropIndicatorProps, ref: ForwardedRef<HT
 
   return (
     <TR
-      {...filterDOMProps(props as any)}
+      {...filterDOMProps(props as any, {global: true})}
       {...renderProps}
       role="row"
       ref={ref as RefObject<HTMLTableRowElement | null>}
@@ -1348,7 +1352,7 @@ function RootDropIndicator() {
   );
 }
 
-export interface TableLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps {
+export interface TableLoadingSentinelProps extends Omit<LoadMoreSentinelProps, 'collection'>, StyleProps, GlobalDOMAttributes<HTMLTableRowElement> {
   /**
    * The load more spinner to render when loading additional items.
    */
@@ -1406,7 +1410,7 @@ export const UNSTABLE_TableLoadingSentinel = createLeafComponent('loader', funct
       </TR>
       {isLoading && renderProps.children && (
         <TR
-          {...mergeProps(filterDOMProps(props as any), rowProps)}
+          {...mergeProps(filterDOMProps(props, {global: true}), rowProps)}
           {...renderProps}
           role="row"
           ref={ref}>
diff --git a/packages/react-aria-components/src/Tabs.tsx b/packages/react-aria-components/src/Tabs.tsx
index 0f12c0a6140..0fcf83762bb 100644
--- a/packages/react-aria-components/src/Tabs.tsx
+++ b/packages/react-aria-components/src/Tabs.tsx
@@ -10,7 +10,7 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, forwardRefType, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps, RefObject} from '@react-types/shared';
 import {AriaTabListProps, AriaTabPanelProps, mergeProps, Orientation, useFocusRing, useHover, useTab, useTabList, useTabPanel} from 'react-aria';
 import {Collection, CollectionBuilder, createHideableComponent, createLeafComponent} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, usePersistedKeys} from './Collection';
@@ -19,7 +19,7 @@ import {filterDOMProps, inertValue, useObjectRef} from '@react-aria/utils';
 import {Collection as ICollection, Node, TabListState, useTabListState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, JSX, useContext, useMemo} from 'react';
 
-export interface TabsProps extends Omit<AriaTabListProps<any>, 'items' | 'children'>, RenderProps<TabsRenderProps>, SlotProps {}
+export interface TabsProps extends Omit<AriaTabListProps<any>, 'items' | 'children'>, RenderProps<TabsRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export interface TabsRenderProps {
   /**
@@ -29,7 +29,7 @@ export interface TabsRenderProps {
   orientation: Orientation
 }
 
-export interface TabListProps<T> extends StyleRenderProps<TabListRenderProps>, AriaLabelingProps, Omit<CollectionProps<T>, 'disabledKeys'> {}
+export interface TabListProps<T> extends StyleRenderProps<TabListRenderProps>, AriaLabelingProps, Omit<CollectionProps<T>, 'disabledKeys'>, GlobalDOMAttributes<HTMLDivElement> {}
 
 export interface TabListRenderProps {
   /**
@@ -43,7 +43,7 @@ export interface TabListRenderProps {
   state: TabListState<unknown>
 }
 
-export interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps, LinkDOMProps, HoverEvents {
+export interface TabProps extends RenderProps<TabRenderProps>, AriaLabelingProps, LinkDOMProps, HoverEvents, GlobalDOMAttributes<HTMLDivElement> {
   /** The unique id of the tab. */
   id?: Key,
   /** Whether the tab is disabled. */
@@ -83,7 +83,7 @@ export interface TabRenderProps {
   isDisabled: boolean
 }
 
-export interface TabPanelProps extends AriaTabPanelProps, RenderProps<TabPanelRenderProps> {
+export interface TabPanelProps extends AriaTabPanelProps, RenderProps<TabPanelRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * Whether to mount the tab panel in the DOM even when it is not currently selected.
    * Inactive tab panels are inert and cannot be interacted with. They must be styled appropriately so this is clear to the user visually.
@@ -162,11 +162,11 @@ function TabsInner({props, tabsRef: ref, collection}: TabsInnerProps) {
     values
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...filterDOMProps(props as any)}
-      {...focusProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, focusProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-focused={isFocused || undefined}
@@ -222,15 +222,13 @@ function TabListInner<T extends object>({props, forwardedRef: ref}: TabListInner
     }
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
     <div
-      {...DOMProps}
-      {...tabListProps}
+      {...mergeProps(DOMProps, renderProps, tabListProps)}
       ref={objectRef}
-      {...renderProps}
       data-orientation={orientation || undefined}>
       <CollectionRoot collection={state.collection} persistedKeys={usePersistedKeys(state.selectionManager.focusedKey)} />
     </div>
@@ -268,10 +266,12 @@ export const Tab = /*#__PURE__*/ createLeafComponent('item', (props: TabProps, f
   });
 
   let ElementType: React.ElementType = item.props.href ? 'a' : 'div';
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
 
   return (
     <ElementType
-      {...mergeProps(tabProps, focusProps, hoverProps, renderProps)}
+      {...mergeProps(DOMProps, renderProps, tabProps, focusProps, hoverProps)}
       ref={ref}
       data-selected={isSelected || undefined}
       data-disabled={isDisabled || undefined}
@@ -309,7 +309,7 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
     return null;
   }
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   let domProps = isSelected
@@ -323,7 +323,7 @@ export const TabPanel = /*#__PURE__*/ createHideableComponent(function TabPanel(
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}
       // @ts-ignore
-      inert={inertValue(!isSelected)}
+      inert={inertValue(!isSelected || props.inert)}
       data-inert={!isSelected ? 'true' : undefined}>
       <Provider
         values={[
diff --git a/packages/react-aria-components/src/TagGroup.tsx b/packages/react-aria-components/src/TagGroup.tsx
index eccd36bd58e..d246304265e 100644
--- a/packages/react-aria-components/src/TagGroup.tsx
+++ b/packages/react-aria-components/src/TagGroup.tsx
@@ -16,14 +16,14 @@ import {Collection, CollectionBuilder, createLeafComponent} from '@react-aria/co
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps, usePersistedKeys} from './Collection';
 import {ContextValue, DOMProps, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps, useSlot} from './utils';
 import {filterDOMProps, mergeProps, useObjectRef} from '@react-aria/utils';
-import {forwardRefType, HoverEvents, Key, LinkDOMProps} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, HoverEvents, Key, LinkDOMProps} from '@react-types/shared';
 import {LabelContext} from './Label';
 import {ListState, Node, useListState} from 'react-stately';
 import {ListStateContext} from './ListBox';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useEffect, useRef} from 'react';
 import {TextContext} from './Text';
 
-export interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps {}
+export interface TagGroupProps extends Omit<AriaTagGroupProps<unknown>, 'children' | 'items' | 'label' | 'description' | 'errorMessage' | 'keyboardDelegate'>, DOMProps, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export interface TagListRenderProps {
   /**
@@ -47,7 +47,7 @@ export interface TagListRenderProps {
   state: ListState<unknown>
 }
 
-export interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TagListRenderProps> {
+export interface TagListProps<T> extends Omit<CollectionProps<T>, 'disabledKeys'>, StyleRenderProps<TagListRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   /** Provides content to display when there are no items in the tag list. */
   renderEmptyState?: (props: TagListRenderProps) => ReactNode
 }
@@ -85,7 +85,7 @@ function TagGroupInner({props, forwardedRef: ref, collection}: TagGroupInnerProp
   });
 
   // Prevent DOM props from going to two places.
-  let domProps = filterDOMProps(props);
+  let domProps = filterDOMProps(props, {global: true});
   let domPropOverrides = Object.fromEntries(Object.entries(domProps).map(([k]) => [k, undefined]));
   let {
     gridProps,
@@ -160,11 +160,11 @@ function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps
   });
 
   let persistedKeys = usePersistedKeys(state.selectionManager.focusedKey);
+  let DOMProps = filterDOMProps(props, {global: true});
 
   return (
     <div
-      {...mergeProps(gridProps, focusProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, gridProps, focusProps)}
       ref={ref}
       data-empty={state.collection.size === 0 || undefined}
       data-focused={isFocused || undefined}
@@ -232,11 +232,13 @@ export const Tag = /*#__PURE__*/ createLeafComponent('item', (props: TagProps, f
     }
   }, [item.textValue]);
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+
   return (
     <div
       ref={ref}
-      {...renderProps}
-      {...mergeProps(filterDOMProps(props as any), rowProps, focusProps, hoverProps)}
+      {...mergeProps(DOMProps, renderProps, rowProps, focusProps, hoverProps)}
       data-selected={states.isSelected || undefined}
       data-disabled={states.isDisabled || undefined}
       data-hovered={isHovered || undefined}
diff --git a/packages/react-aria-components/src/TextField.tsx b/packages/react-aria-components/src/TextField.tsx
index 066959780dd..880e7a75bbb 100644
--- a/packages/react-aria-components/src/TextField.tsx
+++ b/packages/react-aria-components/src/TextField.tsx
@@ -16,6 +16,7 @@ import {createHideableComponent} from '@react-aria/collections';
 import {FieldErrorContext} from './FieldError';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
 import {FormContext} from './Form';
+import {GlobalDOMAttributes} from '@react-types/shared';
 import {InputContext} from './Input';
 import {LabelContext} from './Label';
 import React, {createContext, ForwardedRef, useCallback, useRef, useState} from 'react';
@@ -45,7 +46,7 @@ export interface TextFieldRenderProps {
   isRequired: boolean
 }
 
-export interface TextFieldProps extends Omit<AriaTextFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, Omit<DOMProps, 'style' | 'className' | 'children'>, SlotProps, RenderProps<TextFieldRenderProps> {
+export interface TextFieldProps extends Omit<AriaTextFieldProps, 'label' | 'placeholder' | 'description' | 'errorMessage' | 'validationState' | 'validationBehavior'>, RACValidation, Omit<DOMProps, 'style' | 'className' | 'children'>, SlotProps, RenderProps<TextFieldRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   /** Whether the value is invalid. */
   isInvalid?: boolean
 }
@@ -92,7 +93,7 @@ export const TextField = /*#__PURE__*/ createHideableComponent(function TextFiel
     defaultClassName: 'react-aria-TextField'
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
diff --git a/packages/react-aria-components/src/Toast.tsx b/packages/react-aria-components/src/Toast.tsx
index 391163227b8..d738af57396 100644
--- a/packages/react-aria-components/src/Toast.tsx
+++ b/packages/react-aria-components/src/Toast.tsx
@@ -14,12 +14,12 @@ import {AriaToastProps, AriaToastRegionProps, mergeProps, useFocusRing, useHover
 import {ButtonContext} from './Button';
 import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
 import {createPortal} from 'react-dom';
-import {forwardRefType} from '@react-types/shared';
+import {filterDOMProps, useObjectRef} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import {QueuedToast, ToastQueue, ToastState, useToastQueue} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, HTMLAttributes, JSX, ReactElement, ReactNode, useContext} from 'react';
 import {TextContext} from './Text';
 import {useIsSSR} from '@react-aria/ssr';
-import {useObjectRef} from '@react-aria/utils';
 import {useUNSAFE_PortalContext} from '@react-aria/overlays';
 
 export const ToastStateContext = createContext<ToastState<any> | null>(null);
@@ -44,7 +44,7 @@ export interface ToastRegionRenderProps<T> {
   isFocusVisible: boolean
 }
 
-export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderProps<ToastRegionRenderProps<T>> {
+export interface ToastRegionProps<T> extends AriaToastRegionProps, StyleRenderProps<ToastRegionRenderProps<T>>, GlobalDOMAttributes<HTMLDivElement> {
   /** The queue of toasts to display. */
   queue: ToastQueue<T>,
   /** A function to render each toast, or children containing a `<ToastList>`. */
@@ -84,11 +84,12 @@ export const ToastRegion = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     }
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   let region = (
     <ToastStateContext.Provider value={state}>
       <div
-        {...renderProps}
-        {...mergeProps(regionProps, focusProps, hoverProps)}
+        {...mergeProps(DOMProps, renderProps, regionProps, focusProps, hoverProps)}
         dir={direction}
         ref={objectRef}
         data-hovered={isHovered || undefined}
@@ -152,7 +153,7 @@ export interface ToastRenderProps<T> {
   isFocusVisible: boolean
 }
 
-export interface ToastProps<T> extends AriaToastProps<T>, RenderProps<ToastRenderProps<T>> {}
+export interface ToastProps<T> extends AriaToastProps<T>, RenderProps<ToastRenderProps<T>>, GlobalDOMAttributes<HTMLDivElement> {}
 
 /**
  * A Toast displays a brief, temporary notification of actions, errors, or other events in an application.
@@ -177,10 +178,11 @@ export const Toast = /*#__PURE__*/ (forwardRef as forwardRefType)(function Toast
     }
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...renderProps}
-      {...mergeProps(toastProps, focusProps)}
+      {...mergeProps(DOMProps, renderProps, toastProps, focusProps)}
       ref={objectRef}
       data-focused={isFocused || undefined}
       data-focus-visible={isFocusVisible || undefined}>
diff --git a/packages/react-aria-components/src/ToggleButton.tsx b/packages/react-aria-components/src/ToggleButton.tsx
index 3361ccf73d8..c15292c1c57 100644
--- a/packages/react-aria-components/src/ToggleButton.tsx
+++ b/packages/react-aria-components/src/ToggleButton.tsx
@@ -13,7 +13,8 @@
 import {AriaToggleButtonProps, HoverEvents, mergeProps, useFocusRing, useHover, useToggleButton, useToggleButtonGroupItem} from 'react-aria';
 import {ButtonRenderProps} from './Button';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {forwardRefType, Key} from '@react-types/shared';
+import {filterDOMProps} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes, Key} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef, useContext} from 'react';
 import {ToggleGroupStateContext} from './ToggleButtonGroup';
 import {ToggleState, useToggleState} from 'react-stately';
@@ -30,7 +31,7 @@ export interface ToggleButtonRenderProps extends Omit<ButtonRenderProps, 'isPend
   state: ToggleState
 }
 
-export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children' | 'elementType' | 'id'>, HoverEvents, SlotProps, RenderProps<ToggleButtonRenderProps> {
+export interface ToggleButtonProps extends Omit<AriaToggleButtonProps, 'children' | 'elementType' | 'id'>, HoverEvents, SlotProps, RenderProps<ToggleButtonRenderProps>, Omit<GlobalDOMAttributes<HTMLDivElement>, 'onClick'> {
   /** When used in a ToggleButtonGroup, an identifier for the item in `selectedKeys`. When used standalone, a DOM id. */
   id?: Key
 }
@@ -65,10 +66,12 @@ export const ToggleButton = /*#__PURE__*/ (forwardRef as forwardRefType)(functio
     defaultClassName: 'react-aria-ToggleButton'
   });
 
+  let DOMProps = filterDOMProps(props as any, {global: true});
+  delete DOMProps.id;
+
   return (
     <button
-      {...mergeProps(buttonProps, focusProps, hoverProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, buttonProps, focusProps, hoverProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-focused={isFocused || undefined}
diff --git a/packages/react-aria-components/src/ToggleButtonGroup.tsx b/packages/react-aria-components/src/ToggleButtonGroup.tsx
index 44381b50f1c..e22ab95d300 100644
--- a/packages/react-aria-components/src/ToggleButtonGroup.tsx
+++ b/packages/react-aria-components/src/ToggleButtonGroup.tsx
@@ -11,7 +11,8 @@
  */
 import {AriaToggleButtonGroupProps, useToggleButtonGroup} from 'react-aria';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
-import {forwardRefType} from '@react-types/shared';
+import {filterDOMProps, mergeProps} from '@react-aria/utils';
+import {forwardRefType, GlobalDOMAttributes} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 import {ToggleGroupState, useToggleGroupState} from 'react-stately';
 
@@ -27,7 +28,7 @@ export interface ToggleButtonGroupRenderProps {
   state: ToggleGroupState
 }
 
-export interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps, RenderProps<ToggleButtonGroupRenderProps>, SlotProps {}
+export interface ToggleButtonGroupProps extends AriaToggleButtonGroupProps, RenderProps<ToggleButtonGroupRenderProps>, SlotProps, GlobalDOMAttributes<HTMLDivElement> {}
 
 export const ToggleButtonGroupContext = createContext<ContextValue<ToggleButtonGroupProps, HTMLDivElement>>({});
 export const ToggleGroupStateContext = createContext<ToggleGroupState | null>(null);
@@ -49,10 +50,11 @@ export const ToggleButtonGroup = /*#__PURE__*/ (forwardRef as forwardRefType)(fu
     defaultClassName: 'react-aria-ToggleButtonGroup'
   });
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...groupProps}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, groupProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-orientation={props.orientation || 'horizontal'}
diff --git a/packages/react-aria-components/src/Toolbar.tsx b/packages/react-aria-components/src/Toolbar.tsx
index 97919a1c61b..11d0afdf602 100644
--- a/packages/react-aria-components/src/Toolbar.tsx
+++ b/packages/react-aria-components/src/Toolbar.tsx
@@ -13,7 +13,7 @@
 import {AriaToolbarProps, useToolbar} from '@react-aria/toolbar';
 import {ContextValue, RenderProps, SlotProps, useContextProps, useRenderProps} from './utils';
 import {filterDOMProps, mergeProps} from '@react-aria/utils';
-import {forwardRefType, Orientation} from '@react-types/shared';
+import {forwardRefType, GlobalDOMAttributes, Orientation} from '@react-types/shared';
 import React, {createContext, ForwardedRef, forwardRef} from 'react';
 
 export interface ToolbarRenderProps {
@@ -24,7 +24,7 @@ export interface ToolbarRenderProps {
   orientation: Orientation
 }
 
-export interface ToolbarProps extends AriaToolbarProps, SlotProps, RenderProps<ToolbarRenderProps> {
+export interface ToolbarProps extends AriaToolbarProps, SlotProps, RenderProps<ToolbarRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
 }
 
 export const ToolbarContext = createContext<ContextValue<ToolbarProps, HTMLDivElement>>({});
@@ -41,13 +41,12 @@ export const Toolbar = /*#__PURE__*/ (forwardRef as forwardRefType)(function Too
     values: {orientation: props.orientation || 'horizontal'},
     defaultClassName: 'react-aria-Toolbar'
   });
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
   delete DOMProps.id;
 
   return (
     <div
-      {...mergeProps(toolbarProps, DOMProps)}
-      {...renderProps}
+      {...mergeProps(DOMProps, renderProps, toolbarProps)}
       ref={ref}
       slot={props.slot || undefined}
       data-orientation={props.orientation || 'horizontal'}>
diff --git a/packages/react-aria-components/src/Tooltip.tsx b/packages/react-aria-components/src/Tooltip.tsx
index 48446807554..0e33f53c35c 100644
--- a/packages/react-aria-components/src/Tooltip.tsx
+++ b/packages/react-aria-components/src/Tooltip.tsx
@@ -10,20 +10,20 @@
  * governing permissions and limitations under the License.
  */
 
-import {AriaLabelingProps, FocusableElement, forwardRefType, RefObject} from '@react-types/shared';
+import {AriaLabelingProps, FocusableElement, forwardRefType, GlobalDOMAttributes, RefObject} from '@react-types/shared';
 import {AriaPositionProps, mergeProps, OverlayContainer, Placement, PlacementAxis, PositionProps, useOverlayPosition, useTooltip, useTooltipTrigger} from 'react-aria';
 import {ContextValue, Provider, RenderProps, useContextProps, useRenderProps} from './utils';
+import {filterDOMProps, useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
 import {FocusableProvider} from '@react-aria/focus';
 import {OverlayArrowContext} from './OverlayArrow';
 import {OverlayTriggerProps, TooltipTriggerProps, TooltipTriggerState, useTooltipTriggerState} from 'react-stately';
 import React, {createContext, ForwardedRef, forwardRef, JSX, ReactNode, useContext, useRef, useState} from 'react';
-import {useEnterAnimation, useExitAnimation, useLayoutEffect} from '@react-aria/utils';
 
 export interface TooltipTriggerComponentProps extends TooltipTriggerProps {
   children: ReactNode
 }
 
-export interface TooltipProps extends PositionProps, Pick<AriaPositionProps, 'arrowBoundaryOffset'>, OverlayTriggerProps, AriaLabelingProps, RenderProps<TooltipRenderProps> {
+export interface TooltipProps extends PositionProps, Pick<AriaPositionProps, 'arrowBoundaryOffset'>, OverlayTriggerProps, AriaLabelingProps, RenderProps<TooltipRenderProps>, GlobalDOMAttributes<HTMLDivElement> {
   /**
    * The ref for the element which the tooltip positions itself with respect to.
    *
@@ -160,11 +160,12 @@ function TooltipInner(props: TooltipProps & {isExiting: boolean, tooltipRef: Ref
   props = mergeProps(props, overlayProps);
   let {tooltipProps} = useTooltip(props, state);
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <div
-      {...tooltipProps}
+      {...mergeProps(DOMProps, renderProps, tooltipProps)}
       ref={props.tooltipRef}
-      {...renderProps}
       style={{...overlayProps.style, ...renderProps.style}}
       data-placement={placement ?? undefined}
       data-entering={isEntering || undefined}
diff --git a/packages/react-aria-components/src/Tree.tsx b/packages/react-aria-components/src/Tree.tsx
index 0321841dfe3..1ea360676ba 100644
--- a/packages/react-aria-components/src/Tree.tsx
+++ b/packages/react-aria-components/src/Tree.tsx
@@ -15,8 +15,8 @@ import {ButtonContext} from './Button';
 import {CheckboxContext} from './RSPContexts';
 import {Collection, CollectionBuilder, CollectionNode, createBranchComponent, createLeafComponent, useCachedChildren} from '@react-aria/collections';
 import {CollectionProps, CollectionRendererContext, DefaultCollectionRenderer, ItemRenderProps} from './Collection';
-import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, ScrollableProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
-import {DisabledBehavior, DragPreviewRenderer, Expandable, forwardRefType, HoverEvents, Key, KeyboardDelegate, LinkDOMProps, MultipleSelection, RefObject} from '@react-types/shared';
+import {ContextValue, DEFAULT_SLOT, Provider, RenderProps, SlotProps, StyleRenderProps, useContextProps, useRenderProps} from './utils';
+import {DisabledBehavior, DragPreviewRenderer, Expandable, forwardRefType, GlobalDOMAttributes, HoverEvents, Key, KeyboardDelegate, LinkDOMProps, MultipleSelection, RefObject} from '@react-types/shared';
 import {DragAndDropContext, DropIndicatorContext, useDndPersistedKeys, useRenderDropIndicator} from './DragAndDrop';
 import {DragAndDropHooks} from './useDragAndDrop';
 import {DraggableCollectionState, DroppableCollectionState, Collection as ICollection, Node, SelectionBehavior, TreeState, useTreeState} from 'react-stately';
@@ -121,7 +121,7 @@ export interface TreeRenderProps {
 
 export interface TreeEmptyStateRenderProps extends Omit<TreeRenderProps, 'isEmpty'> {}
 
-export interface TreeProps<T> extends Omit<AriaTreeProps<T>, 'children'>, MultipleSelection, CollectionProps<T>, StyleRenderProps<TreeRenderProps>, SlotProps, ScrollableProps<HTMLDivElement>, Expandable {
+export interface TreeProps<T> extends Omit<AriaTreeProps<T>, 'children'>, MultipleSelection, CollectionProps<T>, StyleRenderProps<TreeRenderProps>, SlotProps, Expandable, GlobalDOMAttributes<HTMLDivElement> {
   /** How multiple selection should behave in the tree. */
   selectionBehavior?: SelectionBehavior,
   /** Provides content to display when there are no items in the list. */
@@ -381,13 +381,13 @@ function TreeInner<T extends object>({props, collection, treeRef: ref}: TreeInne
     );
   }
 
+  let DOMProps = filterDOMProps(props, {global: true});
+
   return (
     <>
       <FocusScope>
         <div
-          {...filterDOMProps(props)}
-          {...renderProps}
-          {...mergeProps(gridProps, focusProps, droppableCollection?.collectionProps)}
+          {...mergeProps(DOMProps, renderProps, gridProps, focusProps, droppableCollection?.collectionProps)}
           ref={ref}
           slot={props.slot || undefined}
           onScroll={props.onScroll}
@@ -465,7 +465,7 @@ export const TreeItemContent = /*#__PURE__*/ createLeafComponent('content', func
 
 export const TreeItemContentContext = createContext<TreeItemContentRenderProps | null>(null);
 
-export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRenderProps>, LinkDOMProps, HoverEvents, Pick<AriaTreeItemOptions, 'hasChildItems'> {
+export interface TreeItemProps<T = object> extends StyleRenderProps<TreeItemRenderProps>, LinkDOMProps, HoverEvents, Pick<AriaTreeItemOptions, 'hasChildItems'>, GlobalDOMAttributes<HTMLDivElement> {
   /** The unique id of the tree row. */
   id?: Key,
   /** The object value that this tree item represents. When using dynamic collections, this is set automatically. */
@@ -638,7 +638,7 @@ export const TreeItem = /*#__PURE__*/ createBranchComponent('item', <T extends o
       )}
       <div
         {...mergeProps(
-          filterDOMProps(props as any),
+          filterDOMProps(props as any, {global: true}),
           rowProps,
           focusProps,
           hoverProps,
diff --git a/packages/react-aria-components/src/utils.tsx b/packages/react-aria-components/src/utils.tsx
index 9eb060549a9..45f1aae62de 100644
--- a/packages/react-aria-components/src/utils.tsx
+++ b/packages/react-aria-components/src/utils.tsx
@@ -12,7 +12,7 @@
 
 import {AriaLabelingProps, RefObject,  DOMProps as SharedDOMProps} from '@react-types/shared';
 import {mergeProps, mergeRefs, useLayoutEffect, useObjectRef} from '@react-aria/utils';
-import React, {Context, CSSProperties, ForwardedRef, JSX, ReactNode, RefCallback, UIEvent, useCallback, useContext, useMemo, useRef, useState} from 'react';
+import React, {Context, CSSProperties, ForwardedRef, JSX, ReactNode, RefCallback, useCallback, useContext, useMemo, useRef, useState} from 'react';
 
 export const DEFAULT_SLOT = Symbol('default');
 
@@ -63,11 +63,6 @@ export interface DOMProps extends StyleProps, SharedDOMProps {
   children?: ReactNode
 }
 
-export interface ScrollableProps<T extends Element> {
-  /** Handler that is called when a user scrolls. See [MDN](https://developer.mozilla.org/en-US/docs/Web/API/Element/scroll_event). */
-  onScroll?: (e: UIEvent<T>) => void
-}
-
 export interface StyleRenderProps<T> {
   /** The CSS [className](https://developer.mozilla.org/en-US/docs/Web/API/Element/className) for the element. A function may be provided to compute the class based on component state. */
   className?: string | ((values: T & {defaultClassName: string | undefined}) => string),

From 2f404c355c727728f6028fea1cae99f4473307f9 Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 30 May 2025 13:32:47 -0700
Subject: [PATCH 2/3] fix

---
 packages/@react-aria/utils/src/filterDOMProps.ts | 1 +
 packages/react-aria-components/src/Select.tsx    | 2 +-
 2 files changed, 2 insertions(+), 1 deletion(-)

diff --git a/packages/@react-aria/utils/src/filterDOMProps.ts b/packages/@react-aria/utils/src/filterDOMProps.ts
index b5819d8bd6a..f6a03d1eefa 100644
--- a/packages/@react-aria/utils/src/filterDOMProps.ts
+++ b/packages/@react-aria/utils/src/filterDOMProps.ts
@@ -43,6 +43,7 @@ const globalAttrs = new Set([
 ]);
 
 const globalEvents = new Set([
+  'onClick',
   'onAuxClick',
   'onContextMenu',
   'onDoubleClick',
diff --git a/packages/react-aria-components/src/Select.tsx b/packages/react-aria-components/src/Select.tsx
index 05e8b38ea59..e3587f001b1 100644
--- a/packages/react-aria-components/src/Select.tsx
+++ b/packages/react-aria-components/src/Select.tsx
@@ -279,7 +279,7 @@ export const SelectValue = /*#__PURE__*/ (forwardRef as forwardRefType)(function
     }
   });
 
-  let DOMProps = filterDOMProps(props);
+  let DOMProps = filterDOMProps(props, {global: true});
 
   return (
     <span ref={ref} {...DOMProps} {...renderProps} data-placeholder={!selectedItem || undefined}>

From 63974d72deacd28528261875ce2e7daf60896d2b Mon Sep 17 00:00:00 2001
From: Devon Govett <devongovett@gmail.com>
Date: Fri, 30 May 2025 13:57:43 -0700
Subject: [PATCH 3/3] fix test

---
 packages/react-aria-components/src/TagGroup.tsx | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/react-aria-components/src/TagGroup.tsx b/packages/react-aria-components/src/TagGroup.tsx
index d246304265e..e02d7fccac1 100644
--- a/packages/react-aria-components/src/TagGroup.tsx
+++ b/packages/react-aria-components/src/TagGroup.tsx
@@ -141,9 +141,7 @@ interface TagListInnerProps<T> {
 function TagListInner<T extends object>({props, forwardedRef}: TagListInnerProps<T>) {
   let state = useContext(ListStateContext)!;
   let {CollectionRoot} = useContext(CollectionRendererContext);
-  let [gridProps, ref] = useContextProps(props, forwardedRef, TagListContext);
-  delete gridProps.items;
-  delete gridProps.renderEmptyState;
+  let [gridProps, ref] = useContextProps({}, forwardedRef, TagListContext);
 
   let {focusProps, isFocused, isFocusVisible} = useFocusRing();
   let renderValues = {