TablePanel: Make column headers keyboard-friendly (#44267)

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} />}
         </>
       )}

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;