From dff971672f8a3d6846cc30271a74e78072cc1885 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Laura=20Fern=C3=A1ndez?= Date: Thu, 9 Nov 2023 12:42:54 +0100 Subject: [PATCH] Accessibility: Fix keyboard focus indicator not visible on "Seach by Data source" list options in high contrast mode (#77878) --- .../grafana-ui/src/components/Select/getSelectStyles.ts | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/packages/grafana-ui/src/components/Select/getSelectStyles.ts b/packages/grafana-ui/src/components/Select/getSelectStyles.ts index d0a017089f9..420ccdfb15b 100644 --- a/packages/grafana-ui/src/components/Select/getSelectStyles.ts +++ b/packages/grafana-ui/src/components/Select/getSelectStyles.ts @@ -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,