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,