From d8f423eb972cb71afedb95fc700cbbe7c56633a3 Mon Sep 17 00:00:00 2001 From: Darin Dimitroff Date: Fri, 23 Jun 2023 22:18:13 +0300 Subject: [PATCH] Fix breakpoints selected item styling (#1840) Added the proper `aria` attributes to two selectors to make sure the intended design renders correctly for the selected item. https://github.com/webstudio-is/webstudio-builder/assets/16368791/f6914be2-e5b5-49b5-bb5f-5425257b706b Pinging @taylornowotny for a quick review. Co-authored-by: Oleg Isonen --- packages/design-system/src/components/toolbar.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/design-system/src/components/toolbar.tsx b/packages/design-system/src/components/toolbar.tsx index 8e1eba8999..b4bac57f01 100644 --- a/packages/design-system/src/components/toolbar.tsx +++ b/packages/design-system/src/components/toolbar.tsx @@ -58,7 +58,7 @@ export const toggleItemStyle = css(textVariants.labelsTitleCase, { transition: "200ms background", "&:focus-visible": toolbarItemFocusRing, - "&:hover, &[data-state=on], &[data-state=open]": { + "&:hover, &[data-state=on], &[data-state=open], &[aria-checked=true]": { background: theme.colors.backgroundTopbarHover, }, variants: { @@ -69,7 +69,7 @@ export const toggleItemStyle = css(textVariants.labelsTitleCase, { variant: { subtle: { color: theme.colors.foregroundSubtle, - "&:hover, &[data-state=on]": { + "&:hover, &[data-state=on], &[aria-checked=true]": { color: "inherit", }, },