Merge branch 'main' into color-a11y-i18n

Author: Michael Jordan

packages/@react-aria/accordion/src/useAccordion.ts

@@ -50,7 +50,7 @@ export function useAccordionItem<T>(props: AccordionItemAriaProps<T>, state: Tre
     isDisabled,
     onPress: () => state.toggleKey(item.key)
   }), ref);
-  let isExpanded = state.expandedKeys.has(item.key);
+  let isExpanded = state.expandedKeys === 'all' || state.expandedKeys.has(item.key);
   return {
     buttonProps: {
       ...buttonProps,

packages/@react-aria/dnd/src/useClipboard.ts

@@ -24,7 +24,9 @@ export interface ClipboardProps {
   /** Handler that is called when the user triggers a cut interaction. */
   onCut?: () => void,
   /** Handler that is called when the user triggers a paste interaction. */
-  onPaste?: (items: DropItem[]) => void
+  onPaste?: (items: DropItem[]) => void,
+  /** Whether the clipboard is disabled. */
+  isDisabled?: boolean
 }
 
 export interface ClipboardResult {
@@ -64,6 +66,7 @@ function addGlobalEventListener(event, fn) {
  * data types, and integrates with the operating system native clipboard.
  */
 export function useClipboard(options: ClipboardProps): ClipboardResult {
+  let {isDisabled} = options;
   let isFocusedRef = useRef(false);
   let {focusProps} = useFocus({
     onFocusChange: (isFocused) => {
@@ -123,6 +126,9 @@ export function useClipboard(options: ClipboardProps): ClipboardResult {
   });
 
   useEffect(() => {
+    if (isDisabled) {
+      return;
+    }
     return chain(
       addGlobalEventListener('beforecopy', onBeforeCopy),
       addGlobalEventListener('copy', onCopy),
@@ -131,7 +137,7 @@ export function useClipboard(options: ClipboardProps): ClipboardResult {
       addGlobalEventListener('beforepaste', onBeforePaste),
       addGlobalEventListener('paste', onPaste)
     );
-  }, [onBeforeCopy, onCopy, onBeforeCut, onCut, onBeforePaste, onPaste]);
+  }, [isDisabled, onBeforeCopy, onCopy, onBeforeCut, onCut, onBeforePaste, onPaste]);
 
   return {
     clipboardProps: focusProps

packages/@react-aria/dnd/src/useDrop.ts

@@ -11,7 +11,7 @@
  */
 
 import {AriaButtonProps} from '@react-types/button';
-import {DragEvent, HTMLAttributes, RefObject,  useRef, useState} from 'react';
+import {DragEvent, HTMLAttributes, RefObject, useRef, useState} from 'react';
 import * as DragManager from './DragManager';
 import {DragTypes, globalAllowedDropOperations, globalDndState, readFromDataTransfer, setGlobalDnDState, setGlobalDropEffect} from './utils';
 import {DROP_EFFECT_TO_DROP_OPERATION, DROP_OPERATION, DROP_OPERATION_ALLOWED, DROP_OPERATION_TO_DROP_EFFECT} from './constants';
@@ -47,7 +47,11 @@ export interface DropOptions {
    * Whether the item has an explicit focusable drop affordance to initiate accessible drag and drop mode.
    * If true, the dropProps will omit these event handlers, and they will be applied to dropButtonProps instead.
    */
-  hasDropButton?: boolean
+  hasDropButton?: boolean,
+  /**
+   * Whether the drop target is disabled. If true, the drop target will not accept any drops.
+   */
+  isDisabled?: boolean
 }
 
 export interface DropResult {
@@ -57,7 +61,6 @@ export interface DropResult {
   isDropTarget: boolean,
   /** Props for the explicit drop button affordance, if any. */
   dropButtonProps?: AriaButtonProps
-  
 }
 
 const DROP_ACTIVATE_TIMEOUT = 800;
@@ -67,7 +70,7 @@ const DROP_ACTIVATE_TIMEOUT = 800;
  * based drag and drop, in addition to full parity for keyboard and screen reader users.
  */
 export function useDrop(options: DropOptions): DropResult {
-  let {hasDropButton} = options;
+  let {hasDropButton, isDisabled} = options;
   let [isDropTarget, setDropTarget] = useState(false);
   let state = useRef({
     x: 0,
@@ -311,23 +314,34 @@ export function useDrop(options: DropOptions): DropResult {
   });
 
   let {ref} = options;
-  useLayoutEffect(() => DragManager.registerDropTarget({
-    element: ref.current,
-    getDropOperation: getDropOperationKeyboard,
-    onDropEnter(e) {
-      setDropTarget(true);
-      onDropEnter(e);
-    },
-    onDropExit(e) {
-      setDropTarget(false);
-      onDropExit(e);
-    },
-    onDrop: onKeyboardDrop,
-    onDropActivate
-  }), [ref, getDropOperationKeyboard, onDropEnter, onDropExit, onKeyboardDrop, onDropActivate]);
+  useLayoutEffect(() => {
+    if (isDisabled) {
+      return;
+    }
+    return DragManager.registerDropTarget({
+      element: ref.current,
+      getDropOperation: getDropOperationKeyboard,
+      onDropEnter(e) {
+        setDropTarget(true);
+        onDropEnter(e);
+      },
+      onDropExit(e) {
+        setDropTarget(false);
+        onDropExit(e);
+      },
+      onDrop: onKeyboardDrop,
+      onDropActivate
+    });
+  }, [isDisabled, ref, getDropOperationKeyboard, onDropEnter, onDropExit, onKeyboardDrop, onDropActivate]);
 
   let {dropProps} = useVirtualDrop();
-  
+  if (isDisabled) {
+    return {
+      dropProps: {},
+      dropButtonProps: {isDisabled: true},
+      isDropTarget: false
+    };
+  }
   return {
     dropProps: {
       ...(!hasDropButton && dropProps),

packages/@react-aria/gridlist/package.json

@@ -28,7 +28,9 @@
     "@react-aria/interactions": "^3.21.1",
     "@react-aria/selection": "^3.17.5",
     "@react-aria/utils": "^3.23.2",
+    "@react-stately/collections": "^3.10.4",
     "@react-stately/list": "^3.10.3",
+    "@react-stately/tree": "^3.7.5",
     "@react-types/shared": "^3.22.1",
     "@swc/helpers": "^0.5.0"
   },

packages/@react-aria/gridlist/src/useGridListItem.ts

@@ -12,12 +12,14 @@
 
 import {DOMAttributes, FocusableElement, Node as RSNode} from '@react-types/shared';
 import {focusSafely, getFocusableTreeWalker} from '@react-aria/focus';
+import {getLastItem} from '@react-stately/collections';
 import {getRowId, listMap} from './utils';
 import {getScrollParent, getSyntheticLinkProps, mergeProps, scrollIntoViewport, useSlotId} from '@react-aria/utils';
+import {HTMLAttributes, KeyboardEvent as ReactKeyboardEvent, RefObject, useRef} from 'react';
 import {isFocusVisible} from '@react-aria/interactions';
 import type {ListState} from '@react-stately/list';
-import {KeyboardEvent as ReactKeyboardEvent, RefObject, useRef} from 'react';
 import {SelectableItemStates, useSelectableItem} from '@react-aria/selection';
+import type {TreeState} from '@react-stately/tree';
 import {useLocale} from '@react-aria/i18n';
 
 export interface AriaGridListItemOptions {
@@ -38,13 +40,24 @@ export interface GridListItemAria extends SelectableItemStates {
   descriptionProps: DOMAttributes
 }
 
+const EXPANSION_KEYS = {
+  'expand': {
+    ltr: 'ArrowRight',
+    rtl: 'ArrowLeft'
+  },
+  'collapse': {
+    ltr: 'ArrowLeft',
+    rtl: 'ArrowRight'
+  }
+};
+
 /**
  * Provides the behavior and accessibility implementation for a row in a grid list.
  * @param props - Props for the row.
  * @param state - State of the parent list, as returned by `useListState`.
  * @param ref - The ref attached to the row element.
  */
-export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListState<T>, ref: RefObject<FocusableElement>): GridListItemAria {
+export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListState<T> | TreeState<T>, ref: RefObject<FocusableElement>): GridListItemAria {
   // Copied from useGridCell + some modifications to make it not so grid specific
   let {
     node,
@@ -64,12 +77,34 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     // (e.g. clicking on a row button)
     if (
       (keyWhenFocused.current != null && node.key !== keyWhenFocused.current) ||
-      !ref.current.contains(document.activeElement)
+      !ref.current?.contains(document.activeElement)
     ) {
       focusSafely(ref.current);
     }
   };
 
+  let treeGridRowProps: HTMLAttributes<HTMLElement> = {};
+  let hasChildRows;
+  let hasLink = state.selectionManager.isLink(node.key);
+  if (node != null && 'expandedKeys' in state) {
+    // TODO: ideally node.hasChildNodes would be a way to tell if a row has child nodes, but the row's contents make it so that value is always
+    // true...
+    hasChildRows = [...state.collection.getChildren(node.key)].length > 1;
+    if (onAction == null && !hasLink && state.selectionManager.selectionMode === 'none' && hasChildRows) {
+      onAction = () => state.toggleKey(node.key);
+    }
+
+    let isExpanded = hasChildRows ? state.expandedKeys === 'all' || state.expandedKeys.has(node.key) : undefined;
+    treeGridRowProps = {
+      'aria-expanded': isExpanded,
+      'aria-level': node.level + 1,
+      'aria-posinset': node?.index + 1,
+      'aria-setsize': node.level > 0 ?
+        (getLastItem(state.collection.getChildren(node?.parentKey))).index + 1 :
+        [...state.collection].filter(row => row.level === 0).at(-1).index + 1
+    };
+  }
+
   let {itemProps, ...itemStates} = useSelectableItem({
     selectionManager: state.selectionManager,
     key: node.key,
@@ -89,6 +124,18 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     let walker = getFocusableTreeWalker(ref.current);
     walker.currentNode = document.activeElement;
 
+    if ('expandedKeys' in state && document.activeElement === ref.current) {
+      if ((e.key === EXPANSION_KEYS['expand'][direction]) && state.selectionManager.focusedKey === node.key && hasChildRows && state.expandedKeys !== 'all' && !state.expandedKeys.has(node.key)) {
+        state.toggleKey(node.key);
+        e.stopPropagation();
+        return;
+      } else if ((e.key === EXPANSION_KEYS['collapse'][direction]) && state.selectionManager.focusedKey === node.key && hasChildRows && (state.expandedKeys === 'all' || state.expandedKeys.has(node.key))) {
+        state.toggleKey(node.key);
+        e.stopPropagation();
+        return;
+      }
+    }
+
     switch (e.key) {
       case 'ArrowLeft': {
         // Find the next focusable element within the row.
@@ -199,8 +246,9 @@ export function useGridListItem<T>(props: AriaGridListItemOptions, state: ListSt
     'aria-colindex': 1
   };
 
+  // TODO: should isExpanded and hasChildRows be a item state that gets returned by the hook?
   return {
-    rowProps,
+    rowProps: {...mergeProps(rowProps, treeGridRowProps)},
     gridCellProps,
     descriptionProps: {
       id: descriptionId

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

@@ -17,6 +17,7 @@
 
 import {DOMAttributes, FocusableElement, FocusEvents} from '@react-types/shared';
 import {FocusEvent, useCallback} from 'react';
+import {getOwnerDocument} from '@react-aria/utils';
 import {useSyntheticBlurEvent} from './utils';
 
 export interface FocusProps<Target = FocusableElement> extends FocusEvents<Target> {
@@ -61,7 +62,10 @@ export function useFocus<Target extends FocusableElement = FocusableElement>(pro
   const onFocus: FocusProps<Target>['onFocus'] = useCallback((e: FocusEvent<Target>) => {
     // Double check that document.activeElement actually matches e.target in case a previously chained
     // focus handler already moved focus somewhere else.
-    if (e.target === e.currentTarget && document.activeElement === e.target) {
+
+    const ownerDocument = getOwnerDocument(e.target);
+
+    if (e.target === e.currentTarget && ownerDocument.activeElement === e.target) {
       if (onFocusProp) {
         onFocusProp(e);
       }

packages/@react-aria/interactions/stories/useFocusRing.stories.tsx

@@ -10,10 +10,15 @@
  * governing permissions and limitations under the License.
  */
 
+import {addWindowFocusTracking} from '../src';
 import {Cell, Column, Row, TableBody, TableHeader, TableView} from '@react-spectrum/table';
 import {Key} from '@react-types/shared';
-import React, {useState} from 'react';
+import {mergeProps} from '@react-aria/utils';
+import React, {useEffect, useRef, useState} from 'react';
+import ReactDOM from 'react-dom';
 import {SearchField} from '@react-spectrum/searchfield';
+import {useButton} from '@react-aria/button';
+import {useFocusRing} from '@react-aria/focus';
 
 interface IColumn {
   name: string,
@@ -59,6 +64,11 @@ export const SearchTableview = {
   }
 };
 
+export const IFrame = {
+  render: () => <IFrameExample />,
+  name: 'focus state in dynamic iframe'
+};
+
 function SearchExample() {
   const [items, setItems] = useState(manyRows);
 
@@ -89,3 +99,51 @@ function SearchExample() {
     </div>
   );
 }
+
+function Button() {
+  const buttonRef = useRef<HTMLButtonElement | null>(null);
+
+  const {buttonProps} = useButton({}, buttonRef);
+  const {focusProps, isFocusVisible, isFocused} = useFocusRing();
+
+  return (
+    <button ref={buttonRef} {...mergeProps(buttonProps, focusProps)}>
+      Focus Visible: {isFocusVisible ? 'true' : 'false'} <br />
+      Focused: {isFocused ? 'true' : 'false'}
+    </button>
+  );
+}
+
+const IframeWrapper = ({children}) => {
+  const iframeRef = useRef<HTMLIFrameElement | null>(null);
+
+  useEffect(() => {
+    if (iframeRef.current) {
+      const main = document.createElement('main');
+      const iframeDocument = iframeRef.current.contentDocument;
+
+      if (iframeDocument) {
+        iframeDocument.body.innerHTML = '';
+        iframeDocument.body.appendChild(main);
+        ReactDOM.render(children, main);
+
+        return addWindowFocusTracking(iframeDocument.body);
+      }
+    }
+  }, [children]);
+
+  return <iframe title="test" ref={iframeRef} />;
+};
+
+function IFrameExample() {
+  return (
+    <>
+      <Button />
+      <IframeWrapper>
+        <Button />
+        <Button />
+        <Button />
+      </IframeWrapper>
+    </>
+  );
+}