fix axe error, update validation (#60)

Author: yulia-dnistrian

src/AddressFields.tsx

@@ -112,6 +112,7 @@ export const AddressFields: React.FC<CheckoutParams> = (props) => {
 
   const handleClearSearch = () => {
     resetForm({});
+    setCheckedItem(-1);
     if (addressData && addressData.length > 0) {
       setEditing(false);
     }

src/AppHeader.tsx

@@ -44,7 +44,7 @@ export const AppHeader: React.FC = () => {
           <LanguageDropdown />
         </div>
         <div className="appheader__moltincartcontainer">
-          <button className="appheader__cartbtn epbtn --bordered" onClick={handleCartModal}>
+          <button className="appheader__cartbtn epbtn --bordered" aria-label={t('cart')} onClick={handleCartModal}>
             <span className="appheader__cartbtntxt">
               {t('cart')}
               {' ('}

src/CartItemList.tsx

@@ -82,11 +82,11 @@ export const CartItemList: React.FC<CartItemListParams> = (props) => {
                   </div>
                   <div className="cartitemlist__quantitywrap">
                     <div className="cartitemlist__quantity">
-                      <button className="cartitemlist__arrow --top" onClick={() => {handleUpdate(item.id, item.quantity + 1)}} />
+                      <button className="cartitemlist__arrow --top" aria-label={t('add-item')} onClick={() => {handleUpdate(item.id, item.quantity + 1)}} />
                       <p className='cartitemlist__count'>
                         {item.quantity}
                       </p>
-                      <button className="cartitemlist__arrow --bottom" disabled={item.quantity === 1} onClick={() => {handleUpdate(item.id, item.quantity - 1)}} />
+                      <button className="cartitemlist__arrow --bottom" aria-label={t('remove-item')} disabled={item.quantity === 1} onClick={() => {handleUpdate(item.id, item.quantity - 1)}} />
                     </div>
                   </div>
                 </div>

src/CartModal.tsx

@@ -192,7 +192,7 @@ export const CartModal: React.FC<CartModalParams> = (props) => {
             <div className="cartmodal__body">
               <StripeProvider apiKey={config.stripeKey}>
                 <Elements>
-                  <Checkout shippingAddress={shippingAddress} onPayOrder={onPayOrder} isDisabled={!billingAddress.last_name || !email || emailError !== ''} />
+                  <Checkout shippingAddress={shippingAddress} onPayOrder={onPayOrder} isDisabled={!billingAddress.last_name || (!isLoggedIn && !email) || (!isLoggedIn && emailError !== '')} />
                 </Elements>
               </StripeProvider>
             </div>

src/SearchBar.tsx

@@ -98,6 +98,7 @@ export const SearchBar: React.FC<SearchBoxProps> = () => {
       <button
         className="searchbar__open"
         onClick={handleInputToggle}
+        aria-label={t('search')}
       >
         <MagnifyingGlassIcon />
       </button>

src/locales/en.json

@@ -175,5 +175,7 @@
   "start-typing-an-address": "Start typing an address",
   "search-for-your-address": "Search for your {route} address",
   "item": "item",
-  "items": "items"
+  "items": "items",
+  "add-item": "Add another item",
+  "remove-item": "Remove one item"
 }

src/locales/fr.json

@@ -175,5 +175,7 @@
   "start-typing-an-address": "ŠŠţååŕţ ţţýþîîñĝ ååñ ååððŕŕéšš",
   "search-for-your-address": "ŠŠéåŕŕçĥ ƒƒöŕ ýýöûŕ {route} ååððŕŕéšš",
   "item": "îîţéɱ",
-  "items": "îîţééɱš"
+  "items": "îîţééɱš",
+  "add-item": "ÅÅðð ååñöţţĥéŕ îîţéɱ",
+  "remove-item": "ŔŔéɱööṽé ööñé îîţéɱ"
 }