Use buttons for rail tabs (#31133)

GitOrigin-RevId: 9f251969ed0f88a32f8bf706a6320c4c81c6d000

services/web/frontend/js/features/ide-react/components/rail/rail-tab.tsx

@@ -6,7 +6,7 @@ import { NavLink } from 'react-bootstrap'
 import { RailElement } from '@/features/ide-react/util/rail-types'
 
 const RailTab = forwardRef<
-  HTMLAnchorElement,
+  HTMLButtonElement,
   {
     icon: RailElement['icon']
     eventKey?: string
@@ -14,7 +14,7 @@ const RailTab = forwardRef<
     indicator?: ReactElement
     title: string
   } & ComponentProps<'button'>
->(({ icon, eventKey, className, open, indicator, title, ...props }, ref) => {
+>(({ icon, className, eventKey, open, indicator, title, ...props }, ref) => {
   return (
     <OLTooltip
       id={`rail-tab-tooltip-${eventKey}`}
@@ -28,6 +28,7 @@ const RailTab = forwardRef<
         className={classNames('ide-rail-tab-link', className, {
           'open-rail': open,
         })}
+        as="button"
       >
         <RailTabIcon icon={icon} title={title} open={open} />
         {indicator}

services/web/frontend/js/features/ide-react/components/rail/rail.tsx

@@ -52,8 +52,8 @@ const moduleRailPopovers = (
     import: {
       default: {
         key: string
-        Component: FC<{ ref: RefObject<HTMLAnchorElement> }>
+        Component: FC<{ ref: RefObject<HTMLButtonElement> }>
-        ref: RefObject<HTMLAnchorElement>
+        ref: RefObject<HTMLButtonElement>
         hide: boolean | (() => boolean)
       }
     }
@@ -77,7 +77,7 @@ export const RailLayout = () => {
 
   const isHistoryView = view === 'history'
 
-  const fileTreeRef = useRef<HTMLAnchorElement>(null)
+  const fileTreeRef = useRef<HTMLButtonElement>(null)
   const settingsRef = useRef<HTMLButtonElement>(null)
 
   useEventListener(

services/web/frontend/js/features/ide-react/util/rail-types.ts

@@ -14,6 +14,6 @@ export type RailElement = {
   hide?: boolean | (() => boolean)
   disabled?: boolean
   mountOnFirstLoad?: boolean
-  ref?: React.RefObject<HTMLAnchorElement>
+  ref?: React.RefObject<HTMLButtonElement>
   tab?: typeof RailTab
 }