From 5c785e61012a842a57af220ce7f9541117a2b7d3 Mon Sep 17 00:00:00 2001
From: Galen Kistler <109082771+gtk-grafana@users.noreply.github.com>
Date: Mon, 27 Jan 2025 12:05:50 -0600
Subject: [PATCH] LogsPanel: Fix safari text selection bug (#99522)

* feat: a11y review - remove anchor wrapping LogMessage, instead style expand button focus to wrap row
---
 .../app/features/logs/components/LogRow.tsx   |  9 +++++-
 .../logs/components/LogRowMessage.tsx         |  5 +--
 .../logs/components/getLogRowStyles.ts        | 32 ++++++++++++++++---
 public/locales/en-US/grafana.json             |  3 +-
 public/locales/pseudo-LOCALE/grafana.json     |  3 +-
 5 files changed, 43 insertions(+), 9 deletions(-)

diff --git a/public/app/features/logs/components/LogRow.tsx b/public/app/features/logs/components/LogRow.tsx
index 49a8f86c32a..30fc8c773ba 100644
--- a/public/app/features/logs/components/LogRow.tsx
+++ b/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>}
diff --git a/public/app/features/logs/components/LogRowMessage.tsx b/public/app/features/logs/components/LogRowMessage.tsx
index f771d9a2bb6..d3788b3c7cf 100644
--- a/public/app/features/logs/components/LogRowMessage.tsx
+++ b/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}`}>
diff --git a/public/app/features/logs/components/getLogRowStyles.ts b/public/app/features/logs/components/getLogRowStyles.ts
index 9b965b65ea1..8605753487e 100644
--- a/public/app/features/logs/components/getLogRowStyles.ts
+++ b/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,
diff --git a/public/locales/en-US/grafana.json b/public/locales/en-US/grafana.json
index 979924df896..f8d8d6cf171 100644
--- a/public/locales/en-US/grafana.json
+++ b/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": {
diff --git a/public/locales/pseudo-LOCALE/grafana.json b/public/locales/pseudo-LOCALE/grafana.json
index d155653d0ed..a485a54fac9 100644
--- a/public/locales/pseudo-LOCALE/grafana.json
+++ b/public/locales/pseudo-LOCALE/grafana.json
@@ -1815,7 +1815,8 @@
     },
     "log-row-message": {
       "ellipsis": "… ",
-      "more": "mőřę"
+      "more": "mőřę",
+      "see-details": "Ŝęę ľőģ đęŧäįľş"
     },
     "log-rows": {
       "disable-popover": {