From 7b6b5f189f552b0ae4ded68a70992880785b373a Mon Sep 17 00:00:00 2001 From: Misha Moroshko Date: Tue, 3 Mar 2020 22:04:49 +1100 Subject: [PATCH] Fix :focus-visible styles --- package-lock.json | 2 +- src/components/Button.js | 7 +--- src/components/Link.js | 7 +--- src/components/internal/InternalCheckbox.js | 5 ++- src/components/internal/InternalRadioGroup.js | 3 +- src/themes/default/accordion.js | 11 +---- src/themes/default/button.js | 11 ++--- src/themes/default/checkbox.js | 8 ++-- src/themes/default/index.js | 40 +++++++++++++++++++ src/themes/default/link.js | 9 +---- src/themes/default/radioGroup.js | 8 ++-- .../src/components/kitchen-sink/DatePicker.js | 2 +- website/src/themes/website/button.js | 9 +---- website/src/themes/website/link.js | 9 +---- 14 files changed, 66 insertions(+), 65 deletions(-) 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) { ({ ...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",