Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Improve Permalink UI placement and tab order #5494

Closed
afercia opened this issue Mar 8, 2018 · 15 comments
Closed

Improve Permalink UI placement and tab order #5494

afercia opened this issue Mar 8, 2018 · 15 comments

Comments

@afercia
Copy link
Contributor

@afercia afercia commented Mar 8, 2018

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:

screen shot 2018-03-08 at 09 06 47

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

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Mar 8, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@afercia afercia commented Mar 8, 2018

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

This comment has been minimized.

Copy link
Contributor

@jasmussen jasmussen commented Mar 8, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@afercia afercia commented Mar 8, 2018

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

@karmatosed

This comment has been minimized.

Copy link
Member

@karmatosed karmatosed commented Mar 8, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@afercia afercia commented Mar 8, 2018

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

@designsimply

This comment has been minimized.

Copy link
Member

@designsimply designsimply commented Jul 17, 2018

The new UI this issue refers to has design screenshots at #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

This comment has been minimized.

Copy link
Contributor Author

@afercia afercia commented Jul 17, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@afercia afercia commented Aug 6, 2018

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

This comment has been minimized.

Copy link
Member

@designsimply designsimply commented Nov 7, 2018

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:

screen shot 2018-11-06 at 5 13 37 pm
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

This comment has been minimized.

Copy link
Contributor Author

@afercia afercia commented Nov 9, 2018

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

screenshot 2018-11-08 at 15 42 44

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

This comment has been minimized.

Copy link
Contributor

@youknowriad youknowriad commented Nov 15, 2018

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

This comment has been minimized.

Copy link
Contributor Author

@afercia afercia commented May 15, 2019

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

This comment has been minimized.

Copy link
Contributor Author

@afercia afercia commented Mar 19, 2020

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 comment has been minimized.

Copy link
Contributor

@enriquesanchez enriquesanchez commented Mar 20, 2020

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

Now that #12009 has been merged, we think that the concerns raised on #12031 (comment) have been addressed and suggest we go ahead and remove the old permalink UI.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Linked pull requests

Successfully merging a pull request may close this issue.

6 participants
You can’t perform that action at this time.