#4469 Improve toolbar ux

src/Toolbar.tsx

@@ -174,6 +174,14 @@ export function Toolbar({
     }
   }, [currentMode, disableAllButtons, configCallbackProps])
 
+  // To remember the last selected item in an ActionButtonDropdown
+  const [lastSelectedMultiActionItem, _] = useState(
+    new Map<
+      number /* index in currentModeItems */,
+      number /* index in maybeIconConfig */
+    >()
+  )
+
   return (
     <menu
       data-current-mode={currentMode}
@@ -199,13 +207,22 @@ export function Toolbar({
             )
           } else if (isArray(maybeIconConfig)) {
             // A button with a dropdown
+            const selectedIcon =
+              maybeIconConfig.find((c) => c.isActive) ||
+              maybeIconConfig[lastSelectedMultiActionItem.get(i) ?? 0]
+
+            // Save the last selected item in the dropdown
+            lastSelectedMultiActionItem.set(
+              i,
+              maybeIconConfig.indexOf(selectedIcon)
+            )
             return (
               <ActionButtonDropdown
                 Element="button"
-                key={maybeIconConfig[0].id}
-                data-testid={maybeIconConfig[0].id + '-dropdown'}
-                id={maybeIconConfig[0].id + '-dropdown'}
-                name={maybeIconConfig[0].title}
+                key={selectedIcon.id}
+                data-testid={selectedIcon.id + '-dropdown'}
+                id={selectedIcon.id + '-dropdown'}
+                name={selectedIcon.title}
                 className={
                   (maybeIconConfig[0].alwaysDark
                     ? 'dark bg-chalkboard-90 '
@@ -234,52 +251,48 @@ export function Toolbar({
                 >
                   <ActionButton
                     Element="button"
-                    id={maybeIconConfig[0].id}
-                    data-testid={maybeIconConfig[0].id}
+                    id={selectedIcon.id}
+                    data-testid={selectedIcon.id}
                     iconStart={{
-                      icon: maybeIconConfig[0].icon,
-                      iconColor: maybeIconConfig[0].iconColor,
+                      icon: selectedIcon.icon,
+                      iconColor: selectedIcon.iconColor,
                       className: iconClassName,
                       bgClassName: bgClassName,
                     }}
                     className={
                       '!border-transparent !px-0 pressed:!text-chalkboard-10 pressed:enabled:hovered:!text-chalkboard-10 ' +
                       buttonBgClassName
                     }
-                    aria-pressed={maybeIconConfig[0].isActive}
+                    aria-pressed={selectedIcon.isActive}
                     disabled={
                       disableAllButtons ||
-                      maybeIconConfig[0].status !== 'available' ||
-                      maybeIconConfig[0].disabled
+                      selectedIcon.status !== 'available' ||
+                      selectedIcon.disabled
                     }
-                    name={maybeIconConfig[0].title}
+                    name={selectedIcon.title}
                     // aria-description is still in ARIA 1.3 draft.
                     // eslint-disable-next-line jsx-a11y/aria-props
-                    aria-description={maybeIconConfig[0].description}
-                    onClick={() =>
-                      maybeIconConfig[0].onClick(configCallbackProps)
-                    }
+                    aria-description={selectedIcon.description}
+                    onClick={() => selectedIcon.onClick(configCallbackProps)}
                   >
-                    <span
-                      className={!maybeIconConfig[0].showTitle ? 'sr-only' : ''}
-                    >
-                      {maybeIconConfig[0].title}
+                    <span className={!selectedIcon.showTitle ? 'sr-only' : ''}>
+                      {selectedIcon.title}
                     </span>
                     <ToolbarItemTooltip
-                      itemConfig={maybeIconConfig[0]}
+                      itemConfig={selectedIcon}
                       configCallbackProps={configCallbackProps}
                       wrapperClassName="ui-open:!hidden"
                       contentClassName={tooltipContentClassName}
                     >
                       {showRichContent ? (
                         <ToolbarItemTooltipRichContent
-                          itemConfig={maybeIconConfig[0]}
+                          itemConfig={selectedIcon}
                         />
                       ) : (
                         <ToolbarItemTooltipShortContent
-                          status={maybeIconConfig[0].status}
-                          title={maybeIconConfig[0].title}
-                          hotkey={maybeIconConfig[0].hotkey}
+                          status={selectedIcon.status}
+                          title={selectedIcon.title}
+                          hotkey={selectedIcon.hotkey}
                         />
                       )}
                     </ToolbarItemTooltip>
@@ -428,7 +441,9 @@ const ToolbarItemTooltipShortContent = ({
   >
     {title}
     {hotkey && (
-      <kbd className="inline-block ml-2 flex-none hotkey">{hotkey}</kbd>
+      <kbd className="inline-block ml-2 flex-none hotkey">
+        {displayHotkeys(hotkey)}
+      </kbd>
     )}
   </span>
 )
@@ -459,7 +474,9 @@ const ToolbarItemTooltipRichContent = ({
           {itemConfig.title}
         </span>
         {itemConfig.status === 'available' && itemConfig.hotkey ? (
-          <kbd className="flex-none hotkey">{itemConfig.hotkey}</kbd>
+          <kbd className="flex-none hotkey">
+            {displayHotkeys(itemConfig.hotkey)}
+          </kbd>
         ) : itemConfig.status === 'kcl-only' ? (
           <>
             <span className="text-wrap font-sans flex-0 text-chalkboard-70 dark:text-chalkboard-40">
@@ -520,3 +537,8 @@ const ToolbarItemTooltipRichContent = ({
     </>
   )
 }
+
+// We don't want to display Esc hotkeys to avoid confusion in the Toolbar UI (eg. "EscR")
+function displayHotkeys(hotkey: string | string[]) {
+  return (isArray(hotkey) ? hotkey : [hotkey]).filter((h) => h !== 'Esc')
+}

src/components/ActionButton.tsx

@@ -71,6 +71,7 @@ export const ActionButton = forwardRef((props: ActionButtonProps, ref) => {
         <button
           ref={ref as ForwardedRef<HTMLButtonElement>}
           className={classNames}
+          tabIndex={-1}
           {...rest}
         >
           {iconStart && <ActionIcon {...iconStart} />}

src/components/ActionButtonDropdown.tsx

@@ -69,6 +69,7 @@ export function ActionButtonDropdown({
                     close()
                   }}
                   className="group/button flex items-center gap-6 px-3 py-1 font-sans text-xs hover:bg-primary/10 dark:hover:bg-chalkboard-80 border-0 m-0 w-full rounded-none text-left disabled:!bg-transparent dark:disabled:text-chalkboard-60"
+                  tabIndex={-1}
                   disabled={item.disabled}
                   data-testid={'dropdown-' + item.id}
                 >

src/index.css

@@ -86,15 +86,15 @@ textarea,
 
 button {
   @apply border border-chalkboard-30 m-0.5 px-3 rounded text-xs;
-  @apply focus-visible:outline-chalkboard-100;
+  @apply focus-visible:outline-none;
 }
 
 button:hover {
   @apply border-chalkboard-40 bg-primary/5;
 }
 
 .dark button {
-  @apply border-chalkboard-70 focus-visible:outline-chalkboard-10;
+  @apply border-chalkboard-70;
 }
 
 .dark button:hover {

src/lib/toolbar.ts

@@ -508,9 +508,7 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
           status: 'available',
           title: 'Center circle',
           disabled: (state) => state.matches('Sketch no face'),
-          isActive: (state) =>
-            state.matches({ Sketch: 'Circle tool' }) ||
-            state.matches({ Sketch: 'Circle three point tool' }),
+          isActive: (state) => state.matches({ Sketch: 'Circle tool' }),
           hotkey: (state) =>
             state.matches({ Sketch: 'Circle tool' }) ? ['Esc', 'C'] : 'C',
           showTitle: false,
@@ -533,6 +531,10 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
           icon: 'circle',
           status: 'available',
           title: '3-point circle',
+          isActive: (state) =>
+            state.matches({ Sketch: 'Circle three point tool' }),
+          hotkey: (state) =>
+            state.matches({ Sketch: 'Circle three point tool' }) ? 'Esc' : [],
           showTitle: false,
           description: 'Draw a circle defined by three points',
           links: [],
@@ -573,7 +575,7 @@ export const toolbarConfig: Record<ToolbarModeName, ToolbarMode> = {
                   : 'none',
               },
             }),
-          icon: 'arc',
+          icon: 'rectangle',
           status: 'available',
           disabled: (state) => state.matches('Sketch no face'),
           title: 'Center rectangle',