Make account details modal close button easier to click (#7797)

The account details close button is difficult to click from the e2e
tests because it has a size of zero. The actual icon is added via CSS
as an `::after` pseudo-element.

The CSS has been adjusted to give the icon a size, and it the markup
is now a `button` rather than a `div`.

test/e2e/ethereum-on.spec.js

@@ -112,7 +112,8 @@ describe('MetaMask', function () {
       publicAddress = await addressInput.getAttribute('value')
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.executeScript("document.querySelector('.account-modal-close').click()")
+      const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
+      await accountModalClose.click()
 
       await driver.wait(until.stalenessOf(accountModal))
       await delay(regularDelayMs)

test/e2e/from-import-ui.spec.js

@@ -118,7 +118,8 @@ describe('Using MetaMask with an existing account', function () {
       const [address] = await findElements(driver, By.css('input.qr-ellip-address'))
       assert.equal(await address.getAttribute('value'), testAddress)
 
-      await driver.executeScript("document.querySelector('.account-modal-close').click()")
+      const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
+      await accountModalClose.click()
       await delay(largeDelayMs)
     })
 
@@ -128,7 +129,8 @@ describe('Using MetaMask with an existing account', function () {
       const detailModal = await driver.findElement(By.css('span .modal'))
       await delay(regularDelayMs)
 
-      await driver.executeScript("document.querySelector('.account-modal-close').click()")
+      const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
+      await accountModalClose.click()
       await driver.wait(until.stalenessOf(detailModal))
       await delay(regularDelayMs)
     })

test/e2e/incremental-security.spec.js

@@ -117,7 +117,8 @@ describe('MetaMask', function () {
 
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.executeScript("document.querySelector('.account-modal-close').click()")
+      const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
+      await accountModalClose.click()
 
       await driver.wait(until.stalenessOf(accountModal))
       await delay(regularDelayMs)

test/e2e/metamask-ui.spec.js

@@ -148,7 +148,8 @@ describe('MetaMask', function () {
 
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.executeScript("document.querySelector('.account-modal-close').click()")
+      const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
+      await accountModalClose.click()
 
       await driver.wait(until.stalenessOf(accountModal))
       await delay(regularDelayMs)

test/e2e/permissions.spec.js

@@ -113,7 +113,8 @@ describe('MetaMask', function () {
       publicAddress = await addressInput.getAttribute('value')
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.executeScript("document.querySelector('.account-modal-close').click()")
+      const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
+      await accountModalClose.click()
 
       await driver.wait(until.stalenessOf(accountModal))
       await delay(regularDelayMs)

test/e2e/signature-request.spec.js

@@ -145,7 +145,8 @@ describe('MetaMask', function () {
       const newPublicAddress = await addressInput.getAttribute('value')
       const accountModal = await driver.findElement(By.css('span .modal'))
 
-      await driver.executeScript("document.querySelector('.account-modal-close').click()")
+      const accountModalClose = await driver.findElement(By.css('.account-modal-close'))
+      await accountModalClose.click()
 
       await driver.wait(until.stalenessOf(accountModal))
       await delay(regularDelayMs)

ui/app/components/app/modals/account-modal-container/account-modal-container.component.js

@@ -26,7 +26,7 @@ export default function AccountModalContainer (props, context) {
             <span className="account-modal-back__text">{' ' + context.t('back')}</span>
           </div>
         )}
-        <div className="account-modal-close" onClick={hideModal} />
+        <button className="account-modal-close" onClick={hideModal} />
         {children}
       </div>
     </div>

ui/app/css/itcss/components/modal.scss

@@ -61,14 +61,17 @@
   }
 }
 
-.account-modal-close::after {
+.account-modal-close {
-  content: '\00D7';
   font-size: 40px;
+  background-color: transparent;
   color: $dusty-gray;
   position: absolute;
   top: 10px;
   right: 12px;
-  cursor: pointer;
+}
+
+.account-modal-close::after {
+  content: '\00D7';
 }
 
 .account-modal-container .identicon {