Opened 5 years ago
Last modified 4 years 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: | 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)
Change History (62)
#1
@
5 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.
#2
@
5 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
@
5 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
@
5 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.
5 years ago
#6
@
5 years ago
- Component changed from Administration to Comments
- Focuses ui added
- Version 5.3 deleted
#7
@
5 years ago
I seem to have changed some ticket settings while commenting? Not sure how that happened, but sorry…
#8
@
5 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 :-)
#9
follow-up:
↓ 10
@
5 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
@
5 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.
#12
follow-up:
↓ 13
@
5 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
@
5 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!
This ticket was mentioned in Slack in #core by peterwilsoncc. View the logs.
5 years ago
#15
@
5 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.
5 years ago
#17
@
5 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.
5 years ago
#19
@
5 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
@
5 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.
5 years ago
#22
@
5 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.
#23
@
5 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
@
5 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
@
5 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.
5 years ago
This ticket was mentioned in Slack in #design by nrqsnchz. View the logs.
5 years ago
#28
@
5 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
@
5 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
@
5 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.
5 years ago
This ticket was mentioned in Slack in #accessibility by sabernhardt. View the logs.
5 years ago
This ticket was mentioned in Slack in #accessibility by nrqsnchz. View the logs.
5 years ago
This ticket was mentioned in Slack in #accessibility by nrqsnchz. View the logs.
5 years ago
#35
@
5 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:
- Introduce a
prefers-row-actions-visible
class, which a plugin could add to show the rows for all users, using theadmin_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). - 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:
- The Comments admin screen,
- The Dashboard comments section, and
- The Post Editor comments section (Classic Editor).
This ticket was mentioned in Slack in #accessibility by afercia. View the logs.
4 years ago
#37
@
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
@
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.
This ticket was mentioned in Slack in #core-css by kirstyburgoine. View the logs.
4 years ago
#44
@
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
@
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
@
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.
Comment admin page with an approve button