fix: fully scroll toolbar items into view when keyboard navigating

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

@@ -24,6 +24,7 @@
   "dependencies": {
     "@react-aria/focus": "^3.19.0",
     "@react-aria/i18n": "^3.12.4",
+    "@react-aria/interactions": "^3.22.5",
     "@react-aria/utils": "^3.26.0",
     "@react-types/shared": "^3.26.0",
     "@swc/helpers": "^0.5.0"

packages/@react-aria/toolbar/src/useToolbar.ts

@@ -12,7 +12,8 @@
 
 import {AriaLabelingProps, Orientation, RefObject} from '@react-types/shared';
 import {createFocusManager} from '@react-aria/focus';
-import {filterDOMProps, useLayoutEffect} from '@react-aria/utils';
+import {filterDOMProps, scrollIntoViewport, useLayoutEffect} from '@react-aria/utils';
+import {getInteractionModality} from '@react-aria/interactions';
 import {HTMLAttributes, KeyboardEventHandler, useRef, useState} from 'react';
 import {useLocale} from '@react-aria/i18n';
 
@@ -110,10 +111,14 @@ export function useToolbar(props: AriaToolbarProps, ref: RefObject<HTMLElement |
   // If the element was removed, do nothing, either the first item in the first group,
   // or the last item in the last group will be focused, depending on direction.
   const onFocus = (e) => {
+    let modality = getInteractionModality();
     if (lastFocused.current && !e.currentTarget.contains(e.relatedTarget) && ref.current?.contains(e.target)) {
       lastFocused.current?.focus();
       lastFocused.current = null;
     }
+    if (modality === 'keyboard') {
+      scrollIntoViewport(document.activeElement, {containingElement: ref.current});
+    }
   };
 
   return {

packages/react-aria-components/stories/Toolbar.stories.tsx

@@ -25,7 +25,7 @@ export const ToolbarExample = (props: ToolbarProps) => {
     <div>
       <label htmlFor="before">Input Before Toolbar</label>
       <input id="before" type="text" />
-      <Toolbar {...props}>
+      <Toolbar {...props} style={{position: 'relative'}}>
         <div role="group" aria-label="Text style">
           <ToggleButton className={classNames(styles, 'toggleButtonExample')}><strong>B</strong></ToggleButton>
           <ToggleButton className={classNames(styles, 'toggleButtonExample')}><div style={{textDecoration: 'underline'}}>U</div></ToggleButton>

yarn.lock

@@ -6738,6 +6738,7 @@ __metadata:
   dependencies:
     "@react-aria/focus": "npm:^3.19.0"
     "@react-aria/i18n": "npm:^3.12.4"
+    "@react-aria/interactions": "npm:^3.22.5"
     "@react-aria/utils": "npm:^3.26.0"
     "@react-types/shared": "npm:^3.26.0"
     "@swc/helpers": "npm:^0.5.0"