@octanejs/aria 0.0.46 → 0.0.48

package/src/datepicker/useDatePickerGroup.tsx

@@ -1,12 +1,13 @@
 /** @jsxImportSource octane */
-// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/datepicker/useDatePickerGroup.ts).
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/datepicker/useDatePickerGroup.ts).
 import { createFocusManager, getFocusableTreeWalker } from '../focus/FocusScope';
 import { DateFieldState } from '../upstream-exports/react-stately/useDateFieldState';
 import { DatePickerState } from '../upstream-exports/react-stately/useDatePickerState';
 import { DateRangePickerState } from '../upstream-exports/react-stately/useDateRangePickerState';
-import { DOMAttributes, FocusableElement, KeyboardEvent, RefObject } from '@react-types/shared';
-import { getEventTarget, nodeContains } from '../utils/shadowdom/DOMFunctions';
+import { DOMAttributes, FocusableElement, RefObject } from '@react-types/shared';
+import { getEventTarget } from '../utils/shadowdom/DOMFunctions';
 import { mergeProps } from '../utils/mergeProps';
+import { useKeyboard } from '../interactions/useKeyboard';
 import { useLocale } from '../i18n/I18nProvider';
 import { useMemo } from '../compat/react';
 import { usePress } from '../interactions/usePress';
@@ -17,59 +18,68 @@ export function useDatePickerGroup(
 	disableArrowNavigation?: boolean,
 ): DOMAttributes<FocusableElement> {
 	let { direction } = useLocale();
+	// oxlint-disable-next-line react/react-compiler
 	let focusManager = useMemo(() => createFocusManager(ref), [ref]);
 
-	// Open the popover on alt + arrow down
-	let onKeyDown = (e: KeyboardEvent) => {
-		if (!nodeContains(e.currentTarget, getEventTarget(e as unknown as Event) as Element)) {
-			return;
-		}
-
-		if (e.altKey && (e.key === 'ArrowDown' || e.key === 'ArrowUp') && 'setOpen' in state) {
-			e.preventDefault();
-			e.stopPropagation();
-			state.setOpen(true);
-		}
-
-		if (disableArrowNavigation) {
-			return;
-		}
-
-		switch (e.key) {
-			case 'ArrowLeft':
-				e.preventDefault();
-				e.stopPropagation();
+	let { keyboardProps } = useKeyboard({
+		shortcuts: {
+			'Alt+ArrowDown': () => {
+				if ('setOpen' in state) {
+					state.setOpen(true);
+					return;
+				}
+				return false;
+			},
+			'Alt+ArrowUp': () => {
+				if ('setOpen' in state) {
+					state.setOpen(true);
+					return;
+				}
+				return false;
+			},
+			ArrowLeft: (e) => {
+				if (disableArrowNavigation) {
+					return false;
+				}
 				if (direction === 'rtl') {
 					if (ref.current) {
-						let target = getEventTarget(e as unknown as Event) as FocusableElement;
+						let target = getEventTarget(e) as FocusableElement;
 						let prev = findNextSegment(ref.current, target.getBoundingClientRect().left, -1);
 
 						if (prev) {
 							prev.focus();
+							return;
 						}
 					}
 				} else {
 					focusManager.focusPrevious();
+					return;
+				}
+				return false;
+			},
+			ArrowRight: (e) => {
+				if (disableArrowNavigation) {
+					return false;
 				}
-				break;
-			case 'ArrowRight':
-				e.preventDefault();
-				e.stopPropagation();
 				if (direction === 'rtl') {
 					if (ref.current) {
-						let target = getEventTarget(e as unknown as Event) as FocusableElement;
+						let target = getEventTarget(e) as FocusableElement;
 						let next = findNextSegment(ref.current, target.getBoundingClientRect().left, 1);
 
 						if (next) {
 							next.focus();
+							return;
 						}
 					}
 				} else {
 					focusManager.focusNext();
+					return;
 				}
-				break;
-		}
-	};
+				return false;
+			},
+		},
+		allowRepeats: true,
+	});
 
 	// Focus the first placeholder segment from the end on mouse down/touch up in the field.
 	let focusLast = () => {
@@ -125,7 +135,8 @@ export function useDatePickerGroup(
 		},
 	});
 
-	return mergeProps(pressProps, { onKeyDown });
+	// oxlint-disable-next-line react/react-compiler
+	return mergeProps(pressProps, keyboardProps);
 }
 
 function findNextSegment(group: Element, fromX: number, direction: number) {

package/src/datepicker/useDateSegment.tsx

@@ -1,5 +1,5 @@
 /** @jsxImportSource octane */
-// Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/datepicker/useDateSegment.ts).
+// Ported from adobe/react-spectrum@5ecb3333001313e83898cd07644227897e3bae1f (packages/react-aria/src/datepicker/useDateSegment.ts).
 /*
  * Copyright 2020 Adobe. All rights reserved.
  * This file is licensed to you under the Apache License, Version 2.0 (the "License");
@@ -17,7 +17,7 @@ import { DateFieldState, DateSegment } from '../upstream-exports/react-stately/u
 import { getActiveElement, nodeContains } from '../utils/shadowdom/DOMFunctions';
 import { getScrollParent } from '../utils/getScrollParent';
 import { hookData } from './useDateField';
-import { isIOS, isMac } from '../utils/platform';
+import { isIOS } from '../utils/platform';
 import { mergeProps } from '../utils/mergeProps';
 import { NumberParser } from '@internationalized/number';
 import React, { CSSProperties, useMemo, useRef } from '../compat/react';
@@ -28,6 +28,7 @@ import { useDisplayNames } from './useDisplayNames';
 import { useEvent } from '../utils/useEvent';
 import { useFilter } from '../i18n/useFilter';
 import { useId } from '../utils/useId';
+import { useKeyboard } from '../interactions/useKeyboard';
 import { useLabels } from '../utils/useLabels';
 import { useLayoutEffect } from '../utils/useLayoutEffect';
 import { useLocale } from '../i18n/I18nProvider';
@@ -127,28 +128,21 @@ export function useDateSegment(
 		}
 	};
 
-	let onKeyDown = (e: React.KeyboardEvent<HTMLDivElement>) => {
-		// Firefox does not fire selectstart for Ctrl/Cmd + A
-		// https://bugzilla.mozilla.org/show_bug.cgi?id=1742153
-		if (e.key === 'a' && (isMac() ? e.metaKey : e.ctrlKey)) {
-			e.preventDefault();
-		}
-
-		if (e.ctrlKey || e.metaKey || e.shiftKey || e.altKey) {
-			return;
-		}
-
-		switch (e.key) {
-			case 'Backspace':
-			case 'Delete': {
-				// Safari on iOS does not fire beforeinput for the backspace key because the cursor is at the start.
-				e.preventDefault();
-				e.stopPropagation();
+	let { keyboardProps } = useKeyboard({
+		shortcuts: {
+			Backspace: () => {
 				backspace();
-				break;
-			}
-		}
-	};
+			},
+			Delete: () => {
+				backspace();
+			},
+			'Mod+a': () => {
+				// Firefox does not fire selectstart for Ctrl/Cmd + A
+				// https://bugzilla.mozilla.org/show_bug.cgi?id=1742153
+			},
+		},
+		allowRepeats: true,
+	});
 
 	// Safari dayPeriod option doesn't work...
 	let { startsWith } = useFilter({ sensitivity: 'base' });
@@ -273,7 +267,13 @@ export function useDateSegment(
 		// Otherwise, when tapping on a segment in Android Chrome and then entering text,
 		// composition events will be fired that break the DOM structure and crash the page.
 		let selection = window.getSelection();
-		if (selection?.anchorNode && nodeContains(ref.current, selection?.anchorNode)) {
+		// Only collapse while focused, otherwise a stale anchor left in the segment (e.g. on Firefox)
+		// steals focus back into it on selectionchange. See #10259.
+		if (
+			selection?.anchorNode &&
+			nodeContains(ref.current, selection?.anchorNode) &&
+			getActiveElement() === ref.current
+		) {
 			selection.collapse(ref.current);
 		}
 	});
@@ -393,32 +393,33 @@ export function useDateSegment(
 	}
 
 	return {
+		// oxlint-disable-next-line react/react-compiler
 		segmentProps: mergeProps(spinButtonProps, labelProps, {
 			id,
 			...touchPropOverrides,
+			...keyboardProps,
 			'aria-invalid': state.isInvalid ? 'true' : undefined,
 			'aria-describedby': ariaDescribedBy,
 			'aria-readonly': state.isReadOnly || !segment.isEditable ? 'true' : undefined,
 			'data-placeholder': segment.isPlaceholder || undefined,
 			contentEditable: isEditable,
 			suppressContentEditableWarning: isEditable,
-			spellCheck: isEditable ? 'false' : undefined,
+			spellCheck: isEditable ? ('false' as const) : undefined,
 			autoCorrect: isEditable ? 'off' : undefined,
-			// Octane uses the modern DOM property name regardless of its package version.
+			// Capitalization was changed in React 17...
 			enterKeyHint: isEditable ? 'next' : undefined,
 			inputMode:
 				state.isDisabled || segment.type === 'dayPeriod' || segment.type === 'era' || !isEditable
 					? undefined
-					: 'numeric',
+					: ('numeric' as const),
 			tabIndex: state.isDisabled ? undefined : 0,
-			onKeyDown,
 			onFocus,
 			style: segmentStyle,
 			// Prevent pointer events from reaching useDatePickerGroup, and allow native browser behavior to focus the segment.
-			onPointerDown(e: React.PointerEvent<HTMLDivElement>) {
+			onPointerDown(e: PointerEvent) {
 				e.stopPropagation();
 			},
-			onMouseDown(e: React.MouseEvent<HTMLDivElement>) {
+			onMouseDown(e: MouseEvent) {
 				e.stopPropagation();
 			},
 		}),

package/src/dialog/useDialog.ts

@@ -34,6 +34,7 @@ export interface DialogAria {
 
 	/** Props for the dialog title element. */
 	titleProps: DOMAttributes;
+	contentProps: DOMAttributes;
 }
 
 /**
@@ -60,6 +61,9 @@ export function useDialog(...args: any[]): DialogAria {
 	let titleId: string | undefined = useSlotId(undefined, subSlot(slot, 'title'));
 	titleId = props['aria-label'] ? undefined : titleId;
 
+	let contentId: string | undefined = useSlotId(undefined, subSlot(slot, 'content'));
+	contentId = role === 'alertdialog' && !props['aria-describedby'] ? contentId : undefined;
+
 	let isRefocusing = useRef(false, subSlot(slot, 'refocusing'));
 
 	// Focus the dialog itself on mount, unless a child element is already focused.
@@ -125,12 +129,14 @@ export function useDialog(...args: any[]): DialogAria {
 	// See https://bugs.webkit.org/show_bug.cgi?id=211934.
 	// useModal sets aria-hidden on all elements outside the dialog, so the dialog will behave as a modal
 	// even without aria-modal on the dialog itself.
+	let ariaDescribedby = props['aria-describedby'] ?? contentId;
 	return {
 		dialogProps: {
 			...filterDOMProps(props, { labelable: true }),
 			role,
 			tabIndex: -1,
-			'aria-labelledby': props['aria-labelledby'] || titleId,
+			'aria-labelledby': props['aria-labelledby'] ?? titleId,
+			'aria-describedby': ariaDescribedby,
 			// Prevent blur events from reaching useOverlay, which may cause
 			// popovers to close. Since focus is contained within the dialog,
 			// we don't want this to occur due to the above useEffect.
@@ -140,6 +146,7 @@ export function useDialog(...args: any[]): DialogAria {
 				}
 			},
 		},
+		contentProps: { id: contentId },
 		titleProps: {
 			id: titleId,
 		},

package/src/dnd/DragManager.tsx

@@ -532,8 +532,12 @@ class DragSession {
 
 		let minDistance = Infinity;
 		let nearest = -1;
+		let ancestor = -1;
 		for (let i = 0; i < this.validDropTargets.length; i++) {
 			let dropTarget = this.validDropTargets[i];
+			if (ancestor < 0 && nodeContains(dropTarget.element, this.dragTarget.element)) {
+				ancestor = i;
+			}
 			let rect = dropTarget.element.getBoundingClientRect();
 			let dx = rect.left - dragTargetRect.left;
 			let dy = rect.top - dragTargetRect.top;
@@ -544,7 +548,7 @@ class DragSession {
 			}
 		}
 
-		return nearest;
+		return ancestor >= 0 ? ancestor : nearest;
 	}
 
 	setCurrentDropTarget(dropTarget: DropTarget | null, item?: DroppableItem): void {

package/src/dnd/useDrag.tsx

@@ -1,4 +1,5 @@
 /** @jsxImportSource octane */
+import { isIOS, isWebKit } from '../utils/platform';
 // Ported from adobe/react-spectrum@1c84a49a1faf50b571c84e00bcf9c60b22ddd03e (packages/react-aria/src/dnd/useDrag.ts).
 /*
  * Copyright 2020 Adobe. All rights reserved.
@@ -368,7 +369,7 @@ export function useDrag(options: DragOptions): DragResult {
 				modalityOnPointerDown.current = isVirtualPointerEvent(e) ? 'virtual' : e.pointerType;
 
 				// Try to detect virtual drag passthrough gestures.
-				if (e.width < 1 && e.height < 1) {
+				if (e.width < 1 && e.height < 1 && isIOS() && isWebKit()) {
 					// iOS VoiceOver.
 					modalityOnPointerDown.current = 'virtual';
 				} else {

package/src/focus/FocusScope.ts

@@ -462,7 +462,7 @@ function useFocusContainment(
 					// If a focus event occurs outside the active scope (e.g. user tabs from browser location bar),
 					// restore focus to the previously focused node or the first tabbable element in the active scope.
 					if (focusedNode.current) {
-						focusedNode.current.focus();
+						focusElement(focusedNode.current);
 					} else if (activeScope && activeScope.current) {
 						focusFirstInScope(activeScope.current);
 					}
@@ -496,7 +496,7 @@ function useFocusContainment(
 						let target = getEventTarget(e) as FocusableElement;
 						if (target && target.isConnected) {
 							focusedNode.current = target;
-							focusedNode.current?.focus();
+							focusElement(focusedNode.current);
 						} else if (activeScope.current) {
 							focusFirstInScope(activeScope.current);
 						}

package/src/grid/useGrid.ts

@@ -85,6 +85,7 @@ export interface GridProps extends DOMProps, AriaLabelingProps {
 	escapeKeyBehavior?: 'clearSelection' | 'none';
 	/** Whether selection should occur on press up instead of press down. */
 	shouldSelectOnPressUp?: boolean;
+	keyboardNavigationBehavior?: 'arrow' | 'tab';
 }
 
 export interface GridAria {
@@ -130,6 +131,7 @@ export function useGrid(...args: any[]): GridAria {
 		onRowAction,
 		onCellAction,
 		escapeKeyBehavior = 'clearSelection',
+		keyboardNavigationBehavior = 'arrow',
 		shouldSelectOnPressUp,
 	} = props;
 	let { selectionManager: manager } = state;
@@ -185,6 +187,7 @@ export function useGrid(...args: any[]): GridAria {
 	gridMap.set(state, {
 		keyboardDelegate: delegate,
 		actions: { onRowAction, onCellAction },
+		keyboardNavigationBehavior,
 		shouldSelectOnPressUp,
 	});