From c537d3699c9de5b999f73b09a7fa9dacdb76859f Mon Sep 17 00:00:00 2001
From: Matias Chomicki <matyax@gmail.com>
Date: Wed, 21 Dec 2022 14:45:47 +0100
Subject: [PATCH] Logs A11y: Support keyboard interactions with log lines
 (#60561)

* Logs A11y: Support keyboard interactions with log lines

* LogRowMessage: specify text align

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>

Co-authored-by: Sven Grossmann <sven.grossmann@grafana.com>
---
 .../app/features/logs/components/LogRowMessage.tsx | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

diff --git a/public/app/features/logs/components/LogRowMessage.tsx b/public/app/features/logs/components/LogRowMessage.tsx
index ee34273bdfd..d00382d2123 100644
--- a/public/app/features/logs/components/LogRowMessage.tsx
+++ b/public/app/features/logs/components/LogRowMessage.tsx
@@ -77,6 +77,16 @@ const getStyles = (theme: GrafanaTheme2, showContextButton: boolean, isInDashboa
       right: ${isInDashboard ? '40px' : `calc(75px + ${theme.spacing()} + ${showContextButton ? '80px' : '40px'})`};
       margin-top: -${theme.spacing(0.125)};
     `,
+    logLine: css`
+      background-color: transparent;
+      border: none;
+      diplay: inline;
+      font-family: ${theme.typography.fontFamilyMonospace};
+      font-size: ${theme.typography.bodySmall.fontSize};
+      letter-spacing: ${theme.typography.bodySmall.letterSpacing};
+      text-align: left;
+      padding: 0;
+    `,
   };
 };
 
@@ -193,9 +203,9 @@ class UnThemedLogRowMessage extends PureComponent<Props> {
                 }}
               />
             )}
-            <span className={cx(styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
+            <button className={cx(styles.logLine, styles.positionRelative, { [styles.rowWithContext]: contextIsOpen })}>
               {renderLogMessage(hasAnsi, restructuredEntry, row.searchWords, style.logsRowMatchHighLight)}
-            </span>
+            </button>
           </div>
         </td>
         {showRowMenu && (