TapArea: support to VR visible focus style (#3783)

pinterest · Sep 27, 2024 · 6a0a3c4 · 6a0a3c4
1 parent 71bd621
commit 6a0a3c4
Show file tree

Hide file tree

Showing 6 changed files with 181 additions and 5 deletions.
diff --git a/docs/examples/taparea/focus.tsx b/docs/examples/taparea/focus.tsx
@@ -0,0 +1,130 @@
+import { Box, Flex, TapArea, Text } from 'gestalt';
+
+export default function TapAreaExample() {
+  return (
+    <Box padding={8} width="100%">
+      <Flex gap={6} width="100%">
+        <Flex direction="column" gap={6} width="100%">
+          <Box
+            alignItems="center"
+            borderStyle="sm"
+            display="flex"
+            height={150}
+            justifyContent="center"
+            width={150}
+          >
+            <TapArea focusColor="lightBackground" fullHeight={false} fullWidth={false}>
+              <Box height={100} width={100}>
+                <Text size="100">focusColor=lightBackground</Text>
+              </Box>
+            </TapArea>
+          </Box>
+
+          <Box
+            alignItems="center"
+            borderStyle="sm"
+            color="selected"
+            display="flex"
+            height={150}
+            justifyContent="center"
+            width={150}
+          >
+            <TapArea focusColor="darkBackground" fullHeight={false} fullWidth={false}>
+              <Box height={100} width={100}>
+                <Text color="inverse" size="100">
+                  focusColor=darkBackground
+                </Text>
+              </Box>
+            </TapArea>
+          </Box>
+        </Flex>
+        <Flex direction="column" gap={6} width="100%">
+          <Box
+            alignItems="center"
+            borderStyle="sm"
+            color="successWeak"
+            display="flex"
+            height={150}
+            justifyContent="center"
+            width={150}
+          >
+            <TapArea
+              focusColor="lightBackground"
+              fullHeight={false}
+              fullWidth={false}
+              innerFocusColor="default"
+            >
+              <Box height={100} width={100}>
+                <Text size="100">focusColor=lightBackground & innerFocusColor=default</Text>
+              </Box>
+            </TapArea>
+          </Box>
+
+          <Box
+            alignItems="center"
+            borderStyle="sm"
+            color="successBase"
+            display="flex"
+            height={150}
+            justifyContent="center"
+            width={150}
+          >
+            <TapArea
+              focusColor="darkBackground"
+              fullHeight={false}
+              fullWidth={false}
+              innerFocusColor="default"
+            >
+              <Box height={100} width={100}>
+                <Text size="100">focusColor=darkBackground & innerFocusColor=default</Text>
+              </Box>
+            </TapArea>
+          </Box>
+        </Flex>
+        <Flex direction="column" gap={6} width="100%">
+          <Box
+            alignItems="center"
+            borderStyle="sm"
+            color="successWeak"
+            display="flex"
+            height={150}
+            justifyContent="center"
+            width={150}
+          >
+            <TapArea
+              focusColor="lightBackground"
+              fullHeight={false}
+              fullWidth={false}
+              innerFocusColor="inverse"
+            >
+              <Box height={100} width={100}>
+                <Text size="100">focusColor=lightBackground & innerFocusColor=inverse</Text>
+              </Box>
+            </TapArea>
+          </Box>
+
+          <Box
+            alignItems="center"
+            borderStyle="sm"
+            color="successBase"
+            display="flex"
+            height={150}
+            justifyContent="center"
+            width={150}
+          >
+            <TapArea
+              focusColor="darkBackground"
+              fullHeight={false}
+              fullWidth={false}
+              innerFocusColor="inverse"
+            >
+              <Box height={100} width={100}>
+                <Text size="100">focusColor=darkBackground & innerFocusColor=inverse</Text>
+              </Box>
+            </TapArea>
+          </Box>
+        </Flex>
+      </Flex>
+    </Box>
+  );
+}
diff --git 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
           />
         </MainSection.Subsection>
 
+        <MainSection.Subsection title="Focus state">
+          <MainSection.Card
+            sandpackExample={<SandpackExample code={focus} name="Focus example" />}
+          />
+        </MainSection.Subsection>
+
         <MainSection.Subsection title="Height & width">
           <MainSection.Card
             sandpackExample={<SandpackExample code={heightWidth} name="Height & Width Example" />}

diff --git 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
@@ -207,7 +207,8 @@ const ButtonToggleWithForwardRef = forwardRef<HTMLButtonElement, Props>(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
@@ -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
@@ -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<HTMLDivElement, Props>(function TapArea
     children,
     dataTestId,
     disabled = false,
+    focusColor = 'lightBackground',
     fullHeight,
     fullWidth = true,
+    innerFocusColor,
     mouseCursor = 'pointer',
     onBlur,
     onKeyDown,
@@ -213,7 +225,16 @@ const TapAreaWithForwardRef = forwardRef<HTMLDivElement, Props>(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,