diff --git a/package-lock.json b/package-lock.json
index 60b8e423..12ece0d9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
 {
   "name": "basis",
-  "version": "1.14.5",
+  "version": "1.15.0",
   "lockfileVersion": 1,
   "requires": true,
   "dependencies": {
diff --git a/src/components/Button.js b/src/components/Button.js
index a48db266..a8416941 100644
--- a/src/components/Button.js
+++ b/src/components/Button.js
@@ -60,12 +60,7 @@ function Button(props) {
     ...theme.button,
     ...(fullWidth && theme["button.fullWidth"]),
     ...theme[`button.${variant}.${colorStr}`],
-    ":focus": theme["button:focus"],
-    ":focus-visible": theme["button:focus-visible"],
-    ...(__internal__keyboardFocus && {
-      ...theme["button:focus"],
-      ...theme["button:focus-visible"]
-    }),
+    ...(__internal__keyboardFocus && theme.focusStyles.__keyboardFocus),
     ":hover": {
       ...(!disabled && theme[`button.${variant}.${colorStr}:hover`])
     },
diff --git a/src/components/Link.js b/src/components/Link.js
index 637304fc..679274e0 100644
--- a/src/components/Link.js
+++ b/src/components/Link.js
@@ -64,12 +64,7 @@ function Link(props) {
     ...theme.link,
     ...theme[`link.${variant}`],
     ...theme[`link.${variant}.${colorStr}`],
-    ":focus": theme["link:focus"],
-    ":focus-visible": theme["link:focus-visible"],
-    ...(__internal__keyboardFocus && {
-      ...theme["link:focus"],
-      ...theme["link:focus-visible"]
-    }),
+    ...(__internal__keyboardFocus && theme.focusStyles.__keyboardFocus),
     ":hover": theme[`link.${variant}.${colorStr}:hover`],
     ...(__internal__hover && theme[`link.${variant}.${colorStr}:hover`]),
     ":active": theme[`link.${variant}.${colorStr}:active`],
diff --git a/src/components/internal/InternalCheckbox.js b/src/components/internal/InternalCheckbox.js
index 8f0b8a04..b6c893bf 100644
--- a/src/components/internal/InternalCheckbox.js
+++ b/src/components/internal/InternalCheckbox.js
@@ -82,7 +82,7 @@ function InternalCheckbox(_props) {
       <VisuallyHidden>
         <input
           css={{
-            ":focus-visible + label": theme["checkboxLabel.focus-visible"],
+            ...theme.checkboxInput,
             ":checked + label": theme["checkboxLabel.checked"]
           }}
           type="checkbox"
@@ -100,7 +100,8 @@ function InternalCheckbox(_props) {
         css={{
           ...theme.checkboxLabel,
           ...theme[`checkboxLabel.${color}`],
-          ...(__internal__keyboardFocus && theme["checkboxLabel.focus-visible"])
+          ...(__internal__keyboardFocus &&
+            theme.focusStyles.__keyboardFocusAdjacentLabel)
         }}
         htmlFor={inputId}
         onMouseDown={onMouseDown}
diff --git a/src/components/internal/InternalRadioGroup.js b/src/components/internal/InternalRadioGroup.js
index 348d913d..89c50955 100644
--- a/src/components/internal/InternalRadioGroup.js
+++ b/src/components/internal/InternalRadioGroup.js
@@ -68,8 +68,7 @@ function Radio({
       <VisuallyHidden>
         <input
           css={{
-            ":focus-visible + label":
-              theme["radioGroupRadioLabel.focus-visible"],
+            ...theme.radioGroupRadioInput,
             ":checked + label": theme["radioGroupRadioLabel.checked"]
           }}
           type="radio"
diff --git a/src/themes/default/accordion.js b/src/themes/default/accordion.js
index c49e598b..3a29c5b1 100644
--- a/src/themes/default/accordion.js
+++ b/src/themes/default/accordion.js
@@ -25,16 +25,7 @@ export default theme => ({
     ...textStyles(theme)["subtitle2"],
     ...textStyles(theme)["subtitle2.bold"],
     position: "relative", // Without this, when the Accordion.Item is open, the box shadow is covered by Accordion.Item.Content.
-    ":focus": {
-      outline: 0,
-      boxShadow: theme.shadows.focus
-    },
-    ":focus:not(:focus-visible)": {
-      boxShadow: "none"
-    },
-    ":focus-visible": {
-      boxShadow: theme.shadows.focus
-    }
+    ...theme.focusStyles.focusVisible
   },
   accordionHeaderContent: {
     display: "flex",
diff --git a/src/themes/default/button.js b/src/themes/default/button.js
index 3b7ebf90..81b46bbf 100644
--- a/src/themes/default/button.js
+++ b/src/themes/default/button.js
@@ -5,21 +5,16 @@ export default theme => ({
     fontFamily: theme.fonts.body,
     fontWeight: theme.fontWeights.medium,
     border: 0,
-    borderRadius: theme.radii[1],
     padding: `0 ${theme.space[6]}`,
     minHeight: "48px",
     overflow: "hidden",
-    transition: theme.transitions.button
+    transition: theme.transitions.button,
+    borderRadius: theme.radii[1],
+    ...theme.focusStyles.focusVisible
   },
   "button.fullWidth": {
     width: "100%"
   },
-  "button:focus": {
-    outline: 0
-  },
-  "button:focus-visible": {
-    boxShadow: theme.shadows.focus
-  },
   "button:disabled": {
     backgroundColor: theme.colors.grey.t30,
     color: theme.colors.grey.t75,
diff --git a/src/themes/default/checkbox.js b/src/themes/default/checkbox.js
index 9d75c394..ba8b895b 100644
--- a/src/themes/default/checkbox.js
+++ b/src/themes/default/checkbox.js
@@ -4,6 +4,9 @@ export default theme => ({
     flexDirection: "column",
     flex: 1
   },
+  checkboxInput: {
+    ...theme.focusStyles.focusVisibleAdjacentLabel
+  },
   checkboxLabel: {
     display: "inline-flex",
     alignItems: "flex-start",
@@ -13,10 +16,7 @@ export default theme => ({
     fontWeight: theme.fontWeights.light,
     lineHeight: theme.lineHeights[2],
     fontFamily: theme.fonts.body,
-    color: theme.colors.black
-  },
-  "checkboxLabel.focus-visible": {
-    boxShadow: theme.shadows.focus,
+    color: theme.colors.black,
     borderRadius: theme.radii[0]
   },
   "checkboxLabel.checked": {
diff --git a/src/themes/default/index.js b/src/themes/default/index.js
index 95fe0f85..17836867 100644
--- a/src/themes/default/index.js
+++ b/src/themes/default/index.js
@@ -196,6 +196,46 @@ theme.shadows = {
   focus: `0 0 0px ${theme.radii[1]} ${theme.colors.secondary.lightBlue.t80}`
 };
 
+theme.focusStyles = {
+  // https://github.com/WICG/focus-visible#backwards-compatibility
+  focusVisible: {
+    // Provide basic, default focus styles.
+    ":focus": {
+      outline: 0,
+      boxShadow: theme.shadows.focus
+    },
+    // Remove default focus styles for mouse users ONLY if :focus-visible is supported on this platform.
+    ":focus:not(:focus-visible)": {
+      boxShadow: "none"
+    },
+    // If :focus-visible is supported on this platform, provide enhanced focus styles for keyboard focus.
+    ":focus-visible": {
+      boxShadow: theme.shadows.focus
+    }
+  },
+  focusVisibleAdjacentLabel: {
+    ":focus + label": {
+      boxShadow: theme.shadows.focus
+    },
+    ":focus:not(:focus-visible) + label": {
+      boxShadow: "none"
+    },
+    ":focus-visible + label": {
+      boxShadow: theme.shadows.focus
+    }
+  }
+};
+
+theme.focusStyles.__keyboardFocus = {
+  ...theme.focusStyles.focusVisible[":focus"],
+  ...theme.focusStyles.focusVisible[":focus-visible"]
+};
+
+theme.focusStyles.__keyboardFocusAdjacentLabel = {
+  ...theme.focusStyles.focusVisibleAdjacentLabel[":focus + label"],
+  ...theme.focusStyles.focusVisibleAdjacentLabel[":focus-visible + label"]
+};
+
 export default {
   ...theme,
   ...accordion(theme),
diff --git a/src/themes/default/link.js b/src/themes/default/link.js
index f2f2e105..3b5bb7a0 100644
--- a/src/themes/default/link.js
+++ b/src/themes/default/link.js
@@ -2,14 +2,9 @@ import { rgba } from "polished";
 
 export default theme => ({
   link: {
-    textDecoration: "none"
-  },
-  "link:focus": {
-    outline: 0
-  },
-  "link:focus-visible": {
+    textDecoration: "none",
     borderRadius: theme.radii[0],
-    boxShadow: theme.shadows.focus
+    ...theme.focusStyles.focusVisible
   },
   "link.text": {
     fontFamily: theme.fonts.body,
diff --git a/src/themes/default/radioGroup.js b/src/themes/default/radioGroup.js
index 2cb04038..b9e60598 100644
--- a/src/themes/default/radioGroup.js
+++ b/src/themes/default/radioGroup.js
@@ -3,6 +3,9 @@ export default theme => ({
     display: "flex",
     flexDirection: "column"
   },
+  radioGroupRadioInput: {
+    ...theme.focusStyles.focusVisibleAdjacentLabel
+  },
   radioGroupRadioLabel: {
     display: "inline-flex",
     alignItems: "center",
@@ -14,10 +17,7 @@ export default theme => ({
     lineHeight: theme.lineHeights[2],
     fontFamily: theme.fonts.body,
     color: theme.colors.black,
-    overflow: "hidden"
-  },
-  "radioGroupRadioLabel.focus-visible": {
-    boxShadow: theme.shadows.focus,
+    overflow: "hidden",
     borderRadius: theme.radii[0]
   },
   "radioGroupRadioLabel.checked": {
diff --git a/website/src/components/kitchen-sink/DatePicker.js b/website/src/components/kitchen-sink/DatePicker.js
index 5818f178..17dda55e 100644
--- a/website/src/components/kitchen-sink/DatePicker.js
+++ b/website/src/components/kitchen-sink/DatePicker.js
@@ -28,7 +28,7 @@ FormWithDatePicker.propTypes = {
   label: PropTypes.string,
   day: PropTypes.bool,
   initialValue: PropTypes.shape({
-    day: PropTypes.string.isRequired,
+    day: PropTypes.string,
     month: PropTypes.string.isRequired,
     year: PropTypes.string.isRequired
   }),
diff --git a/website/src/themes/website/button.js b/website/src/themes/website/button.js
index 56ec2a13..3cd8b1cb 100644
--- a/website/src/themes/website/button.js
+++ b/website/src/themes/website/button.js
@@ -9,13 +9,8 @@ export default theme => ({
     minHeight: "32px",
     overflow: "hidden",
     transition:
-      "transform 100ms ease, color 100ms ease, border-color 100ms ease"
-  },
-  "button:focus": {
-    outline: 0
-  },
-  "button:focus-visible": {
-    boxShadow: theme.shadows.focus
+      "transform 100ms ease, color 100ms ease, border-color 100ms ease",
+    ...theme.focusStyles.focusVisible
   },
   "button:disabled": {
     opacity: 0.4,
diff --git a/website/src/themes/website/link.js b/website/src/themes/website/link.js
index 7b71c269..4bc22028 100644
--- a/website/src/themes/website/link.js
+++ b/website/src/themes/website/link.js
@@ -1,14 +1,9 @@
 export default theme => ({
   link: {
     display: "inline-block",
-    textDecoration: "none"
-  },
-  "link:focus": {
-    outline: 0
-  },
-  "link:focus-visible": {
+    textDecoration: "none",
     borderRadius: theme.radii[0],
-    boxShadow: theme.shadows.focus
+    ...theme.focusStyles.focusVisible
   },
   "link.text": {
     fontFamily: "inherit",