fix: Fix Talkback focus cursor movement when inside Dialogs #7478

LFDanLu · 2024-12-05T01:27:12Z

✅ Pull Request Checklist:

Included link to corresponding React Spectrum GitHub Issue.
Added/updated unit tests and storybook for this change (for new code or code which already has tests).
Filled out test instructions.
Updated documentation (if it already exists for this component).
Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

Test the RAC Modal example in the docs with Talkback and make sure you can still move focus around via swipes. Will need smoke tests in general to make sure nothing else is broken, note that anything use case that would restore focus if focus escaped focus containment won't work in Android Chrome Talkback

🧢 Your Project:

RSP

…opes (e.g. Dialogs)

rspbot · 2024-12-05T01:36:21Z

Build successful! 🎉

rspbot · 2024-12-13T23:28:28Z

Build successful! 🎉

rspbot · 2024-12-17T21:27:31Z

Build successful! 🎉

…rybook iframe

packages/@react-aria/focus/src/FocusScope.tsx

rspbot · 2024-12-17T21:44:16Z

Build successful! 🎉

snowystinger

can now tab through the iframe on chrome

LFDanLu · 2024-12-17T23:55:44Z

packages/@react-aria/focus/src/FocusScope.tsx

      if (raf.current) {
        cancelAnimationFrame(raf.current);
      }
      raf.current = requestAnimationFrame(() => {
-        // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
-        if (ownerDocument.activeElement && shouldContainFocus(scopeRef) && !isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
+        if (e.relatedTarget && shouldContainFocus(scopeRef) && !isElementInChildScope(e.relatedTarget, scopeRef)) {


just realizes this breaks this story, digging

LFDanLu · 2024-12-18T19:55:20Z

Closing for now, trying to figure out an alternative fix. Filed https://issuetracker.google.com/issues/384844019 to see what has changed recently, but also noticed several other libraries don't have this issue with most notably Material UI exhibiting something similar via https://mui.com/material-ui/react-dialog/ but not with https://base-ui.com/react/components/dialog so maybe there is something we can gather from there

LFDanLu · 2024-12-19T18:44:25Z

packages/@react-aria/focus/src/FocusScope.tsx

+        // Patches infinite focus coersion loop for Android Talkback where the user isn't able to move the virtual cursor
+        // if within a containing focus scope. Bug filed against Chrome: https://issuetracker.google.com/issues/384844019.
+        // Note that this means focus can leave focus containing modals due to this, but it is isolated to Chrome Talkback.
+        let modality = getInteractionModality();
+        let shouldSkipFocusRestore = (modality === 'virtual' || modality === null) && isAndroid() && isChrome();
+
        // Use document.activeElement instead of e.relatedTarget so we can tell if user clicked into iframe
-        if (ownerDocument.activeElement && shouldContainFocus(scopeRef) && !isElementInChildScope(ownerDocument.activeElement, scopeRef)) {
+        if (!shouldSkipFocusRestore && ownerDocument.activeElement && shouldContainFocus(scopeRef) && !isElementInChildScope(ownerDocument.activeElement, scopeRef)) {


As stated here, this is a temporary patch. Note that this will break use cases where focus is truly lost to the body such as this story on main where due to the dialog's content changing, the previously focused button disappears. We would usually recoerce focus back into the dialog but at the moment we cannot differentiate between that case and if the user is simply navigating between elements in the FocusScope in Chrome Talkback

Also note that this is indeed a Chrome specific bug, Firefox retains DOM focus on whatever Talkback was previously virtually focusing until you trigger a click via double tapping on a different element, can be tested via: https://64qz97.csb.app/ . This is most likely what Chrome's behavior used to be which is why this code used to work

rspbot · 2024-12-19T18:51:40Z

Build successful! 🎉

rspbot · 2024-12-19T18:51:41Z

## API Changes

@react-aria/utils

/@react-aria/utils:useEnterAnimation

-useEnterAnimation {
-  ref: RefObject<HTMLElement | null>
-  isReady: boolean
-  returnVal: undefined
-}

/@react-aria/utils:useExitAnimation

-useExitAnimation {
-  ref: RefObject<HTMLElement | null>
-  isOpen: boolean
-  returnVal: undefined
-}

@react-spectrum/s2

/@react-spectrum/s2:ActionBar

-ActionBar {
-  children: ReactNode
-  isEmphasized?: boolean
-  onClearSelection?: () => void
-  scrollRef?: RefObject<HTMLElement | null>
-  selectedItemCount?: number | 'all'
-  slot?: string | null
-}

/@react-spectrum/s2:ActionBarContext

-ActionBarContext {
-  UNTYPED
-}

/@react-spectrum/s2:ActionButton

 ActionButton {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
   isQuiet?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'black' | 'white' | 'auto'
+  staticColor?: 'black' | 'white'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
 }

/@react-spectrum/s2:ActionButtonGroup

 ActionButtonGroup {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
-  aria-describedby?: string
-  aria-details?: string
-  aria-label?: string
-  aria-labelledby?: string
   children: ReactNode
   density?: 'compact' | 'regular' = "regular"
   isDisabled?: boolean
   isJustified?: boolean
   isQuiet?: boolean
   orientation?: 'horizontal' | 'vertical' = 'horizontal'
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:Button

 Button {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   excludeFromTabOrder?: boolean
   fillStyle?: 'fill' | 'outline' = 'fill'
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
   isPending?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
 }

/@react-spectrum/s2:LinkButton

 LinkButton {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   download?: boolean | string
   fillStyle?: 'fill' | 'outline' = 'fill'
   href?: Href
   hrefLang?: string
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
 }

/@react-spectrum/s2:CardView

 CardView <T extends {}> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
-  renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:CloseButton

 CloseButton {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   isDisabled?: boolean
-  onPress?: (PressEvent) => void
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
 }

/@react-spectrum/s2:Divider

 Divider {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   id?: string
   orientation?: 'horizontal' | 'vertical' = 'horizontal'
   size?: 'S' | 'M' | 'L' = 'M'
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
 }

/@react-spectrum/s2:Link

 Link {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   download?: boolean | string
   href?: Href
   hrefLang?: string
   isQuiet?: boolean
   isStandalone?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
   variant?: 'primary' | 'secondary' = 'primary'
 }

/@react-spectrum/s2:Meter

 Meter {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
   id?: string
   label?: ReactNode
   labelPosition?: LabelPosition = 'top'
   maxValue?: number = 100
   minValue?: number = 0
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
   value?: number = 0
   valueLabel?: ReactNode
   variant?: 'informative' | 'positive' | 'notice' | 'negative' = 'informative'

/@react-spectrum/s2:ProgressBar

 ProgressBar {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
   id?: string
   isIndeterminate?: boolean
   label?: ReactNode
   labelPosition?: LabelPosition = 'top'
   maxValue?: number = 100
   minValue?: number = 0
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
   value?: number = 0
   valueLabel?: ReactNode
 }

/@react-spectrum/s2:ProgressCircle

 ProgressCircle {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   id?: string
   isIndeterminate?: boolean
   maxValue?: number = 100
   minValue?: number = 0
   size?: 'S' | 'M' | 'L' = 'M'
   slot?: string | null
-  staticColor?: 'black' | 'white' | 'auto'
+  staticColor?: 'black' | 'white'
   styles?: StylesPropWithHeight
   value?: number = 0
 }

/@react-spectrum/s2:TableView

 TableView {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'spacious' | 'regular' = 'regular'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => any
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
-  renderActionBar?: ('all' | Set<Key>) => ReactElement
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   slot?: string | null
   sortDescriptor?: SortDescriptor
 }

/@react-spectrum/s2:ToggleButton

 ToggleButton {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   id?: Key
   isDisabled?: boolean
   isEmphasized?: boolean
   isQuiet?: boolean
   isSelected?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'black' | 'white' | 'auto'
+  staticColor?: 'black' | 'white'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
 }

/@react-spectrum/s2:ToggleButtonGroup

 ToggleButtonGroup {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
   defaultSelectedKeys?: Iterable<Key>
   density?: 'compact' | 'regular' = "regular"
   disallowEmptySelection?: boolean
   isDisabled?: boolean
   isEmphasized?: boolean
   isJustified?: boolean
   isQuiet?: boolean
   onSelectionChange?: (Set<Key>) => void
   orientation?: 'horizontal' | 'vertical' = 'horizontal'
   selectedKeys?: Iterable<Key>
   selectionMode?: 'single' | 'multiple'
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:ActionBarProps

-ActionBarProps {
-  children: ReactNode
-  isEmphasized?: boolean
-  onClearSelection?: () => void
-  scrollRef?: RefObject<HTMLElement | null>
-  selectedItemCount?: number | 'all'
-  slot?: string | null
-}

/@react-spectrum/s2:ActionButtonProps

 ActionButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   excludeFromTabOrder?: boolean
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
   isQuiet?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'black' | 'white' | 'auto'
+  staticColor?: 'black' | 'white'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
 }

/@react-spectrum/s2:ActionButtonGroupProps

 ActionButtonGroupProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
-  aria-describedby?: string
-  aria-details?: string
-  aria-label?: string
-  aria-labelledby?: string
   children: ReactNode
   density?: 'compact' | 'regular' = "regular"
   isDisabled?: boolean
   isJustified?: boolean
   isQuiet?: boolean
   orientation?: 'horizontal' | 'vertical' = 'horizontal'
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesPropWithHeight
 }

/@react-spectrum/s2:ButtonProps

 ButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   excludeFromTabOrder?: boolean
   fillStyle?: 'fill' | 'outline' = 'fill'
   form?: string
   formAction?: string
   formEncType?: string
   formMethod?: string
   formNoValidate?: boolean
   formTarget?: string
   id?: string
   isDisabled?: boolean
   isPending?: boolean
   name?: string
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
   value?: string
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
 }

/@react-spectrum/s2:LinkButtonProps

 LinkButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   download?: boolean | string
   fillStyle?: 'fill' | 'outline' = 'fill'
   href?: Href
   hrefLang?: string
   isDisabled?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onHoverChange?: (boolean) => void
   onHoverEnd?: (HoverEvent) => void
   onHoverStart?: (HoverEvent) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
-  variant?: 'primary' | 'secondary' | 'accent' | 'negative' | 'premium' | 'genai' = 'primary'
+  variant?: 'primary' | 'secondary' | 'accent' | 'negative' = 'primary'
 }

/@react-spectrum/s2:CardViewProps

 CardViewProps <T> {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode | (T) => ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'regular' | 'spacious' = 'regular'
   dependencies?: Array<any>
   disabledBehavior?: DisabledBehavior
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   dragAndDropHooks?: DragAndDropHooks
   id?: string
   items?: Iterable<T>
   layout?: 'grid' | 'waterfall' = 'grid'
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => void
   onScroll?: (UIEvent<Element>) => void
   onSelectionChange?: (Selection) => void
-  renderActionBar?: ('all' | Set<Key>) => ReactElement
   renderEmptyState?: (GridListRenderProps) => ReactNode
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   selectionStyle?: 'checkbox' | 'highlight' = 'checkbox'
   slot?: string | null
   styles?: StylesPropWithHeight
   variant?: 'primary' | 'secondary' | 'tertiary' | 'quiet' = 'primary'
 }

/@react-spectrum/s2:CloseButtonProps

 CloseButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   isDisabled?: boolean
-  onPress?: (PressEvent) => void
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
 }

/@react-spectrum/s2:DividerProps

 DividerProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   id?: string
   orientation?: 'horizontal' | 'vertical' = 'horizontal'
   size?: 'S' | 'M' | 'L' = 'M'
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
 }

/@react-spectrum/s2:LinkProps

 LinkProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   autoFocus?: boolean
   children?: ReactNode
   download?: boolean | string
   href?: Href
   hrefLang?: string
   isQuiet?: boolean
   isStandalone?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   ping?: string
   referrerPolicy?: HTMLAttributeReferrerPolicy
   rel?: string
   routerOptions?: RouterOptions
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
   target?: HTMLAttributeAnchorTarget
   variant?: 'primary' | 'secondary' = 'primary'
 }

/@react-spectrum/s2:MeterProps

 MeterProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
   id?: string
   label?: ReactNode
   labelPosition?: LabelPosition = 'top'
   maxValue?: number = 100
   minValue?: number = 0
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
   value?: number = 0
   valueLabel?: ReactNode
   variant?: 'informative' | 'positive' | 'notice' | 'negative' = 'informative'

/@react-spectrum/s2:ProgressBarProps

 ProgressBarProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   formatOptions?: Intl.NumberFormatOptions = {style: 'percent'}
   id?: string
   isIndeterminate?: boolean
   label?: ReactNode
   labelPosition?: LabelPosition = 'top'
   maxValue?: number = 100
   minValue?: number = 0
   size?: 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesProp
   value?: number = 0
   valueLabel?: ReactNode
 }

/@react-spectrum/s2:ProgressCircleProps

 ProgressCircleProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   id?: string
   isIndeterminate?: boolean
   maxValue?: number = 100
   minValue?: number = 0
   size?: 'S' | 'M' | 'L' = 'M'
   slot?: string | null
-  staticColor?: 'black' | 'white' | 'auto'
+  staticColor?: 'black' | 'white'
   styles?: StylesPropWithHeight
   value?: number = 0
 }

/@react-spectrum/s2:TableViewProps

 TableViewProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children?: ReactNode
   defaultSelectedKeys?: 'all' | Iterable<Key>
   density?: 'compact' | 'spacious' | 'regular' = 'regular'
   disabledKeys?: Iterable<Key>
   disallowEmptySelection?: boolean
   isQuiet?: boolean
   loadingState?: LoadingState
   onAction?: (Key) => void
   onLoadMore?: () => any
   onResize?: (Map<Key, ColumnSize>) => void
   onResizeEnd?: (Map<Key, ColumnSize>) => void
   onResizeStart?: (Map<Key, ColumnSize>) => void
   onSelectionChange?: (Selection) => void
   onSortChange?: (SortDescriptor) => any
   overflowMode?: 'wrap' | 'truncate' = 'truncate'
-  renderActionBar?: ('all' | Set<Key>) => ReactElement
   selectedKeys?: 'all' | Iterable<Key>
   selectionMode?: SelectionMode
   slot?: string | null
   sortDescriptor?: SortDescriptor
 }

/@react-spectrum/s2:ToggleButtonProps

 ToggleButtonProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-controls?: string
   aria-describedby?: string
   aria-details?: string
   aria-expanded?: boolean | 'true' | 'false'
   aria-haspopup?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog' | 'true' | 'false'
   aria-label?: string
   aria-labelledby?: string
   aria-pressed?: boolean | 'true' | 'false' | 'mixed'
   autoFocus?: boolean
   children?: ReactNode
   defaultSelected?: boolean
   excludeFromTabOrder?: boolean
   id?: Key
   isDisabled?: boolean
   isEmphasized?: boolean
   isQuiet?: boolean
   isSelected?: boolean
   onBlur?: (FocusEvent<Target>) => void
   onChange?: (boolean) => void
   onFocus?: (FocusEvent<Target>) => void
   onFocusChange?: (boolean) => void
   onKeyDown?: (KeyboardEvent) => void
   onKeyUp?: (KeyboardEvent) => void
   onPress?: (PressEvent) => void
   onPressChange?: (boolean) => void
   onPressEnd?: (PressEvent) => void
   onPressStart?: (PressEvent) => void
   onPressUp?: (PressEvent) => void
   preventFocusOnPress?: boolean
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = 'M'
   slot?: string | null
-  staticColor?: 'black' | 'white' | 'auto'
+  staticColor?: 'black' | 'white'
   styles?: StylesProp
   type?: 'button' | 'submit' | 'reset' = 'button'
 }

/@react-spectrum/s2:ToggleButtonGroupProps

 ToggleButtonGroupProps {
   UNSAFE_className?: string
   UNSAFE_style?: CSSProperties
   aria-describedby?: string
   aria-details?: string
   aria-label?: string
   aria-labelledby?: string
   children: ReactNode
   defaultSelectedKeys?: Iterable<Key>
   density?: 'compact' | 'regular' = "regular"
   disallowEmptySelection?: boolean
   isDisabled?: boolean
   isEmphasized?: boolean
   isJustified?: boolean
   isQuiet?: boolean
   onSelectionChange?: (Set<Key>) => void
   orientation?: 'horizontal' | 'vertical' = 'horizontal'
   selectedKeys?: Iterable<Key>
   selectionMode?: 'single' | 'multiple'
   size?: 'XS' | 'S' | 'M' | 'L' | 'XL' = "M"
   slot?: string | null
-  staticColor?: 'white' | 'black' | 'auto'
+  staticColor?: 'white' | 'black'
   styles?: StylesPropWithHeight
 }

Fix Android talkback focus cusor movement when inside contain FocusSc…

7f38a16

…opes (e.g. Dialogs)

LFDanLu changed the title ~~Fix Android talkback focus cursor movement when inside contain FocusScopes~~ fix: Fix Talkback focus cursor movement when inside contain FocusScopes Dec 5, 2024

LFDanLu changed the title ~~fix: Fix Talkback focus cursor movement when inside contain FocusScopes~~ fix: Fix Talkback focus cursor movement when inside Dialogs Dec 5, 2024

LFDanLu added the release label Dec 9, 2024

Merge branch 'main' into fix_talkback_navigation

5257897

LFDanLu marked this pull request as ready for review December 13, 2024 23:21

remove tab index to fix story behavior

9082f10

go back to wikipedia because it works both inside and outside the sto…

d4cdc75

…rybook iframe

snowystinger reviewed Dec 17, 2024

View reviewed changes

packages/@react-aria/focus/src/FocusScope.tsx Outdated Show resolved Hide resolved

snowystinger previously approved these changes Dec 17, 2024

View reviewed changes

LFDanLu commented Dec 17, 2024

View reviewed changes

LFDanLu closed this Dec 18, 2024

LFDanLu reopened this Dec 19, 2024

Temporary patch for Chrome Android

d86923a

LFDanLu dismissed snowystinger’s stale review via d86923a December 19, 2024 18:40

LFDanLu commented Dec 19, 2024

View reviewed changes

LFDanLu added the in sprint label Dec 19, 2024

snowystinger approved these changes Dec 19, 2024

View reviewed changes

pioso approved these changes Dec 31, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: Fix Talkback focus cursor movement when inside Dialogs #7478

fix: Fix Talkback focus cursor movement when inside Dialogs #7478

LFDanLu commented Dec 5, 2024 •

edited

Loading

rspbot commented Dec 5, 2024

rspbot commented Dec 13, 2024

rspbot commented Dec 17, 2024

rspbot commented Dec 17, 2024

snowystinger left a comment

LFDanLu Dec 17, 2024

LFDanLu commented Dec 18, 2024

LFDanLu Dec 19, 2024

LFDanLu Dec 19, 2024 •

edited

Loading

rspbot commented Dec 19, 2024

rspbot commented Dec 19, 2024

fix: Fix Talkback focus cursor movement when inside Dialogs #7478

Are you sure you want to change the base?

fix: Fix Talkback focus cursor movement when inside Dialogs #7478

Conversation

LFDanLu commented Dec 5, 2024 • edited Loading

✅ Pull Request Checklist:

📝 Test Instructions:

🧢 Your Project:

rspbot commented Dec 5, 2024

rspbot commented Dec 13, 2024

rspbot commented Dec 17, 2024

rspbot commented Dec 17, 2024

snowystinger left a comment

Choose a reason for hiding this comment

LFDanLu Dec 17, 2024

Choose a reason for hiding this comment

LFDanLu commented Dec 18, 2024

LFDanLu Dec 19, 2024

Choose a reason for hiding this comment

LFDanLu Dec 19, 2024 • edited Loading

Choose a reason for hiding this comment

rspbot commented Dec 19, 2024

rspbot commented Dec 19, 2024

@react-aria/utils

/@react-aria/utils:useEnterAnimation

/@react-aria/utils:useExitAnimation

@react-spectrum/s2

/@react-spectrum/s2:ActionBar

/@react-spectrum/s2:ActionBarContext

/@react-spectrum/s2:ActionButton

/@react-spectrum/s2:ActionButtonGroup

/@react-spectrum/s2:Button

/@react-spectrum/s2:LinkButton

/@react-spectrum/s2:CardView

/@react-spectrum/s2:CloseButton

/@react-spectrum/s2:Divider

/@react-spectrum/s2:Link

/@react-spectrum/s2:Meter

/@react-spectrum/s2:ProgressBar

/@react-spectrum/s2:ProgressCircle

/@react-spectrum/s2:TableView

/@react-spectrum/s2:ToggleButton

/@react-spectrum/s2:ToggleButtonGroup

/@react-spectrum/s2:ActionBarProps

/@react-spectrum/s2:ActionButtonProps

/@react-spectrum/s2:ActionButtonGroupProps

/@react-spectrum/s2:ButtonProps

/@react-spectrum/s2:LinkButtonProps

/@react-spectrum/s2:CardViewProps

/@react-spectrum/s2:CloseButtonProps

/@react-spectrum/s2:DividerProps

/@react-spectrum/s2:LinkProps

/@react-spectrum/s2:MeterProps

/@react-spectrum/s2:ProgressBarProps

/@react-spectrum/s2:ProgressCircleProps

/@react-spectrum/s2:TableViewProps

/@react-spectrum/s2:ToggleButtonProps

/@react-spectrum/s2:ToggleButtonGroupProps

LFDanLu commented Dec 5, 2024 •

edited

Loading

LFDanLu Dec 19, 2024 •

edited

Loading