[wp-trac] [WordPress Trac] #31233: Dismissable admin notices

[WordPress Trac]

#31233: Dismissable admin notices
-------------------------------------------+-------------------------------
 Reporter:  ryan                           |       Owner:
     Type:  task (blessed)                 |      Status:  new
 Priority:  normal                         |   Milestone:  4.2
Component:  Administration                 |     Version:  4.1
 Severity:  normal                         |  Resolution:
 Keywords:  has-patch dev-feedback commit  |     Focuses:  ui,
                                           |  accessibility
-------------------------------------------+-------------------------------

Comment (by valendesigns):

 Replying to [comment:41 DrewAPicture]:
 > The issue with the `fadeOut()` effect, as pointed out previously, is
 that after it fades, everything below it (see: 95 percent of the page
 markup) ''jumps up'' to fill the space. It doesn't need be `slideUp()`,
 but whatever it is, it shouldn't be jarring.

 I've fixed it with some modification in [attachment:31233.19.diff] using
 `fadeTo` then `slideUp`. It basically does exactly what it sounds like, it
 fades to transparent without any page movement then slides up. Best of
 both worlds.

 Replying to [comment:42 afercia]:
 > Simply moving the focus to a proper place when the dismiss button is
 activated would solve both issues. Would propose to move it to the main
 content div `#wpbody-content` which is focusable thanks to `tabindex=0`.

 I like the idea in theory. Though in practice adding `$( '#wpbody-content'
 ).focus();` causes the page to jump, which is very jarring. So I would
 vote against it from a UX stand point.

 > Not for arguing, but please notice in the latest patch there are a
 couple of trailing spaces and one tab character to remove.

 I found the extra whitespace and tabs in `common.css`. Thanks for the
 heads up.

 > Also I'm not sure `noindex:-o-prefocus` is really needed, @valendesigns
 could you please expand on that?

 I removed the ones that were related to height & width, those did not need
 to be separate from the rest of the styles. However, there is one in the
 mobile styles that must stay because without it Opera does not match the
 other browsers. The icon is shifted out of alignment by like 10 pixels.
 With the current CSS there is consistency across a lot of browsers, yes
 there are a few tricks to get us there but we have to support them. I
 spent hours testing browser and device support for this patch and unless
 you can propose alternative CSS to achieve the same level of support I
 don't see another solution coming easy or without targeting the worst
 offender, which is Opera. The latest patch does minimize the trickery
 though now that two of those hacks have been removed.

--
Ticket URL: <https://core.trac.wordpress.org/ticket/31233#comment:43>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform