Add alt text for NFT images (#17284)

ui/components/app/collectible-details/collectible-details.js

@@ -20,6 +20,7 @@ import {
 } from '../../../helpers/constants/design-system';
 import { useI18nContext } from '../../../hooks/useI18nContext';
 import { getAssetImageURL, shortenAddress } from '../../../helpers/utils/util';
+import { getCollectibleImageAlt } from '../../../helpers/utils/collectibles';
 import {
   getCurrentChainId,
   getIpfsGateway,
@@ -82,6 +83,7 @@ export default function CollectibleDetails({ collectible }) {
     imageOriginal ?? image,
     ipfsGateway,
   );
+  const collectibleImageAlt = getCollectibleImageAlt(collectible);
   const isDataURI = collectibleImageURL.startsWith('data:');
 
   const onRemove = () => {
@@ -178,6 +180,7 @@ export default function CollectibleDetails({ collectible }) {
               <img
                 className="collectible-details__image"
                 src={collectibleImageURL}
+                alt={collectibleImageAlt}
               />
             ) : (
               <CollectibleDefaultImage name={name} tokenId={tokenId} />

ui/components/app/collectibles-items/collectibles-items.js

@@ -25,6 +25,7 @@ import {
 } from '../../../selectors';
 import { ASSET_ROUTE } from '../../../helpers/constants/routes';
 import { getAssetImageURL } from '../../../helpers/utils/util';
+import { getCollectibleImageAlt } from '../../../helpers/utils/collectibles';
 import { updateCollectibleDropDownState } from '../../../store/actions';
 import { usePrevious } from '../../../hooks/usePrevious';
 import { getCollectiblesDropdownState } from '../../../ducks/metamask/metamask';
@@ -90,6 +91,7 @@ export default function CollectiblesItems({
     if (collectionImage) {
       return (
         <img
+          alt={collectionName}
           src={collectionImage}
           className="collectibles-items__collection-image"
         />
@@ -175,6 +177,7 @@ export default function CollectiblesItems({
               const { image, address, tokenId, backgroundColor, name } =
                 collectible;
               const collectibleImage = getAssetImageURL(image, ipfsGateway);
+              const collectibleImageAlt = getCollectibleImageAlt(collectible);
               const handleImageClick = () =>
                 history.push(`${ASSET_ROUTE}/${address}/${tokenId}`);
 
@@ -200,6 +203,7 @@ export default function CollectiblesItems({
                         <img
                           className="collectibles-items__item-image"
                           src={collectibleImage}
+                          alt={collectibleImageAlt}
                         />
                       </button>
                     ) : (

ui/helpers/utils/collectibles.js

@@ -0,0 +1,3 @@
+export const getCollectibleImageAlt = ({ name, tokenId, description }) => {
+  return description ?? `${name} ${tokenId}`;
+};

ui/helpers/utils/collectibles.test.js

@@ -0,0 +1,31 @@
+import { getCollectibleImageAlt } from './collectibles';
+
+describe('Collectibles Utils', () => {
+  describe('getCollectibleImageAlt', () => {
+    it('returns the description attribute when it is available', () => {
+      expect(
+        getCollectibleImageAlt({
+          name: 'Cool NFT',
+          tokenId: '555',
+          description: 'This is a really cool NFT',
+        }),
+      ).toBe('This is a really cool NFT');
+    });
+
+    it('returns the formatted name and tokenId attributes when a description is not present', () => {
+      expect(
+        getCollectibleImageAlt({
+          name: 'Cool NFT',
+          tokenId: '555',
+          description: null,
+        }),
+      ).toBe('Cool NFT 555');
+      expect(
+        getCollectibleImageAlt({
+          name: 'Cool NFT',
+          tokenId: '555',
+        }),
+      ).toBe('Cool NFT 555');
+    });
+  });
+});