Make swap arrows accessible, make swaps advanced options accessible (#9750)

app/_locales/en/messages.json

@@ -1827,6 +1827,9 @@
   "swapSwapFrom": {
     "message": "Swap from"
   },
+  "swapSwapSwitch": {
+    "message": "Switch from and to tokens"
+  },
   "swapSwapTo": {
     "message": "Swap to"
   },

ui/app/pages/swaps/build-quote/build-quote.js

@@ -230,13 +230,14 @@ export default function BuildQuote ({
         <div
           className="build-quote__swap-arrows-row"
         >
-          <div
+          <button
             className="build-quote__swap-arrows"
             onClick={() => {
               onToSelect(selectedFromToken)
               onFromSelect(selectedToToken)
             }}
-          />
+          ><img src="/images/icons/swap2.svg" alt={t('swapSwapSwitch')} width="12" height="16" />
+          </button>
         </div>
         <div className="build-quote__dropdown-swap-to-header">
           <div className="build-quote__input-label">{t('swapSwapTo')}</div>

ui/app/pages/swaps/build-quote/index.scss

@@ -60,11 +60,8 @@
     flex: 0 0 auto;
     height: 16px;
     width: 12px;
-    background-image: url(/images/icons/swap2.svg);
-    background-size: contain;
-    background-repeat: no-repeat;
-    position: absolute;
     cursor: pointer;
+    background: unset;
   }
 
   &__max-button {

ui/app/pages/swaps/slippage-buttons/index.scss

@@ -12,6 +12,7 @@
     margin-left: auto;
     margin-right: auto;
     cursor: pointer;
+    background: unset;
 
     &--open {
       margin-bottom: 8px;

ui/app/pages/swaps/slippage-buttons/slippage-buttons.js

@@ -35,7 +35,7 @@ export default function SlippageButtons ({
 
   return (
     <div className="slippage-buttons">
-      <div
+      <button
         onClick={() => setOpen(!open)}
         className={classnames('slippage-buttons__header', {
           'slippage-buttons__header--open': open,
@@ -43,7 +43,7 @@ export default function SlippageButtons ({
       >
         <div className="slippage-buttons__header-text">{t('swapsAdvancedOptions')}</div>
         {open ? <i className="fa fa-angle-up" /> : <i className="fa fa-angle-down" />}
-      </div>
+      </button>
       <div className="slippage-buttons__content">
         {open && (
           <div className="slippage-buttons__dropdown-content">