Merge pull request #236 from w3bdesign/development

Development

Author: w3bdesign

README.md

@@ -41,6 +41,7 @@
 - Support for simple products and variable products
 - Cart handling and checkout with WooCommerce (Cash On Delivery only for now)
 - Algolia search
+- Meets WCAG accessibility standards where possible
 - Placeholder for products without images
 - Apollo Client with GraphQL
 - React Hook Form with form validation and error display

components/Cart/Cart.component.jsx

@@ -1,5 +1,4 @@
 import { useContext } from 'react';
-
 import Link from 'next/link';
 
 import { AppContext } from 'utils/context/AppContext';
@@ -9,27 +8,33 @@ import { AppContext } from 'utils/context/AppContext';
  * Currently only displays a sample cart.
  * Displays amount of items in cart.
  */
-const Cart = () => {  
+const Cart = () => {
   const [cart, setCart] = useContext(AppContext);
- 
 
   const productsCount =
     null !== cart && Object.keys(cart).length ? cart.totalProductsCount : '';
 
   return (
     <>
       <Link href="/handlekurv">
-        <a className="inline-block pl-3 no-underline hover:text-black">
+        <a
+          className="inline-block pl-3 no-underline hover:text-black"
+          aria-label="Handlekurv"
+        >
           <svg
             className="fill-current hover:text-black"
             xmlns="http://www.w3.org/2000/svg"
             width="24"
             height="24"
             viewBox="0 0 24 24"
+            aria-label="Handlekurv"
           >
-            <path d="M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z" />
-            <circle cx="10.5" cy="18.5" r="1.5" />
-            <circle cx="17.5" cy="18.5" r="1.5" />
+            <path
+              d="M21,7H7.462L5.91,3.586C5.748,3.229,5.392,3,5,3H2v2h2.356L9.09,15.414C9.252,15.771,9.608,16,10,16h8 c0.4,0,0.762-0.238,0.919-0.606l3-7c0.133-0.309,0.101-0.663-0.084-0.944C21.649,7.169,21.336,7,21,7z M17.341,14h-6.697L8.371,9 h11.112L17.341,14z"
+              aria-label="Handlekurv"
+            />
+            <circle cx="10.5" cy="18.5" r="1.5" aria-label="Handlekurv" />
+            <circle cx="17.5" cy="18.5" r="1.5" aria-label="Handlekurv" />
           </svg>
         </a>
       </Link>

components/Header/Navbar.component.jsx

@@ -48,8 +48,12 @@ const Navbar = () => {
                   width="24"
                   height="24"
                   viewBox="0 0 24 24"
+                  aria-label="Nettbutikk logo"
                 >
-                  <path d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z" />
+                  <path
+                    d="M5,22h14c1.103,0,2-0.897,2-2V9c0-0.553-0.447-1-1-1h-3V7c0-2.757-2.243-5-5-5S7,4.243,7,7v1H4C3.447,8,3,8.447,3,9v11 C3,21.103,3.897,22,5,22z M9,7c0-1.654,1.346-3,3-3s3,1.346,3,3v1H9V7z M5,10h2v2h2v-2h6v2h2v-2h2l0.002,10H5V10z"
+                    aria-label="Nettbutikk logo"
+                  />
                 </svg>
                 NETTBUTIKK
               </a>

components/Search/AlgoliaSearchBox.component.jsx

@@ -25,14 +25,16 @@ const AlgoliaSearchBox = () => {
         <div className="">
           <InstantSearch
             indexName={WOO_CONFIG.ALGOLIA_INDEX_NAME}
-            searchClient={searchClient}
+            searchClient={searchClient}            
           >
             {/*We need to conditionally add a border because the element has position:fixed*/}
+           
             <SearchBox
+            aria-label="Søk her"
               translations={{
                 submitTitle: 'Søk',
                 resetTitle: 'Slett søketekst',
-                placeholder: 'Søk her ...',
+                placeholder: 'Søk etter produkter',
               }}
               className={`px-4 py-2 text-base bg-white border outline-none rounded ${
                 hasFocus ? 'border-black' : 'border-gray-400'

components/Search/MobileSearch.component.jsx

@@ -27,7 +27,7 @@ const MobileSearch = () => {
             translations={{
               submitTitle: 'Søk',
               resetTitle: 'Slett søketekst',
-              placeholder: 'Søk her ...',
+              placeholder: 'Søk etter produkter',
             }}
             className={`px-4 py-2 text-base bg-white border outline-none rounded ${
               hasFocus ? 'border-black' : 'border-gray-400'