Gutenberg: Improve Permalink UI placement and tab order

[afercia]

Once #5414 is finalized, the placement and tab order of the permalinks UI should be improved for better keyboard accessibility. Right now, the Permalinks UI appears _before_ the post title:

Not speaking about its _visual_ placement. Considering its placement in the markup, the tab order is far from ideal and currently forces users to tab backwards from the post title once the permalink UI appears. This applies to all keyboard users. Screen reader users wouldn't have any clue something appeared on the screen.

Ideally, the tab order should be different: post title -> permalink UI.

[jasmussen]

Ideally, the tab order should be different: post title -> permalink UI.

Asking out of genuine curiosity and don't have a strong opinion myself. Why is this the ideal situation?

What happens if in the future the title becomes a block, and editing the permalink becomes something you do, perhaps, as a document property instead (i.e. either as sidebar option, or perhaps a block toolbar attached to the document block itself, if such a one appears in the Gutenberg customization focus).

[afercia]

Asking out of genuine curiosity and don't have a strong opinion myself. Why is this the ideal situation?

Test it using only the keyboard. Then imagine you can't see and you're not familiar with the UI yet. How would you even be aware something appeared before the post title?

Navigating content for keyboard and screen reader users is a linearized experience. If at some point something appears in the UI _before_ the current focus, that's a problem.

[jasmussen]

No absolutely, but I don't know why I'd necessarily assume that the permalink was editable as part of the body content at all. I might assume it was a document setting, metadata so to speak.

Not necessarily objecting to this ticket, nor suggesting alternative solutions yet. If anything I'm saying that the current Gutenberg permalink UI is suboptimal, and might need a rethink.

[afercia]

Sure, a new UI can certainly be evaluated. For now, I can only test and suggest improvements on the current UI 🙂

[karmatosed]

Is there any chance we can close this then judge on new UI? That feels better to me on this. To me iterating on the PR would be a better way through, maybe?

[afercia]

@karmatosed where is the new UI? I'll close this when I'll see the new UI. 🙂

[designsimply]

The new UI this issue refers to has design screenshots at https://github.com/WordPress/gutenberg/pull/5756 and was shipped on 2018-04-15.

I checked the markup just now and found that the permalink editor now appears after the post title, and I also see that the tab order has been adjusted to: post title -> permalink UI.

Ok to close?

[afercia]

There are still a couple issues to address:

1
Visual order should match the DOM order so ideally the permalink UI should appear after the post title. Reference:
https://www.w3.org/TR/WCAG21/#focus-order
https://www.w3.org/WAI/WCAG21/Understanding/focus-order.html

2
More importantly, the UI can't be used when tabbing backwards (Shift+Tab): it just disappears and can't be "tabbed into"

[afercia]

Discussed during today's accessibility bug-scrub, this is still a big issue especially for keyboard users.
Dom order and visual order should match.
It should be possible to access the UI also when tabbing with Shift+Tab.
To consider: add the UI also in the publishing flow.

[designsimply]

Re-tested with WordPress 4.9.8 and Gutenberg 4.2.0 today and am reiterating the current tab order and the steps to confirm the current behavior:

1. Create a new post with a title and some content and save it as a draft.
2. Focus on the title field.
3. Press Tab (and the "Copy the permalink" button becomes focused).
4. Press Tab again (and the "Edit" button becomes focused).
5. Focus on the title field again.
6. Press Shift+Tab (and the focus goes to the "More" menu in the top editor toolbar).

Proposed changes:

• DOM order and visual order should match (e.g. move permalink UI below the title field).

Or:

• Keyboard navigation should be updated to match the current UI, meaning pressing Shift+Tab should move you into the permalink UI which is shown visually _before_ the title field.

Screenshot showing the current permalink UI:

^{Seen at http://alittletestblog.com/wp-admin/post.php?post=15526&action=edit running WordPress 4.9.8 and Gutenberg 4.2.0 using Firefox 63.0 on macOS 10.13.6.}

[afercia]

One more issue to consider, always related to the permalink UI placement, is the scenario when a notice is displayed:

In this case, clicking on the title field doesn't make the permalink UI visible: it's there, behind the notice. Yes, it's always possible to close the notice but it completely hides the permalink UI, and it's potentially very confusing for users.

[youknowriad]

We have a new panel for permalinks now #11874. We didn't remove this UI yet because we're passed UI freeze but it should be considered deprecated. If there are issues with the new panel, let's open separate issues thanks.

[afercia]

We didn't remove this UI yet because we're passed UI freeze but it should be considered deprecated.

Reopening. A few months have passed and this UI is still in Gutenberg. The accessibility problems reported here still need to be addressed. The permalink UI was also audited in the WPCampus / Tenon report and reported as problematic for accessibility, see #15298.

Either all the accessibility issues should be solved or this UI should be finally removed in favor of the permalink UI in the sidebar. As mentioned in the comment above and also on this other comment, the current UI is candidate for removal since a few months.

See also related #11553.

[afercia]

Yesterday the new permalink UI has been refined and made fully functional in #12009. Some related issues have been closed see #7129, #12714, #12031.

The accessibility issues of the old UI are still here though, waiting to be solved since March 2018 which is two years now.

At some point the old UI was considered for removal:

We didn't remove this UI yet because we're passed UI freeze but it should be considered deprecated.

As accessibility team, we have been confident that the new UI would have made the old one redundant. It's still there though. At this point, after two years. this issue needs to be solved soon by:

• either remove the old UI
• or, if it's going to stay, make it fully accessible: this would require drastic changes starting from its placement in the DOM _and_ its visual position

[enriquesanchez]

This issue was discussed during today's Accessibility Team meeting.

Now that #12009 has been merged, we think that the concerns raised on https://github.com/WordPress/gutenberg/issues/12031#issuecomment-466909641 have been addressed and suggest we go ahead and remove the old permalink UI.