SEO and accessibility improvements

AstroPlant · Oct 7, 2020 · 5f8383d · 5f8383d
1 parent 2ff085b
commit 5f8383d
Show file tree

Hide file tree

Showing 30 changed files with 154 additions and 36 deletions.
diff --git a/components/Button.js b/components/Button.js
@@ -70,11 +70,11 @@ const Button = React.forwardRef(
         ref={ref}
         type={props.type || "button"}
         isIcon={isIcon}
+        aria-label={label}
         {...props}
       >
         <HoverBar />
-        {icon && <IconHolder size={24}>{icon}</IconHolder>}
-        {label}
+        {isIcon ? <IconHolder size={24}>{icon}</IconHolder> : <>{label}</>}
       </ButtonContainer>
     );
   }

diff --git a/components/Header.js b/components/Header.js
@@ -195,6 +195,9 @@ export default function Header() {
    */
   function toggleSearch() {
     setOpenSearch(!openSearch);
+    if (!openSearch) {
+      document.getElementById("query").focus();
+    }
   }
 
   return (
@@ -212,13 +215,15 @@ export default function Header() {
           <ButtonsRow>
             <HeaderButton
               inverted
+              label={"Open search"}
               color="dark"
               icon={openSearch ? <CloseIcon /> : <SearchIcon />}
               onClick={() => toggleSearch()}
             />
 
             <DrawerMenuButton
               inverted
+              label={"Open menu"}
               color="dark"
               icon={<MenuIcon />}
               onClick={() => toggleDrawer()}
@@ -234,6 +239,7 @@ export default function Header() {
                     trigger={
                       <HeaderButton
                         inverted
+                        label={"Open notifications"}
                         color="dark"
                         icon={<Notification />}
                       />

diff --git a/components/WrapInLink.js b/components/WrapInLink.js
@@ -1,13 +1,35 @@
 import Link from "next/link";
+import PropTypes from "prop-types";
 import React from "react";
 
 /***
  * Wrapper component for dynamic href and as
  */
-export default function WrapInLink({ children, href, as }) {
+export default function WrapInLink({ children, href, as, ...props }) {
   return (
     <Link passHref href={href} as={as}>
-      <a target="_self">{children}</a>
+      <a {...props} target="_self">
+        {children}
+      </a>
     </Link>
   );
 }
+
+WrapInLink.propTypes = {
+  /**
+   * Components to wrap
+   */
+  children: PropTypes.node.isRequired,
+  /**
+   * Destination of the link
+   */
+  href: PropTypes.string.isRequired,
+  /**
+   * As path of the link
+   */
+  as: PropTypes.string,
+};
+
+WrapInLink.defaultProps = {
+  as: null,
+};
diff --git a/components/cards/HelpCard.js b/components/cards/HelpCard.js
@@ -46,7 +46,7 @@ export default function HelpCard(props) {
   return (
     <>
       {external ? (
-        <a href={props.href} target="_blank">
+        <a href={props.href} target="_blank" rel="noopener">
           <PureCard {...props} />
         </a>
       ) : (

diff --git a/components/cards/KitCard.js b/components/cards/KitCard.js
@@ -27,12 +27,16 @@ export default function KitCard(props) {
       <Details>
         We're currently working on a new version of Kit Dashboards. For now you
         can use the{" "}
-        <a href="http://astroplant-alpha.surge.sh/home" target="_blank">
+        <a
+          href="http://astroplant-alpha.surge.sh/home"
+          target="_blank"
+          rel="noopener"
+        >
           current tools
         </a>{" "}
         to access and edit your kits. To learn more about the new features
         please{" "}
-        <a href="http://astroplant.slack.com/" target="_blank">
+        <a href="http://astroplant.slack.com/" target="_blank" rel="noopener">
           join our Slack
         </a>
         .

diff --git a/components/cards/SimpleMediaCard.js b/components/cards/SimpleMediaCard.js
@@ -136,6 +136,7 @@ export default function SimpleMediaCard({ media, showTools }) {
             <>
               <Button
                 inverted
+                label={"Edit Media"}
                 color={"secondary"}
                 icon={<EditIcon />}
                 onClick={() =>
@@ -147,6 +148,7 @@ export default function SimpleMediaCard({ media, showTools }) {
               />
               <Button
                 inverted
+                label={"Delete Media"}
                 color={"error"}
                 icon={<DeleteIcon />}
                 onClick={() => toggle()}

diff --git a/components/forms/AccountForm.js b/components/forms/AccountForm.js
@@ -76,28 +76,41 @@ export default function AccountForm(props) {
               <TextInput
                 disabled
                 label="Username"
+                id="username"
                 name="username"
                 type="text"
               />
 
-              <TextInput label="Email" name="email" type="email" />
+              <TextInput label="Email" id="email" name="email" type="email" />
             </Row>
 
             <Row>
-              <TextInput label="First Name" name="firstName" type="text" />
-              <TextInput label="Last Name" name="lastName" type="text" />
+              <TextInput
+                label="First Name"
+                id="firstName"
+                name="firstName"
+                type="text"
+              />
+              <TextInput
+                label="Last Name"
+                id="lastName"
+                name="lastName"
+                type="text"
+              />
             </Row>
 
             <Row>
               <TextInput
                 addon={"@"}
                 label="Slack username"
+                id="slackUsername"
                 name="slackUsername"
                 type="text"
               />
 
               <LongTextInput
                 label="Description"
+                id="description"
                 name="description"
                 type="text"
                 maxLength={140}

diff --git a/components/forms/ChangePasswordForm.js b/components/forms/ChangePasswordForm.js
@@ -58,20 +58,23 @@ export default function ChangePasswordForm() {
           <Form>
             <TextInput
               label="Current Password"
+              id="oldPassword"
               name="oldPassword"
               type="password"
               placeholder="Current"
             />
 
             <TextInput
               label="New password"
+              id="newPassword"
               name="newPassword"
               type="password"
               placeholder="New secure password"
             />
 
             <TextInput
               label="Validate password"
+              id="validatePassword"
               name="validatePassword"
               type="password"
               placeholder="Validate new password"

diff --git a/components/forms/LoginForm.js b/components/forms/LoginForm.js
@@ -4,7 +4,7 @@ import styled from "styled-components";
 import * as Yup from "yup";
 import { authenticate, useAuth } from "../../providers/Auth";
 import { useSnackBars } from "../../providers/SnackBarProvider";
-import { forgotPassword, login } from "../../services/community";
+import { login } from "../../services/community";
 import { getErrorMessage, hasError } from "../../utils/fetchTools";
 import Button from "../Button";
 import Checkbox from "../inputs/CheckBox";
@@ -55,7 +55,7 @@ export default function LoginForm() {
 
           // Navigate to the home page
           if (isLogged) {
-            setTimeout(function() {
+            setTimeout(function () {
               actions.resetForm();
             }, 2000);
           }
@@ -72,18 +72,22 @@ export default function LoginForm() {
           <Form>
             <TextInput
               label="Username"
+              id="username"
               name="username"
               type="text"
               placeholder="SpaceFarmer"
             />
             <TextInput
               label="Password"
+              id="password"
               name="password"
               type="password"
               placeholder="Password"
             />
             <Row>
-              <Checkbox name="rememberMe">Remember Me</Checkbox>
+              <Checkbox id="rememberMe" name="rememberMe">
+                Remember Me
+              </Checkbox>
               {/* 
               <a
                 onClick={async () => {

diff --git a/components/forms/MediaCreationForm.js b/components/forms/MediaCreationForm.js
@@ -244,6 +244,7 @@ export default function MediaCreationForm({ librarySections, mediaToEdit }) {
                       <>
                         <TextInput
                           label="URL"
+                          id={`content[${index}].url`}
                           name={`content[${index}].url`}
                           type="text"
                           placeholder="https://example.com"
@@ -255,6 +256,7 @@ export default function MediaCreationForm({ librarySections, mediaToEdit }) {
                         />
                         <TextInput
                           label="Caption"
+                          id={`content[${index}].caption`}
                           name={`content[${index}].caption`}
                           type="text"
                           placeholder="A nice url."
@@ -292,6 +294,7 @@ export default function MediaCreationForm({ librarySections, mediaToEdit }) {
                       <>
                         <TextInput
                           label="Title"
+                          id={`content[${index}].title`}
                           name={`content[${index}].title`}
                           type="text"
                           placeholder="My file title."
@@ -300,6 +303,7 @@ export default function MediaCreationForm({ librarySections, mediaToEdit }) {
 
                         <LongTextInput
                           label="Description"
+                          id={`content[${index}].description`}
                           name={`content[${index}].description`}
                           type="text"
                           placeholder="A description of the file."

diff --git a/components/forms/SignUpForm.js b/components/forms/SignUpForm.js
@@ -27,9 +27,7 @@ const Disclaimer = styled.p`
 `;
 
 const SignupSchema = Yup.object().shape({
-  email: Yup.string()
-    .email("Invalid email")
-    .required("Required"),
+  email: Yup.string().email("Invalid email").required("Required"),
   username: Yup.string()
     .min(2, "Username must be at least 3 characters!")
     .max(50, "Username is too long.")
@@ -98,30 +96,34 @@ export default function SignUpForm() {
               </Disclaimer>
               <TextInput
                 label="email"
+                id="email"
                 name="email"
                 type="email"
                 placeholder="[email protected]"
               />
               <TextInput
                 label="Username"
+                id="username"
                 name="username"
                 type="text"
                 placeholder="SpaceFarmer"
               />
               <TextInput
                 label="Password"
+                id="password"
                 name="password"
                 type="password"
                 placeholder="Password"
               />
               <TextInput
                 label="Validate password"
+                id="validatePassword"
                 name="validatePassword"
                 type="password"
                 placeholder="Validate Password"
               />
 
-              <Checkbox name="acceptTerms">
+              <Checkbox id="acceptTerms" name="acceptTerms">
                 I agree to the <a>terms and conditions</a>
               </Checkbox>
 

diff --git a/components/forms/UploadForm.js b/components/forms/UploadForm.js
@@ -96,6 +96,7 @@ export default function UploadForm(props) {
       )}
 
       <FileInput
+        id={"files"}
         name={"files"}
         accept="image/*"
         multiple={props.multiple}

diff --git a/components/inputs/CheckBox.js b/components/inputs/CheckBox.js
@@ -20,7 +20,7 @@ export default function Checkbox({ children, ...props }) {
     <>
       <Row>
         <Input type="checkbox" {...field} {...props} />
-        <label>{children}</label>
+        <label htmlFor={props.name || props.id}>{children}</label>
       </Row>
 
       {meta.touched && meta.error ? (

diff --git a/components/inputs/FileInput.js b/components/inputs/FileInput.js
@@ -147,6 +147,7 @@ export default function FileInput({
                   </ItemContent>
                   <RemoveButton
                     inverted
+                    label={"Remove File"}
                     color="greyDark"
                     icon={<RemoveIcon />}
                     onClick={() => removeFile(file.name)}

diff --git a/components/inputs/SearchBar.js b/components/inputs/SearchBar.js
@@ -41,6 +41,11 @@ const SearchButton = styled(Button)`
   margin: 0;
 `;
 
+const HiddenLabel = styled.label`
+  visibility: hidden;
+  width: 0;
+`;
+
 export default function SearchBar(props) {
   const [query, setQuery] = useState("");
 
@@ -68,11 +73,15 @@ export default function SearchBar(props) {
 
   return (
     <Form {...props} onSubmit={handleSubmit} id="searchbar">
+      <HiddenLabel style={{ width: 0 }} htmlFor={"query"}>
+        Search
+      </HiddenLabel>
       <Icon color={"grey"} size={24}>
         <SearchIcon />
       </Icon>
       <Input
         type="text"
+        id={"query"}
         name={"query"}
         placeholder={"Search"}
         onChange={handleChange}

diff --git a/components/layouts/MainLayout.js b/components/layouts/MainLayout.js
@@ -16,7 +16,10 @@ export default function MainLayout({
   children,
 }) {
   return (
-    <PageLayout metaTitle={metaTitle} metaDescription={metaDescription}>
+    <PageLayout
+      metaTitle={metaTitle || pageTitle}
+      metaDescription={metaDescription}
+    >
       <Path />
       <h2>{pageTitle}</h2>