Our first victim of bad a11y coding is our SASS button; see the following screenshot:

One a11y rule is that you should be able to use the application with only the keyboard, so we need to be able to tab our way to the button (this requires using a tabIndex) and providing a keyboard listener (onKeyPress or onKeyDown). Furthermore, the role of our element (which works as a button) must be specified. The corrected JSX code would be as follows:

<div
    className={
        this.props.normal ? "normalButton" : "alertButton"
    }
    onClick={this.props.onSelect}
    onKeyPress={this.keyDownAsClick}
    tabIndex="0"
    role="button"
>
    <span>{this.props.buttonText}</span>
</div>

The new method, .keyDownAsClick(), would check if the user pressed the spacebar (ASCII code 32) or the ENTER key (ASCII code 13), and if so, call the same logic as the onClick handler:

keyDownAsClick = (e: { keyCode: number }) => {
    if (e.keyCode === 32 || e.keyCode === 13) {
        this.props.onSelect();
    }
}

Our input form also has a problem, albeit a simpler one. See the following screenshot:

The problem and its solution are clear: instead of using onChange, the suggestion is to substitute onBlur, which effectively has no consequences for users. We won't show the edited code, given how small the required change is, and just edit the file to replace the method.

We could try adding an image to our form, just for the sake of getting another, different warning. Try adding a Packt logo to the form, as follows:

<img
    src="http://d1ldz4te4covpm.cloudfront.net/sites/all/themes/packt_v4/images/packt-logo.svg"
    style={{ width: "50px", height: "25px" }}
/>

In this case, we'd get a warning about the need for an alt attribute (adding alt="Packt logo" to the img tag would do) to describe the image; take a look at the following screenshot:

Finally, let's see a case in which our tool fails! The button we created with styled-components has basically the same problems as our SASS button, but nothing is reported; why? The reason is simple: if you examine the code (see the Adding SASS for separate styling section earlier in this chapter) we aren't using <div> or <button> instances or any other recognizable HTML tags, but rather <StyledDiv> and <StyledButton>, which our a11y eslint plugin doesn't understand. So far, the only workaround for this is to manually change our styled components back to their original tags, solve whatever problems may pop up, and then go back to the styled version not a very good solution, admittedly!