WordPress.org

Make WordPress Core

Opened 2 weeks ago

Last modified 42 hours ago

#48751 reviewing defect (bug)

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

Reported by: akrabat Owned by: audrasjb
Milestone: Awaiting Review Priority: normal
Severity: normal Version:
Component: Comments Keywords: has-screenshots needs-design-feedback
Focuses: ui, accessibility Cc:
PR Number:

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 (3)

525a403c.png (900.9 KB) - added by akrabat 2 weeks ago.
Comment admin page with an approve button
d855a816.png (793.2 KB) - added by akrabat 2 weeks ago.
Comment admin page without an approve button
9179448eec009da862f9d47e5ad7a4c6.gif (925.2 KB) - added by audrasjb 2 weeks ago.
Comments buttons are accessible to keyboard but visually hidden by default

Change History (18)

@akrabat
2 weeks ago

Comment admin page with an approve button

@akrabat
2 weeks ago

Comment admin page without an approve button

#1 @JarretC
2 weeks 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
2 weeks ago

Comments buttons are accessible to keyboard but visually hidden by default

#2 @audrasjb
2 weeks 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
2 weeks 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
2 weeks 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.


2 weeks ago

#6 @audrasjb
2 weeks ago

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

#7 @akrabat
2 weeks ago

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

#8 @audrasjb
2 weeks 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 2 weeks ago by audrasjb (previous) (diff)

#9 follow-up: @afercia
2 weeks 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
2 weeks 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 2 weeks ago by akrabat (previous) (diff)

#11 @akrabat
2 weeks ago

  • Keywords reporter-feedback removed

#12 follow-up: @afercia
2 weeks 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
2 weeks 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 2 weeks ago by akrabat (previous) (diff)

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


42 hours ago

#15 @talldanwp
42 hours 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.

Note: See TracTickets for help on using tickets.