Style links on Installing plugin page

[ericlewis]

After a plugin has been installed, links are displayed to the user that are styled as links. We have styles to make links look like buttons, so perhaps we can use those?

[ericlewis]

This is how the page currently looks

[ericlewis]

Perhaps we could use button styles like this

[afercia]

Anything that increases the clickable area would be an accessibility improvement too :) I'd maybe consider to keep the secondary links with a "link style", maybe increasing the clickable area, but I'd leave this to the design/UI team. By the way, it's not just about plugins but any update that runs through update.php will have this kind of links, with different actions depending on the kind of update performed.
+1 from me

[melchoyce]

Great idea!

I'd maybe consider to keep the secondary links with a "link style", maybe increasing the clickable area

+1

[ericlewis]

attachment:36430.diff​ adds button and button-primary to the Activate Plugin links as shown in the screenshot above.

I'd maybe consider to keep the secondary links with a "link style"

That makes sense as that is a link rather than a user action.

maybe increasing the clickable area

Is there any other link style that increases the clickable area to look to for a reusable implementation?

[afercia]

Not sure this is still so relevant after the introduction of Shiny Updates v2, since this screen will be visible only when JS is off. Thoughts? :)

[afercia]

Discussed a bit in today's accessibility meeting, noted this screen is still used for installs from .zip files and when JS is off so agreed to make the "Activate" link look like a primary action button, maybe removing the "pipe". Moving to 4.7.

[curdin]

Refreshed patch, removed pipe

[curdin]

Latest patch is mostly just a refresh, and removes the pipe character between the action button and the back link. The spacing is quite tight - is there a pattern for spacing these a bit more?

[afercia]

Replying to curdin:

is there a pattern for spacing these a bit more?

Not sure there is an established pattern, but a similar issue was recently discussed about the Comment Moderation screen, see #36380 where the spacing is about 1em (the link has also a 5px padding, not sure it's really necessary).

[curdin]

Adds spacing to link

[curdin]

Thanks @afercia - I made it consistent with #36380 . I'm keen on any thoughts on the selector used to add the 1em spacing, there aren't any selectors to make the style more specific to that screen unless we add an additional class to it.

[afercia]

Quickly checking history, I think the button-cancel class was originally introduced for the "Cancel" links in the publish box, see [26247] and should not be used to add a left margin, that would affect also the links in the publish box increasing the spacing a bit too much, see screenshot below:

Not sure why it is used in the Comment Moderation screen, probably should be removed. Personally, since a primary button is supposed to be unique in a page (because there should be just one primary action), I'd go with something like:

.update-php .button.button-primary { 
	margin-right: 1em;
}

and I'd remove the button-cancel class added on the links, which also makes the patch simpler and cleaner.

[afercia]

A few screenshots: the proposed change is just about the "activate" links, for example:

While the other ones stay unchanged:

[curdin]

Margin on primary button

[curdin]

Nice catch @afercia - it's something that without extensive core knowledge I failed to spot. I've updated the patch and from what I can tell the areas look fine now.

[afercia]

In 38617:

Plugins: style the primary action link in the non-js "Installing Plugin" page.

Props curdin, ericlewis, melchoyce, karmatosed.
Fixes #36430.