From 6756cfd1aa7591265a3046a0494e70a1d9467aee Mon Sep 17 00:00:00 2001 From: natai nakata Date: Sun, 29 Sep 2024 11:21:03 +0900 Subject: [PATCH 1/5] fix: high contrast mode support for action bar vfis --- .../src/components/components/ActionBar/ActionBar.tsx | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/code/core/src/components/components/ActionBar/ActionBar.tsx b/code/core/src/components/components/ActionBar/ActionBar.tsx index 6e3d15077e41..beeb7b2b4c8b 100644 --- a/code/core/src/components/components/ActionBar/ActionBar.tsx +++ b/code/core/src/components/components/ActionBar/ActionBar.tsx @@ -46,6 +46,14 @@ export const ActionButton = styled.button<{ disabled: boolean }>( boxShadow: `${theme.color.secondary} 0 -3px 0 0 inset`, outline: '0 none', }, + + '@media (forced-colors: active)': { + '&:focus': { + outlineColor: 'transparent', + outlineWidth: '1px', + outlineStyle: 'solid', + }, + }, }), ({ disabled }) => disabled && { From 83662aa6c91411a78f82f2a2db59769fcddc045f Mon Sep 17 00:00:00 2001 From: natai nakata Date: Sun, 29 Sep 2024 12:19:22 +0900 Subject: [PATCH 2/5] fix: high contrast mode support for input --- code/core/src/components/components/form/input/input.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/code/core/src/components/components/form/input/input.tsx b/code/core/src/components/components/form/input/input.tsx index b32381ff107d..ecefaac40803 100644 --- a/code/core/src/components/components/form/input/input.tsx +++ b/code/core/src/components/components/form/input/input.tsx @@ -61,6 +61,11 @@ const styles = (({ theme }: { theme: StorybookTheme }) => ({ boxShadow: `${theme.color.secondary} 0 0 0 1px inset`, outline: 'none', }, + '@media (forced-colors: active)': { + '&:focus': { + border: '1px solid transparent', + }, + }, '&[disabled]': { cursor: 'not-allowed', opacity: 0.5, From 341b4fda123fd3731ef3b8ab2147e35fd91b31e3 Mon Sep 17 00:00:00 2001 From: natai nakata Date: Sun, 29 Sep 2024 12:46:40 +0900 Subject: [PATCH 3/5] fix: high contrast mode support for boolean --- code/lib/blocks/src/controls/Boolean.tsx | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/code/lib/blocks/src/controls/Boolean.tsx b/code/lib/blocks/src/controls/Boolean.tsx index 15bad5efd21d..1e94d506a0bf 100644 --- a/code/lib/blocks/src/controls/Boolean.tsx +++ b/code/lib/blocks/src/controls/Boolean.tsx @@ -45,6 +45,13 @@ const Label = styled.label(({ theme }) => ({ outline: 'none', boxShadow: `${theme.color.secondary} 0 0 0 1px inset !important`, }, + '@media (forced-colors: active)': { + '&:focus': { + outlineColor: 'transparent', + outlineWidth: '1px', + outlineStyle: 'solid', + }, + }, }, span: { @@ -88,6 +95,11 @@ const Label = styled.label(({ theme }) => ({ color: theme.color.defaultText, padding: '7px 15px', }, + '@media (forced-colors: active)': { + 'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': { + textDecoration: 'underline', + }, + }, })); const parse = (value: string | null): boolean => value === 'true'; From 56e246ed885d0ebca18ed1aa2d0650567b5e2d0c Mon Sep 17 00:00:00 2001 From: natai nakata Date: Sun, 29 Sep 2024 14:24:12 +0900 Subject: [PATCH 4/5] style: unified in outline after review. --- code/core/src/components/components/ActionBar/ActionBar.tsx | 4 +--- code/core/src/components/components/form/input/input.tsx | 2 +- code/lib/blocks/src/controls/Boolean.tsx | 4 +--- 3 files changed, 3 insertions(+), 7 deletions(-) diff --git a/code/core/src/components/components/ActionBar/ActionBar.tsx b/code/core/src/components/components/ActionBar/ActionBar.tsx index beeb7b2b4c8b..2b3f3fe6268b 100644 --- a/code/core/src/components/components/ActionBar/ActionBar.tsx +++ b/code/core/src/components/components/ActionBar/ActionBar.tsx @@ -49,9 +49,7 @@ export const ActionButton = styled.button<{ disabled: boolean }>( '@media (forced-colors: active)': { '&:focus': { - outlineColor: 'transparent', - outlineWidth: '1px', - outlineStyle: 'solid', + outline: '1px solid highlight', }, }, }), diff --git a/code/core/src/components/components/form/input/input.tsx b/code/core/src/components/components/form/input/input.tsx index ecefaac40803..27be6603435f 100644 --- a/code/core/src/components/components/form/input/input.tsx +++ b/code/core/src/components/components/form/input/input.tsx @@ -63,7 +63,7 @@ const styles = (({ theme }: { theme: StorybookTheme }) => ({ }, '@media (forced-colors: active)': { '&:focus': { - border: '1px solid transparent', + outline: '1px solid highlight', }, }, '&[disabled]': { diff --git a/code/lib/blocks/src/controls/Boolean.tsx b/code/lib/blocks/src/controls/Boolean.tsx index 1e94d506a0bf..cee3af0abb64 100644 --- a/code/lib/blocks/src/controls/Boolean.tsx +++ b/code/lib/blocks/src/controls/Boolean.tsx @@ -47,9 +47,7 @@ const Label = styled.label(({ theme }) => ({ }, '@media (forced-colors: active)': { '&:focus': { - outlineColor: 'transparent', - outlineWidth: '1px', - outlineStyle: 'solid', + outline: '1px solid highlight', }, }, }, From c8bb4830416ea0ea9f24f5b2993ca45ffcf554e5 Mon Sep 17 00:00:00 2001 From: natai nakata Date: Wed, 2 Oct 2024 08:40:42 +0900 Subject: [PATCH 5/5] chore: nested media queries --- code/core/src/components/components/ActionBar/ActionBar.tsx | 4 +--- code/core/src/components/components/form/input/input.tsx | 5 ++--- code/lib/blocks/src/controls/Boolean.tsx | 5 ++--- 3 files changed, 5 insertions(+), 9 deletions(-) diff --git a/code/core/src/components/components/ActionBar/ActionBar.tsx b/code/core/src/components/components/ActionBar/ActionBar.tsx index 2b3f3fe6268b..d29bb020dbaf 100644 --- a/code/core/src/components/components/ActionBar/ActionBar.tsx +++ b/code/core/src/components/components/ActionBar/ActionBar.tsx @@ -45,10 +45,8 @@ export const ActionButton = styled.button<{ disabled: boolean }>( '&:focus': { boxShadow: `${theme.color.secondary} 0 -3px 0 0 inset`, outline: '0 none', - }, - '@media (forced-colors: active)': { - '&:focus': { + '@media (forced-colors: active)': { outline: '1px solid highlight', }, }, diff --git a/code/core/src/components/components/form/input/input.tsx b/code/core/src/components/components/form/input/input.tsx index 27be6603435f..7542f77daade 100644 --- a/code/core/src/components/components/form/input/input.tsx +++ b/code/core/src/components/components/form/input/input.tsx @@ -60,12 +60,11 @@ const styles = (({ theme }: { theme: StorybookTheme }) => ({ '&:focus': { boxShadow: `${theme.color.secondary} 0 0 0 1px inset`, outline: 'none', - }, - '@media (forced-colors: active)': { - '&:focus': { + '@media (forced-colors: active)': { outline: '1px solid highlight', }, }, + '&[disabled]': { cursor: 'not-allowed', opacity: 0.5, diff --git a/code/lib/blocks/src/controls/Boolean.tsx b/code/lib/blocks/src/controls/Boolean.tsx index cee3af0abb64..001f8dee36d3 100644 --- a/code/lib/blocks/src/controls/Boolean.tsx +++ b/code/lib/blocks/src/controls/Boolean.tsx @@ -92,9 +92,8 @@ const Label = styled.label(({ theme }) => ({ : `${theme.appBorderColor} 0 0 0 1px`, color: theme.color.defaultText, padding: '7px 15px', - }, - '@media (forced-colors: active)': { - 'input:checked ~ span:last-of-type, input:not(:checked) ~ span:first-of-type': { + + '@media (forced-colors: active)': { textDecoration: 'underline', }, },