From 248b487a43760483258df9d2cdcae024fd5323ed Mon Sep 17 00:00:00 2001
From: hanafish <1106510024@qq.com>
Date: Fri, 24 Jul 2026 23:32:40 +0800
Subject: [PATCH] refactor(ui): unify dropdown action rows

---
 .../DropdownActionRows.md                     |  45 +++++
 src/components/Dropdown/DropdownItem.test.ts  |  60 ++++++
 src/components/Dropdown/DropdownItem.tsx      |  68 ++++++-
 .../components/SessionHeaderActionsMenu.tsx   | 185 ++++++++++--------
 .../WorkManagement/GitHubWorkItemControls.tsx |  23 ++-
 .../WorkManagement/GitHubWorkItemList.tsx     |   2 +-
 .../shared/StatusBar/GitSyncStatusMenu.tsx    |  78 ++++----
 .../shared/TerminalNewSessionSplitButton.tsx  |  36 ++--
 8 files changed, 342 insertions(+), 155 deletions(-)
 create mode 100644 docs/frontend-ui-audit-2026-07-24/DropdownActionRows.md
 create mode 100644 src/components/Dropdown/DropdownItem.test.ts

diff --git a/docs/frontend-ui-audit-2026-07-24/DropdownActionRows.md b/docs/frontend-ui-audit-2026-07-24/DropdownActionRows.md
new file mode 100644
index 000000000..0740b59ea
--- /dev/null
+++ b/docs/frontend-ui-audit-2026-07-24/DropdownActionRows.md
@@ -0,0 +1,45 @@
+# Frontend UI Audit — Dropdown Action Rows
+
+**Files:** `src/components/Dropdown/DropdownItem.tsx`, `src/engines/ChatPanel/components/SessionHeaderActionsMenu.tsx`, `src/modules/MainApp/WorkManagement/GitHubWorkItemControls.tsx`, `src/modules/MainApp/WorkManagement/GitHubWorkItemList.tsx`, `src/modules/WorkStation/shared/StatusBar/GitSyncStatusMenu.tsx`, `src/modules/WorkStation/shared/TerminalNewSessionSplitButton.tsx`
+**Date:** 2026-07-24
+
+## D1 — Raw HTML vs Design System
+
+| Line | Element | Verdict | Reason | Suggested change |
+| --- | --- | --- | --- | --- |
+| Four action-menu callers | raw `<button>` rows duplicating `DROPDOWN_CLASSES.item` / `menuActionItem` | fixed | The rows repeated the same height, padding, hover, disabled, icon, label, and suffix contract in four product surfaces. | Replaced with shared `DropdownItem` action rows. |
+| `DropdownItem.tsx:213` | role-aware `<div>` row | keep with reason | One root must support parent-managed listbox options and directly-focusable action menus. The shared row owns role, tab order, disabled state, and keyboard activation consistently; switching element type per role would split ref and layout behavior. | — |
+| `GitHubWorkItemList.tsx:9` | React runtime import | keep with reason | This line changes no rendered element; it makes the existing server-rendered Work Item control tests use the same JSX runtime successfully. | — |
+
+## D2 — Arbitrary Tailwind Value vs Token
+
+| Line | Value | Verdict | Reason | Suggested change |
+| --- | --- | --- | --- | --- |
+| Changed action rows | row height, spacing, hover, selected, and disabled classes | fixed | Callers no longer rebuild token-backed dropdown styling with local class strings. | `DropdownItem` composes `DROPDOWN_CLASSES.item` and `DROPDOWN_ITEM` tokens. |
+| `GitHubWorkItemControls.tsx` | existing `min-w-[180px]` panel width | keep with reason | The width belongs to the existing issue action panel and was not introduced or changed by this migration. | — |
+
+## D3 — Hardcoded Sizes / Colors
+
+| Line | Value | Verdict | Reason | Suggested change |
+| --- | --- | --- | --- | --- |
+| Action-menu icons | icon size and colors | fixed | Migrated rows source icon sizing from `DROPDOWN_ITEM.iconSize` and text colors from `DropdownItem` state instead of repeating caller-owned styling. | — |
+
+## D4 — Accessibility
+
+| Line | Element | Verdict | Reason | Suggested change |
+| --- | --- | --- | --- | --- |
+| `DropdownItem.tsx:183-227` | action row semantics | fixed | The shared component now supports `menuitem`, direct tab focus, Enter/Space activation, accessible names/submenu state, and removal of disabled rows from the tab order. `aria-selected` remains limited to listbox options. | — |
+| Migrated menu callers | disabled/action rows | fixed | All four callers now use the same keyboard and disabled contract instead of relying on site-specific raw-button behavior and classes. | — |
+
+## D5 — Visual Patterns Observed
+
+- The four changed callers are a valid shared-pattern migration: they all render full-width action rows and do not need custom geometry.
+- A repository sweep found 23 remaining `DROPDOWN_CLASSES.menuActionItem` call sites. Several are submenu triggers or label/control rows with `justify-between`, so they should be reviewed as one follow-up sweep rather than converted site-by-site without extending the shared suffix/submenu contract.
+- No new global component is required; the follow-up candidate is broader adoption of the extended `DropdownItem`.
+
+## Summary
+
+- 6 fixes applied
+- 3 patterns kept with documented reason
+- 1 systematic sweep candidate (23 remaining `menuActionItem` sites)
+- 0 new abstraction candidates
diff --git a/src/components/Dropdown/DropdownItem.test.ts b/src/components/Dropdown/DropdownItem.test.ts
new file mode 100644
index 000000000..b6b0dd1b5
--- /dev/null
+++ b/src/components/Dropdown/DropdownItem.test.ts
@@ -0,0 +1,60 @@
+import React from "react";
+import { renderToStaticMarkup } from "react-dom/server";
+import { describe, expect, it } from "vitest";
+
+import DropdownItem, { type DropdownItemProps } from "./DropdownItem";
+
+const TestDropdownItem = DropdownItem as unknown as React.ComponentType<
+  Omit<DropdownItemProps, "children">
+>;
+
+describe("DropdownItem accessibility contract", () => {
+  it("renders a focusable full-width action menu row without option state", () => {
+    const markup = renderToStaticMarkup(
+      React.createElement(
+        TestDropdownItem,
+        {
+          role: "menuitem",
+          fullWidth: true,
+          tabIndex: 0,
+        },
+        "Open"
+      )
+    );
+
+    expect(markup).toContain('role="menuitem"');
+    expect(markup).toContain('tabindex="0"');
+    expect(markup).toContain("w-full");
+    expect(markup).not.toContain("aria-selected");
+  });
+
+  it("removes disabled action rows from the tab order", () => {
+    const markup = renderToStaticMarkup(
+      React.createElement(
+        TestDropdownItem,
+        {
+          role: "menuitem",
+          tabIndex: 0,
+          disabled: true,
+        },
+        "Delete"
+      )
+    );
+
+    expect(markup).toContain('tabindex="-1"');
+    expect(markup).toContain('aria-disabled="true"');
+  });
+
+  it("preserves listbox option selection semantics by default", () => {
+    const markup = renderToStaticMarkup(
+      React.createElement(
+        TestDropdownItem,
+        { selected: true },
+        "Selected option"
+      )
+    );
+
+    expect(markup).toContain('role="option"');
+    expect(markup).toContain('aria-selected="true"');
+  });
+});
diff --git a/src/components/Dropdown/DropdownItem.tsx b/src/components/Dropdown/DropdownItem.tsx
index 1fa705486..353b07100 100644
--- a/src/components/Dropdown/DropdownItem.tsx
+++ b/src/components/Dropdown/DropdownItem.tsx
@@ -111,6 +111,43 @@ export interface DropdownItemProps {
    * Additional style
    */
   style?: React.CSSProperties;
+
+  /**
+   * ARIA role for the row. Defaults to "option" for listbox-style dropdowns.
+   * Use "menuitem" for action/command menus (context menus, header menus).
+   * @default "option"
+   */
+  role?: React.AriaRole;
+
+  /**
+   * Full-width action-row layout (w-full, left-aligned, single line). Use for
+   * command/action menu rows that previously used a raw `<button>` +
+   * `DROPDOWN_CLASSES.menuActionItem`.
+   * @default false
+   */
+  fullWidth?: boolean;
+
+  /**
+   * Tab index. Provide `0` to make a standalone action row directly
+   * keyboard-focusable (menus without a listbox roving-focus manager). Omitted
+   * by default so listbox options keep parent-managed focus behavior.
+   */
+  tabIndex?: number;
+
+  /**
+   * Accessible name for rows without readable text content (icon-only rows).
+   */
+  ariaLabel?: string;
+
+  /**
+   * `aria-haspopup` for rows that open a submenu / flyout.
+   */
+  ariaHasPopup?: React.AriaAttributes["aria-haspopup"];
+
+  /**
+   * `aria-expanded` for submenu-trigger rows.
+   */
+  ariaExpanded?: boolean;
 }
 
 const DropdownItemInner = forwardRef<HTMLDivElement, DropdownItemProps>(
@@ -129,6 +166,12 @@ const DropdownItemInner = forwardRef<HTMLDivElement, DropdownItemProps>(
       className = "",
       dataTestId,
       style,
+      role = "option",
+      fullWidth = false,
+      tabIndex,
+      ariaLabel,
+      ariaHasPopup,
+      ariaExpanded,
     },
     ref
   ) => {
@@ -137,8 +180,21 @@ const DropdownItemInner = forwardRef<HTMLDivElement, DropdownItemProps>(
       onClick?.();
     };
 
+    // Keyboard activation for directly-focusable rows (action/command menus
+    // without a listbox roving-focus manager). No-op for parent-managed
+    // listbox options: they don't set `tabIndex`, so the row never gains focus
+    // and never receives these key events.
+    const handleKeyDown = (event: React.KeyboardEvent<HTMLDivElement>) => {
+      if (disabled) return;
+      if (event.key === "Enter" || event.key === " ") {
+        event.preventDefault();
+        onClick?.();
+      }
+    };
+
     const itemClasses = [
       DROPDOWN_CLASSES.item,
+      fullWidth && "w-full justify-start whitespace-nowrap text-left",
       !disabled && DROPDOWN_CLASSES.itemHover,
       // Only keyboard `highlighted` gets a filled background. The `selected`
       // state is shown by the checkmark + primary-6 text only (no bg fill).
@@ -150,6 +206,9 @@ const DropdownItemInner = forwardRef<HTMLDivElement, DropdownItemProps>(
       .filter(Boolean)
       .join(" ");
 
+    const effectiveTabIndex =
+      tabIndex === undefined ? undefined : disabled ? -1 : tabIndex;
+
     return (
       <div
         ref={ref}
@@ -157,9 +216,14 @@ const DropdownItemInner = forwardRef<HTMLDivElement, DropdownItemProps>(
         data-testid={dataTestId}
         style={style}
         onClick={handleClick}
+        onKeyDown={handleKeyDown}
         onMouseEnter={onMouseEnter}
-        role="option"
-        aria-selected={selected}
+        role={role}
+        tabIndex={effectiveTabIndex}
+        aria-label={ariaLabel}
+        aria-haspopup={ariaHasPopup}
+        aria-expanded={ariaExpanded}
+        aria-selected={role === "option" ? selected : undefined}
         aria-disabled={disabled}
       >
         {/* Icon */}
diff --git a/src/engines/ChatPanel/components/SessionHeaderActionsMenu.tsx b/src/engines/ChatPanel/components/SessionHeaderActionsMenu.tsx
index b45265265..4e0d58da6 100644
--- a/src/engines/ChatPanel/components/SessionHeaderActionsMenu.tsx
+++ b/src/engines/ChatPanel/components/SessionHeaderActionsMenu.tsx
@@ -15,6 +15,7 @@ import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 
 import Button from "@src/components/Button";
+import { DropdownItem } from "@src/components/Dropdown/exports";
 import {
   DROPDOWN_CLASSES,
   DROPDOWN_ITEM,
@@ -125,126 +126,140 @@ export const SessionHeaderActionsMenu: React.FC<
             }}
           >
             {showTranscriptActions && (
-              <button
-                type="button"
-                className={`${DROPDOWN_CLASSES.item} ${DROPDOWN_CLASSES.itemHover} w-full text-left`}
+              <DropdownItem
+                role="menuitem"
+                fullWidth
+                tabIndex={0}
                 onClick={handleOpenSearch}
+                icon={
+                  <Search size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
+                }
               >
-                <Search size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
-                <span className="flex-1 truncate">{t("chat.findInChat")}</span>
-              </button>
+                {t("chat.findInChat")}
+              </DropdownItem>
             )}
-            <button
-              type="button"
-              className={`${DROPDOWN_CLASSES.item} ${DROPDOWN_CLASSES.itemHover} w-full text-left disabled:cursor-not-allowed disabled:opacity-50`}
+            <DropdownItem
+              role="menuitem"
+              fullWidth
+              tabIndex={0}
               onClick={handleReloadFromMenu}
               disabled={!currentSessionId}
+              icon={
+                <RefreshCw size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
+              }
             >
-              <RefreshCw size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
-              <span className="flex-1 truncate">
-                {t("common:actions.reload")}
-              </span>
-            </button>
-            <button
-              type="button"
-              className={`${DROPDOWN_CLASSES.item} ${DROPDOWN_CLASSES.itemHover} w-full text-left disabled:cursor-not-allowed disabled:opacity-50`}
+              {t("common:actions.reload")}
+            </DropdownItem>
+            <DropdownItem
+              role="menuitem"
+              fullWidth
+              tabIndex={0}
               onClick={handleMoveSession}
               disabled={!currentSessionId}
-              data-testid={
+              dataTestId={
                 moveToWorkstation
                   ? "move-session-to-workstation"
                   : "move-session-to-chat-panel"
               }
+              icon={
+                moveToWorkstation ? (
+                  <PanelLeft size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
+                ) : (
+                  <PanelRight
+                    size={DROPDOWN_ITEM.iconSize}
+                    strokeWidth={1.75}
+                  />
+                )
+              }
             >
-              {moveToWorkstation ? (
-                <PanelLeft size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
-              ) : (
-                <PanelRight size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
-              )}
-              <span className="flex-1 truncate">
-                {moveToWorkstation
-                  ? t("chat.moveToWorkstation", {
-                      defaultValue: "Move to My Workstation",
-                    })
-                  : t("chat.moveToChatPanel", {
-                      defaultValue: "Move to Chat Panel",
-                    })}
-              </span>
-            </button>
+              {moveToWorkstation
+                ? t("chat.moveToWorkstation", {
+                    defaultValue: "Move to My Workstation",
+                  })
+                : t("chat.moveToChatPanel", {
+                    defaultValue: "Move to Chat Panel",
+                  })}
+            </DropdownItem>
             {showTranscriptActions && (
               <>
-                <button
-                  type="button"
-                  className={`${DROPDOWN_CLASSES.item} ${DROPDOWN_CLASSES.itemHover} w-full text-left disabled:cursor-not-allowed disabled:opacity-50`}
+                <DropdownItem
+                  role="menuitem"
+                  fullWidth
+                  tabIndex={0}
                   onClick={handleCopyEventJson}
                   disabled={eventsLength === 0}
+                  icon={
+                    <Clipboard
+                      size={DROPDOWN_ITEM.iconSize}
+                      strokeWidth={1.75}
+                    />
+                  }
                 >
-                  <Clipboard size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
-                  <span className="flex-1 truncate">
-                    {copyEventJsonLabel === "copied"
-                      ? t("chat.copyEventJsonCopied")
-                      : copyEventJsonLabel === "failed"
-                        ? t("chat.copyEventJsonFailed")
-                        : t("chat.copyEventJson")}
-                  </span>
-                </button>
-                <button
-                  type="button"
-                  className={`${DROPDOWN_CLASSES.item} ${DROPDOWN_CLASSES.itemHover} w-full text-left disabled:cursor-not-allowed disabled:opacity-50`}
+                  {copyEventJsonLabel === "copied"
+                    ? t("chat.copyEventJsonCopied")
+                    : copyEventJsonLabel === "failed"
+                      ? t("chat.copyEventJsonFailed")
+                      : t("chat.copyEventJson")}
+                </DropdownItem>
+                <DropdownItem
+                  role="menuitem"
+                  fullWidth
+                  tabIndex={0}
                   onClick={handleOpenRawTranscript}
                   disabled={!currentSessionId}
-                  data-testid="view-raw-session-transcript"
+                  dataTestId="view-raw-session-transcript"
+                  icon={
+                    <Braces size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
+                  }
                 >
-                  <Braces size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
-                  <span className="flex-1 truncate">
-                    {t("chat.rawTranscript.menuItem", {
-                      defaultValue: "View raw transcript",
-                    })}
-                  </span>
-                </button>
+                  {t("chat.rawTranscript.menuItem", {
+                    defaultValue: "View raw transcript",
+                  })}
+                </DropdownItem>
               </>
             )}
-            <button
-              type="button"
-              className={`${DROPDOWN_CLASSES.item} ${DROPDOWN_CLASSES.itemHover} w-full text-left disabled:cursor-not-allowed disabled:opacity-50`}
+            <DropdownItem
+              role="menuitem"
+              fullWidth
+              tabIndex={0}
               onClick={handleOpenLinkWorkItem}
               disabled={!currentSessionId}
-              data-testid="session-link-work-item-button"
+              dataTestId="session-link-work-item-button"
+              icon={<Link2 size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />}
             >
-              <Link2 size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
-              <span className="flex-1 truncate">
-                {t("chat.linkWorkItem.menuItem")}
-              </span>
-            </button>
+              {t("chat.linkWorkItem.menuItem")}
+            </DropdownItem>
             {showCloudShareSettings && (
-              <button
-                type="button"
-                className={`${DROPDOWN_CLASSES.item} ${DROPDOWN_CLASSES.itemHover} w-full text-left`}
+              <DropdownItem
+                role="menuitem"
+                fullWidth
+                tabIndex={0}
                 onClick={handleOpenCloudShareSettings}
-                data-testid="cloud-session-share-settings-button"
+                dataTestId="cloud-session-share-settings-button"
+                icon={
+                  <Share2 size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
+                }
               >
-                <Share2 size={DROPDOWN_ITEM.iconSize} strokeWidth={1.75} />
-                <span className="flex-1 truncate">
-                  {t("navigation:cloud.share.menuItem")}
-                </span>
-              </button>
+                {t("navigation:cloud.share.menuItem")}
+              </DropdownItem>
             )}
             {showTranscriptActions && (
               <>
-                <button
-                  type="button"
-                  className={`${DROPDOWN_CLASSES.item} ${DROPDOWN_CLASSES.itemHover} w-full text-left disabled:cursor-not-allowed disabled:opacity-50`}
+                <DropdownItem
+                  role="menuitem"
+                  fullWidth
+                  tabIndex={0}
                   onClick={handleOpenExportSessionJson}
                   disabled={!activeSessionExists}
+                  icon={
+                    <FolderOutput
+                      size={DROPDOWN_ITEM.iconSize}
+                      strokeWidth={1.75}
+                    />
+                  }
                 >
-                  <FolderOutput
-                    size={DROPDOWN_ITEM.iconSize}
-                    strokeWidth={1.75}
-                  />
-                  <span className="flex-1 truncate">
-                    {t("chat.importExport.exportAction")}
-                  </span>
-                </button>
+                  {t("chat.importExport.exportAction")}
+                </DropdownItem>
                 <div className="my-1 border-t border-solid border-border-2" />
                 <div
                   className={`${DROPDOWN_CLASSES.item} w-full justify-between text-left`}
diff --git a/src/modules/MainApp/WorkManagement/GitHubWorkItemControls.tsx b/src/modules/MainApp/WorkManagement/GitHubWorkItemControls.tsx
index 39e851cfa..174ec331f 100644
--- a/src/modules/MainApp/WorkManagement/GitHubWorkItemControls.tsx
+++ b/src/modules/MainApp/WorkManagement/GitHubWorkItemControls.tsx
@@ -15,6 +15,7 @@ import React, { useCallback, useMemo, useState } from "react";
 
 import Button from "@src/components/Button";
 import Dropdown from "@src/components/Dropdown";
+import { DropdownItem } from "@src/components/Dropdown/exports";
 import {
   DROPDOWN_CLASSES,
   DROPDOWN_WIDTHS,
@@ -195,26 +196,28 @@ export function ManagedIssueRow({
   const closeMenu = useCallback(() => setMenuVisible(false), []);
   const droplist = (
     <div className={`${DROPDOWN_CLASSES.menuPanelBase} min-w-[180px]`}>
-      <button
-        type="button"
-        className={DROPDOWN_CLASSES.menuActionItem}
+      <DropdownItem
+        role="menuitem"
+        fullWidth
+        tabIndex={0}
         onClick={() => {
           onOpenIssueInBrowser(issue);
           closeMenu();
         }}
       >
-        <span className="min-w-0 flex-1 truncate">{openInBrowserLabel}</span>
-      </button>
-      <button
-        type="button"
-        className={DROPDOWN_CLASSES.menuActionItem}
+        {openInBrowserLabel}
+      </DropdownItem>
+      <DropdownItem
+        role="menuitem"
+        fullWidth
+        tabIndex={0}
         onClick={() => {
           onOpenIssueInMyStation(issue);
           closeMenu();
         }}
       >
-        <span className="min-w-0 flex-1 truncate">{openInMyStationLabel}</span>
-      </button>
+        {openInMyStationLabel}
+      </DropdownItem>
     </div>
   );
 
diff --git a/src/modules/MainApp/WorkManagement/GitHubWorkItemList.tsx b/src/modules/MainApp/WorkManagement/GitHubWorkItemList.tsx
index 31d7efb14..34b0bc681 100644
--- a/src/modules/MainApp/WorkManagement/GitHubWorkItemList.tsx
+++ b/src/modules/MainApp/WorkManagement/GitHubWorkItemList.tsx
@@ -7,7 +7,7 @@ import {
   RefreshCw,
   SquarePen,
 } from "lucide-react";
-import type { ReactNode } from "react";
+import React, { type ReactNode } from "react";
 
 import Button from "@src/components/Button";
 import { SearchInput } from "@src/components/SearchInput";
diff --git a/src/modules/WorkStation/shared/StatusBar/GitSyncStatusMenu.tsx b/src/modules/WorkStation/shared/StatusBar/GitSyncStatusMenu.tsx
index 5522e483d..757d56748 100644
--- a/src/modules/WorkStation/shared/StatusBar/GitSyncStatusMenu.tsx
+++ b/src/modules/WorkStation/shared/StatusBar/GitSyncStatusMenu.tsx
@@ -15,6 +15,7 @@ import React, { memo, useCallback, useMemo, useState } from "react";
 import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 
+import { DropdownItem } from "@src/components/Dropdown/exports";
 import {
   DROPDOWN_CLASSES,
   DROPDOWN_ITEM,
@@ -22,7 +23,6 @@ import {
   DROPDOWN_WIDTHS,
 } from "@src/components/Dropdown/tokens";
 import { useDropdownEngine } from "@src/hooks/dropdown";
-import { classNames } from "@src/util/ui/classNames";
 
 import { StatusBarButton } from "./StatusBarBase";
 import { StatusBarTooltip } from "./StatusBarTooltip";
@@ -230,69 +230,65 @@ export const GitSyncStatusMenu: React.FC<GitSyncStatusMenuProps> = memo(
                       const disabled =
                         isSyncBusy || !canSyncDisplayedRepo || action.disabled;
                       return (
-                        <button
+                        <DropdownItem
                           key={action.key}
-                          type="button"
-                          className={classNames(
-                            DROPDOWN_CLASSES.menuActionItem,
-                            disabled && DROPDOWN_CLASSES.itemDisabled
-                          )}
+                          role="menuitem"
+                          fullWidth
+                          tabIndex={0}
                           disabled={disabled}
                           onClick={() => handleAction(action.onSelect)}
-                          role="menuitem"
+                          icon={
+                            <ActionIcon
+                              size={MENU_ICON_SIZE}
+                              className="shrink-0 text-text-1"
+                            />
+                          }
                         >
-                          <ActionIcon
-                            size={MENU_ICON_SIZE}
-                            className="shrink-0 text-text-1"
-                          />
-                          <span className="font-medium text-text-1">
-                            {action.label}
-                          </span>
-                        </button>
+                          <span className="font-medium">{action.label}</span>
+                        </DropdownItem>
                       );
                     })}
                   </>
                 ) : (
                   <>
                     {suggestedAction && SuggestedActionIcon && (
-                      <button
-                        type="button"
-                        className={classNames(
-                          DROPDOWN_CLASSES.menuActionItem,
-                          (isSyncBusy ||
-                            !canSyncDisplayedRepo ||
-                            suggestedAction.disabled) &&
-                            DROPDOWN_CLASSES.itemDisabled
-                        )}
+                      <DropdownItem
+                        role="menuitem"
+                        fullWidth
+                        tabIndex={0}
                         disabled={
                           isSyncBusy ||
                           !canSyncDisplayedRepo ||
                           suggestedAction.disabled
                         }
                         onClick={() => handleAction(suggestedAction.onSelect)}
-                        role="menuitem"
+                        icon={
+                          <SuggestedActionIcon
+                            size={MENU_ICON_SIZE}
+                            className="shrink-0 text-text-1"
+                          />
+                        }
                       >
-                        <SuggestedActionIcon
-                          size={MENU_ICON_SIZE}
-                          className="shrink-0 text-text-1"
-                        />
-                        <span className="font-medium text-text-1">
+                        <span className="font-medium">
                           {suggestedAction.label}
                         </span>
-                      </button>
+                      </DropdownItem>
                     )}
                     <div className={DROPDOWN_CLASSES.menuSeparator} />
-                    <button
-                      type="button"
-                      className={DROPDOWN_CLASSES.menuActionItem}
-                      onClick={() => setShowAllActions(true)}
+                    <DropdownItem
                       role="menuitem"
+                      fullWidth
+                      tabIndex={0}
+                      onClick={() => setShowAllActions(true)}
+                      icon={
+                        <Ellipsis
+                          size={MENU_ICON_SIZE}
+                          className="text-text-1"
+                        />
+                      }
                     >
-                      <Ellipsis size={MENU_ICON_SIZE} className="text-text-1" />
-                      <span className="font-medium text-text-1">
-                        {t("common.more")}
-                      </span>
-                    </button>
+                      <span className="font-medium">{t("common.more")}</span>
+                    </DropdownItem>
                   </>
                 )}
               </div>
diff --git a/src/modules/WorkStation/shared/TerminalNewSessionSplitButton.tsx b/src/modules/WorkStation/shared/TerminalNewSessionSplitButton.tsx
index b9f8c8e2f..e9c77e183 100644
--- a/src/modules/WorkStation/shared/TerminalNewSessionSplitButton.tsx
+++ b/src/modules/WorkStation/shared/TerminalNewSessionSplitButton.tsx
@@ -4,7 +4,7 @@ import { createPortal } from "react-dom";
 import { useTranslation } from "react-i18next";
 
 import Button from "@src/components/Button";
-import { DropdownPanel } from "@src/components/Dropdown/exports";
+import { DropdownItem, DropdownPanel } from "@src/components/Dropdown/exports";
 import {
   DROPDOWN_CLASSES,
   DROPDOWN_ITEM,
@@ -93,19 +93,22 @@ const TerminalNewSessionSplitButtonComponent: React.FC<
           {shellProfiles
             .filter((profile) => profile.category === "shell")
             .map((profile) => (
-              <button
+              <DropdownItem
                 key={profile.id}
-                type="button"
-                className={`${DROPDOWN_CLASSES.item} ${DROPDOWN_CLASSES.itemHover} w-full text-left`}
+                role="menuitem"
+                fullWidth
+                tabIndex={0}
                 onClick={() => handlePickProfile(profile)}
+                suffix={
+                  profile.isDefault ? (
+                    <span className="text-xs">
+                      {t("common:common.default", "Default")}
+                    </span>
+                  ) : undefined
+                }
               >
-                <span className="flex-1 truncate">{profile.name}</span>
-                {profile.isDefault && (
-                  <span className="text-xs text-text-3">
-                    {t("common:common.default", "Default")}
-                  </span>
-                )}
-              </button>
+                {profile.name}
+              </DropdownItem>
             ))}
           {shellProfiles.some((profile) => profile.category === "repl") && (
             <>
@@ -113,14 +116,15 @@ const TerminalNewSessionSplitButtonComponent: React.FC<
               {shellProfiles
                 .filter((profile) => profile.category === "repl")
                 .map((profile) => (
-                  <button
+                  <DropdownItem
                     key={profile.id}
-                    type="button"
-                    className={`${DROPDOWN_CLASSES.item} ${DROPDOWN_CLASSES.itemHover} w-full text-left`}
+                    role="menuitem"
+                    fullWidth
+                    tabIndex={0}
                     onClick={() => handlePickProfile(profile)}
                   >
-                    <span className="flex-1 truncate">{profile.name}</span>
-                  </button>
+                    {profile.name}
+                  </DropdownItem>
                 ))}
             </>
           )}