@invisionag/iris-react-a11y
v3.4.2
Published
```js import {withFocus, withKeyboardHandlers} from '@invisionag/iris-react-a11y'; ```
Downloads
188
Maintainers
Keywords
Readme
import {withFocus, withKeyboardHandlers} from '@invisionag/iris-react-a11y';
A collection of higher-order-components aiming to improve usability and accessability of our components.
withFocus
the withFocus
hoc takes care of setting a prop hasFocus
on the component passed to it. This prop will be true
if the element is currently focused, and false
if its not. You can use it to set the appropriate styling.
There are multiple benefits to using this hoc instead of :focus
selectors:
- It is testable
- You dont have to rely on implementations that differ beween browsers
- You can pass the prop to children as you like, whereas css rules would have to reach accross component scopes (i.e.
.my-component:focus .my-child {}
- In addition to styling, you can react with component logic on focus
- The
withFocus
hoc removes focus styling when an element was clicked with the mouse
Example:
import {withFocus} from '@invisionag/iris-react-a11y';
const Component = ({ hasFocus, ...props }) => <div style={{ color: hasFocus ? 'red' : 'blue'}} {...props}>Lorem</div>
const FocusableComponent = withFocus(Component);
class App extends React.Component{
render() {
return <FocusableComponent />
}
}
withKeyboardHandlers
The withKeyboardHandlers
hoc listens to keydown / keyup events on the component and triggers mousedown / mouseup & click events on the passed component respectively.
This makes it easier to implement keyboard navigation of interactable ui elements.
Example:
import {withKeyboardHandlers} from '@invisionag/iris-react-a11y';
const Component = props => <div {...props}>Lorem</div>
const KeyboardInteractableComponent = withKeyboardHandlers(Component);
class App extends React.Component{
render() {
// enter and space keyup while focused will trigger onClick handler
return <KeyboardInteractableComponent onClick={console.log}/>
}
}