From cec631389135b160744b2ad2a84183d6f43c3fcc Mon Sep 17 00:00:00 2001
From: Nader Dabit <dabit3@gmail.com>
Date: Wed, 6 Jan 2021 00:11:19 -0600
Subject: [PATCH] improved accessibility

---
 README.md                                  |  2 +-
 components/CartLink.js                     |  2 +-
 components/ListItem.js                     |  2 +-
 components/Nav.js                          | 62 ----------------------
 components/ViewInventory.js                |  6 +--
 components/header.js                       | 43 ---------------
 components/heroComponents/DisplayMedium.js |  2 +-
 components/heroComponents/DisplaySmall.js  |  2 +-
 layouts/layout.js                          | 10 ++--
 pages/cart.js                              |  8 +--
 pages/categories.js                        |  2 +-
 pages/checkout.js                          |  2 +-
 pages/index.js                             |  2 +-
 pages/product/[name].js                    |  2 +-
 utils/inventoryForCategory.js              |  2 +-
 utils/inventoryProvider.js                 |  4 +-
 16 files changed, 25 insertions(+), 128 deletions(-)
 delete mode 100755 components/Nav.js
 delete mode 100755 components/header.js

diff --git a/README.md b/README.md
index 20f29bb..89038a2 100644
--- a/README.md
+++ b/README.md
@@ -79,7 +79,7 @@ This project is styled using Tailwind. To learn more how this works, check out t
 The main files, components, and images you may want to change / modify are:
 
 __Logo__ - src/images/logo.png   
-__Buttons, Nav, Header__ - src/components   
+__Button, ListItem, etc..__ - src/components   
 __Form components__ - src/components/formComponents   
 __Context (state)__ - src/context/mainContext.js   
 __Pages (admin, cart, checkout, index)__ - src/pages   
diff --git a/components/CartLink.js b/components/CartLink.js
index 68d574b..609015c 100755
--- a/components/CartLink.js
+++ b/components/CartLink.js
@@ -16,7 +16,7 @@ function CartLink(props) {
       <div className="fixed top-53 right-24 desktop:right-flexiblemargin z-10">
         <div className="flex flex-1 justify-end pr-4 relative">
           <Link href="/cart">
-            <a>
+            <a aria-label="Cart">
               <FaShoppingCart />
             </a>
           </Link>
diff --git a/components/ListItem.js b/components/ListItem.js
index ffc6e15..394ebcf 100755
--- a/components/ListItem.js
+++ b/components/ListItem.js
@@ -11,7 +11,7 @@ const ListItem = ({ link, title, imageSrc, price }) =>  (
     p1 sm:p-2
   ">
     <Link href={`${link}`}>
-      <a>
+      <a aria-label={title}>
         <div className="h-72 flex justify-center items-center bg-light hover:bg-light-200">
           <div className="flex flex-column justify-center items-center">
             <Image alt={title} src={imageSrc} className="w-3/5" />
diff --git a/components/Nav.js b/components/Nav.js
deleted file mode 100755
index d78e2f5..0000000
--- a/components/Nav.js
+++ /dev/null
@@ -1,62 +0,0 @@
-import React from 'react'
-
-import { titleIfy, slugify } from '../../utils/helpers'
-import { FaShoppingCart, FaCircle } from 'react-icons/fa';
-import Link from "next/link"
-
-import { SiteContext, ContextProviderComponent } from '../context/mainContext'
-
-class Nav extends React.Component {
-  render() {
-    let { numberOfItemsInCart, navItems: { navInfo: { data: links }}} = this.props.context
-
-    links = links.map(link => {
-      const newLink = {}
-      newLink.link = slugify(link)
-      newLink.name = titleIfy(link)
-      return newLink
-    })
-    links.unshift({ name: 'Home', link: '/'})
-    return (
-      <>
-      <div className="flex">
-        {
-          links.map((l, i) => (
-            <Link href={l.link} key={i}>
-              <a>
-               <p key={i} className="text-left m-0 text-smaller mr-4 sm:mr-8 font-semibold">{l.name}</p>
-              </a>
-            </Link>
-          ))
-        }
-      </div>
-      <div className="flex flex-1 justify-end pr-4 relative">
-        <Link to="/cart">
-          <FaShoppingCart />
-        </Link>
-        {
-          numberOfItemsInCart > Number(0) && (
-            <div>
-              <FaCircle />
-            </div>
-          )
-        }
-    </div>
-      </>
-    )
-  }
-}
-
-function NavWithContext(props) {
-  return (
-    <ContextProviderComponent>
-      <SiteContext.Consumer>
-        {
-          context => <Nav {...props} context={context} />
-        }
-      </SiteContext.Consumer>
-    </ContextProviderComponent>
-  )
-}
-
-export default NavWithContext
diff --git a/components/ViewInventory.js b/components/ViewInventory.js
index e32251f..2c8d397 100644
--- a/components/ViewInventory.js
+++ b/components/ViewInventory.js
@@ -1,5 +1,5 @@
 import React from 'react'
-import getInventory from '../utils/inventoryProvider'
+import { fetchInventory } from '../utils/inventoryProvider'
 import DENOMINATION from '../utils/currencyProvider'
 import Image from '../components/Image'
 import Link from 'next/link'
@@ -16,7 +16,7 @@ class ViewInventory extends React.Component {
     this.fetchInventory()
   }
   fetchInventory = async() => {
-    const inventory = await getInventory()
+    const inventory = await fetchInventory()
     this.setState({ inventory })
   }
   editItem = (item, index) => {
@@ -54,7 +54,7 @@ class ViewInventory extends React.Component {
                 <div className="border-b py-10" key={item.id}>
                   <div className="flex items-center">
                     <Link href={slugify(item.name)}>
-                      <a>
+                      <a aria-label={item.name}>
                         <Image className="w-32 m-0" src={item.image} alt={item.name} />
                       </a>
                     </Link>
diff --git a/components/header.js b/components/header.js
deleted file mode 100755
index 7b151e9..0000000
--- a/components/header.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import Link from "next/link"
-import PropTypes from "prop-types"
-import React from "react"
-
-const Header = ({ siteTitle }) => (
-  <header
-    style={{
-      marginBottom: `1.45rem`,
-    }}
-  >
-    <div
-      style={{
-        margin: `0 auto`,
-        maxWidth: 960,
-        padding: `1.45rem 1.0875rem`,
-      }}
-    >
-      <h1 style={{ margin: 0 }}>
-        <Link
-          href="/"
-          style={{
-            color: `white`,
-            textDecoration: `none`,
-          }}
-        >
-          <a>
-            {siteTitle}
-          </a>
-        </Link>
-      </h1>
-    </div>
-  </header>
-)
-
-Header.propTypes = {
-  siteTitle: PropTypes.string,
-}
-
-Header.defaultProps = {
-  siteTitle: ``,
-}
-
-export default Header
diff --git a/components/heroComponents/DisplayMedium.js b/components/heroComponents/DisplayMedium.js
index a95136f..6e409d2 100755
--- a/components/heroComponents/DisplayMedium.js
+++ b/components/heroComponents/DisplayMedium.js
@@ -7,7 +7,7 @@ const DisplayMedium = ({ imageSrc, title, subtitle, link }) => {
     mb-4 lg:mb-0
     bg-light p-8 pb-0 hover:bg-light-200">
       <Link href={`${link}`}>
-        <a>
+        <a aria-label={title}>
           <div className="flex flex-column justify-center items-center h-56">
             <Image src={imageSrc} alt={title} className="w-3/5" />
           </div>
diff --git a/components/heroComponents/DisplaySmall.js b/components/heroComponents/DisplaySmall.js
index e784c8c..9ba22dc 100755
--- a/components/heroComponents/DisplaySmall.js
+++ b/components/heroComponents/DisplaySmall.js
@@ -7,7 +7,7 @@ const DisplaySmall = ({ link, title, subtitle, imageSrc }) =>  (
   px-6 pt-10 pb-2 lg:p-6 lg:pb-0
   hover:bg-light-200 lg:mb-0 mb-4">
     <Link href={link}>
-      <a>
+      <a aria-label={title}>
         <div className="flex flex-column justify-center items-center h-32">
           <Image alt={title} src={imageSrc} className="w-3/5" />
         </div>
diff --git a/layouts/layout.js b/layouts/layout.js
index 0ba90aa..de73552 100644
--- a/layouts/layout.js
+++ b/layouts/layout.js
@@ -14,7 +14,7 @@ export default function Layout({ children, categories }) {
         <div className="flex justify-center">
           <div className="px-4 pt-12 pb-6 flex flex-col w-fw mobile:px-12 sm:flex-row  desktop:px-0">
             <Link href="/">
-              <a>
+              <a aria-label="Home">
                 <div className="mb-4 sm:mr-16">
                   <img src="/logo.png" alt="logo" width="90" height="28" />
                 </div>
@@ -22,7 +22,7 @@ export default function Layout({ children, categories }) {
             </Link>
             <div className="flex flex-wrap mt-1">
               <Link href="/">
-                <a>
+                <a aria-label="Home">
                   <p className="
                     sm:mr-8 sm:mb-0
                     mb-4 text-left text-smaller mr-4
@@ -37,7 +37,7 @@ export default function Layout({ children, categories }) {
                     href={`/category/${slugify(category)}`}
                     key={index}
                   >
-                    <a>
+                    <a aria-label={category}>
                       <p className="
                           sm:mr-8 sm:mb-0
                           mb-4 text-left text-smaller mr-4
@@ -49,7 +49,7 @@ export default function Layout({ children, categories }) {
                 ))
               }
               <Link href="/categories">
-                <a>
+                <a aria-label="All categories">
                   <p className="
                     sm:mr-8 sm:mb-0
                     mb-4 text-left text-smaller mr-4 
@@ -79,7 +79,7 @@ export default function Layout({ children, categories }) {
             flex flex-1 mt-4
           ">
             <Link href="/admin">
-              <a>
+              <a aria-label="Admin panel">
               <p className="text-sm font-semibold">Admins</p>
               </a>
             </Link>
diff --git a/pages/cart.js b/pages/cart.js
index d3ef44c..49936a4 100644
--- a/pages/cart.js
+++ b/pages/cart.js
@@ -58,12 +58,12 @@ const Cart = ({ context }) => {
                         <div className="border-b py-10" key={item.id}>
                           <div className="flex items-center hidden md:flex">
                             <Link href={`/product/${slugify(item.name)}`}>
-                              <a>
+                              <a aria-label={item.name}>
                                 <Image className="w-32 m-0" src={item.image} alt={item.name} />
                               </a>
                             </Link>
                             <Link href={`/product/${slugify(item.name)}`}>
-                              <a>
+                              <a aria-label={item.name}>
                                 <p className="
                                 m-0 pl-10 text-gray-600 w-60
                                 ">
@@ -98,7 +98,7 @@ const Cart = ({ context }) => {
                             </Link>
                             <div>
                               <Link href={`/product/${slugify(item.name)}`}>
-                                <a>
+                                <a aria-label={item.name}>
                                   <p className="
                                   m-0 pl-6 text-gray-600 text-base
                                   ">
@@ -140,7 +140,7 @@ const Cart = ({ context }) => {
           </div>
           {!cartEmpty && (
             <Link href="/checkout" className="flex flex-1 justify-end">
-              <a>
+              <a aria-label="Check out">
                 <div className="cursor-pointer flex items-center">
                   <p className="text-gray-600 text-sm mr-2">Proceed to check out</p>
                   <FaLongArrowAltRight className="text-gray-600" />
diff --git a/pages/categories.js b/pages/categories.js
index 382c382..f9c3b32 100644
--- a/pages/categories.js
+++ b/pages/categories.js
@@ -1,5 +1,5 @@
 import Head from 'next/head'
-import fetchInventory from "../utils/inventoryProvider"
+import { fetchInventory } from "../utils/inventoryProvider"
 import { titleIfy , slugify } from '../utils/helpers'
 import { DisplayMedium } from '../components'
 import { SiteContext, ContextProviderComponent } from '../context/mainContext'
diff --git a/pages/checkout.js b/pages/checkout.js
index 7b69a6b..9e1c789 100644
--- a/pages/checkout.js
+++ b/pages/checkout.js
@@ -141,7 +141,7 @@ const Checkout = ({ context }) => {
         <div className="pt-10 pb-8">
           <h1 className="text-5xl font-light mb-6">Checkout</h1>
           <Link href="/cart">
-            <a>
+            <a aria-label="Cart">
               <div className="cursor-pointer flex  items-center">
                 <FaLongArrowAltLeft className="mr-2 text-gray-600" />
                 <p className="text-gray-600 text-sm">Edit Cart</p>
diff --git a/pages/index.js b/pages/index.js
index f2bcf0c..892846f 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,7 @@
 import Head from 'next/head'
 import { Center, Footer, Tag, Showcase, DisplaySmall, DisplayMedium } from '../components'
 import { titleIfy, slugify } from '../utils/helpers'
-import fetchInventory from '../utils/inventoryProvider'
+import { fetchInventory } from '../utils/inventoryProvider'
 import { SiteContext, ContextProviderComponent } from '../context/mainContext'
 
 const Home = ({ inventoryData = [], categories: categoryData = [] }) => {
diff --git a/pages/product/[name].js b/pages/product/[name].js
index e7778c2..2c52958 100644
--- a/pages/product/[name].js
+++ b/pages/product/[name].js
@@ -4,7 +4,7 @@ import { SiteContext, ContextProviderComponent } from '../../context/mainContext
 import Button from '../../components/Button'
 import Image from '../../components/Image'
 import QuantityPicker from '../../components/QuantityPicker'
-import fetchInventory from '../../utils/inventoryProvider'
+import { fetchInventory } from '../../utils/inventoryProvider'
 import { slugify } from '../../utils/helpers'
 
 const ItemView = (props) => {
diff --git a/utils/inventoryForCategory.js b/utils/inventoryForCategory.js
index cddb86b..38e0f8e 100644
--- a/utils/inventoryForCategory.js
+++ b/utils/inventoryForCategory.js
@@ -1,4 +1,4 @@
-import fetchInventory from './inventoryProvider'
+import { fetchInventory } from './inventoryProvider'
 import inventoryByCategory from './inventoryByCategory'
 
 async function inventoryForCategory (category) {
diff --git a/utils/inventoryProvider.js b/utils/inventoryProvider.js
index a5ac9fb..a3cab96 100644
--- a/utils/inventoryProvider.js
+++ b/utils/inventoryProvider.js
@@ -20,4 +20,6 @@ async function fetchInventory() {
   return Promise.resolve(inventory)
 }
 
-export default fetchInventory
\ No newline at end of file
+export {
+  fetchInventory
+}
\ No newline at end of file