Page MenuHomePhabricator

Add shortcuts to hover tooltips on buttons in adv toolbar
Closed, ResolvedPublic3 Estimated Story Points

Description

Background

We added shortcuts but they are hard to discover. We would like to add them to the text of the existing hover tooltips.

Requirements

  • Expand tooltip text to include shortcuts
  • When someone is on a mac, show them Cmd and when someone is on a PC, show them Ctrl
  • Discuss the behavior of the Up/Down/Delete shortcuts. They don't behave exactly like the buttons do: The buttons act on the blue selection, while the shortcuts act on what's in keyboard focus. Also see the discussion below. Moved to T300971.

Specs

ButtonHover tooltip
Puzzle piece/template buttonAdd template Ctrl+D
[[]] Wikitext buttonAdd wikitext Ctrl+Shift+Y
Up arrowMove item up Ctrl+Shift+Up
Down arrowMove item down Ctrl+Shift+Down
TrashcanRemove item Ctrl+Delete

List of all shortcuts in the parent ticket T294521 for reference.

The implementation should probably use the existing OO.ui.mixin.AccessKeyedElement and/or jquery.accessKeyLabel.js.

Related Objects

Event Timeline

thiemowmde set the point value for this task to 3.Jan 19 2022, 2:27 PM

@ECohen_WMDE, MediaWiki provides functionality to format such tooltips. That format looks like [ctrl+d] in square brackets at the end of the tooltip, all lowercase. You can see examples for this on the Wikipedia main page on many elements in the toolbars in the top right. Is this ok? If so, can we update the task description accordingly?

@thiemowmde - Sounds great. Yes, please format the same as elsewhere on MediaWiki. And thanks for the offer to update the task description as well. Go for it!

Change 755981 had a related patch set uploaded (by Andrew-WMDE; author: Andrew-WMDE):

[mediawiki/extensions/VisualEditor@master] Show a keyboard shortcut when hovering over a toolbar button

https://gerrit.wikimedia.org/r/755981

Uh, this is weird. I just realized that VE somehow does not conform to what I believed would be a MediaWiki standard. Existing tooltips in VE show e.g. Link Ctrl+D. I'm in the middle of figuring out where these come from.

Uh, this is weird. I just realized that VE somehow does not conform to what I believed would be a MediaWiki standard. Existing tooltips in VE show e.g. Link Ctrl+D. I'm in the middle of figuring out where these come from.

Yeah same with the Save changes... Alt+Shift+S I think it's a little mess there. When you switch to the 2010 Wikitext editor the tooltip for the save button says Save your changes [Alt+Shift+s] (also note the lowercase s) ^^'.

But I agree, that we should probably copy what's used in VE. Generally cleaning that up would be a complete different topic. Maybe even worth a task to bring attention to the issue? 🤔

I tested the patch. It adds the shortcuts nicely. But not all shortcuts are working for me, as already described in https://phabricator.wikimedia.org/T296463. Should we maybe wait with merging this patch until we fixed that?

I tested the patch. It adds the shortcuts nicely. But not all shortcuts are working for me, as already described in https://phabricator.wikimedia.org/T296463. Should we maybe wait with merging this patch until we fixed that?

I agree. This is especially confusing, because the buttons in the toolbar work with the "selected" state of the parts in the outline, the keyboard shortcuts to move and delete just work when the headlines in the outline have keyboard focus. So in a situation where a part is "selected" and has no focus, it can be moved with the buttons but not with the shortcuts.

We keep bringing this up over and over again. I think we (@ECohen_WMDE?) should finally resolve this.

  1. As of now, the selection is a must to be able to use the buttons in the toolbar without a mouse. The focus is lost when I tab down to the buttons, but the selection stays.
  2. As a keyboard-only user I want to tab to the transclusion part I want to move/delete, and just do that with the shortcuts. Why would I need to select the part first? It's already in focus.
  3. Let's say the shortcuts work on the selected part instead of the focused. What happens if I select a part, but then tab away to some other part before I press the move/delete shortcut? Does a blind user even have a chance to understand which part will be moved/deleted?

So what's going on here?

  • I think this confusion is only because none of us is a blind and/or keyboard-only user. This might be us expecting something an actual keyboard-only user doesn't necessarily expect.
  • I don't think the toolbar buttons and the shortcuts need to behave the same. They are for different users with different usage patterns.
  • The ARIA labels are currently written as if a selection is needed. But that's only partially true, only when I want to use the toolbar. I think this adds to the confusion. We never resolved this either.

Good points and all valid. I'm not necessarily challenging the current behavior. I just wanted to raise the question if it might be confusing to add these shortcuts to the title tags of the buttons in the toolbar. Users might assume, that - wherever their focus is - they could use these shortcuts to move / delete a part as long as it is selected.

True. This puts the tooltips on an edge: On the one hand they might increase the confusion because the tooltips are on the toolbar buttons, but don't behave exactly like the toolbar buttons. On the other hand we don't really have another place to document them.

Change 755981 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Show a keyboard shortcut when hovering over a toolbar button

https://gerrit.wikimedia.org/r/755981

thiemowmde updated the task description. (Show Details)
thiemowmde added a subscriber: Andrew-WMDE.
thiemowmde claimed this task.