Post publish panel: focus the post link #11489
Conversation
oandregal
added
[Focus] Accessibility (a11y)
oandregal
changed the title
There was a problem hiding this comment.
This is an improvement but it exposes a pretty serious usability/accessibility flaw, related to #9396: if you enable the "private" option you get an alert and it's difficult (though, as illustrated, not impossible) to logically tab to the "password-protected" option. Here's a recording:
That said this is an improvement.
I also noticed some weird re-renders where the entire panel renders again and focus changes but I think that's also unrelated.
OMG okay I wrote all of that and realised that's the pre-publish panel. 😓 I get them confused a lot. I guess it still applies but I should file those issues separately. 🤷♂️
This is great; I see the improvement and it's solid. Sorry 😅
| const propsForPanel = omit( additionalProps, [ 'hasPublishAction', 'isDirty' ] ); | ||
| const isPublishedOrScheduled = isPublished || ( isScheduled && isBeingScheduled ); | ||
| const isPrePublish = ! isPublishedOrScheduled && ! isSaving; |
There was a problem hiding this comment.
I'm wondering if this isSaving check causes re-renders if an autosave fires after the panel is open? I saw some weird re-renders on slower connections (I'm working from the pub right now) and I wonder if a late auto-save after the publish panel is opened causes this to close the panel and then open it again?
There was a problem hiding this comment.
Not sure about how the autosave mechanism works, but I've just checked the editor store code and isSaving (that holds state.saving.request) only changes when the content has been edited. So, the spinner will be shown instead of the pre-publish panel when:
- the post contents are changed while the panel is open
- the panel was opened before the auto-save kicked in
Note that I couldn't reproduce this with the post-publish panel open.
For reference, before #11013 this wasn't probably happening because we used some internal state (submitted) to keep track of this, which had introduced a bug in scheduling posts.
Happy to revisit this in a separate PR if needed. Just assign it to me!
There was a problem hiding this comment.
Forgot to mention: I've noticed that focus is retained at the component that had it after spinner is rendered.
Addresses part of #4187 (comment)
At the moment, when the post-publish panel is opened the focus is at the non-interactive "Published" div element in the header. We want to have the focus in a meaningful element that is also tabbable. This PR makes the post link element to grab the focus once the post-publish panel opens.