accessibility and seo optimizations

Author: zfletch

package.json

@@ -8,7 +8,7 @@
     "eslint-config-airbnb": "^18.2.0",
     "eslint-plugin-jest": "^23.20.0",
     "gh-pages": "^3.1.0",
-    "perseids-react-components": "^1.1.1",
+    "perseids-react-components": "^1.1.2",
     "prop-types": "^15.7.2",
     "react": "^16.13.1",
     "react-clipboard.js": "^2.0.16",

public/index.html

@@ -8,6 +8,10 @@
       content="width=device-width, initial-scale=1, shrink-to-fit=no"
     />
     <meta name="theme-color" content="#000000" />
+    <meta
+      name="description"
+      content="%REACT_APP_DESCRIPTION%"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/

public/robots.txt

@@ -0,0 +1,2 @@
+User-agent: *
+Disallow:

src/components/Input/Input.js

@@ -111,7 +111,10 @@ class Input extends Component {
         <div className="row pt-4 mb-3">
           <div className="col-12 text-center">
             <h1 className="h3 font-weight-normal">
-              Polytonic Greek Virtual Keyboard
+              {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
+              <label htmlFor="polytonic-keyboard-input-and-output" className="mb-0">
+                Polytonic Greek Virtual Keyboard
+              </label>
             </h1>
           </div>
         </div>
@@ -120,6 +123,7 @@ class Input extends Component {
             <textarea
               ref={(r) => { this.textareaRef = r; }}
               className="form-control input-lg"
+              id="polytonic-keyboard-input-and-output"
               type="text"
               placeholder="Type using the virtual keyboard ..."
               autoComplete="off"

yarn.lock

@@ -7656,10 +7656,10 @@ performance-now@^2.1.0:
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
   integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
-perseids-react-components@^1.1.1:
-  version "1.1.1"
-  resolved "https://registry.yarnpkg.com/perseids-react-components/-/perseids-react-components-1.1.1.tgz#d3b17df487c40d5fd1a25c027861e3b52e9c755e"
-  integrity sha512-/yoNpMi4eNCUb8G0JJfwVQcv40JRlnXmjQtAa3gEQaK5cCxs6i4vxWqDMBZxC5zJb6+dIJqN6dMWZz3lQjWEXA==
+perseids-react-components@^1.1.2:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/perseids-react-components/-/perseids-react-components-1.1.2.tgz#6051fc8f98d0c507d12324fa06658e68c3371694"
+  integrity sha512-3Jpa6/93Iz+nVwelROMabp16dPQMI8K/92oH2ikFvcjVcHGi8OsaPUiW/NVsrFS7mSGo987QCklii40kRjlYvw==
   dependencies:
     "@primer/octicons" "^10.0.0"
     prop-types "^15.7.2"