From cc6839a21d24897614fd75bfa4cfa512fd151d79 Mon Sep 17 00:00:00 2001
From: kay delaney <45561153+kaydelaney@users.noreply.github.com>
Date: Thu, 20 Jan 2022 14:31:27 +0000
Subject: [PATCH] TablePanel: Make column headers keyboard-friendly (#44267)

---
 packages/grafana-ui/src/components/Table/HeaderRow.tsx | 8 ++------
 packages/grafana-ui/src/components/Table/styles.ts     | 3 +++
 2 files changed, 5 insertions(+), 6 deletions(-)

diff --git a/packages/grafana-ui/src/components/Table/HeaderRow.tsx b/packages/grafana-ui/src/components/Table/HeaderRow.tsx
index 434852eec4c..a935b961249 100644
--- a/packages/grafana-ui/src/components/Table/HeaderRow.tsx
+++ b/packages/grafana-ui/src/components/Table/HeaderRow.tsx
@@ -55,11 +55,7 @@ function renderHeaderCell(column: any, tableStyles: TableStyles, field?: Field,
     <div className={tableStyles.headerCell} {...headerProps} role="columnheader">
       {column.canSort && (
         <>
-          <div
-            {...column.getSortByToggleProps()}
-            className={tableStyles.headerCellLabel}
-            title={column.render('Header')}
-          >
+          <button {...column.getSortByToggleProps()} className={tableStyles.headerCellLabel}>
             {showTypeIcons && (
               <Icon name={getFieldTypeIcon(field)} title={field?.type} size="sm" className={tableStyles.typeIcon} />
             )}
@@ -67,7 +63,7 @@ function renderHeaderCell(column: any, tableStyles: TableStyles, field?: Field,
             <div>
               {column.isSorted && (column.isSortedDesc ? <Icon name="arrow-down" /> : <Icon name="arrow-up" />)}
             </div>
-          </div>
+          </button>
           {column.canFilter && <Filter column={column} tableStyles={tableStyles} field={field} />}
         </>
       )}
diff --git a/packages/grafana-ui/src/components/Table/styles.ts b/packages/grafana-ui/src/components/Table/styles.ts
index 2ac5c0c7ef5..76adbf40729 100644
--- a/packages/grafana-ui/src/components/Table/styles.ts
+++ b/packages/grafana-ui/src/components/Table/styles.ts
@@ -92,6 +92,9 @@ export const getTableStyles = (theme: GrafanaTheme2) => {
       }
     `,
     headerCellLabel: css`
+      border: none;
+      padding: 0;
+      background: inherit;
       cursor: pointer;
       white-space: nowrap;
       overflow: hidden;