Provide alternative text for images where appropriate

2024-11-22 01:47:00 +01:00 · 2020-11-11 09:38:15 -06:00 · 2020-11-11 09:38:15 -06:00 · a05230bba7
commit a05230bba7
parent 2540ca77b9
39 changed files with 80 additions and 49 deletions
--- a/app/_locales/en/messages.json
+++ b/app/_locales/en/messages.json
@ -43,6 +43,9 @@
  "activityLog": {
    "message": "activity log"
  },
+  "addAccount": {
+    "message": "Add an account"
+  },
  "addAcquiredTokens": {
    "message": "Add the tokens you've acquired using MetaMask"
  },
@ -1358,6 +1361,9 @@
  "scanQrCode": {
    "message": "Scan QR Code"
  },
+  "scrollDown": {
+    "message": "Scroll down"
+  },
  "search": {
    "message": "Search"
  },
--- a/app/notification.html
+++ b/app/notification.html
@ -29,8 +29,8 @@
  </head>
  <body class="notification">
    <div id="app-content">
-      <img id="loading__logo" src="./images/logo/metamask-fox.svg" />
-      <img id="loading__spinner" src="./images/spinner.gif" />
+      <img id="loading__logo" src="./images/logo/metamask-fox.svg" alt="" />
+      <img id="loading__spinner" src="./images/spinner.gif" alt="" />
    </div>
    <div id="popover-content"></div>
    <script src="./ui-libs.js" type="text/javascript" charset="utf-8"></script>
--- a/ui/app/components/app/account-menu/account-menu.component.js
+++ b/ui/app/components/app/account-menu/account-menu.component.js
@ -278,22 +278,22 @@ export default class AccountMenu extends Component {
  }

  renderScrollButton() {
-    const { shouldShowScrollButton } = this.state
+    if (!this.state.shouldShowScrollButton) {
+      return null
+    }

    return (
-      shouldShowScrollButton && (
-        <div
-          className="account-menu__scroll-button"
-          onClick={this.handleScrollDown}
-        >
-          <img
-            src="./images/icons/down-arrow.svg"
-            width={28}
-            height={28}
-            alt="scroll down"
-          />
-        </div>
-      )
+      <div
+        className="account-menu__scroll-button"
+        onClick={this.handleScrollDown}
+      >
+        <img
+          src="./images/icons/down-arrow.svg"
+          width="28"
+          height="28"
+          alt={this.context.t('scrollDown')}
+        />
+      </div>
    )
  }

@ -357,6 +357,7 @@ export default class AccountMenu extends Component {
            <img
              className="account-menu__item-icon"
              src="images/plus-btn-white.svg"
+              alt={t('createAccount')}
            />
          }
          text={t('createAccount')}
@ -377,6 +378,7 @@ export default class AccountMenu extends Component {
            <img
              className="account-menu__item-icon"
              src="images/import-account.svg"
+              alt={t('importAccount')}
            />
          }
          text={t('importAccount')}
@ -401,6 +403,7 @@ export default class AccountMenu extends Component {
            <img
              className="account-menu__item-icon"
              src="images/connect-icon.svg"
+              alt={t('connectHardwareWallet')}
            />
          }
          text={t('connectHardwareWallet')}
@ -411,7 +414,7 @@ export default class AccountMenu extends Component {
            toggleAccountMenu()
            history.push(ABOUT_US_ROUTE)
          }}
-          icon={<img src="images/mm-info-icon.svg" />}
+          icon={<img src="images/mm-info-icon.svg" alt={t('infoHelp')} />}
          text={t('infoHelp')}
        />
        <AccountMenuItem
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-content/confirm-page-container-warning/confirm-page-container-warning.component.js
@ -7,6 +7,7 @@ const ConfirmPageContainerWarning = (props) => {
      <img
        className="confirm-page-container-warning__icon"
        src="/images/alert.svg"
+        alt=""
      />
      <div className="confirm-page-container-warning__warning">
        {props.warning}
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-header/confirm-page-container-header.component.js
@ -47,7 +47,7 @@ export default function ConfirmPageContainerHeader({
              visibility: showEdit ? 'initial' : 'hidden',
            }}
          >
-            <img src="/images/caret-left.svg" />
+            <img src="/images/caret-left.svg" alt="" />
            <span
              className="confirm-page-container-header__back-button"
              onClick={() => onEdit()}
--- a/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
+++ b/ui/app/components/app/confirm-page-container/confirm-page-container-navigation/confirm-page-container-navigation.component.js
@ -33,14 +33,14 @@ const ConfirmPageContainerNavigation = (props) => {
          data-testid="first-page"
          onClick={() => onNextTx(firstTx)}
        >
-          <img src="/images/double-arrow.svg" />
+          <img src="/images/double-arrow.svg" alt="" />
        </div>
        <div
          className="confirm-page-container-navigation__arrow"
          data-testid="previous-page"
          onClick={() => onNextTx(prevTxId)}
        >
-          <img src="/images/single-arrow.svg" />
+          <img src="/images/single-arrow.svg" alt="" />
        </div>
      </div>
      <div className="confirm-page-container-navigation__textcontainer">
@ -65,6 +65,7 @@ const ConfirmPageContainerNavigation = (props) => {
          <img
            className="confirm-page-container-navigation__imageflip"
            src="/images/single-arrow.svg"
+            alt=""
          />
        </div>
        <div
@ -75,6 +76,7 @@ const ConfirmPageContainerNavigation = (props) => {
          <img
            className="confirm-page-container-navigation__imageflip"
            src="/images/double-arrow.svg"
+            alt=""
          />
        </div>
      </div>
--- a/ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.component.js
+++ b/ui/app/components/app/modals/confirm-remove-account/confirm-remove-account.component.js
@ -54,7 +54,10 @@ export default class ConfirmRemoveAccount extends Component {
            rel="noopener noreferrer"
            title={this.context.t('etherscanView')}
          >
-            <img src="images/popout.svg" />
+            <img
+              src="images/popout.svg"
+              alt={this.context.t('etherscanView')}
+            />
          </a>
        </div>
      </div>
--- a/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
+++ b/ui/app/components/app/modals/metametrics-opt-in-modal/metametrics-opt-in-modal.component.js
@ -24,7 +24,7 @@ export default class MetaMetricsOptInModal extends Component {
          <div className="metametrics-opt-in__content">
            <MetaFoxLogo />
            <div className="metametrics-opt-in__body-graphic">
-              <img src="images/metrics-chart.svg" />
+              <img src="images/metrics-chart.svg" alt="" />
            </div>
            <div className="metametrics-opt-in__title">
              Help Us Improve MetaMask
--- a/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js
+++ b/ui/app/components/app/modals/qr-scanner/qr-scanner.component.js
@ -210,7 +210,7 @@ export default class QrScanner extends Component {
    return (
      <>
        <div className="qr-scanner__image">
-          <img src="images/webcam.svg" width={70} height={70} />
+          <img src="images/webcam.svg" width="70" height="70" alt="" />
        </div>
        {title ? <div className="qr-scanner__title">{title}</div> : null}
        <div className="qr-scanner__error">{msg}</div>
--- a/ui/app/components/app/modals/transaction-confirmed/transaction-confirmed.component.js
+++ b/ui/app/components/app/modals/transaction-confirmed/transaction-confirmed.component.js
@ -28,7 +28,7 @@ export default class TransactionConfirmed extends PureComponent {
    return (
      <Modal onSubmit={this.handleSubmit} submitText={t('ok')}>
        <div className="transaction-confirmed__content">
-          <img src="images/check-icon.svg" />
+          <img src="images/check-icon.svg" alt="" />
          <div className="transaction-confirmed__title">
            {`${t('confirmed')}!`}
          </div>
--- a/ui/app/components/app/network.js
+++ b/ui/app/components/app/network.js
@ -173,7 +173,7 @@ export default class Network extends Component {
                <img
                  title={t('attemptingConnect')}
                  src="images/loading.svg"
-                  alt=""
+                  alt={t('attemptingConnect')}
                />
              </span>
            ) : (
--- a/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
+++ b/ui/app/components/app/transaction-activity-log/transaction-activity-log-icon/transaction-activity-log-icon.component.js
@ -40,7 +40,7 @@ export default class TransactionActivityLogIcon extends PureComponent {

    return (
      <div className={classnames('transaction-activity-log-icon', className)}>
-        {imagePath && <img src={imagePath} height={9} width={9} />}
+        {imagePath && <img src={imagePath} height="9" width="9" alt="" />}
      </div>
    )
  }
--- a/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
+++ b/ui/app/components/app/transaction-list-item-details/transaction-list-item-details.component.js
@ -206,7 +206,7 @@ export default class TransactionListItemDetails extends PureComponent {
                  onClick={this.handleEtherscanClick}
                  disabled={!hash}
                >
-                  <img src="/images/arrow-popout.svg" />
+                  <img src="/images/arrow-popout.svg" alt="" />
                </Button>
              </Tooltip>
              {showRetry && (
--- a/ui/app/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
+++ b/ui/app/components/app/user-preferenced-currency-display/user-preferenced-currency-display.component.js
@ -23,7 +23,7 @@ export default function UserPreferencedCurrencyDisplay({
  const prefixComponent = useMemo(() => {
    return (
      currency === ETH &&
-      showEthLogo && <img src="/images/eth.svg" height={ethLogoHeight} />
+      showEthLogo && <img src="/images/eth.svg" height={ethLogoHeight} alt="" />
    )
  }, [currency, showEthLogo, ethLogoHeight])

--- a/ui/app/components/ui/circle-icon/circle-icon.component.js
+++ b/ui/app/components/ui/circle-icon/circle-icon.component.js
@ -40,6 +40,7 @@ export default class CircleIcon extends PureComponent {
            height: iconSize,
            width: iconSize,
          }}
+          alt=""
        />
      </div>
    )
--- a/ui/app/components/ui/error-message/error-message.component.js
+++ b/ui/app/components/ui/error-message/error-message.component.js
@ -7,7 +7,7 @@ const ErrorMessage = (props, context) => {

  return (
    <div className="error-message">
-      <img src="/images/alert-red.svg" className="error-message__icon" />
+      <img src="/images/alert-red.svg" alt="" className="error-message__icon" />
      <div className="error-message__text">{`ALERT: ${error}`}</div>
    </div>
  )
--- a/ui/app/components/ui/icon-with-fallback/icon-with-fallback.component.js
+++ b/ui/app/components/ui/icon-with-fallback/icon-with-fallback.component.js
@ -30,6 +30,7 @@ export default class IconWithFallback extends PureComponent {
        src={icon}
        style={style}
        className={className}
+        alt=""
      />
    ) : (
      <i
--- a/ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js
+++ b/ui/app/components/ui/identicon/blockieIdenticon/blockieIdenticon.component.js
@ -19,7 +19,7 @@ const BlockieIdenticon = ({ address, diameter }) => {
  return (
    <>
      <canvas ref={canvasRef} style={{ display: 'none' }} />
-      <img src={dataUrl} height={diameter} width={diameter} />
+      <img src={dataUrl} height={diameter} width={diameter} alt="" />
    </>
  )
 }
--- a/ui/app/components/ui/identicon/identicon.component.js
+++ b/ui/app/components/ui/identicon/identicon.component.js
@ -40,6 +40,7 @@ export default class Identicon extends PureComponent {
        className={classnames('identicon', className)}
        src={image}
        style={getStyles(diameter)}
+        alt=""
      />
    )
  }
@ -108,6 +109,7 @@ export default class Identicon extends PureComponent {
        className={classnames('identicon__eth-logo', className)}
        src="./images/eth_logo.svg"
        style={getStyles(diameter)}
+        alt=""
      />
    )
  }
--- a/ui/app/components/ui/info-tooltip/info-tooltip.js
+++ b/ui/app/components/ui/info-tooltip/info-tooltip.js
@ -32,7 +32,7 @@ export default function InfoTooltip({
        html={contentText}
        theme={wide ? 'tippy-tooltip-wideInfo' : 'tippy-tooltip-info'}
      >
-        <img src="images/mm-info-icon.svg" />
+        <img src="images/mm-info-icon.svg" alt="" />
      </Tooltip>
    </div>
  )
--- a/ui/app/components/ui/metafox-logo/metafox-logo.component.js
+++ b/ui/app/components/ui/metafox-logo/metafox-logo.component.js
@ -24,12 +24,13 @@ export default class MetaFoxLogo extends PureComponent {
        })}
      >
        <img
-          height={30}
+          height="30"
          src="/images/logo/metamask-logo-horizontal.svg"
          className={classnames(
            'app-header__metafox-logo',
            'app-header__metafox-logo--horizontal',
          )}
+          alt=""
        />
        <img
          {...iconProps}
@ -38,6 +39,7 @@ export default class MetaFoxLogo extends PureComponent {
            'app-header__metafox-logo',
            'app-header__metafox-logo--icon',
          )}
+          alt=""
        />
      </div>
    )
--- a/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
+++ b/ui/app/components/ui/sender-to-recipient/sender-to-recipient.component.js
@ -174,12 +174,12 @@ function Arrow({ variant }) {
  return variant === DEFAULT_VARIANT ? (
    <div className="sender-to-recipient__arrow-container">
      <div className="sender-to-recipient__arrow-circle">
-        <img height={15} width={15} src="./images/arrow-right.svg" />
+        <img height="15" width="15" src="./images/arrow-right.svg" alt="" />
      </div>
    </div>
  ) : (
    <div className="sender-to-recipient__arrow-container">
-      <img height={20} src="./images/caret-right.svg" />
+      <img height="20" src="./images/caret-right.svg" alt="" />
    </div>
  )
 }
--- a/ui/app/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
+++ b/ui/app/pages/add-token/token-list/token-list-placeholder/token-list-placeholder.component.js
@ -10,7 +10,7 @@ export default class TokenListPlaceholder extends Component {
  render() {
    return (
      <div className="token-list-placeholder">
-        <img src="images/tokensearch.svg" />
+        <img src="images/tokensearch.svg" alt="" width="65" height="58" />
        <div className="token-list-placeholder__text">
          {this.context.t('addAcquiredTokens')}
        </div>
--- a/ui/app/pages/add-token/token-search/token-search.component.js
+++ b/ui/app/pages/add-token/token-search/token-search.component.js
@ -53,7 +53,7 @@ export default class TokenSearch extends Component {
  renderAdornment() {
    return (
      <InputAdornment position="start" style={{ marginRight: '12px' }}>
-        <img src="images/search.svg" width="17" height="17" />
+        <img src="images/search.svg" width="17" height="17" alt="" />
      </InputAdornment>
    )
  }
--- a/ui/app/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
+++ b/ui/app/pages/confirm-approve/confirm-approve-content/confirm-approve-content.component.js
@ -236,7 +236,7 @@ export default class ConfirmApproveContent extends Component {
          <div className="confirm-approve-content__full-tx-content">
            <div className="confirm-approve-content__permission">
              {this.renderApproveContentCard({
-                symbol: <img src="/images/user-check.svg" />,
+                symbol: <img src="/images/user-check.svg" alt="" />,
                title: 'Permission',
                content: this.renderPermissionContent(),
                showEdit: true,
--- a/ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
+++ b/ui/app/pages/confirm-decrypt-message/confirm-decrypt-message.component.js
@ -195,6 +195,7 @@ export default class ConfirmDecryptMessage extends Component {
              <img
                className="request-decrypt-message__visual-identicon"
                src={origin.icon}
+                alt=""
              />
            ) : (
              <i className="request-decrypt-message__visual-identicon--default">
@ -240,7 +241,7 @@ export default class ConfirmDecryptMessage extends Component {
              })
            }}
          >
-            <img src="images/lock.svg" />
+            <img src="images/lock.svg" alt="" />
            <div className="request-decrypt-message__message-lock-text">
              {t('decryptMetamask')}
            </div>
--- a/ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
+++ b/ui/app/pages/confirm-encryption-public-key/confirm-encryption-public-key.component.js
@ -170,6 +170,7 @@ export default class ConfirmEncryptionPublicKey extends Component {
              <img
                className="request-encryption-public-key__visual-identicon"
                src={origin.icon}
+                alt=""
              />
            ) : (
              <i className="request-encryption-public-key__visual-identicon--default">
--- a/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
+++ b/ui/app/pages/confirm-token-transaction-base/confirm-token-transaction-base.component.js
@ -86,7 +86,7 @@ export default function ConfirmTokenTransactionBase({
      primaryTotalTextOverride={
        <div>
          <span>{`${tokensText} + `}</span>
-          <img src="/images/eth.svg" height="18" />
+          <img src="/images/eth.svg" height="18" alt="" />
          <span>{ethTransactionTotal}</span>
        </div>
      }
--- a/ui/app/pages/create-account/connect-hardware/select-hardware.js
+++ b/ui/app/pages/create-account/connect-hardware/select-hardware.js
@ -35,7 +35,7 @@ export default class SelectHardware extends Component {
        <img
          className="hw-connect__btn__img"
          src="images/trezor-logo.svg"
-          alt=""
+          alt="Trezor"
        />
      </button>
    )
@ -52,7 +52,7 @@ export default class SelectHardware extends Component {
        <img
          className="hw-connect__btn__img"
          src="images/ledger-logo.svg"
-          alt=""
+          alt="Ledger"
        />
      </button>
    )
--- a/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js
+++ b/ui/app/pages/first-time-flow/create-password/unique-image/unique-image.component.js
@ -19,7 +19,7 @@ export default class UniqueImageScreen extends PureComponent {

    return (
      <div>
-        <img src="/images/sleuth.svg" height={42} width={42} />
+        <img src="/images/sleuth.svg" height="42" width="42" alt="" />
        <div className="first-time-flow__header">{t('protectYourKeys')}</div>
        <div className="first-time-flow__text-block">
          {t('protectYourKeysMessage1')}
--- a/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
+++ b/ui/app/pages/first-time-flow/metametrics-opt-in/metametrics-opt-in.component.js
@ -32,7 +32,7 @@ export default class MetaMetricsOptIn extends Component {
        <div className="metametrics-opt-in__main">
          <MetaFoxLogo />
          <div className="metametrics-opt-in__body-graphic">
-            <img src="images/metrics-chart.svg" />
+            <img src="images/metrics-chart.svg" alt="" />
          </div>
          <div className="metametrics-opt-in__title">
            {t('metametricsHelpImproveMetaMask')}
--- a/ui/app/pages/first-time-flow/select-action/select-action.component.js
+++ b/ui/app/pages/first-time-flow/select-action/select-action.component.js
@ -50,7 +50,7 @@ export default class SelectAction extends PureComponent {
              <div className="select-action__select-button">
                <div className="select-action__button-content">
                  <div className="select-action__button-symbol">
-                    <img src="/images/download-alt.svg" />
+                    <img src="/images/download-alt.svg" alt="" />
                  </div>
                  <div className="select-action__button-text-big">
                    {t('noAlreadyHaveSeed')}
@ -70,7 +70,7 @@ export default class SelectAction extends PureComponent {
              <div className="select-action__select-button">
                <div className="select-action__button-content">
                  <div className="select-action__button-symbol">
-                    <img src="/images/thin-plus.svg" />
+                    <img src="/images/thin-plus.svg" alt="" />
                  </div>
                  <div className="select-action__button-text-big">
                    {t('letsGoSetUp')}
--- a/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js
+++ b/ui/app/pages/settings/contact-list-tab/contact-list-tab.component.js
@ -49,6 +49,7 @@ export default class ContactListTab extends Component {

  renderAddButton() {
    const { history } = this.props
+
    return (
      <div
        className="address-book-add-button__button"
@ -59,6 +60,7 @@ export default class ContactListTab extends Component {
        <img
          className="account-menu__item-icon"
          src="images/plus-btn-white.svg"
+          alt={this.context.t('addAccount')}
        />
      </div>
    )
--- a/ui/app/pages/settings/info-tab/info-tab.component.js
+++ b/ui/app/pages/settings/info-tab/info-tab.component.js
@ -96,7 +96,11 @@ export default class InfoTab extends PureComponent {
        <div className="settings-page__content-row">
          <div className="settings-page__content-item settings-page__content-item--without-height">
            <div className="info-tab__logo-wrapper">
-              <img src="images/info-logo.png" className="info-tab__logo" />
+              <img
+                src="images/info-logo.png"
+                className="info-tab__logo"
+                alt=""
+              />
            </div>
            <div className="info-tab__item">
              <div className="info-tab__version-header">
--- a/ui/app/pages/swaps/intro-popup/intro-popup.js
+++ b/ui/app/pages/swaps/intro-popup/intro-popup.js
@ -64,7 +64,7 @@ export default function IntroPopup({ onClose }) {
            {t('swapIntroLiquiditySourcesLabel')}
          </div>
          <div className="intro-popup__source-logo-container">
-            <img src="images/source-logos-all.svg" />
+            <img src="images/source-logos-all.svg" alt="" />
          </div>
          <div className="intro-popup__learn-more-header">
            {t('swapIntroLearnMoreHeader')}
--- a/ui/app/pages/swaps/loading-swaps-quotes/aggregator-logo.js
+++ b/ui/app/pages/swaps/loading-swaps-quotes/aggregator-logo.js
@ -19,7 +19,7 @@ export default function AggregatorLogo({ icon, color }) {
          boxShadow: `0px 4px 20px ${hexToRGB(color, 0.25)}`,
        }}
      >
-        <img src={icon} />
+        <img src={icon} alt="" />
      </div>
    </div>
  )
--- a/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js
+++ b/ui/app/pages/swaps/main-quote-summary/main-quote-summary.js
@ -74,6 +74,7 @@ export default function MainQuoteSummary({
          <img
            className="main-quote-summary__down-arrow"
            src="images/down-arrow-grey.svg"
+            alt=""
          />
          <div className="main-quote-summary__destination-row">
            <UrlIcon
--- a/ui/app/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js
+++ b/ui/app/pages/swaps/searchable-item-list/list-item-search/list-item-search.component.js
@ -7,7 +7,7 @@ import { usePrevious } from '../../../../hooks/usePrevious'

 const renderAdornment = () => (
  <InputAdornment position="start" style={{ marginRight: '12px' }}>
-    <img src="images/search.svg" width="17" height="17" />
+    <img src="images/search.svg" width="17" height="17" alt="" />
  </InputAdornment>
 )

--- a/ui/app/pages/swaps/select-quote-popover/quote-details/quote-details.js
+++ b/ui/app/pages/swaps/select-quote-popover/quote-details/quote-details.js
@ -82,6 +82,7 @@ const QuoteDetails = ({
          <img
            src="/images/logo/metamask-fox.svg"
            className="quote-details__metafox-logo"
+            alt=""
          />
          {t('swapMetaMaskFee')}
        </div>