improved accessibility

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   

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>

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" />

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>

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>

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>

layouts/layout.js

@@ -14,15 +14,15 @@ 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>
               </a>
             </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>

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" />

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'

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>

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 = [] }) => {

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) => {

utils/inventoryForCategory.js

@@ -1,4 +1,4 @@
-import fetchInventory from './inventoryProvider'
+import { fetchInventory } from './inventoryProvider'
 import inventoryByCategory from './inventoryByCategory'
 
 async function inventoryForCategory (category) {

utils/inventoryProvider.js

@@ -20,4 +20,6 @@ async function fetchInventory() {
   return Promise.resolve(inventory)
 }
 
-export default fetchInventory
+export {
+  fetchInventory
+}