Make WordPress Core

Opened 4 years ago

Last modified 3 years ago

#48751 reviewing defect (bug)

Make the list table "action links" always visible or provide an option for that

Reported by: akrabat's profile akrabat Owned by: audrasjb's profile audrasjb
Milestone: Future Release Priority: normal
Severity: normal Version:
Component: Administration Keywords: has-screenshots
Focuses: ui, accessibility, javascript, css Cc:

Description

I usually approve comments via the notification email which takes me to a page where there's an "Approve" button like this: https://i.19ft.com/525a403c.png

However, another comment came in while I was on the site and I navigated via the menu system to the Pending comments to this page: https://i.19ft.com/d855a816.png

I am a sighted user with full ability to use a keyboard. However, rarely use a mouse due to RSI-type pain and so struggled to work out how to approve this comment. I eventually worked out that you have to hover over the comment to get a set of links up with "Approve", "Reply", "Quick Edit", etc available.

As a non-mouse-using user, it should be possible to access these links, Maybe by making them always visible via a setting in my user profile.

(I've also attached the image files that I've linked to)

Attachments (13)

525a403c.png (900.9 KB) - added by akrabat 4 years ago.
Comment admin page with an approve button
d855a816.png (793.2 KB) - added by akrabat 4 years ago.
Comment admin page without an approve button
9179448eec009da862f9d47e5ad7a4c6.gif (925.2 KB) - added by audrasjb 4 years ago.
Comments buttons are accessible to keyboard but visually hidden by default
48751.diff (1.8 KB) - added by garrett-eclipse 4 years ago.
Initial patch to have row-actions persistent and not hide.
Screen Shot 2020-02-07 at 10.46.05 AM.png (6.1 KB) - added by garrett-eclipse 4 years ago.
Row Actions on Posts always visible
Screen Shot 2020-02-07 at 10.46.36 AM.png (16.2 KB) - added by garrett-eclipse 4 years ago.
Row Actions on Media List View always visible
Screen Shot 2020-02-07 at 10.46.46 AM.png (14.1 KB) - added by garrett-eclipse 4 years ago.
Row Actions persistent on Pages
Screen Shot 2020-02-07 at 10.46.52 AM.png (29.8 KB) - added by garrett-eclipse 4 years ago.
Row Actions persistent on Comments
Screen Shot 2020-02-07 at 10.47.08 AM.png (3.6 KB) - added by garrett-eclipse 4 years ago.
Row Actions on Users
sample-always-visible.png (162.6 KB) - added by ibdz 4 years ago.
48751.1.diff (2.0 KB) - added by audrasjb 4 years ago.
Refreshes patch and remove old and useless related backward compatibility css rules
48751.prefers-row-actions-visible.diff (677 bytes) - added by sabernhardt 4 years ago.
another option: begin support for opting in to show all action links
48751.show-comments-actions.diff (741 bytes) - added by sabernhardt 4 years ago.
another option: show all links for Comments tables, opt-in for the rest

Change History (62)

@akrabat
4 years ago

Comment admin page with an approve button

@akrabat
4 years ago

Comment admin page without an approve button

#1 @JarretC
4 years ago

Hello and welcome to Trac!

How do you typically navigate the admin area with your keyboard? I just tested it using Tab to parse through the links on the page. Once the cursor hits the comment author name in the meta data for the comment the moderation links show up for me. Upon pressing Tab again, the cursor jumps down to the moderation links.

@audrasjb
4 years ago

Comments buttons are accessible to keyboard but visually hidden by default

#2 @audrasjb
4 years ago

  • Component changed from Administration to Comments
  • Owner set to audrasjb
  • Status changed from new to reviewing
  • Version 5.3 deleted

Hi @akrabat thank you for opening this ticket and welcome to WordPress Trac,

Comments buttons are accessible to keyboard but visually hidden by default.
In any case, It would be interesting to propose to change that to display those button-links by default. Same question applies as well for Quick edit link on posts by the way :-)

#3 @williampatton
4 years ago

  • Focuses ui added

I'm in favour of exploring ideas to show these by default. Even with a mouse they are not apparent or intuitive. I've had to explain several times to people how to find these. Good catch @akrabat :D

I'm adding ui focus as I feel this is not only an a11y issue but a UI pattern we can possibly do better with overall.

#4 @akrabat
4 years ago

  • Component changed from Comments to Administration
  • Focuses ui removed
  • Version set to 5.3

I use Shortcat (https://shortcatapp.com) or Vimari in Safari which show everything I can click on. I then press the relevant keys to focus/click on the thing.

Vimari: https://i.19ft.com/22313059.png

Shortcat: https://i.19ft.com/39312a74.png

(not sure how to do inline attachments, sorry)

This ticket was mentioned in Slack in #design by williampatton. View the logs.


4 years ago

#6 @audrasjb
4 years ago

  • Component changed from Administration to Comments
  • Focuses ui added
  • Version 5.3 deleted

#7 @akrabat
4 years ago

I seem to have changed some ticket settings while commenting? Not sure how that happened, but sorry…

#8 @audrasjb
4 years ago

Thanks @akrabat for providing those contextual details. It helps a lot!
@williampatton considering the contextual elements @akrabat provided, it's a +1 for me to explore displaying those items.

I seem to have changed some ticket settings while commenting? Not sure how that happened, but sorry…

No worries :-)

Last edited 4 years ago by audrasjb (previous) (diff)

#9 follow-up: @afercia
4 years ago

  • Keywords has-screenshots reporter-feedback added

Worth noting the same reveal/hide mechanism is used in various other places in the admin: Posts, Pages, Taxonomies, Media (List view), Users, etc. The only place where the "action links" are visible by default is the Plugins page, for historical reasons.

@akrabat thanks for your report. Are you able to tab to those links and buttons also in those other pages?

Does it still happen when you temporarily disable Shortcat or Vimari?

#10 in reply to: ↑ 9 @akrabat
4 years ago

Replying to afercia:

Worth noting the same reveal/hide mechanism is used in various other places in the admin: Posts, Pages, Taxonomies, Media (List view), Users, etc. The only place where the "action links" are visible by default is the Plugins page, for historical reasons.

I was idly wondering if I was missing other features of the admin...

@akrabat thanks for your report. Are you able to tab to those links and buttons also in those other pages?

Does it still happen when you temporarily disable Shortcat or Vimari?

Yes, I can tab to them. It just never occurred to me to try as tab is essentially broken on a vast amount of webpages that aren't forms as you usually get "stuck" somewhere and can't get out again.

Tab is also a horrible way to navigate to a control that's not right at the top of the page when there are more direct tools available. e.g. on the admin page dashboard, it takes 21 presses of the tab key to get to the "comments" menu item in the left hand pane. With Vimari (Vimium in Chrome & Firefox), I can press "f" "q" a" and be there in 3 key presses. I would guess that for visually impaired users, tab is a good solution as sequential navigation is probably best. However I have arthritis and can see just fine, so spatially-aware navigation tools make much more sense for me.

Last edited 4 years ago by akrabat (previous) (diff)

#11 @akrabat
4 years ago

  • Keywords reporter-feedback removed

#12 follow-up: @afercia
4 years ago

  • Summary changed from Unable to approve comment without a mouse to Make the list table "action links" always visible or provide an option for that

Thanks @akrabat for clarifying.

Interesting. As far as I see, with Vimari: https://i.19ft.com/22313059.png it is possible, for example, to press XD and focus is moved to the commenter's IP address. Then pressing Tab from there you'd need just one tab press to get to the action links.

Instead, I couldn't find a way to make Shortcat move focus. It sorts of "selects" the matched element but it doesn't really moves focus. That doesn't help so much in reducing the number of required Tab presses. I'd tend to think this is a Shortcat limitation.

Anyways, I'd propose to change the ticket Summary because it is possible to approve comments without a mouse. I'd tend to agree making the action links always visible or providing an option for that is definitely worth exploring.

#13 in reply to: ↑ 12 @akrabat
4 years ago

Replying to afercia:

Thanks @akrabat for clarifying.

Interesting. As far as I see, with Vimari: https://i.19ft.com/22313059.png it is possible, for example, to press XD and focus is moved to the commenter's IP address. Then pressing Tab from there you'd need just one tab press to get to the action links.

Correct - you have to know that the links are there though in order to think to press the tab key though.

Instead, I couldn't find a way to make Shortcat move focus. It sorts of "selects" the matched element but it doesn't really moves focus. That doesn't help so much in reducing the number of required Tab presses. I'd tend to think this is a Shortcat limitation.

Shortcat is more like a clickable mouse pointer than a focus selector. if you type . into the Shortcat window, it highlights all the elements in an application. ctrl+{character sequence} then virtually moves the mouse pointer there, so then you press return to click or ctrl+return to right-click on that thing. This works wonderfully for websites that use a div as a button because Vimari only highlights things that it thinks are links. Shortcat also works on other apps, like Mail or System Preferences for instance. It hooks into the Apple accessibility system, so it's an abject failure for cross-platform apps, like any Electron app, Chrome, Firefox, etc.

Anyways, I'd propose to change the ticket Summary because it is possible to approve comments without a mouse. I'd tend to agree making the action links always visible or providing an option for that is definitely worth exploring.

Happy for it to be renamed to whatever makes the most sense for the project.

As a general point to everyone here, thanks for taking this seriously. Sighted non-mouse users are a minority of a minority!

Last edited 4 years ago by akrabat (previous) (diff)

This ticket was mentioned in Slack in #core by peterwilsoncc. View the logs.


4 years ago

#15 @talldanwp
4 years ago

  • Keywords needs-design-feedback added

Hi @akrabat, the ticket was discussed during a triage session in slack (https://wordpress.slack.com/archives/C02RQBWTW/p1575523487112300 - requires a slack account to access).

We agreed it'd be a good idea to get some design feedback using the needs-design-feedback keyword, so I'm adding that to the ticket.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

#17 @afercia
4 years ago

  • Milestone changed from Awaiting Review to 5.4

This ticket was discussed during today's accessibility bug-scrub: setting 5.4 milestone for visibility and design feedback.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 years ago

#19 @nrqsnchz
4 years ago

  • Keywords needs-design added; needs-design-feedback removed

This ticket was discussed during today's design triage meeting in Slack (https://wordpress.slack.com/archives/C02S78ZAL/p1579542726021700).

The team agreed that having these options always visible would improve the interface but we'd also like to see explorations that maintain a clean and clear UI.

Updating labels accordingly.

#20 @garrett-eclipse
4 years ago

  • Keywords needs-patch added

I would love to see these row actions stay visible. In my experience new users aren't aware they exist. And experienced users aren't aware until hover if any plugins add new actions. Providing them visible always will help onboarding users as well as new actions.

And another side benefit is the privacy progress indicator that's being added to the row action will remain visible throughout the export/erasure process. Ticket reference - #44264

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

#22 @afercia
4 years ago

This ticket was discussed during today's accessibility bug-scrub: we're at few days from Beta 1 and no design feedback has been provided. This ticket is candidate for punting to the next release, unless some design is provided soon.

@garrett-eclipse
4 years ago

Initial patch to have row-actions persistent and not hide.

@garrett-eclipse
4 years ago

Row Actions on Posts always visible

@garrett-eclipse
4 years ago

Row Actions on Media List View always visible

@garrett-eclipse
4 years ago

Row Actions persistent on Pages

@garrett-eclipse
4 years ago

Row Actions persistent on Comments

#23 @garrett-eclipse
4 years ago

  • Component changed from Comments to Administration
  • Focuses javascript css added
  • Keywords has-patch needs-testing added; needs-design needs-patch removed

Hello, I've uploaded an initial patch 48751.diff to keep the row-actions persistently for all list tables removing the hide/show functionality. This works really nicely and helps a few use cases;

  • @akrabat use case of non-mouse sighted users.
  • Onboarding new WP users to the actions and visually showing new actions from plugins to advanced users.
  • Keeps the privacy export/erasure progress indicator visible throughout it's process.

So far I'm not seeing much of a negative with this change, we do see more actions on the screen but personally I'm finding that to be more helpful than clutter.

The UI remains fairly clean and clear even with more visible actions so don't feel we need to redesign the GUI here.

@audrasjb / @afercia / @talldanwp / @nrqsnchz would you mind reviewing from your accessibility/design perspective and we may be able to get this into 5.4 if all parties are on board.

#24 @sabernhardt
4 years ago

  • Keywords needs-dev-note added

For anyone who might think it's too cluttered (more likely with additional links from plugins), could there be an option to keep the current style? This change is significant enough that we should consider whether someone would want to opt out.

When I forced the action links to show for a client's site, my account there still had the standard hidden style. I apparently preferred it that way (then) because I completely hid the Trash link for all users (so no one would click that accidentally).

On the other hand, having additional links probably increases the chances you want to see and use them. And you are less likely to click a link by accident if it's visible when the page loads.

Either way, I recommend a dev note.

#25 @audrasjb
4 years ago

This ticket will need design-feedback and a global decision.

@nrqsnchz do you think it's realistic to get design team final approval on this by tomorrow or the day after tomorrow?
If not, I'm inclined to punt this ticket to 5.5 with a early tag.

This ticket was mentioned in Slack in #design by karmatosed. View the logs.


4 years ago

This ticket was mentioned in Slack in #design by nrqsnchz. View the logs.


4 years ago

#28 @joyously
4 years ago

What about a low opacity for the links as the default state? Then on hover they would show as normal, like they do now.

#29 @nrqsnchz
4 years ago

Hi @garrett-eclipse, @audrasjb! 👋

We discussed this ticket again during the design team's triage meeting (https://wordpress.slack.com/archives/C02S78ZAL/p1581356422295900) and the team feels that this needs more exploration, and as such should be punted for 5.5.

While it may seem like a small update, we think it's a significant change that will affect several views in wp-admin.

We welcome additional explorations that attempt to find a better balance.

#30 @audrasjb
4 years ago

  • Milestone changed from 5.4 to 5.5

Ok, thank you for the update @nrqsnchz !

Moving to 5.5, with early keyword :-)

This ticket was mentioned in Slack in #design by nrqsnchz. View the logs.


4 years ago

@audrasjb
4 years ago

Refreshes patch and remove old and useless related backward compatibility css rules

This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.


4 years ago

This ticket was mentioned in Slack in #accessibility by nrqsnchz. View the logs.


4 years ago

This ticket was mentioned in Slack in #accessibility by nrqsnchz. View the logs.


4 years ago

#35 @sabernhardt
4 years ago

48751.1.diff works for me with Windows 10 browsers (Google, Firefox, Edge and IE11). The action links already have been visible for everybody on smaller screens, so that would only be new at desktop screen/window sizes.

For further consideration, though, I'll upload two more options.

Both of these:

  1. Introduce a prefers-row-actions-visible class, which a plugin could add to show the rows for all users, using the admin_body_class filter. A method for individual users to select whether the links show permanently, and whether that is different for various screens, can be explored on ticket #49715 (and/or here).
  2. Remove the same deprecated styles that were eliminated in 48751.1.diff.

As a compromise and because the Comments table is a particularly good place to show links when the page loads, 48751.show-comments-actions.diff enforces that on:

  1. The Comments admin screen,
  2. The Dashboard comments section, and
  3. The Post Editor comments section (Classic Editor).

@sabernhardt
4 years ago

another option: begin support for opting in to show all action links

@sabernhardt
4 years ago

another option: show all links for Comments tables, opt-in for the rest

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

#37 @afercia
4 years ago

This ticket was discussed during today's accessibility bug-scrub. Agreed it would be best to consider this ticket in the context of #49715 as @sabernhardt mentioned in a previous comment.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


4 years ago

This ticket was mentioned in Slack in #accessibility by audrasjb. View the logs.


4 years ago

#40 @afercia
4 years ago

  • Keywords needs-dev-note removed
  • Milestone changed from 5.5 to Future Release

This ticket was discussed during today's accessibility meeting. The team agreed to postpone it and move it to "Future release", waiting for the changes from #49715.

#41 @afercia
4 years ago

  • Milestone changed from Future Release to 5.6

Or, better: 5.6 :)

#42 @desrosj
4 years ago

#45004 was marked as a duplicate.

This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.


4 years ago

#44 @sabernhardt
4 years ago

  • Keywords needs-design-feedback added; has-patch needs-testing removed

After discussion in Slack (#core-css), this ticket needs design feedback. Also, because the direction to take here relates to ticket:49715, the patches here may not be appropriate anymore.

This ticket was mentioned in Slack in #design by estelaris. View the logs.


4 years ago

#46 @ibdz
4 years ago

  • Keywords needs-design-feedback removed

In design triage today, We agreed it would be best to wait and review the impact from the #49715.

#47 @williampatton
4 years ago

@ibdz @sabernhardt while I agree that #49715 is related to this ticket I do not think that waiting on that ticket should block this one. This is the default view for the list table. The default should be made as accessible as possible. Addition of new views doesn't change this from being the default.

The blocker here is only waiting on needs-design-feedback so removing the tag here means that it just needs to wait on the other ticket and then to re-add it.

If the tag is removed without providing any design feedback I assume it means that no input is needed but I that probably isn't the case here. If design does want to provide input then all that happened here is the ticket has been blocked by #49715 and then when it is unblocked there it just becomes blocked again as the needs-design-feedback ticket will be added again.

This ticket was mentioned in Slack in #accessibility by afercia. View the logs.


3 years ago

#49 @hellofromTonya
3 years ago

  • Milestone changed from 5.6 to Future Release

Accessibility team decided to punt this ticket in today's scrub.

Per @afercia

punting both tickets to give this feature the chance to be in a better shape

Note: See TracTickets for help on using tickets.