Merge pull request #26 from moroshko/focus-visible

Fix :focus-visible styles

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`])
     },

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`],

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}

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"

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",

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,

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": {

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),

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,

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": {

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
   }),

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,

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",