@invisionag/iris-react-a11y

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}/>
  }
}