Merge pull request #147 from YashKandalkar/warnings-resolved

[fix]: warnings

src/components/addons.js

@@ -229,6 +229,7 @@ const Addons = props => {
             download
             <span
               onClick={blogPostPorkflow}
+              onKeyDown={(e) => e.keyCode === 13 && blogPostPorkflow()}
               role="button"
               tabIndex="0"
               style={{ cursor: "pointer", color: "#002ead" }}

src/components/donate.js

@@ -2,7 +2,9 @@ import React from "react"
 const Donate = () => {
   return (
     <>
-      <div className="text-center text-4xl my-2">Support 🙏</div>
+      <div className="text-center text-4xl my-2">Support&nbsp;
+        <span role="img" aria-label="praying hand emoji">🙏</span>
+      </div>
       <div className="flex flex-col sm:flex-row items-start justify-between">
         <div className="w-full sm:w-2/3">
           <div className="text-2xl mb-2">
@@ -28,12 +30,13 @@ const Donate = () => {
           </div>
         </div>
         <div className="w-full sm:w-1/3 flex flex-col justify-center items-center">
-          Tip💰
+          <span>Tip<span role="img" aria-label="Dollar medal">💰</span></span>
           {/* Ko-Fi */}
           <a
             href="https://ko-fi.com/A0A81XXSX"
             className="flex items-center justify-evenly bg-red-500 text-white py-2 px-4 my-2"
             target="_blank"
+            rel="noreferrer"
           >
             <img
               className="w-6 h-6 mr-2"
@@ -47,6 +50,7 @@ const Donate = () => {
             href="https://www.paypal.me/rahuldkjain/10"
             className="flex items-center justify-evenly bg-blue-500 text-white py-2 px-4 my-2"
             target="_blank"
+            rel="noreferrer"
           >
             <img
               className="w-6 h-6 mr-2"
@@ -60,6 +64,7 @@ const Donate = () => {
             href="https://www.buymeacoffee.com/rahuldkjain"
             className="flex items-center justify-evenly bg-orange-500 text-white py-2 px-4 my-2"
             target="_blank"
+            rel="noreferrer"
           >
             <img
               className="w-6 h-6 mr-2"

src/components/markdownPreview.js

@@ -297,7 +297,7 @@ const MarkdownPreview = props => {
     skills.forEach(skill => {
       if (props.skills[skill]) {
         listSkills.push(
-          <a href={skillWebsites[skill]} target="_blank">
+          <a href={skillWebsites[skill]} target="_blank" rel="noreferrer">
             <img
               className="mb-4 mr-4 h-6 w-6 sm:h-10 sm:w-10"
               key={skill}

src/pages/index.js

@@ -543,6 +543,7 @@ const IndexPage = () => {
               tabIndex="0"
               role="button"
               onClick={handleGenerate}
+              onKeyDown={(e) => e.keyCode === 13 && handleGenerate()}
             >
               Generate README
             </div>
@@ -554,21 +555,17 @@ const IndexPage = () => {
         {generateMarkdown || generatePreview ? (
           <div className="markdown-section p-4 sm:py-4 sm:px-10">
             <div className="w-full flex justify-between items-center">
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
-                role="button"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                 onClick={handleBackToEdit}
               >
-                <ArrowLeftIcon size={16} />
+                <ArrowLeftIcon size={24} />
                 <span className="hidden sm:block"> back to edit</span>
-              </div>
+              </button>
 
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                 id="copy-button"
-                role="button"
                 onClick={handleCopyToClipboard}
               >
                 {copyObj.isCopied === true ? (
@@ -579,38 +576,32 @@ const IndexPage = () => {
                 <span className="hidden sm:block" id="copy-markdown">
                   {copyObj.copiedText}
                 </span>
-              </div>
+              </button>
 
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                 id="download-md-button"
-                role="button"
                 onClick={handleDownloadMarkdown}
               >
                 <DownloadIcon size={24} />
                 <span className="hidden sm:block" id="download-markdown">
                   download markdown
                 </span>
-              </div>
+              </button>
 
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                 id="download-json-button"
-                role="button"
                 onClick={handleDownloadJson}
               >
                 <FileCodeIcon size={24} />
                 <span className="hidden sm:block" id="download-json">
                   download backup
                 </span>
-              </div>
+              </button>
 
-              <div
-                className="cursor-pointer text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
-                tabIndex="0"
-                role="button"
+              <button
+                className="text-base w-1/6 border-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center p-1"
                 onClick={handleGeneratePreview}
               >
                 {previewMarkdown.isPreview ? (
@@ -621,7 +612,7 @@ const IndexPage = () => {
                 <span className="hidden sm:block ml-1" id="preview-markdown">
                   {previewMarkdown.buttonText}
                 </span>
-              </div>
+              </button>
             </div>
 
             <div className="w-full flex justify-center items-center">
@@ -673,14 +664,12 @@ const IndexPage = () => {
                 new feature
               </span>
             </div>
-            <div
+            <button
               className="text-xxs sm:text-sm border-2 w-auto px-2 border-solid border-gray-900 bg-gray-100 flex items-center justify-center"
-              role="button"
-              tabIndex="0"
               onClick={handleResetForm}
             >
               Reset form
-            </div>
+            </button>
           </div>
           <div className="w-full flex justify-start items-center my-4">
             <input
@@ -690,14 +679,12 @@ const IndexPage = () => {
               value={restore}
               onChange={e => setRestore(e.target.value)}
             />
-            <div
+            <button
               className="text-xxs sm:text-sm border-2 w-32 border-solid border-gray-900 bg-gray-100 flex items-center justify-center py-1"
-              role="button"
-              tabIndex="0"
               onClick={handleRestore}
             >
               Restore
-            </div>
+            </button>
           </div>
           <div className="flex flex-col items-start justify-center">
             <div className="text-green-700 font-medium">Tips</div>