fix(webapp): make every side menu item keyboard-focusable in DOM order

SimpleTooltip removed its trigger from the tab order (tabIndex=-1), so
every side menu item wrapped in one (the nav links and the
org/project/environment/account selectors) was skipped when tabbing. Add
an opt-in tabbable prop to SimpleTooltip and set it on those triggers,
give each the focus-custom ring, and turn the collapsible section headers
into real buttons so they are keyboard-operable too. Tab order now follows
the DOM top to bottom in both the expanded and collapsed states.

Author: samejr

apps/webapp/app/components/navigation/EnvironmentSelector.tsx

@@ -70,7 +70,7 @@ export function EnvironmentSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center rounded pl-[0.4375rem] hover:bg-charcoal-750",
+              "group flex h-8 items-center rounded pl-[0.4375rem] hover:bg-charcoal-750 focus-custom",
               isCollapsed ? "justify-center pr-0.5" : "justify-between pr-1",
               className
             )}
@@ -113,6 +113,7 @@ export function EnvironmentSelector({
         delayDuration={isCollapsed ? 0 : 500}
         buttonClassName="!h-8"
         asChild
+        tabbable
         disableHoverableContent
       />
       <PopoverContent

apps/webapp/app/components/navigation/HelpAndFeedbackPopover.tsx

@@ -108,6 +108,7 @@ export function HelpAndFeedback({
               delayDuration={isCollapsed ? 0 : 500}
               buttonClassName="!h-8 w-full"
               asChild
+              tabbable
               disableHoverableContent
             />
             <PopoverContent

apps/webapp/app/components/navigation/SideMenu.tsx

@@ -1156,7 +1156,7 @@ function OrgSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center rounded pl-[0.4375rem] hover:bg-charcoal-750",
+              "group flex h-8 items-center rounded pl-[0.4375rem] hover:bg-charcoal-750 focus-custom",
               isCollapsed ? "justify-center pr-0.5" : "w-full justify-between pr-1"
             )}
           >
@@ -1192,6 +1192,7 @@ function OrgSelector({
         hidden={!isCollapsed}
         buttonClassName="!h-8"
         asChild
+        tabbable
         disableHoverableContent
       />
       <PopoverContent
@@ -1333,6 +1334,7 @@ function AccountMenu({ isAdmin, isImpersonating }: { isAdmin: boolean; isImperso
         side="bottom"
         sideOffset={8}
         asChild
+        tabbable
         disableHoverableContent
       />
       <PopoverContent
@@ -1443,7 +1445,7 @@ function ProjectSelector({
         button={
           <PopoverTrigger
             className={cn(
-              "group flex h-8 items-center rounded border pl-[0.4375rem] transition-[border-color] duration-150 hover:bg-charcoal-750",
+              "group flex h-8 items-center rounded border pl-[0.4375rem] transition-[border-color] duration-150 hover:bg-charcoal-750 focus-custom",
               isCollapsed
                 ? "justify-center border-transparent pr-0.5"
                 : "justify-between border-charcoal-700 pr-1",
@@ -1482,6 +1484,7 @@ function ProjectSelector({
         hidden={!isCollapsed}
         buttonClassName="!h-8"
         asChild
+        tabbable
         disableHoverableContent
       />
       <PopoverContent

apps/webapp/app/components/navigation/SideMenuItem.tsx

@@ -63,7 +63,7 @@ export function SideMenuItem({
       target={target}
       data-action={dataAction}
       className={cn(
-        "group/menulink flex h-8 items-center gap-2 overflow-hidden rounded pl-[0.4375rem] pr-2",
+        "group/menulink flex h-8 items-center gap-2 overflow-hidden rounded pl-[0.4375rem] pr-2 focus-custom",
         isIndented ? "min-w-0 flex-1" : "w-full",
         isActive
           ? "bg-tertiary text-text-bright"
@@ -140,6 +140,7 @@ export function SideMenuItem({
           buttonClassName="!h-8 block w-full"
           hidden={!isCollapsed}
           asChild
+          tabbable
           disableHoverableContent
         />
         {!isCollapsed && (
@@ -168,6 +169,7 @@ export function SideMenuItem({
       buttonClassName="!h-8 block w-full"
       hidden={!isCollapsed}
       asChild
+      tabbable
       disableHoverableContent
     />
   );

apps/webapp/app/components/navigation/SideMenuSection.tsx

@@ -44,9 +44,15 @@ export function SideMenuSection({
           real time while dragging. The hover background and text color snap (no transition), to
           match the nav items.
         */}
-        <div
-          className="group/section flex cursor-pointer items-center justify-between overflow-hidden rounded-sm py-1 pl-1.5 pr-1 hover:bg-charcoal-750"
+        <button
+          type="button"
+          // A real button so it's keyboard-operable (Enter/Space toggle natively) and shows the
+          // focus-custom ring. Removed from the tab order when the side menu is collapsed, since
+          // the header is hidden (the divider takes its place) and can't be toggled then.
+          className="group/section flex w-full cursor-pointer items-center justify-between overflow-hidden rounded-sm py-1 pl-1.5 pr-1 hover:bg-charcoal-750 focus-custom"
           onClick={isSideMenuCollapsed ? undefined : handleToggle}
+          tabIndex={isSideMenuCollapsed ? -1 : undefined}
+          aria-expanded={!isCollapsed}
           style={{
             opacity: "var(--sm-label-opacity, 1)",
             cursor: isSideMenuCollapsed ? "default" : "pointer",
@@ -63,7 +69,7 @@ export function SideMenuSection({
             </motion.div>
           </div>
           {headerAction && <div className="flex items-center">{headerAction}</div>}
-        </div>
+        </button>
         {/*
           Divider - absolutely positioned, fades in as the header fades out (driven by the
           `--sm-collapse` progress variable, 0 → 1). Only shown while this section is expanded.

apps/webapp/app/components/primitives/Tooltip.tsx

@@ -63,6 +63,7 @@ function SimpleTooltip({
   buttonClassName,
   buttonStyle,
   asChild = false,
+  tabbable = false,
   sideOffset,
   open,
   onOpenChange,
@@ -78,6 +79,12 @@ function SimpleTooltip({
   buttonClassName?: string;
   buttonStyle?: React.CSSProperties;
   asChild?: boolean;
+  /**
+   * By default the trigger is removed from the tab order (`tabIndex={-1}`) so decorative tooltips
+   * don't add tab stops. Set this when the trigger wraps a genuinely interactive element (a link
+   * or button) that should stay keyboard-focusable.
+   */
+  tabbable?: boolean;
   sideOffset?: number;
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
@@ -88,7 +95,7 @@ function SimpleTooltip({
       <Tooltip open={open} onOpenChange={onOpenChange} delayDuration={delayDuration}>
         <TooltipTrigger
           type={asChild ? undefined : "button"}
-          tabIndex={-1}
+          tabIndex={tabbable ? undefined : -1}
           className={cn(!asChild && "h-fit", buttonClassName)}
           style={buttonStyle}
           asChild={asChild}