Fixes to a11y problems

chapter06/src/components/expandableCard.1/index.js

@@ -1,7 +1,7 @@
 /* @flow */
 
-import React from "react";
-import PropTypes from "prop-types";
+import React from "../../../../../../.cache/typescript/2.9/node_modules/@types/react";
+import PropTypes from "../../../../../../.cache/typescript/2.9/node_modules/@types/prop-types";
 
 import "../general.css";
 

chapter07/.storybook/config.js

@@ -13,6 +13,7 @@ import a11y from "react-a11y";
 
 a11y(React, ReactDOM, {
     rules: {
+        "avoid-positive-tabindex": "warn",
         "button-role-space": "warn",
         "hidden-uses-tabindex": "warn",
         "img-uses-alt": "warn",

chapter07/src/components/i18nform/i18nform.a11y.js

@@ -0,0 +1,95 @@
+/* @flow */
+
+import React from "react";
+
+import "./styles.css";
+import { i18n, t } from "./i18n";
+
+export class I18nForm extends React.PureComponent<
+    {},
+    {
+        delivery: String,
+        howMany: Number,
+        thingColor: String
+    }
+> {
+    state = {
+        delivery: "2018-09-22",
+        howMany: 1,
+        thingColor: "NC"
+    };
+
+    constructor(props) {
+        super(props);
+        this.rerender = () => this.forceUpdate();
+    }
+
+    componentDidMount() {
+        i18n.on("languageChanged", this.rerender);
+    }
+
+    componentWillUnmount() {
+        i18n.off("languageChanged", this.rerender);
+    }
+
+    render() {
+        return (
+            <div>
+                <div>
+                    <h2>{t("details")}</h2>
+                    <button onClick={() => i18n.changeLanguage("es")}>
+                        ES
+                    </button>
+                    <button onClick={() => i18n.changeLanguage("en")}>
+                        EN
+                    </button>
+                </div>
+                <br />
+                <div>{t("please enter details")}</div>
+                <br />
+                <div>
+                    {t("send it before")}:
+                    <input
+                        type="date"
+                        value={this.state.delivery}
+                        onBlur={e =>
+                            this.setState({ delivery: e.target.value })
+                        }
+                    />
+                </div>
+                <div>
+                    {t("number")}:
+                    <input
+                        type="number"
+                        min="1"
+                        value={this.state.howMany}
+                        onBlur={e =>
+                            this.setState({
+                                howMany: Number(e.target.value)
+                            })
+                        }
+                    />
+                </div>
+                <div>
+                    {t("color")}:
+                    <select
+                        onBlur={e =>
+                            this.setState({ thingColor: e.target.value })
+                        }
+                    >
+                        <option value="NC">{t("colors.none")}</option>
+                        <option value="ST">{t("colors.steel")}</option>
+                        <option value="SD">{t("colors.sand")}</option>
+                    </select>
+                </div>
+                <br />
+                <div>
+                    {t("summary", {
+                        count: this.state.howMany,
+                        date: this.state.delivery
+                    })}
+                </div>
+            </div>
+        );
+    }
+}

chapter07/src/components/i18nform/index.js

@@ -1,4 +1,4 @@
 /* @flow */
 
-import { I18nForm } from "./i18nform.js";
+import { I18nForm } from "./i18nform.a11y.js";
 export { I18nForm };

chapter07/src/components/sassButton/index.js

@@ -1,4 +1,4 @@
 /* @flow */
 
-import { SassButton } from "./sassButton";
+import { SassButton } from "./sassButton.a11y";
 export { SassButton };

chapter07/src/components/sassButton/sassButton.a11y.js

@@ -0,0 +1,40 @@
+/* @flow */
+
+import React from "react";
+import PropTypes from "prop-types";
+
+import "./styles.css";
+
+export class SassButton extends React.PureComponent<{
+    normal: boolean,
+    buttonText: string,
+    onSelect: void => void
+}> {
+    static propTypes = {
+        normal: PropTypes.bool.isRequired,
+        buttonText: PropTypes.string.isRequired,
+        onSelect: PropTypes.func.isRequired
+    };
+
+    keyDownAsClick(e: { keyCode: number }) {
+        if (e.keyCode === 32 || e.keyCode === 13) {
+            this.props.onSelect();
+        }
+    }
+
+    render() {
+        return (
+            <div
+                className={
+                    this.props.normal ? "normalButton" : "alertButton"
+                }
+                onClick={this.props.onSelect}
+                onKeyDown={this.keyDownAsClick.bind(this)}
+                tabIndex="0"
+                role="button"
+            >
+                <span>{this.props.buttonText}</span>
+            </div>
+        );
+    }
+}

chapter07/src/components/sassButton/sassButton.js

@@ -2,6 +2,7 @@
 
 import React from "react";
 import PropTypes from "prop-types";
+
 import "./styles.css";
 
 export class SassButton extends React.PureComponent<{

chapter07/src/components/styledButton/index.js

@@ -1,4 +1,4 @@
 /* @flow */
 
-import { StyledButton } from "./styledButton";
+import { StyledButton } from "./styledButton.a11y";
 export { StyledButton };

chapter07/src/components/styledButton/styledButton.a11y.js

@@ -0,0 +1,72 @@
+/* @flow */
+
+import React from "react";
+import PropTypes from "prop-types";
+import styled from "styled-components";
+import Color from "color";
+
+import {
+    NORMAL_TEXT,
+    NORMAL_COLOR,
+    ALERT_TEXT,
+    ALERT_COLOR
+} from "./constants";
+
+const makeSpan = props => `
+    span {
+        color: ${props.normal ? NORMAL_TEXT : ALERT_TEXT};
+        font-weight: bold;
+    }
+`;
+
+const BasicStyledDiv = styled.div`
+    display: inline-block;
+    text-decoration: none;
+    padding: 5px 10px;
+    border-radius: 3px;
+`;
+
+const StyledDiv = BasicStyledDiv.extend`
+    background-color: ${props =>
+        props.normal ? NORMAL_COLOR : ALERT_COLOR};
+    &:hover {
+        background-color: ${props =>
+            Color(props.normal ? NORMAL_COLOR : ALERT_COLOR)
+                .darken(0.25)
+                .string()};
+        transition: all 0.5s ease;
+    }
+    ${props => makeSpan(props)};
+`;
+
+export class StyledButton extends React.PureComponent<{
+    normal: boolean,
+    buttonText: string,
+    onSelect: void => void
+}> {
+    static propTypes = {
+        normal: PropTypes.bool.isRequired,
+        buttonText: PropTypes.string.isRequired,
+        onSelect: PropTypes.func.isRequired
+    };
+
+    keyDownAsClick(e: { keyCode: number }) {
+        if (e.keyCode === 32 || e.keyCode === 13) {
+            this.props.onSelect();
+        }
+    }
+
+    render() {
+        return (
+            <StyledDiv
+                normal={this.props.normal}
+                onClick={this.props.onSelect}
+                onKeyDown={this.keyDownAsClick.bind(this)}
+                tabIndex="0"
+                role="button"
+            >
+                <span>{this.props.buttonText}</span>
+            </StyledDiv>
+        );
+    }
+}

chapter07/src/utilities/index.js

@@ -0,0 +1,3 @@
+import { keyToClick } from "./keyToClick";
+
+export { keyToClick };

chapter07/src/utilities/keyToClick.js

@@ -0,0 +1,2 @@
+export const keyToClick = fn => e =>
+    (e.keyCode === 32 || e.keyCode === 13) && fn();