#33029: Dismissable admin notices focus loss
-------------------------------------+-------------------------------------
Reporter: afercia | Owner: morganestes
Type: defect (bug) | Status: reviewing
Priority: normal | Milestone: Awaiting Review
Component: Administration | Version: 4.2
Severity: normal | Resolution:
Keywords: dev-feedback needs- | Focuses: ui, accessibility,
testing has-patch | javascript
-------------------------------------+-------------------------------------
Changes (by adamsilverstein):
* keywords: 2nd-opinion dev-feedback needs-patch => dev-feedback needs-
testing has-patch
Comment:
Nice! I tested this in Chrome and it works as expected. I'm left with
focus right where the dismissed element was - tabbing forward sends me to
the title and tabbing backwards sends me to the add new button.
Here is a screencast with key events captured for the record:
https://cloudup.com/cLbKgq5atLv
I looked at the JavaScript, everything looks good to me... I think the use
of insertBefore is appropriate here. I like your constructor for
focusPlaceHolder!
I haven't tested with a screen reader; the way it works feels great.
Replying to [comment:10 afercia]:
> First, very rough, pass for @adamsilverstein idea. Still experimental.
> Was thinking this sort of injected "focus placeholder" element can be
used to dispatch a confirmation message (optional). Just passing a "Notice
dismissed." string to be used as the placeholder content: when focus is
moved to the placeholder, the message will be read out by screen readers.
Without a message, screen readers may read out "blank", probably not a big
deal and maybe someway appropriate. On blur, the placeholder should be
removed.
>
> Many things to check, first of all if jQuery `insertBefore()` is the
right thing to use,
[https://github.com/jquery/jquery/blob/1.11.3/src/manipulation.js#L492
checking also what it does internally]. Initially I thought it could lose
the reference node, since we're deleting it but seems to work in latest
Chrome, Firefox and also IE 8.
>
> Temporary styling just to make things visible for debugging. All this
should be hidden with `screen-reader-text` of course.
> Would appreciate any help, thoughts, feedback and testing :)
--
Ticket URL: <https://core.trac.wordpress.org/ticket/33029#comment:12>
WordPress Trac <https://core.trac.wordpress.org/>
WordPress publishing platform