Skip to content

Commit

Permalink
Focus (#296)
Browse files Browse the repository at this point in the history
* 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
  • Loading branch information
wenche authored Apr 16, 2020
1 parent 6b3cd1c commit 36a1150
Show file tree
Hide file tree
Showing 15 changed files with 98 additions and 119 deletions.
15 changes: 15 additions & 0 deletions COMPONENT_GUIDELINES.md
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
}
```
4 changes: 2 additions & 2 deletions apps/storybook-react/stories/Chips.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down Expand Up @@ -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" />
Expand Down
5 changes: 3 additions & 2 deletions libraries/core-react/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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": {
Expand All @@ -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"
Expand Down
20 changes: 20 additions & 0 deletions libraries/core-react/pnpm-lock.yaml

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 2 additions & 0 deletions libraries/core-react/rollup.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 || {})
Expand Down Expand Up @@ -31,6 +32,7 @@ export default [
plugins: ['babel-plugin-styled-components'],
}),
commonjs(),
polyfill(['focus-visible']),
],
output: [
{
Expand Down
10 changes: 1 addition & 9 deletions libraries/core-react/src/Accordion/Accordion.jsx
Original file line number Diff line number Diff line change
@@ -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'

Expand All @@ -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,
})
})

Expand Down
27 changes: 5 additions & 22 deletions libraries/core-react/src/Accordion/AccordionHeader.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand All @@ -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',
Expand Down Expand Up @@ -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()
Expand Down Expand Up @@ -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()}
Expand All @@ -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 = {
Expand All @@ -183,8 +168,6 @@ AccordionHeader.defaultProps = {
isExpanded: false,
parentIndex: null,
disabled: false,
focusVisible: true,
handleFocusVisible: () => {},
}

export { AccordionHeader, AccordionHeaderTitle }
10 changes: 0 additions & 10 deletions libraries/core-react/src/Accordion/AccordionItem.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,6 @@ const AccordionItem = forwardRef(function AccordionItem(
isExpanded,
children,
disabled,
focusVisible,
handleFocusVisible,
...props
},
ref,
Expand All @@ -37,8 +35,6 @@ const AccordionItem = forwardRef(function AccordionItem(
chevronPosition,
parentIndex: index,
disabled,
focusVisible,
handleFocusVisible,
})
: React.cloneElement(child, {
hidden: !expanded,
Expand Down Expand Up @@ -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 = {
Expand All @@ -80,8 +72,6 @@ AccordionItem.defaultProps = {
index: 0,
accordionId: '',
isExpanded: false,
focusVisible: true,
handleFocusVisible: () => {},
}

export { AccordionItem }
20 changes: 10 additions & 10 deletions libraries/core-react/src/Button/Button.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
Loading

0 comments on commit 36a1150

Please sign in to comment.