From 2f426398840d547daac32f952d64a6d5ad8edd58 Mon Sep 17 00:00:00 2001
From: Karol Wypchlo <kwypchlo@gmail.com>
Date: Fri, 21 Feb 2020 11:09:38 +0100
Subject: [PATCH] fix aria issues and run prettier

---
 gatsby-config.js                            |  2 +-
 src/components/CodeExamples/CodeExamples.js | 10 +++----
 src/components/HomeUpload/HomeUpload.js     |  4 +--
 src/components/Mailing/Mailing.js           |  8 ++++-
 src/svg/TopSwoosh.js                        | 33 ++++-----------------
 5 files changed, 20 insertions(+), 37 deletions(-)

diff --git a/gatsby-config.js b/gatsby-config.js
index ae8a5d2a..10b81067 100644
--- a/gatsby-config.js
+++ b/gatsby-config.js
@@ -3,7 +3,7 @@ module.exports = {
     title: `Skynet`,
     description: `Skynet is a decentralized file sharing and content distribution protocol.`,
     author: `Nebulous`,
-    siteUrl: 'https://siasky.net'
+    siteUrl: `https://siasky.net`
   },
   plugins: [
     `gatsby-plugin-sass`,
diff --git a/src/components/CodeExamples/CodeExamples.js b/src/components/CodeExamples/CodeExamples.js
index d7573773..c2f28b25 100644
--- a/src/components/CodeExamples/CodeExamples.js
+++ b/src/components/CodeExamples/CodeExamples.js
@@ -1,15 +1,15 @@
 import React, { useState } from "react";
 import classNames from "classnames";
 import { Light as SyntaxHighlighter } from "react-syntax-highlighter";
-import { javascript, go, python, bash } from 'react-syntax-highlighter/dist/esm/languages/hljs';
+import { javascript, go, python, bash } from "react-syntax-highlighter/dist/esm/languages/hljs";
 import Colors from "./Colors";
 import * as snippets from "./Code";
 import "./CodeExamples.scss";
 
-SyntaxHighlighter.registerLanguage('javascript', javascript);
-SyntaxHighlighter.registerLanguage('go', go);
-SyntaxHighlighter.registerLanguage('python', python);
-SyntaxHighlighter.registerLanguage('bash', bash);
+SyntaxHighlighter.registerLanguage("javascript", javascript);
+SyntaxHighlighter.registerLanguage("go", go);
+SyntaxHighlighter.registerLanguage("python", python);
+SyntaxHighlighter.registerLanguage("bash", bash);
 
 export default function CodeExamples() {
   const [active, setActive] = useState(1);
diff --git a/src/components/HomeUpload/HomeUpload.js b/src/components/HomeUpload/HomeUpload.js
index 152673a1..9cf4cb63 100644
--- a/src/components/HomeUpload/HomeUpload.js
+++ b/src/components/HomeUpload/HomeUpload.js
@@ -96,8 +96,8 @@ export default class HomeUpload extends Component {
                   <p>Paste the link to retrieve your file</p>
 
                   <form className="home-upload-retrieve-form" onSubmit={this.handleSkylink}>
-                    <input name="skylink" type="text" placeholder="sia://" />
-                    <button type="submit">
+                    <input name="skylink" type="text" placeholder="sia://" aria-labelledby="Skylink" />
+                    <button type="submit" aria-label="Retrieve file">
                       <DownArrow />
                     </button>
                   </form>
diff --git a/src/components/Mailing/Mailing.js b/src/components/Mailing/Mailing.js
index 4b4ab788..a857b99f 100644
--- a/src/components/Mailing/Mailing.js
+++ b/src/components/Mailing/Mailing.js
@@ -20,7 +20,13 @@ const CustomForm = ({ status, message, onValidated, light, id }) => {
 
   return (
     <form className={classNames("home-stay-form", { light })} onSubmit={e => e.preventDefault()}>
-      <input ref={node => (email = node)} type="email" placeholder="Email Address" validate="true" />
+      <input
+        ref={node => (email = node)}
+        type="email"
+        placeholder="Email Address"
+        validate="true"
+        aria-labelledby="Email Address"
+      />
       <div className="home-form-stay-existing">
         <input ref={node => (user = node)} type="checkbox" id={id} />
         <label htmlFor={id}>I have previous experience using Sia</label>
diff --git a/src/svg/TopSwoosh.js b/src/svg/TopSwoosh.js
index adcdad8f..16a1335e 100644
--- a/src/svg/TopSwoosh.js
+++ b/src/svg/TopSwoosh.js
@@ -10,29 +10,10 @@ export default function TopSwoosh({ ...props }) {
       {...props}
     >
       <defs>
-        <filter
-          id="a"
-          width="103.4%"
-          height="103.4%"
-          x="-1.7%"
-          y="-1.7%"
-          filterUnits="objectBoundingBox"
-        >
-          <feMorphology
-            in="SourceAlpha"
-            operator="dilate"
-            radius="1"
-            result="shadowSpreadOuter1"
-          ></feMorphology>
-          <feOffset
-            in="shadowSpreadOuter1"
-            result="shadowOffsetOuter1"
-          ></feOffset>
-          <feMorphology
-            in="SourceAlpha"
-            radius="1"
-            result="shadowInner"
-          ></feMorphology>
+        <filter id="a" width="103.4%" height="103.4%" x="-1.7%" y="-1.7%" filterUnits="objectBoundingBox">
+          <feMorphology in="SourceAlpha" operator="dilate" radius="1" result="shadowSpreadOuter1"></feMorphology>
+          <feOffset in="shadowSpreadOuter1" result="shadowOffsetOuter1"></feOffset>
+          <feMorphology in="SourceAlpha" radius="1" result="shadowInner"></feMorphology>
           <feOffset in="shadowInner" result="shadowInner"></feOffset>
           <feComposite
             in="shadowOffsetOuter1"
@@ -40,11 +21,7 @@ export default function TopSwoosh({ ...props }) {
             operator="out"
             result="shadowOffsetOuter1"
           ></feComposite>
-          <feGaussianBlur
-            in="shadowOffsetOuter1"
-            result="shadowBlurOuter1"
-            stdDeviation="4"
-          ></feGaussianBlur>
+          <feGaussianBlur in="shadowOffsetOuter1" result="shadowBlurOuter1" stdDeviation="4"></feGaussianBlur>
           <feColorMatrix
             in="shadowBlurOuter1"
             values="0 0 0 0 0.341176471 0 0 0 0 0.709803922 0 0 0 0 0.376470588 0 0 0 0.3 0"