IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Accessibility: Improve keyboard accessibility of FilterPill (#58976)

Browse Source 
fix keyboard a11y in FilterPill
This commit is contained in:
Ashley Harrison 2022-11-21 09:29:41 +00:00 committed by GitHub
parent 598935cb34
commit 8aa74fe9ee
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 6 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
packages/grafana-ui/src/components/FilterPill/FilterPill.tsx
View File

@ -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};