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: Fix keyboard focus indicator not visible on "Seach by Data source" list options in high contrast mode (#77878)

Browse Source
This commit is contained in:
Laura Fernández
2023-11-09 12:42:54 +01:00
committed by GitHub
parent 1253ae5dc4
commit dff971672f
1 changed files with 6 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
packages/grafana-ui/src/components/Select/getSelectStyles.ts
View File

@@ -27,6 +27,9 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
'&:hover': {
background: theme.colors.action.hover,
'@media (forced-colors: active), (prefers-contrast: more)': {
border: `1px solid ${theme.colors.primary.border}`,
},
},
}),
optionIcon: css({
@@ -55,6 +58,9 @@ export const getSelectStyles = stylesFactory((theme: GrafanaTheme2) => {
optionFocused: css({
label: 'grafana-select-option-focused',
background: theme.colors.action.focus,
'@media (forced-colors: active), (prefers-contrast: more)': {
border: `1px solid ${theme.colors.primary.border}`,
},
}),
optionSelected: css({
background: theme.colors.action.selected,