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: Style now has focus state (#34422)

Browse Source
This commit is contained in:
sidverma 2021-05-19 22:42:06 +05:30 committed by GitHub
parent 4cbffae1b4
commit 3f0df997bc
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
packages/grafana-ui/src/components/Tabs/Tab.tsx
View File

@ -7,6 +7,7 @@ import { Icon } from '../Icon/Icon';
import { IconName } from '../../types'; import { IconName } from '../../types';
import { stylesFactory, useTheme2 } from '../../themes'; import { stylesFactory, useTheme2 } from '../../themes';
import { Counter } from './Counter'; import { Counter } from './Counter';
import { getFocusStyles } from '../../themes/mixins';
export interface TabProps extends HTMLProps<HTMLAnchorElement> { export interface TabProps extends HTMLProps<HTMLAnchorElement> {
label: string; label: string;
@ -62,15 +63,14 @@ const getTabStyles = stylesFactory((theme: GrafanaTheme2) => {
link: css` link: css`
color: ${theme.colors.text.secondary}; color: ${theme.colors.text.secondary};
padding: ${theme.spacing(1.5, 2, 1)}; padding: ${theme.spacing(1.5, 2, 1)};
display: block;
height: 100%;
svg { svg {
margin-right: ${theme.spacing(1)}; margin-right: ${theme.spacing(1)};
} }
a { &:focus-visible {
display: block; + ${getFocusStyles(theme)}
height: 100%;
color: ${theme.colors.text.secondary};
} }
`, `,
notActive: css` notActive: css`