fix: add isFocusVisible useMenuItem and fix focusRing when typing in Autocomplete SearchField

[LFDanLu]

Closes

✅ 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:

1. Navigate to https://reactspectrum.blob.core.windows.net/reactspectrum/5500dd71c424604132f88afcb3df3eb8335d991e/storybook-s2/index.html?path=/story/popover--autocomplete-popover
2. Open the Popover
3. Keyboard navigate the Autocomplete. Verify that a focus ring is visible around the menu items when keyboard navigating, but the ring disappears when hovering via mouse. The menu item focus ring should reappear when typing or navigating via keyboard.
4. Click into the SearchField and verify the focus ring on the SearchField disappears if previously present. Verify that typing in said field doesn't cause the SearchField's focus ring to come back.

Ignore the keyboard event leaks causing the storybook controls/bars from appearing/moving. This is known and will be handled when we make collections stop leaking events in general

🧢 Your Project:

RSP

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[reidbarber]

Behavior looks good to me.

[LFDanLu]

So it turns out that we still need isTextInput since it allows elements to NOT get focusVisible styles when focus moves from a non-input element via some other method than Tab. This happens for Datepicker on main via the following steps:

1. click into the datepicker date input
2. using ArrowRight, move focus on to the Datepicker button. Note the focus ring appears for the button
3. using ArrowLeft, move focus on to the Datepicker input again. Note the focus ring doesn't appear on the Datepicker group

A bit debatable if this is desired behavior perhaps, I would've liked to simply deprecate isTextInput but the removal of this behavior would be a breaking change for anyone who was relying on it previously

[rspbot]

Build successful! 🎉

• View the storybook
• View the storybook-19
• View the storybook-17
• View the storybook-16
• View the S2 storybook
• View the documentation

[rspbot]

## API Changes

@react-aria/focus

/@react-aria/focus:isFocusable

 isFocusable {
-  element: Element
+  element: HTMLElement
   returnVal: undefined
 }

---

@react-aria/menu

/@react-aria/menu:MenuItemAria

 MenuItemAria {
   descriptionProps: DOMAttributes
   isDisabled: boolean
+  isFocusVisible: boolean
   isFocused: boolean
   isPressed: boolean
   isSelected: boolean
   keyboardShortcutProps: DOMAttributes
   menuItemProps: DOMAttributes
 }

---

@react-aria/test-utils

/@react-aria/test-utils:triggerLongPress

 triggerLongPress {
   opts: {
     element: HTMLElement
   advanceTimer: (number) => void | Promise<unknown>
-  pointerOpts?: Record<string, any>
+  pointerOpts?: {
+  
 }
+}
   returnVal: undefined
 }

---

@react-aria/utils

/@react-aria/utils:isFocusable

-isFocusable {
-  element: Element
-  returnVal: undefined
-}

/@react-aria/utils:isTabbable

-isTabbable {
-  element: Element
-  returnVal: undefined
-}

---

@react-spectrum/test-utils

/@react-spectrum/test-utils:triggerLongPress

 triggerLongPress {
   opts: {
     element: HTMLElement
   advanceTimer: (number) => void | Promise<unknown>
-  pointerOpts?: Record<string, any>
+  pointerOpts?: {
+  
 }
+}
   returnVal: undefined
 }

---

[snowystinger]

Looks like it still comes back?

test.focus.ring.mov

ignore the jump after typing "a", that's just storybook shortcuts, not sure why they are happening, but "a" will show and hide the addons panel

[yihuiliao]

It might be good to add some chromatic tests for this using the play functions in S2

[LFDanLu]

@yihuiliao good idea, I'll see about doing that as a followup