React

"A JavaScript library for building user interfaces." - React docs

React syntax

import React from 'react';
import Content from './Content';

const Root = ({headerText, onLogout}) => (
     

        
{ headerText }
        <Content onLogout={ onLogout }/>
     
);

export default Root;

Everything in JavaScript?

JS-Zilla destroys a11y!!

It can be a friendly monster...

create-react-app

yarn global add create-react-app
create-react-app my-react-app
cd my-react-app
yarn start

1. Webpack development and production build.
2. ESLint with some a11y rules.
3. Progressive app by default.
4. Supports code splitting.
5. Unit tests + coverage with JSDOM.

JSX

HTML-like syntactic JavaScript sugar.

        <label htmlFor={nameId}>{nameLabelText}</label>
        <input id={nameId} type="text" />
    

         Darth Vader
         
    

JSX and ARIA

All ARIA attributes are valid JSX props!

            <input id={nameId} aria-label={accessibleLabel} type="text" />
    

IntelliSense in supported IDEs.

eslint-plugin-jsx-a11y

"Static AST checker for a11y rules on JSX elements."

eslint-plugin-jsx-a11y

More than 30 ESLINT a11y checks.

eslint-plugin-jsx-a11y

Rules are configurable.

       {
         "rules": {
           "jsx-a11y/rule-name": "warn"
         }
       }
    

Extending config in create-react-app.

        {
          "extends": ["react-app", "plugin:jsx-a11y/recommended"],
          "plugins": ["jsx-a11y"]
        }
    

eslint-plugin-jsx-a11y

A11y issues become build warnings.

eslint-plugin-jsx-a11y

IDE integration.

react-axe

"Accessibility auditing for React.js applications."

react-axe

Setting up react-axe.

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

if (process.env.NODE_ENV !== 'production') {
    const axe = require('react-axe');
    axe(React, ReactDOM, 1000);
}

ReactDOM.render(<App />, document.getElementById('root'));

react-axe

Browser console feedback.

Combining the tools

Focus control

Setting focus with refs.

componentDidMount(){
    this.nameInput.focus();
}

render(){
    return(
        

            Name
            <input id="demoId" type="text"
            ref={(input) => {this.nameInput = input;}}/>
        
    );
}

Lazy loading components

class App extends Component {
    state = { LazyBlock: null };

    async componentDidMount() {
        const { default: LazyBlock } = await import('./LazyBlock');
        this.setState({ LazyBlock: <LazyBlock/> });
    }

    render() {
        return ( <main aria-busy={!this.state.LazyBlock}>
                    {this.state.LazyBlock || 
Loading...
}
                 </main> );
    }
}

Lazy loading components

Splitting code files.