Focus (#296)

* Playing around with focus-visible * Add full dummy example with focus-visible polyfill * ♻️ Use focus-visible polyfill * ♻️ Use standard outline design for chips * ♻️ Use focus-visible polyfill for Chips * ♻️ Use focus-visible polyfill for buttons * ♻️ Update tabs to use focus-visible polyfill * 🔥 Remove dummy box example * Avoid firefox's stupid inline focus dashed border for buttons * :fix: Fix copy'n paste prettier woo * Add documentation for focus-visible polyfill
equinor · Apr 16, 2020 · 36a1150 · 36a1150
1 parent 6b3cd1c
commit 36a1150
Show file tree

Hide file tree

Showing 15 changed files with 98 additions and 119 deletions.
diff --git a/COMPONENT_GUIDELINES.md b/COMPONENT_GUIDELINES.md
@@ -10,3 +10,18 @@
 - Keep the component as simple as possible
 - Always get in touch with one of the lead developers before you start work on a component
 - Components issues labelled ["storefront"](//github.com/equinor/design-system/issues?q=milestone%3A%22EDS+Core+React%22+label%3Astorefront) have the highest priority
+- Remember to add code for `:focus-visible`. This is an [upcoming feature](https://css-tricks.com/almanac/selectors/f/focus-visible/) to CSS and is currently globally polyfilled for in eds-core-react.
+
+  - The main goal is to distinguish between pointer events and keyboard navigation
+  - To use in your component, add
+
+  ```css
+  &:focus {
+    outline: none;
+  }
+
+  &[data-focus-visible-added]:focus {
+    outline: ${outline}; /** 1px dashed rgba(0, 112, 121, 1) */
+    outline-offset: ${outlineOffset}; /** 2px */
+  }
+  ```
diff --git a/apps/storybook-react/stories/Chips.stories.jsx b/apps/storybook-react/stories/Chips.stories.jsx
@@ -47,7 +47,7 @@ export const Examples = () => (
         error + deletable
       </Chip>
       <Chip variant="error" onDelete={handleDelete} onClick={handleClick}>
-        error + deletable
+        error + deletable + clickable
       </Chip>
       <Chip onClick={handleClick}>clickable</Chip>
       <Chip onDelete={handleDelete}>deletable</Chip>
@@ -83,7 +83,7 @@ export const Examples = () => (
       </Chip>
       <Chip variant="error" onDelete={handleDelete} onClick={handleClick}>
         <Icon name="save" />
-        error + deletable
+        error + deletable + clickable
       </Chip>
       <Chip onClick={handleClick}>
         <Icon name="save" />

diff --git a/libraries/core-react/package.json b/libraries/core-react/package.json
@@ -54,6 +54,7 @@
     "rollup-plugin-commonjs": "^9.3.4",
     "rollup-plugin-json": "^4.0.0",
     "rollup-plugin-node-resolve": "^4.2.4",
+    "rollup-plugin-polyfill": "^3.0.0",
     "styled-components": "^4.4.1"
   },
   "peerDependencies": {
@@ -72,8 +73,8 @@
     "@equinor/eds-icons": "workspace:*",
     "@equinor/eds-tokens": "workspace:*",
     "@testing-library/react-hooks": "^3.2.1",
-    "lodash.uniqueid": "^4.0.1",
-    "@equinor/eds-icons": "workspace:*"
+    "focus-visible": "^5.1.0",
+    "lodash.uniqueid": "^4.0.1"
   },
   "engines": {
     "pnpm": ">=4"

diff --git a/libraries/core-react/pnpm-lock.yaml b/libraries/core-react/pnpm-lock.yaml
diff --git a/libraries/core-react/rollup.config.js b/libraries/core-react/rollup.config.js
@@ -3,6 +3,7 @@ import resolve from 'rollup-plugin-node-resolve'
 import commonjs from 'rollup-plugin-commonjs'
 import json from 'rollup-plugin-json'
 import babel from 'rollup-plugin-babel'
+import polyfill from 'rollup-plugin-polyfill'
 import pkg from './package.json'
 
 const peerDeps = Object.keys(pkg.peerDependencies || {})
@@ -31,6 +32,7 @@ export default [
         plugins: ['babel-plugin-styled-components'],
       }),
       commonjs(),
+      polyfill(['focus-visible']),
     ],
     output: [
       {

diff --git a/libraries/core-react/src/Accordion/Accordion.jsx b/libraries/core-react/src/Accordion/Accordion.jsx
@@ -1,4 +1,4 @@
-import React, { forwardRef, useMemo, useState } from 'react'
+import React, { forwardRef, useMemo } from 'react'
 import createId from 'lodash.uniqueid'
 import { commonPropTypes, commonDefaultProps } from './Accordion.propTypes'
 
@@ -8,20 +8,12 @@ const Accordion = forwardRef(function Accordion(
 ) {
   const accordionId = useMemo(() => createId('accordion-'), [])
 
-  const [focusVisible, setFocusVisible] = useState(true)
-
-  const handleFocusVisible = (isFocusVisible) => {
-    setFocusVisible(isFocusVisible)
-  }
-
   const AccordionItems = React.Children.map(children, (child, index) => {
     return React.cloneElement(child, {
       accordionId,
       index,
       headerLevel,
       chevronPosition,
-      focusVisible,
-      handleFocusVisible,
     })
   })
 

diff --git a/libraries/core-react/src/Accordion/AccordionHeader.jsx b/libraries/core-react/src/Accordion/AccordionHeader.jsx
@@ -29,7 +29,7 @@ const StyledAccordionHeader = styled.div.attrs(
     'aria-disabled': isExpanded && disabled,
     tabIndex: disabled ? '-1' : '0',
   }),
-)(({ parentIndex, disabled, focusVisible }) => ({
+)(({ parentIndex, disabled }) => ({
   ...header,
   margin: 0,
   height: '48px',
@@ -42,11 +42,10 @@ const StyledAccordionHeader = styled.div.attrs(
   boxSizing: 'border-box',
   color: (disabled && headerColor.disabled) || headerColor.default,
   outline: 'none',
-  '&:focus': !disabled &&
-    focusVisible && {
-      outline,
-      outlineOffset,
-    },
+  '&[data-focus-visible-added]:focus': {
+    outline,
+    outlineOffset,
+  },
   '&:hover': !disabled && { background: headerBackground.hover },
   cursor: disabled ? 'not-allowed' : 'pointer',
   paddingLeft: '16px',
@@ -81,26 +80,18 @@ const AccordionHeader = forwardRef(function AccordionHeader(
     children,
     toggleExpanded,
     disabled,
-    focusVisible,
-    handleFocusVisible,
     ...props
   },
   ref,
 ) {
   const handleClick = () => {
-    handleFocusVisible(false)
     if (!disabled) {
       toggleExpanded()
     }
   }
 
-  const handleMouseDown = () => {
-    handleFocusVisible(false)
-  }
-
   const handleKeyDown = (event) => {
     const { key } = event
-    handleFocusVisible(true)
     if (key === 'Enter' || key === ' ') {
       toggleExpanded()
       event.preventDefault()
@@ -144,9 +135,7 @@ const AccordionHeader = forwardRef(function AccordionHeader(
       {...props}
       panelId={panelId}
       onClick={handleClick}
-      onMouseDown={handleMouseDown}
       onKeyDown={handleKeyDown}
-      focusVisible={focusVisible}
       ref={ref}
     >
       {chevronPosition === 'left' ? newChildren : newChildren.reverse()}
@@ -170,10 +159,6 @@ AccordionHeader.propTypes = {
   parentIndex: PropTypes.number,
   /** accordion item is disabled */
   disabled: PropTypes.bool,
-  /** @ignore */
-  focusVisible: PropTypes.bool,
-  /** @ignore */
-  handleFocusVisible: PropTypes.func,
 }
 
 AccordionHeader.defaultProps = {
@@ -183,8 +168,6 @@ AccordionHeader.defaultProps = {
   isExpanded: false,
   parentIndex: null,
   disabled: false,
-  focusVisible: true,
-  handleFocusVisible: () => {},
 }
 
 export { AccordionHeader, AccordionHeaderTitle }
diff --git a/libraries/core-react/src/Accordion/AccordionItem.jsx b/libraries/core-react/src/Accordion/AccordionItem.jsx
@@ -11,8 +11,6 @@ const AccordionItem = forwardRef(function AccordionItem(
     isExpanded,
     children,
     disabled,
-    focusVisible,
-    handleFocusVisible,
     ...props
   },
   ref,
@@ -37,8 +35,6 @@ const AccordionItem = forwardRef(function AccordionItem(
           chevronPosition,
           parentIndex: index,
           disabled,
-          focusVisible,
-          handleFocusVisible,
         })
       : React.cloneElement(child, {
           hidden: !expanded,
@@ -68,10 +64,6 @@ AccordionItem.propTypes = {
   children: PropTypes.node.isRequired,
   /** accordion item is disabled */
   disabled: PropTypes.bool,
-  /** @ignore */
-  focusVisible: PropTypes.bool,
-  /** @ignore */
-  handleFocusVisible: PropTypes.func,
 }
 
 AccordionItem.defaultProps = {
@@ -80,8 +72,6 @@ AccordionItem.defaultProps = {
   index: 0,
   accordionId: '',
   isExpanded: false,
-  focusVisible: true,
-  handleFocusVisible: () => {},
 }
 
 export { AccordionItem }
diff --git a/libraries/core-react/src/Button/Button.jsx b/libraries/core-react/src/Button/Button.jsx
@@ -57,16 +57,16 @@ const Base = ({ base, baseDisabled: disabled }) => {
     }
 
     &:focus {
-      ${focus.radius
-        ? css`
-            outline: none;
-            border-radius: ${focus.radius};
-            border: ${focus.width} ${focus.type} ${focus.color};
-          `
-        : css`
-            outline-offset: ${focus.width};
-            outline: ${focus.width} ${focus.type} ${focus.color};
-          `}
+      outline: none;
+    }
+
+    &[data-focus-visible-added]:focus {
+      outline: 1px dashed ${focus.color};
+      outline-offset: 2px;
+    }
+    /* Get rid of ff focus border for buttons */
+    &::-moz-focus-inner {
+      border: 0;
     }
 
     &:disabled {