From 8aa74fe9ee93722e585f4d0e6011997e6d4c97f0 Mon Sep 17 00:00:00 2001
From: Ashley Harrison <ashley.harrison@grafana.com>
Date: Mon, 21 Nov 2022 09:29:41 +0000
Subject: [PATCH] Accessibility: Improve keyboard accessibility of `FilterPill`
 (#58976)

fix keyboard a11y in FilterPill
---
 .../src/components/FilterPill/FilterPill.tsx          | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
index c1a36603a06..6797f0cf3b9 100644
--- a/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
+++ b/packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
@@ -5,6 +5,7 @@ import { GrafanaTheme2 } from '@grafana/data';
 
 import { useStyles2 } from '../../themes';
 import { IconName } from '../../types';
+import { clearButtonStyles } from '../Button';
 import { Icon } from '../Icon/Icon';
 
 export interface FilterPillProps {
@@ -16,28 +17,28 @@ export interface FilterPillProps {
 
 export const FilterPill: React.FC<FilterPillProps> = ({ label, selected, onClick, icon = 'check' }) => {
   const styles = useStyles2(getStyles);
+  const clearButton = useStyles2(clearButtonStyles);
   return (
-    <div className={cx(styles.wrapper, selected && styles.selected)} onClick={onClick}>
+    <button type="button" className={cx(clearButton, styles.wrapper, selected && styles.selected)} onClick={onClick}>
       <span>{label}</span>
       {selected && <Icon name={icon} className={styles.icon} />}
-    </div>
+    </button>
   );
 };
 
 const getStyles = (theme: GrafanaTheme2) => {
   return {
     wrapper: css`
-      padding: ${theme.spacing(0.25)} ${theme.spacing(1)};
       background: ${theme.colors.background.secondary};
       border-radius: ${theme.shape.borderRadius(8)};
       padding: ${theme.spacing(0, 2)};
+      font-size: ${theme.typography.bodySmall.fontSize};
       font-weight: ${theme.typography.fontWeightMedium};
-      font-size: ${theme.typography.size.sm};
+      line-height: ${theme.typography.bodySmall.lineHeight};
       color: ${theme.colors.text.secondary};
       display: flex;
       align-items: center;
       height: 32px;
-      cursor: pointer;
 
       &:hover {
         background: ${theme.colors.action.hover};