From 6a0a3c4a1cb07dd944ecc5f985dab4675067e03a Mon Sep 17 00:00:00 2001 From: Alberto Carreras <10593890+AlbertCarreras@users.noreply.github.com> Date: Fri, 27 Sep 2024 21:01:05 +0200 Subject: [PATCH] TapArea: support to VR visible focus style (#3783) --- docs/examples/taparea/focus.tsx | 130 ++++++++++++++++++++++++++ docs/pages/web/taparea.tsx | 7 ++ packages/gestalt/src/ButtonToggle.css | 2 +- packages/gestalt/src/ButtonToggle.tsx | 3 +- packages/gestalt/src/Focus.css | 21 ++++- packages/gestalt/src/TapArea.tsx | 23 ++++- 6 files changed, 181 insertions(+), 5 deletions(-) create mode 100644 docs/examples/taparea/focus.tsx diff --git a/docs/examples/taparea/focus.tsx b/docs/examples/taparea/focus.tsx new file mode 100644 index 0000000000..215d2cbcd9 --- /dev/null +++ b/docs/examples/taparea/focus.tsx @@ -0,0 +1,130 @@ +import { Box, Flex, TapArea, Text } from 'gestalt'; + +export default function TapAreaExample() { + return ( + + + + + + + focusColor=lightBackground + + + + + + + + + focusColor=darkBackground + + + + + + + + + + focusColor=lightBackground & innerFocusColor=default + + + + + + + + focusColor=darkBackground & innerFocusColor=default + + + + + + + + + focusColor=lightBackground & innerFocusColor=inverse + + + + + + + + focusColor=darkBackground & innerFocusColor=inverse + + + + + + + ); +} diff --git a/docs/pages/web/taparea.tsx b/docs/pages/web/taparea.tsx index c9f4862c6c..de390c618e 100644 --- a/docs/pages/web/taparea.tsx +++ b/docs/pages/web/taparea.tsx @@ -12,6 +12,7 @@ import QualityChecklist from '../../docs-components/QualityChecklist'; import SandpackExample from '../../docs-components/SandpackExample'; import accessibility from '../../examples/taparea/accessibility'; import compressBehavior from '../../examples/taparea/compressBehavior'; +import focus from '../../examples/taparea/focus'; import fullSpace from '../../examples/taparea/fullSpace'; import heightWidth from '../../examples/taparea/heightWidth'; import inlineUsage from '../../examples/taparea/inlineUsage'; @@ -70,6 +71,12 @@ TapArea with link interaction can be paired with GlobalEventsHandlerProvider. Se /> + + } + /> + + } diff --git a/packages/gestalt/src/ButtonToggle.css b/packages/gestalt/src/ButtonToggle.css index 35a06d6acf..60f3c1a4ed 100644 --- a/packages/gestalt/src/ButtonToggle.css +++ b/packages/gestalt/src/ButtonToggle.css @@ -144,7 +144,7 @@ margin: calc(var(--g-border-width-lg) / 2 * -1); } -.accessibilityOutlineVr { +.accessibilityOutlineLightBackground { border-color: var(--sema-color-border-focus-inner-default); outline: 2px solid var(--sema-color-border-focus-outer-default); outline-offset: 2px; diff --git a/packages/gestalt/src/ButtonToggle.tsx b/packages/gestalt/src/ButtonToggle.tsx index 2dc41f8de0..7793531e9b 100644 --- a/packages/gestalt/src/ButtonToggle.tsx +++ b/packages/gestalt/src/ButtonToggle.tsx @@ -207,7 +207,8 @@ const ButtonToggleWithForwardRef = forwardRef(function { [focusStyles.hideOutline]: !disabled && !isFocusVisible, [focusStyles.accessibilityOutline]: !disabled && isFocusVisible && !isInVRExperiment, - [styles.accessibilityOutlineVr]: !disabled && isFocused && isFocusVisible && isInVRExperiment, + [styles.accessibilityOutlineLightBackground]: + !disabled && isFocused && isFocusVisible && isInVRExperiment, }, ); diff --git a/packages/gestalt/src/Focus.css b/packages/gestalt/src/Focus.css index fb4a34c570..65ed053bcd 100644 --- a/packages/gestalt/src/Focus.css +++ b/packages/gestalt/src/Focus.css @@ -3,8 +3,13 @@ outline-offset: 0; } -.accessibilityOutlineVR:focus { - outline: 2px solid var(--color-border-focus); +.accessibilityOutlineLightBackground:focus { + outline: 2px solid var(--sema-color-border-focus-outer-default); + outline-offset: 0; +} + +.accessibilityOutlineDarkBackground:focus { + outline: 2px solid var(--sema-color-border-focus-outer-light); outline-offset: 0; } @@ -13,6 +18,18 @@ outline-offset: 0; } +.accessibilityOutlineBorderDefault:focus { + border: 2px solid var(--sema-color-border-focus-inner-light); +} + +.accessibilityOutlineBorder { + border: 2px solid var(--base-color-transparent); +} + +.accessibilityOutlineBorderInverse:focus { + border: 2px solid var(--sema-color-border-focus-inner-dark); +} + .accessibilityOutlineFocusWithin .accessibilityOutline:focus { outline: 0; } diff --git a/packages/gestalt/src/TapArea.tsx b/packages/gestalt/src/TapArea.tsx index 1ffbb4b58e..f2d472419d 100644 --- a/packages/gestalt/src/TapArea.tsx +++ b/packages/gestalt/src/TapArea.tsx @@ -61,6 +61,16 @@ type Props = { * Set disabled state so TapArea cannot be interacted with and actions are not available. */ disabled?: boolean; + /** + * Indicates whether this component is hosted in a light or dark container. + * Used for improving focus ring color contrast. + */ + focusColor?: 'lightBackground' | 'darkBackground'; + /** + * Indicates whether this component presents a light ('default') or dark ('inverse') inner focus border when focused. + * Used for improving focus ring color contrast. + */ + innerFocusColor?: 'default' | 'inverse'; /** * Set the TapArea height to expand to the full height of the parent. */ @@ -164,8 +174,10 @@ const TapAreaWithForwardRef = forwardRef(function TapArea children, dataTestId, disabled = false, + focusColor = 'lightBackground', fullHeight, fullWidth = true, + innerFocusColor, mouseCursor = 'pointer', onBlur, onKeyDown, @@ -213,7 +225,16 @@ const TapAreaWithForwardRef = forwardRef(function TapArea const buttonRoleClasses = classnames(styles.tapTransition, getRoundingClassName(rounding), { [focusStyles.hideOutline]: !disabled && !isFocusVisible, [focusStyles.accessibilityOutline]: !isInVRExperiment && !disabled && isFocusVisible, - [focusStyles.accessibilityOutlineVR]: isInVRExperiment && !disabled && isFocusVisible, + [focusStyles.accessibilityOutlineLightBackground]: + isInVRExperiment && focusColor === 'lightBackground' && !disabled && isFocusVisible, + [focusStyles.accessibilityOutlineDarkBackground]: + isInVRExperiment && focusColor === 'darkBackground' && !disabled && isFocusVisible, + [focusStyles.accessibilityOutlineBorder]: + isInVRExperiment && innerFocusColor === 'default' && !disabled && !isFocusVisible, + [focusStyles.accessibilityOutlineBorderDefault]: + isInVRExperiment && innerFocusColor === 'default' && !disabled && isFocusVisible, + [focusStyles.accessibilityOutlineBorderInverse]: + isInVRExperiment && innerFocusColor === 'inverse' && !disabled && isFocusVisible, [styles.fullHeight]: fullHeight, [styles.fullWidth]: fullWidth, [styles.copy]: mouseCursor === 'copy' && !disabled,