fix: update alt text on NFT images #29744

matteoscurati · 2025-01-16T09:45:48Z

Description

This PR introduces significant improvements to the handling of alt text for NFT images within the application. The main changes include:

Removal of Unnecessary Conditions for Alt Text
In the NftDetails, NftFullImage, and NFTSendHeading components, the alt text for NFT images has been simplified by removing conditions that returned an empty string when the image was missing. Now, the alt text is always generated using getNftImageAlt.

Introduction of a Truncation Function for Alt Text
The nftTruncateAltText function has been added to ensure that the alt text does not exceed a predefined maximum length, improving accessibility and usability.

Updates to Tests

New tests have been added to cover use cases for the nftTruncateAltText function
Tests for getNftImageAlt have been updated to handle cases where name, tokenId, or description are not provided

Updates to Component Stories

The NftItem stories have been updated to use getNftImageAlt
A new story NoImageStory has been added to test behavior when the image is not present

Related issues

Fixes: #26461

Manual testing steps

Follow the steps outlined in the issue #26461

Screenshots/Recordings

Before

After

Pre-merge author checklist

I've followed MetaMask Contributor Docs and MetaMask Extension Coding Standards.
I've completed the PR template to the best of my ability
I’ve included tests if applicable
I’ve documented my code using JSDoc format if applicable
I’ve applied the right labels on the PR (see labeling guidelines). Not required for external contributors.

Pre-merge reviewer checklist

I've manually tested the PR (e.g. pull and build branch, run the app, test code being changed).
I confirm that this PR addresses all acceptance criteria described in the ticket it closes and includes the necessary testing evidence such as recordings and or screenshots.

github-actions · 2025-01-16T09:46:05Z

CLA Signature Action: All authors have signed the CLA. You may need to manually re-run the blocking PR check if it doesn't pass in a few minutes.

metamaskbot · 2025-01-16T15:29:19Z

Builds ready [7aac07b]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1639 ± 46 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	288	1916	1570	309	148
		domContentLoaded	1449	1860	1608	95	46
		load	1476	1921	1639	96	46
		domInteractive	23	187	50	44	21
		backgroundConnect	6	73	31	20	10
		firstReactRender	15	99	42	28	13
		getState	4	15	9	4	2
		initialActions	0	1	0	0	0
		loadScripts	1040	1400	1192	88	42
		setupStore	6	59	14	18	9
		uiStartup	1676	2297	1899	176	85

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 225 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-20T15:55:02Z

Builds ready [159fdde]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1904 ± 112 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	285	2528	1760	530	254
		domContentLoaded	1519	2386	1873	231	111
		load	1581	2421	1904	234	112
		domInteractive	24	177	56	36	17
		backgroundConnect	5	71	23	20	10
		firstReactRender	16	106	39	26	12
		getState	5	98	26	28	13
		initialActions	0	56	3	12	6
		loadScripts	1129	1848	1408	200	96
		setupStore	6	51	13	13	6
		uiStartup	1808	3071	2215	314	151

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 225 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-24T14:52:52Z

Builds ready [6914afa]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1919 ± 71 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1673	2337	1921	154	74
		domContentLoaded	1654	2271	1881	146	70
		load	1678	2330	1919	148	71
		domInteractive	26	114	55	27	13
		backgroundConnect	11	91	35	22	11
		firstReactRender	16	103	41	30	14
		getState	7	82	29	25	12
		initialActions	0	1	0	0	0
		loadScripts	1211	1718	1384	122	59
		setupStore	6	88	20	24	11
		uiStartup	1938	2764	2250	224	108

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 225 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-24T16:21:30Z

Builds ready [ba0ad9f]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1794 ± 115 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	1481	2306	1797	233	112
		domContentLoaded	1470	2294	1764	225	108
		load	1480	2308	1794	239	115
		domInteractive	25	190	59	51	24
		backgroundConnect	10	105	29	25	12
		firstReactRender	15	97	45	29	14
		getState	5	90	20	23	11
		initialActions	0	1	0	0	0
		loadScripts	1072	1762	1321	188	90
		setupStore	8	67	20	20	10
		uiStartup	1721	2939	2079	318	152

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 225 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-27T15:47:34Z

Builds ready [4a2deb1]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1687 ± 54 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	527	1846	1624	274	132
		domContentLoaded	1458	1827	1660	116	55
		load	1495	1854	1687	113	54
		domInteractive	20	157	48	36	17
		backgroundConnect	10	52	24	16	7
		firstReactRender	15	73	39	25	12
		getState	4	60	13	17	8
		initialActions	0	0	0	0	0
		loadScripts	1052	1420	1227	106	51
		setupStore	6	57	19	18	9
		uiStartup	1717	2199	1930	138	66

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 225 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-27T16:46:58Z

Builds ready [950e0f5]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1882 ± 89 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	395	2497	1745	480	230
		domContentLoaded	1584	2405	1849	182	87
		load	1641	2468	1882	185	89
		domInteractive	27	117	47	26	13
		backgroundConnect	8	70	32	24	12
		firstReactRender	16	108	42	30	14
		getState	5	67	14	15	7
		initialActions	0	1	0	0	0
		loadScripts	1128	1838	1378	155	75
		setupStore	8	88	27	26	13
		uiStartup	1888	2761	2204	241	116

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 225 Bytes (0.00%)
common: 0 Bytes (0.00%)

metamaskbot · 2025-01-30T14:27:08Z

Builds ready [56bc08d]

builds: chrome, firefox
builds (flask): chrome, firefox
builds (MMI): chrome
builds (test): chrome, firefox
builds (test-flask): chrome, firefox
build viz: Build System
mv3: Bundle Size Stats
mv2: E2e Actions Stats
storybook: Storybook
typescript migration: Dashboard
all artifacts
bundle viz:
- background: 0, 1, 2, 3, 4, 5, 6, 7
- common: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- ui: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13
- content-script: 0
- offscreen: 0

Page Load Metrics (1709 ± 78 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	424	2059	1648	324	155
		domContentLoaded	1431	1987	1675	149	71
		load	1440	2014	1709	162	78
		domInteractive	25	84	39	18	9
		backgroundConnect	8	97	35	24	11
		firstReactRender	15	100	39	31	15
		getState	6	66	19	20	10
		initialActions	0	0	0	0	0
		loadScripts	1013	1434	1222	117	56
		setupStore	7	84	22	22	11
		uiStartup	1703	2744	2002	247	119

Bundle size diffs

background: 0 Bytes (0.00%)
ui: 225 Bytes (0.00%)
common: 0 Bytes (0.00%)

fix: 🐛 update alt text on NFT images

0a24d4e

metamaskbot added the team-notifications DEPRECATED: Use "team-assets" instead label Jan 16, 2025

matteoscurati self-assigned this Jan 16, 2025

matteoscurati changed the title ~~fix: 🐛 update alt text on NFT images~~ fix: update alt text on NFT images Jan 16, 2025

Merge branch 'main' into fix/alt-text-nft-images-should-be-trimmed

7aac07b

Merge branch 'main' into fix/alt-text-nft-images-should-be-trimmed

159fdde

Merge branch 'main' into fix/alt-text-nft-images-should-be-trimmed

6914afa

Merge branch 'main' into fix/alt-text-nft-images-should-be-trimmed

ba0ad9f

Merge branch 'main' into fix/alt-text-nft-images-should-be-trimmed

4a2deb1

matteoscurati marked this pull request as ready for review January 27, 2025 15:42

matteoscurati requested review from a team as code owners January 27, 2025 15:42

Merge branch 'main' into fix/alt-text-nft-images-should-be-trimmed

950e0f5

gambinish approved these changes Jan 28, 2025

View reviewed changes

matteoscurati added 2 commits January 29, 2025 17:41

Merge branch 'main' into fix/alt-text-nft-images-should-be-trimmed

7017a89

Merge branch 'main' into fix/alt-text-nft-images-should-be-trimmed

56bc08d

matthewwalsh0 approved these changes Jan 30, 2025

View reviewed changes

NidhiKJha approved these changes Jan 30, 2025

View reviewed changes

matteoscurati added this pull request to the merge queue Jan 30, 2025

Merged via the queue into main with commit 0b202e3 Jan 30, 2025
70 checks passed

matteoscurati deleted the fix/alt-text-nft-images-should-be-trimmed branch January 30, 2025 16:48

github-actions bot locked and limited conversation to collaborators Jan 30, 2025

metamaskbot added the release-12.12.0 Issue or pull request that will be included in release 12.12.0 label Jan 30, 2025

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

fix: update alt text on NFT images #29744

fix: update alt text on NFT images #29744

matteoscurati commented Jan 16, 2025 •

edited by github-actions bot

Loading

github-actions bot commented Jan 16, 2025

metamaskbot commented Jan 16, 2025

metamaskbot commented Jan 20, 2025

metamaskbot commented Jan 24, 2025

metamaskbot commented Jan 24, 2025

metamaskbot commented Jan 27, 2025

metamaskbot commented Jan 27, 2025

metamaskbot commented Jan 30, 2025

fix: update alt text on NFT images #29744

fix: update alt text on NFT images #29744

Conversation

matteoscurati commented Jan 16, 2025 • edited by github-actions bot Loading

Description

Related issues

Manual testing steps

Screenshots/Recordings

Before

After

Pre-merge author checklist

Pre-merge reviewer checklist

github-actions bot commented Jan 16, 2025

metamaskbot commented Jan 16, 2025

metamaskbot commented Jan 20, 2025

metamaskbot commented Jan 24, 2025

metamaskbot commented Jan 24, 2025

metamaskbot commented Jan 27, 2025

metamaskbot commented Jan 27, 2025

metamaskbot commented Jan 30, 2025

matteoscurati commented Jan 16, 2025 •

edited by github-actions bot

Loading