LogsPanel: Fix safari text selection bug (#99522)

* feat: a11y review - remove anchor wrapping LogMessage, instead style expand button focus to wrap row

public/app/features/logs/components/LogRow.tsx

@@ -14,6 +14,7 @@ import {
 import { reportInteraction } from '@grafana/runtime';
 import { DataQuery, TimeZone } from '@grafana/schema';
 import { Icon, PopoverContent, Tooltip, useTheme2 } from '@grafana/ui';
+import { t } from 'app/core/internationalization';
 
 import { checkLogsError, checkLogsSampled, escapeUnescapedString } from '../utils';
 
@@ -244,7 +245,13 @@ export const LogRow = ({
           className={enableLogDetails ? styles.logsRowToggleDetails : ''}
         >
           {enableLogDetails && (
-            <Icon className={styles.topVerticalAlign} name={showDetails ? 'angle-down' : 'angle-right'} />
+            <button
+              aria-label={t('logs.log-row-message.see-details', `See log details`)}
+              className={styles.detailsToggle}
+              aria-expanded={showDetails}
+            >
+              <Icon className={styles.topVerticalAlign} name={showDetails ? 'angle-down' : 'angle-right'} />
+            </button>
           )}
         </td>
         {showTime && <td className={styles.logsRowLocalTime}>{timestamp}</td>}

public/app/features/logs/components/LogRowMessage.tsx

@@ -157,6 +157,7 @@ export const LogRowMessage = memo((props: Props) => {
     [raw, prettifyLogMessage, wrapLogMessage, expanded]
   );
   const shouldShowMenu = mouseIsOver || pinned;
+
   return (
     <>
       {
@@ -165,9 +166,9 @@ export const LogRowMessage = memo((props: Props) => {
       }
       <td className={styles.logsRowMessage}>
         <div className={wrapLogMessage ? styles.positionRelative : styles.horizontalScroll}>
-          <button className={`${styles.logLine} ${styles.positionRelative}`}>
+          <div className={`${styles.logLine} ${styles.positionRelative}`}>
             <LogMessage hasAnsi={hasAnsi} entry={restructuredEntry} highlights={row.searchWords} styles={styles} />
-          </button>
+          </div>
         </div>
       </td>
       <td className={`log-row-menu-cell ${styles.logRowMenuCell}`}>

public/app/features/logs/components/getLogRowStyles.ts

@@ -100,6 +100,11 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       cursor: 'pointer',
       verticalAlign: 'top',
 
+      '&:focus-within': {
+        outline: `2px solid ${theme.colors.primary.border}`,
+        outlineOffset: '-2px',
+      },
+
       '&:hover': {
         '.log-row-menu': {
           zIndex: 1,
@@ -139,7 +144,6 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
     logsRowToggleDetails: css({
       label: 'logs-row-toggle-details__level',
       fontSize: '9px',
-      paddingTop: '5px',
       maxWidth: '15px',
     }),
     logsRowLocalTime: css({
@@ -221,6 +225,29 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
         backgroundColor: hoverBgColor,
       },
     }),
+    detailsToggle: css({
+      appearance: 'none',
+      background: 'none',
+      border: 'none',
+      padding: 0,
+      // Don't increase the height of the row
+      maxHeight: '19px',
+
+      // Don't show default button box-shadow on focus, we apply outline to the entire row instead
+      '&:focus-visible': {
+        boxShadow: 'none',
+      },
+
+      '&:focus': {
+        outline: 0,
+      },
+      '&:after': {
+        content: '""',
+        inset: 0,
+        position: 'absolute',
+      },
+    }),
+
     // Log row
     topVerticalAlign: css({
       label: 'topVerticalAlign',
@@ -287,9 +314,6 @@ export const getLogRowStyles = memoizeOne((theme: GrafanaTheme2) => {
       },
     }),
     logLine: css({
-      backgroundColor: 'transparent',
-      border: 'none',
-      diplay: 'inline',
       fontFamily: theme.typography.fontFamilyMonospace,
       fontSize: theme.typography.bodySmall.fontSize,
       letterSpacing: theme.typography.bodySmall.letterSpacing,

public/locales/en-US/grafana.json

@@ -1815,7 +1815,8 @@
     },
     "log-row-message": {
       "ellipsis": "… ",
-      "more": "more"
+      "more": "more",
+      "see-details": "See log details"
     },
     "log-rows": {
       "disable-popover": {

public/locales/pseudo-LOCALE/grafana.json

@@ -1815,7 +1815,8 @@
     },
     "log-row-message": {
       "ellipsis": "… ",
-      "more": "mőřę"
+      "more": "mőřę",
+      "see-details": "Ŝęę ľőģ đęŧäįľş"
     },
     "log-rows": {
       "disable-popover": {