Fixing activity title text truncation

[ryanml]

Fixes #9997

Manual testing steps:

• Access an account with activity
• Via another transaction (or the inspector tool), create a long activity title
• Ensure that the title text truncates appropriately
• Edit balance amount title so it truncates
• Ensure that there is no overlap when both titles are truncated

[ryanml]

There were existing rules for list-item__title regarding text truncation, but being the direct child of a button tag was blocking them from taking effect. This button element and associated onClick value are actually redundant, as the list item wrapper handles the onClick event for all of its contents:

metamask-extension/ui/app/components/ui/list-item/list-item.component.js

Line 22 in 187c782

onClick={onClick}

[Gudahtt]

Huh, interesting find!

The use of button here was important though - it allowed keyboard navigation. Though... now that I'm testing it... it seems to have made it focusable, but pressing "Enter" did nothing 😞.

Well, given that this already wasn't keyboard-friendly, this doesn't need to block here. But that's something we'll want to do. I'd suggest changing the div with the onClick set to a button.

[ryanml]

Suggestion makes sense here 👍 Updated the outer container to be of type button:

[metamaskbot]

Builds ready [187c782]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• build viz: Build System
• code coverage: Report
• storybook: Storybook
• all artifacts

Page Load Metrics (794 ± 170 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	45	282	90	55	26
		domContentLoaded	386	1549	792	353	170
		load	388	1552	794	354	170
		domInteractive	386	1549	792	353	170

[Gudahtt]

LGTM!

As noted in a comment, this does impact accessibility, but this list already had issues there.

[darkwing]

Awesome work @ryanml !

[metamaskbot]

Builds ready [a2b419e]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• build viz: Build System
• code coverage: Report
• storybook: Storybook
• all artifacts

Page Load Metrics (621 ± 38 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	45	80	62	10	5
		domContentLoaded	381	732	620	80	38
		load	383	733	621	80	38
		domInteractive	381	732	620	80	38

[Gudahtt]

LGTM!

[metamaskbot]

Builds ready [73ea889]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• build viz: Build System
• code coverage: Report
• storybook: Storybook
• all artifacts

Page Load Metrics (584 ± 27 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Home	firstPaint	43	69	54	8	4
		domContentLoaded	381	672	582	55	27
		load	382	673	584	55	27
		domInteractive	380	672	582	55	27