WordPress.org

Make WordPress Core

Opened 12 months ago

Closed 6 months ago

#36430 closed enhancement (fixed)

Style links on Installing plugin page

Reported by: ericlewis Owned by: afercia
Milestone: 4.7 Priority: normal
Severity: normal Version:
Component: Plugins Keywords: has-ui-feedback has-patch has-screenshots
Focuses: ui, accessibility Cc:

Description

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?

Attachments (7)

Screen Shot 2016-04-06 at 4.31.25 PM.png (46.3 KB) - added by ericlewis 12 months ago.
This is how the page currently looks
Screen Shot 2016-04-06 at 4.30.35 PM.png (47.7 KB) - added by ericlewis 12 months ago.
Perhaps we could use button styles like this
36430.diff (2.1 KB) - added by ericlewis 11 months ago.
Screen Shot 2016-04-18 at 10.55.59 PM.png (190.6 KB) - added by ericlewis 11 months ago.
36430.2.diff (2.5 KB) - added by curdin 7 months ago.
Refreshed patch, removed pipe
36430.3.diff (4.3 KB) - added by curdin 7 months ago.
Adds spacing to link
36430.4.diff (2.9 KB) - added by curdin 7 months ago.
Margin on primary button

Download all attachments as: .zip

Change History (23)

@ericlewis
12 months ago

This is how the page currently looks

@ericlewis
12 months ago

Perhaps we could use button styles like this

#1 @afercia
12 months ago

  • Focuses accessibility added

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

#2 @melchoyce
12 months ago

Great idea!

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

+1

@ericlewis
11 months ago

#3 @ericlewis
11 months ago

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?

#4 @afercia
8 months ago

  • Keywords close added

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? :)

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


7 months ago

#6 @afercia
7 months ago

  • Keywords close removed
  • Milestone changed from Awaiting Review to 4.7

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
7 months ago

Refreshed patch, removed pipe

#7 follow-up: @curdin
7 months ago

  • Keywords ui-feedback added

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?

#8 @curdin
7 months ago

  • Keywords has-patch added

#9 in reply to: ↑ 7 @afercia
7 months ago

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
7 months ago

Adds spacing to link

#10 @curdin
7 months ago

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.

#11 @afercia
7 months ago

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:

https://cldup.com/_qBYximv9T.png

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.

#12 @karmatosed
7 months ago

  • Keywords has-ui-feedback added; ui-feedback removed

Removing feedback as it has it and the ticket is on track.

Last edited 7 months ago by karmatosed (previous) (diff)

#13 @afercia
7 months ago

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

https://cldup.com/9XBvxg_F2Q.png

https://cldup.com/1Vm8SEHDun.png

While the other ones stay unchanged:

https://cldup.com/WwGU42mGSp.png

@curdin
7 months ago

Margin on primary button

#14 @curdin
7 months ago

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.

#15 @afercia
6 months ago

  • Keywords has-screenshots added

#16 @afercia
6 months ago

  • Owner set to afercia
  • Resolution set to fixed
  • Status changed from new to closed

In 38617:

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

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

Note: See TracTickets for help on using tickets.