[pull] main from adobe:main

packages/@react-aria/autocomplete/src/useAutocomplete.ts

@@ -92,6 +92,7 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
   let timeout = useRef<ReturnType<typeof setTimeout> | undefined>(undefined);
   let delayNextActiveDescendant = useRef(false);
   let queuedActiveDescendant = useRef<string | null>(null);
+  let lastPointerType = useRef<string | null>(null);
 
   // For mobile screen readers, we don't want virtual focus, instead opting to disable FocusScope's restoreFocus and manually
   // moving focus back to the subtriggers
@@ -105,9 +106,23 @@ export function useAutocomplete<T>(props: AriaAutocompleteOptions<T>, state: Aut
     return () => clearTimeout(timeout.current);
   }, []);
 
+  useEffect(() => {
+    let handlePointerDown = (e: PointerEvent) => {
+      lastPointerType.current = e.pointerType;
+    };
+
+    if (typeof PointerEvent !== 'undefined') {
+      document.addEventListener('pointerdown', handlePointerDown, true);
+      return () => {
+        document.removeEventListener('pointerdown', handlePointerDown, true);
+      };
+    }
+  }, []);
+
   let updateActiveDescendantEvent = useEffectEvent((e: Event) => {
     // Ensure input is focused if the user clicks on the collection directly.
-    if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current) {
+    // don't trigger on touch so that mobile keyboard doesnt appear when tapping on options
+    if (!e.isTrusted && shouldUseVirtualFocus && inputRef.current && getActiveElement(getOwnerDocument(inputRef.current)) !== inputRef.current && lastPointerType.current !== 'touch') {
       inputRef.current.focus();
     }
 

packages/@react-aria/interactions/src/useFocusVisible.ts

@@ -15,7 +15,7 @@
 // NOTICE file in the root directory of this source tree.
 // See https://github.com/facebook/react/tree/cc7c1aece46a6b69b41958d731e0fd27c94bfc6c/packages/react-interactions
 
-import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick} from '@react-aria/utils';
+import {getOwnerDocument, getOwnerWindow, isMac, isVirtualClick, openLink} from '@react-aria/utils';
 import {ignoreFocusEvent} from './utils';
 import {useEffect, useState} from 'react';
 import {useIsSSR} from '@react-aria/ssr';
@@ -68,7 +68,7 @@ function isValidKey(e: KeyboardEvent) {
 
 function handleKeyboardEvent(e: KeyboardEvent) {
   hasEventBeforeFocus = true;
-  if (isValidKey(e)) {
+  if (!(openLink as any).isOpening && isValidKey(e)) {
     currentModality = 'keyboard';
     triggerChangeHandlers('keyboard', e);
   }
@@ -83,7 +83,7 @@ function handlePointerEvent(e: PointerEvent | MouseEvent) {
 }
 
 function handleClickEvent(e: MouseEvent) {
-  if (isVirtualClick(e)) {
+  if (!(openLink as any).isOpening && isVirtualClick(e)) {
     hasEventBeforeFocus = true;
     currentModality = 'virtual';
   }

packages/@react-aria/utils/src/openLink.tsx

@@ -106,7 +106,7 @@ export function openLink(target: HTMLAnchorElement, modifiers: Modifiers, setOpe
   let event = isWebKit() && isMac() && !isIPad() && process.env.NODE_ENV !== 'test'
     // @ts-ignore - keyIdentifier is a non-standard property, but it's what webkit expects
     ? new KeyboardEvent('keydown', {keyIdentifier: 'Enter', metaKey, ctrlKey, altKey, shiftKey})
-    : new MouseEvent('click', {metaKey, ctrlKey, altKey, shiftKey, bubbles: true, cancelable: true});
+    : new MouseEvent('click', {metaKey, ctrlKey, altKey, shiftKey, detail: 1, bubbles: true, cancelable: true});
   (openLink as any).isOpening = setOpening;
   focusWithoutScrolling(target);
   target.dispatchEvent(event);

packages/@react-spectrum/s2/chromatic/TreeView.stories.tsx

@@ -152,43 +152,6 @@ export const TreeSelection: StoryObj<typeof TreeExample> = {
   }
 };
 
-export const TreeIsDetached: StoryObj<typeof TreeExample> = {
-  ...TreeStatic,
-  args: {
-    isDetached: true,
-    selectionMode: 'multiple',
-    defaultSelectedKeys: ['projects-2', 'projects-3']
-  }
-};
-
-export const TreeIsEmphasized: StoryObj<typeof TreeExample> = {
-  ...TreeStatic,
-  args: {
-    isEmphasized: true,
-    selectionMode: 'multiple',
-    defaultSelectedKeys: ['projects-2', 'projects-3']
-  }
-};
-
-export const TreeIsDetachedIsEmphasized: StoryObj<typeof TreeExample> = {
-  ...TreeStatic,
-  args: {
-    isDetached: true,
-    isEmphasized: true,
-    selectionMode: 'multiple',
-    defaultSelectedKeys: ['projects-2', 'projects-3']
-  }
-};
-
-export const TreeIsDetachedMobile: StoryObj<typeof TreeExample> = {
-  ...TreeStatic,
-  args: {
-    isDetached: true,
-    selectionMode: 'multiple',
-    defaultSelectedKeys: ['projects-2', 'projects-3']
-  }
-};
-
 interface TreeViewItemType {
   id: string,
   name: string,

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

@@ -141,7 +141,8 @@ const cellStyles = style({
     isOutsideMonth: 'none'
   },
   alignItems: 'center',
-  justifyContent: 'center'
+  justifyContent: 'center',
+  disableTapHighlight: true
 });
 
 const cellInnerStyles = style<CalendarCellRenderProps & {selectionMode: 'single' | 'range'}>({

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

@@ -76,7 +76,8 @@ const styles = style<CloseButtonProps & {isHovered: boolean, isFocusVisible: boo
     default: 'focus-ring',
     isStaticColor: 'transparent-overlay-1000',
     forcedColors: 'Highlight'
-  }
+  },
+  disableTapHighlight: true
 }, getAllowedOverrides());
 
 export const CloseButtonContext = createContext<ContextValue<Partial<CloseButtonProps>, FocusableRefValue<HTMLButtonElement>>>(null);

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

@@ -90,7 +90,8 @@ function useWrapper(swatch: ReactElement, color: Color, rounding: ColorSwatchPro
             default: 'sm',
             full: 'full'
           }
-        }
+        },
+        disableTapHighlight: true
       })({...renderProps, rounding})}>
       {({isSelected}) => (<>
         {swatch}

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

@@ -601,7 +601,6 @@ const ComboboxInner = forwardRef(function ComboboxInner(props: ComboBoxProps<any
     <>
       <InternalComboboxContext.Provider value={{size}}>
         <FieldLabel
-          includeNecessityIndicatorInAccessibilityName
           isDisabled={isDisabled}
           isRequired={isRequired}
           size={size}

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

@@ -65,7 +65,8 @@ const dropzone = style<DropZoneRenderProps>({
     isFocusVisible: 'blue-800'
   },
   borderRadius: 'lg',
-  padding: 24
+  padding: 24,
+  boxSizing: 'border-box'
 }, getAllowedOverrides({height: true}));
 
 const banner = style({

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

@@ -112,7 +112,8 @@ export const FieldLabel = forwardRef(function FieldLabel(props: FieldLabelProps,
                     value: 'currentColor'
                   }
                 })}
-                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined} />
+                aria-label={includeNecessityIndicatorInAccessibilityName ? stringFormatter.format('label.(required)') : undefined}
+                aria-hidden={!includeNecessityIndicatorInAccessibilityName} />
             }
             {necessityIndicator === 'label' &&
               /* The necessity label is hidden to screen readers if the field is required because

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

@@ -368,7 +368,7 @@ export function SelectBox(props: SelectBoxProps): ReactNode {
   );
 }
 
-/*
+/**
  * SelectBoxGroup allows users to select one or more options from a list.
  */
 export const SelectBoxGroup = /*#__PURE__*/ forwardRef(function SelectBoxGroup<T extends object>(props: SelectBoxGroupProps<T>, ref: DOMRef<HTMLDivElement>) {

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

@@ -908,7 +908,7 @@ export const TableHeader = /*#__PURE__*/ (forwardRef as forwardRefType)(function
                 </>
               }
               {selectionMode === 'multiple' &&
-                <Checkbox isEmphasized styles={selectAllCheckbox} slot="selection" />
+                <Checkbox styles={selectAllCheckbox} slot="selection" />
               }
             </>
           )}
@@ -1362,8 +1362,8 @@ function EditableCellInner(props: EditableCellProps & {isFocusVisible: boolean,
 };
 
 // Use color-mix instead of transparency so sticky cells work correctly.
-const selectedBackground = lightDark(colorMix('gray-25', 'informative-900', 10), colorMix('gray-25', 'informative-700', 10));
-const selectedActiveBackground = lightDark(colorMix('gray-25', 'informative-900', 15), colorMix('gray-25', 'informative-700', 15));
+const selectedBackground = colorMix('gray-25', 'gray-900', 7);
+const selectedActiveBackground = colorMix('gray-25', 'gray-900', 10);
 const rowBackgroundColor = {
   default: {
     default: 'gray-25',
@@ -1462,7 +1462,7 @@ export const Row = /*#__PURE__*/ (forwardRef as forwardRefType)(function Row<T e
         // The `spread` otherProps must be after className in Cell.
         // @ts-ignore
         <Cell isSticky className={checkboxCellStyle}>
-          <Checkbox isEmphasized slot="selection" />
+          <Checkbox slot="selection" />
         </Cell>
       )}
       <Collection items={columns} dependencies={[...dependencies, columns]}>