Allow text selection in log entry header (#30638)

GitOrigin-RevId: 18c6c9bc9b2971dbd877ce7d053a2582c6d072ad

services/web/frontend/js/features/ide-redesign/components/error-logs/log-entry-header.tsx

@@ -1,5 +1,12 @@
 import classNames from 'classnames'
-import { useState, useRef, MouseEventHandler, ElementType } from 'react'
+import {
+  useState,
+  useRef,
+  MouseEventHandler,
+  ElementType,
+  useCallback,
+  KeyboardEventHandler,
+} from 'react'
 import { useTranslation } from 'react-i18next'
 import OLTooltip from '@/shared/components/ol/ol-tooltip'
 import {
@@ -105,16 +112,30 @@ function LogEntryHeader({
     !!fileData &&
     !(fileData.entity._id === openEntity?.entity._id && !line)
 
+  const handleKeyDown: KeyboardEventHandler<HTMLDivElement> = useCallback(
+    event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault()
+        onToggleCollapsed()
+      }
+    },
+    [onToggleCollapsed]
+  )
+
   return (
     <header className="log-entry-header-card">
-      <button
+      <div
         data-action="expand-collapse"
         data-collapsed={collapsed}
         className="log-entry-header-button"
         onClick={onToggleCollapsed}
+        role="button"
+        tabIndex={0}
+        onKeyDown={handleKeyDown}
         aria-label={collapsed ? t('expand') : t('collapse')}
       >
         <MaterialIcon
+          className="log-entry-expand-icon"
           type={
             openCollapseIconOverride ??
             (collapsed ? 'chevron_right' : 'expand_more')
@@ -135,7 +156,7 @@ function LogEntryHeader({
             formattedLocationText
           )}
         </div>
-      </button>
+      </div>
 
       {actionButtonsOverride ?? (
         <div className="log-entry-header-actions">

services/web/frontend/stylesheets/pages/editor/logs.scss

@@ -89,17 +89,20 @@
       border-radius: var(--border-radius-base);
       padding: var(--spacing-02) 0;
       overflow: hidden;
-      user-select: text;
 
       &:hover {
         cursor: pointer;
       }
 
       &:hover,
-      :focus,
+      &:focus-visible,
-      :active {
+      &:active {
         background-color: var(--bg-secondary-themed);
       }
+
+      .log-entry-expand-icon {
+        user-select: none;
+      }
     }
 
     .log-entry-header-content {