Fix WCAG issues where available

Added aria-label where possible

Author: w3bdesign

components/Cart/Cart.component.jsx

@@ -19,17 +19,20 @@ const Cart = () => {
   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'