Idea Hub: Improve UI for Draft Post button and link

[wpdarren]

Bug Description

On the Idea hub widget, in the 'New ideas' tab, when you click on the start a draft post icon, you will notice that it has low contrast on hover.

Then, go to the Drafts tab, the idea will appear and next to it is a View draft link. It looks like a hybrid hyperlink/button (underlined, title-case, text on button-like background) and the text looks smaller than other links, but is same size as other source links (12px).

These are UI issues addressed in the bug bash.

https://app.asana.com/0/1200491083500938/1200759450014524/f

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The Idea Hub widget should be updated so that, instead of using the "View draft" text for the button/link to view a previously created draft, the button should be an icon button like for the other actions in this widget (still using "View draft" as tooltip/for accessibility).
  • It should use the icon from this Figma design.

Implementation Brief

• Export the icon (the document with an eye on it) from Figma and save it as assets/svg/icons/idea-hub-view.svg.

Within assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/Idea.js:

• Remove the View draft text from the IDEA_HUB_BUTTON_VIEW button:
  

  site-kit-wp/assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/Idea.js

  Line 205 in 3fccbdc

  { __( 'View draft', 'google-site-kit' ) }

Within assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/utils.js:

• Import the new idea-hub-view.svg icon as ViewIcon.
• Add the property [ IDEA_HUB_BUTTON_VIEW ]: ViewIcon to the activityIconMap object.

Within assets/sass/components/idea-hub/_googlesitekit-idea-hub-dashboard-ideas-widget.scss:

• Remove the :not(.googlesitekit-idea-hub__actions--view) pseudo-class from the following lines:
  

  site-kit-wp/assets/sass/components/idea-hub/_googlesitekit-idea-hub-dashboard-ideas-widget.scss

  Lines 207 to 208 in 3fccbdc

  	button:not(.googlesitekit-idea-hub__actions--view),
  	button.mdc-button:not(.googlesitekit-idea-hub__actions--view) {

• Remove the button qualifier from the button.mdc-button selector in the second of the above lines, with with the net result:

			button,
			.mdc-button,

Test Coverage

• No new tests needed.

QA Brief

• Activate Idea Hub and navigate to the "Saved" tab

The tab, with content, should match the Figma mocks:

Changelog entry

• Update the View draft button on the Idea Hub widget to display an icon instead of the text.

[felixarntz]

@wpdarren @aaemnnosttv @marrrmarrr Correct me if I'm wrong, but I'm not sure we've defined a proper solution for those UI problems. This may need some input from UX for best path to move forward, unless we can use some uncontroversial straightforward fix for all the issues that relies on current Site Kit UI patterns?

[aaemnnosttv]

@felixarntz probably the simplest fix would be to replace the text button with a circular icon button that we use in the other tabs. An "eye" icon for view would work well I think and the "View draft" could stay as the tooltip. This would make the layout more consistent with others as well.

[felixarntz]

@marrrmarrr What are your thoughts on this? How do you feel about @aaemnnosttv's suggestion? Should we involve UX in this?

[marrrmarrr]

I'll check in with Sam on this one; the eye icon in general sounds good, but I'm conscious that soon we'll be using it for the "view-only" dashboard up top, so we could have a group of users that see it in both places and it would mean two different things.

[tofumatt]

The IB here mostly looks good, but there's mention of removing the __( 'View draft' ) text, without restoring it anywhere.

The SVG icon can't be used directly in-place of the button text, or the element will be inaccessible to keyboard/screenreader users.

Can you update the IB to include either an aria-label or similar for the button? I'm not sure how it's done in that component currently but it should match what we do for other buttons.

(If none of those icons are labeled for assistive technology, we should implement that as part of this issue.)

[techanvil]

The IB here mostly looks good, but there's mention of removing the __( 'View draft' ) text, without restoring it anywhere.

The SVG icon can't be used directly in-place of the button text, or the element will be inaccessible to keyboard/screenreader users.

Can you update the IB to include either an aria-label or similar for the button? I'm not sure how it's done in that component currently but it should match what we do for other buttons.

(If none of those icons are labeled for assistive technology, we should implement that as part of this issue.)

Hi @tofumatt, thanks for reviewing this. The button already has a title attribute, as do the other Idea Hub buttons. The attribute text is determined by this map:

site-kit-wp/assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/utils.js

Lines 60 to 66 in 7d38fb9

	export const titlesMap = {
	[ IDEA_HUB_BUTTON_DELETE ]: __( 'Dismiss', 'google-site-kit' ),
	[ IDEA_HUB_BUTTON_PIN ]: __( 'Save for later', 'google-site-kit' ),
	[ IDEA_HUB_BUTTON_UNPIN ]: __( 'Remove from saved', 'google-site-kit' ),
	[ IDEA_HUB_BUTTON_CREATE ]: __( 'Start a draft post', 'google-site-kit' ),
	[ IDEA_HUB_BUTTON_VIEW ]: __( 'View draft', 'google-site-kit' ),
	};

And, set here on the Button:

site-kit-wp/assets/js/modules/idea-hub/components/dashboard/DashboardIdeasWidget/IdeaActivityButton.js

Lines 60 to 72 in 7d38fb9

	return (
	<Button
	className={ classNamesMap[ activity ] || undefined }
	onClick={ onClick }
	disabled={ inProgress }
	href={ href || undefined }
	icon={
	inProgress ? <CircularProgress size={ 24 } /> : <ActivityIcon />
	}
	title={ titlesMap[ activity ] }
	>
	{ children }
	</Button>

[tofumatt]

Oh, perfect, right on!

In that case this is good-to-go, thanks for the clarification on that one 👍🏻

IB ✅

[hussain-t]

@tofumatt I don't see a PR associated to this ticket. I checked the pull requests tab filtered by your name, however, I couldn’t see any related PR.
https://github.com/google/site-kit-wp/pulls/tofumatt

[tofumatt]

Argh, VSCode didn't submit the PR, my bad! 😓

I've sent it through now. 😅

[wpdarren]

QA Update: ✅

Verified:

• Confirmed that the icon appears on the draft tab with a tooltip of 'View draft'
• Confirmed that the icon appears on smaller screen sizes like Android and iOS devices.
• Confirmed that the user is sent to the post page for the draft