WordPress.org

Make WordPress Core

Opened 4 years ago

Closed 4 years ago

#33465 closed defect (bug) (fixed)

plugin install button text is too large for display

Reported by: mehulkaklotar Owned by: afercia
Milestone: 4.4 Priority: normal
Severity: normal Version: 4.3
Component: Plugins Keywords: has-patch has-screenshots
Focuses: ui, accessibility, javascript Cc:
PR Number:

Description

When updating or installing plugin on plugin-install.php file and some error occurs then the button text is filled with error message and that text is too large to display.

Attachments (7)

Add Plugins ‹ testchigi.com — WordPress.png (56.2 KB) - added by mehulkaklotar 4 years ago.
updates.diff (3.7 KB) - added by mehulkaklotar 4 years ago.
updatefailed.png (36.8 KB) - added by mehulkaklotar 4 years ago.
it should be only update failed on button and to show error message make use of title attribute.
33465.patch (2.3 KB) - added by afercia 4 years ago.
33465.2.patch (5.3 KB) - added by afercia 4 years ago.
33465.3.patch (6.2 KB) - added by afercia 4 years ago.
33465.4.patch (6.2 KB) - added by afercia 4 years ago.

Download all attachments as: .zip

Change History (31)

#1 @mehulkaklotar
4 years ago

  • Keywords has-patch added

@mehulkaklotar
4 years ago

it should be only update failed on button and to show error message make use of title attribute.

#2 @mehulkaklotar
4 years ago

  • Keywords ui-feedback added

#3 @mehulkaklotar
4 years ago

  • Severity changed from normal to major

#4 @SergeyBiryukov
4 years ago

  • Focuses accessibility added
  • Milestone changed from Awaiting Review to 4.4
  • Severity changed from major to normal

Seems like the title attribute should only be added in case of an error, otherwise it just duplicates the aria-label attribute and is redundant.

#5 @mehulkaklotar
4 years ago

If we are using anchor tag then it should have title attribute too. aria-label won't be able to open a tool tip for anchor tag. And if plugin has changed actions then title attribute should change accordingly to show correct tool tips.

This ticket was mentioned in Slack in #core by sergey. View the logs.


4 years ago

#7 @SergeyBiryukov
4 years ago

  • Owner set to afercia
  • Status changed from new to assigned

Could you take a look?

#8 @afercia
4 years ago

While we should certainly find a proper way to display long error messages, I think using title attributes won't go in the right direction. In recent releases, WordPress has begun to actively discourage the use of title attributes, see #24766. Please also consider relying on the title attribute is currently discouraged in HTML5 http://www.w3.org/TR/html5/dom.html#the-title-attribute
Maybe we should display a notice inside the plugin cards to expand the "Update Failed" message displayed inside the "button", or something like that. This would need some UI and design feedback though cc @helen :)

#9 @afercia
4 years ago

Just an example to show how these error messages get displayed in other admin screen, i.e. like standard notices. Maybe we should reconsider the current implementation in the Plugin cards in the first place.

https://cldup.com/KOU6J-fNys.png

#10 @dd32
4 years ago

FWIW; The original mockups for this screen showed a "admin notice" styled paragraph at the end of the plugin card for the error message.

#11 @helen
4 years ago

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

"Updated Failed" + adding a notice inside the card seems like it could be a good combo, can we get a mockup/screenshot of that for ease of feedback?

#12 @afercia
4 years ago

@dd32 (hi) any chance to retrieve the original mockups?

#13 @DrewAPicture
4 years ago

  • Keywords needs-screenshots added

#14 @dd32
4 years ago

  • Keywords needs-screenshots removed

@afercia Unfortunately I have no idea where what I'm thinking of was posted. #28785 doesn't appear to contain anything related to errors in the screenshots.

@afercia
4 years ago

#15 @afercia
4 years ago

  • Keywords has-patch added; needs-patch removed

New patch, first pass. Tried a new approach, using a notice area at the bottom of the plugin card like in the original mockups (?), see screenshot below. Also, the message is now correctly dispatched to wp.a11y.speak() and uses the "assertive" live region.
We should make a decision about:

  • styling: the notice style with the red left border seems a logical choice to me
  • should the message be dismissible? e.g. click on X dismiss and the card footer reappears

cc @helen

https://cldup.com/Uqw3g6nYjB.png

@afercia
4 years ago

#16 follow-up: @afercia
4 years ago

Refreshed patch. I went ahead and styled the notice, which is also dismissible now: click on the dismiss "X" button and the notice will be removed making the plugin card footer reappear.
Uses a custom event and wraps the dismissible-notice JavaScript in a named function.

https://cldup.com/rSfJsdC-tp.png

#17 @afercia
4 years ago

  • Keywords ui-feedback added

Patch still applies. Needs UI feedback.

#18 in reply to: ↑ 16 ; follow-up: @melchoyce
4 years ago

Replying to afercia:

Refreshed patch. I went ahead and styled the notice, which is also dismissible now: click on the dismiss "X" button and the notice will be removed making the plugin card footer reappear.
Uses a custom event and wraps the dismissible-notice JavaScript in a named function.

This is a good approach. More consistent with the rest of the admin UI than my original mockup: https://cloudup.com/c8KfL55uGqo

Some notes:

  1. Is the error notice using border-left for the red border? Can it use box-shadow instead so the corner doesn't indent into a triangle?
  2. It looks like the close dashicon is being cut off on the top and bottom
  3. Can we bold "Update Failed?"
  4. Might be worth trying the notice styling from #32244.

@afercia
4 years ago

#19 in reply to: ↑ 18 @afercia
4 years ago

@melchoyce thanks for your feedback :) In the refreshed patch, tried to address some of your points.

  1. Is the error notice using border-left for the red border? Can it use box-shadow instead so the corner doesn't indent into a triangle?

It uses the default .notice-error class but I've changed the notice top border which now it's done with box-shadow so the left border corner should have "squared" angles

  1. It looks like the close dashicon is being cut off on the top and bottom

Unfortunately this is because the .is-dismissible class sets the dashicon font size to 16px and as you know dashicons don't render in an optimal way when they're not set to their default font size (20px)

  1. Can we bold "Update Failed?"

Sure.

  1. Might be worth trying the notice styling from #32244.

Oh yes the white on white thing. Added the notice-alt class.

Also, I missed to remove the notice when clicking again on the button. The previous patch appended multiple notice below the card when clicking again the button after the first error :)

Screenshot with the refreshed patch applied:

https://cldup.com/DSG1s4uS3B.png

#20 follow-ups: @melchoyce
4 years ago

It uses the default .notice-error class but I've changed the notice top border which now it's done with box-shadow so the left border corner should have "squared" angles

Thanks!

Unfortunately this is because the .is-dismissible class sets the dashicon font size to 16px and as you know dashicons don't render in an optimal way when they're not set to their default font size (20px)

Bummer :(

Oh yes the white on white thing. Added the notice-alt class.

Looking at it, I think the white background does work better here — the pink clashes with all the grey around it.

#21 in reply to: ↑ 20 @afercia
4 years ago

Replying to melchoyce:

Unfortunately this is because the .is-dismissible class sets the dashicon font size to 16px and as you know dashicons don't render in an optimal way when they're not set to their default font size (20px)

Bummer :(

Maybe a new dashicons-dismiss-alt with a native 16px size? As far as I see, the current one is always set to a 16px font-size except in one case, the Storage Space warning in the Network Dashboard where it's 20px:

https://cldup.com/e4AKZzWiu8.png

@afercia
4 years ago

#22 in reply to: ↑ 20 @afercia
4 years ago

  • Keywords ui-feedback removed

Replying to melchoyce:

Looking at it, I think the white background does work better here — the pink clashes with all the grey around it.

Agreed. The refreshed patch removes the pink background.

#23 @afercia
4 years ago

  • Keywords has-screenshots added

How to test this patch:

  • install the patch :)
  • manually change one of your installed plugin version one number back, I always use the "RTL Tester" plugin, edit its main file and change 1.0.5 to 1.0.4
  • to actually trigger an update error, edit wp-admin/includes/class-wp-upgrader.php and change this line
    if ( ! empty( $unwritable_files ) ) {
    
    in
    if ( empty( $unwritable_files ) ) {
    
  • in the Add Plugins screen, do a search for "RTL Tester"
  • since the plugin is already installed, the button in the plugin card will say "Update Now"
  • press the "Update Now" button and wait for the error message to appear

#24 @wonderboymusic
4 years ago

  • Resolution set to fixed
  • Status changed from assigned to closed

In 35681:

Plugins: add dismissible notices to update failures.

Adds unit test.

Props afercia, mehulkaklotar.
Fixes #33465.

Note: See TracTickets for help on using tickets.