Page MenuHomePhabricator

Implement keyboard navigation for VE template dialog
Closed, ResolvedPublic5 Estimated Story Points

Description

  • Sidebar navigation (0):
    • Users can navigate to the sidebar area using tab.
    • All top-level parts in the sidebar (templates and wikitext snippets) are separate tab targets.
    • The first interactive element that can receive focus with the tab key is the template name, then the parameter search, then the parameter list.
    • Arrow keys can be used to navigate up or down in the parameter list (1)(2). The main area should not scroll. (Only when pressing enter. This will be done via T289043.)
    • The focus should return to the first parameter in the sidebar if users press down or (modifier key +) right arrow while focusing on the last parameter in the menu.
    • Highlighting an unselected parameter should not add it.
    • Selection and deselection of parameters is toggled with the space key.
    • Enter makes the focus jump to the corresponding element in the main area. When the sidebar element is a template parameter, it's forced to be checked before the focus jumps.
  • Specific for multi-part transclusions:
    • One of the top-level part names in the sidebar can be select both with space and enter. It gets highlighted in blue. Only one can be selected. This selection stays when I leave the area. I can navigate to the bottom toolbar and e.g. delete or move the selected part.
    • Space does nothing but select the currently highlighted part. Enter does the same plus makes the focus jump to the content area on the right. (Same as for parameters.)
    • Keyboard shortcuts moved to T290262: Add keyboard shortcuts for VE template dialog
  • Main area navigation:
    • Users should be able to navigate from the last interactive element in the sidebar to the main area using tab. (Note: See T289653 for requirements specific for screenreaders.)
    • Users should be able to focus on the next element within the main area using tab (next interactive element, e.g. link) or modifier key + arrows (next element, e.g. message or template title if present)
NOTE: Ticket needs research and decision making.

Notes:

(0) Overall dialog navigation and detailed accessibility guidelines are not provided, since the default OOUI dialog is accessible.
(1) As discussed during Story time on July the 14th, ideally users should be able to focus on the option containing the checkbox, which would display a highlighted state, and to use arrow keys (similar to add more info) to navigate between them. A possibility would be using the ARIA role "grid" to present interactive components in a keyboard navigable list of cells. The main downside is that this solution would involve using a table element to present the parameters.
(2) We could let users know every time the focus on a parameter: "{Parameter name}. Disabled. Press space to enable. Press enter to enable and edit the parameter"

Details

ProjectBranchLines +/-Subject
mediawiki/extensions/VisualEditormaster+10 -1
mediawiki/extensions/VisualEditormaster+41 -6
mediawiki/extensions/VisualEditormaster+62 -2
mediawiki/extensions/VisualEditormaster+60 -48
mediawiki/extensions/VisualEditormaster+20 -8
mediawiki/extensions/VisualEditormaster+10 -0
mediawiki/extensions/VisualEditormaster+8 -3
mediawiki/extensions/VisualEditormaster+53 -0
mediawiki/extensions/VisualEditormaster+14 -5
mediawiki/extensions/VisualEditormaster+7 -7
mediawiki/extensions/VisualEditormaster+51 -62
mediawiki/extensions/VisualEditormaster+79 -22
mediawiki/extensions/VisualEditormaster+180 -75
mediawiki/extensions/VisualEditormaster+2 -0
mediawiki/extensions/VisualEditormaster+19 -21
mediawiki/extensions/VisualEditormaster+15 -15
mediawiki/extensions/VisualEditormaster+7 -9
mediawiki/extensions/VisualEditormaster+16 -27
mediawiki/extensions/VisualEditormaster+37 -47
Show related patches Customize query in gerrit

Related Objects

Event Timeline

There are a very large number of changes, so older changes are hidden. Show Older Changes

Some notes:

  • There was a longer, really productive discussion about accessibility in story time. All documented in https://docs.google.com/document/d/1Fj5ljAEtb_bEUeK-hMb3KzVzGohopp9WCakVnTar5Tc/edit#heading=h.9bmgc4ypxcba.
  • The preferred solution in this discussion was to make the tab key focus …
    1. the header with the template name
    2. the parameter search field
    3. the list of parameters as a whole
    4. the "add more information" button.
    5. Same with the next part in the sidebar.
  • This ist mostly already working, with a few exceptions:
    1. When the focus is on a checkbox, the entire line should be highlighted (as it was done before). Important: The focus should stay on the checkbox so it can be toggled with the keyboard.
    2. I think we want both the space and enter keys to work on the checkboxes. Enter works in the old sidebar.
    3. At the moment, the focus is lost when a checkbox is checked. This should be discussed. One idea is to do different things depending on the key: Space toggles the checkbox but doesn't change the focus. Enter jumps to the parameter on the right.
    4. The individual checkboxes should not be focused via the tab key, but via the cursor keys (as it was before). If this turns out to be to complicated for our budget it's also fine to stick to the default tab-key behavior.
    5. If the name of the template should be an individual tab target (I prefer this) or part of the cursor-key list (this is how it's done in the old sidebar) should be discussed.

Change 711144 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Make checkbox element in the sidebar an actual widget

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

Change 711145 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Make use of OO.ui.mixin.RequiredElement for required parameters

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

Change 711144 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Make checkbox element in the sidebar an actual widget

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

Change 713259 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Rename \u2026ParameterCheckboxLayout now that it's an actual Widget

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

Change 713265 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Make template parameter checkbox widget an OptionWidget

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

Change 713291 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] [WIP] Basic cursor key support in new template dialog sidebar

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

Change 713437 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Rename conflicting .setSelected() method in outline widget

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

Change 713438 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Rename custom outline widget events to not conflict

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

Change 713265 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Make template parameter checkbox widget an OptionWidget

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

Change 713437 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Rename conflicting .setSelected() method in outline widget

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

Change 713438 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Rename custom outline widget events to not conflict

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

To document the old behavior:

  • Using the tab key, the entire sidebar acts as a single element. This includes everything. The template's names, their parameters, even multi-part templates.
  • Navigation inside the sidebar must be done with the cursor keys. Notable details: Again, it acts as one combined list for all templates. It wraps around at the top/bottom. Cursor left/right works as well.
  • Navigating the sidebar is visualized with a gray background (#eaecf0) behind the template's name or parameter. Notable detail: This gray background disappears when the line is selected the same time (blue, #36c on #eaf3ff).
  • You would think that having the sidebar act as a single element does have it's benefits. This makes it possible to select a specific part from a multi-part template, use the tab key to navigate to the toolbar at the bottom, and then e.g. move or remove that part. But this is not properly implemented. The focus is lost when leaving the sidebar. Using the toolbar buttons acts on the selected (blue) element instead of the focused (gray). You have to press enter to select the part. But you can't navigate back to the toolbar because this makes the selection (blue) move around. The only reliable way to delete a part without touching the mouse is to use the delete buttons on the right.
  • Pressing enter on a parameter or wikitext element focuses the corresponding input field on the right.
  • It's also possible to press enter on the template's name. This attempts to focus the template's section header on the right. Unfortunately there is not really anything in this header that can be focused. The only thing is the link to the template page. This is focused.
  • Space bar never does anything in the old sidebar.

Notable consequences:

  • For the new sidebar we implemented a proper hierarchy. Each template is an individual tab target. The cursor keys navigate only the parameters from a single template.
  • The template's name is also a separate tab target and not part of the cursor key list. This is a consequence of the new sidebar actually being hierarchical.
  • Since we are using checkboxes, we made the spacebar behave as expected.
  • Enter works as before. The focus jumps to the content area. However, there is a new situation: It's possible to press enter on a parameter that's currently not used in the template. This will enable the checkbox and then jump to the input widget on the right.
  • The problem where it's impossible to move or remove a template without touching the mouse gets worse. It's not possible to navigate to the toolbar without loosing the information which template was focused. We also removed the delete buttons on the right.
  • We should make sure we have a style when an item is selected and focused the same time.

Open questions (@ECohen_WMDE?):

  • Should the template name be it's own tab target? We could just exclude it from being a tab target. But note it's probably needed when the template doesn't have parameters.
  • While it's probably possible to make the template name part of the list again (as before), this is rather high effort, as it conflicts with the hierarchical structure.
  • Spacebar toggles a checkbox on/off. Should enabling a checkbox with the spacebar move the focus to the content pane on the right? (Note that enter already does this.)
  • What to do about the "can't use the toolbar without the mouse" situation?

Thanks @thiemowmde for the detailed breakdown! It's obviously quite complex. I have a few questions below to make sure that I'm clear on the issues before making any recommendations.

We should make sure we have a style when an item is selected and focused the same time.

I'm not sure I fully understand this part. Do you mean a different highlight than the current blue background?

Should the template name be its own tab target? We could just exclude it from being a tab target. But note it's probably needed when the template doesn't have parameters.

What is the benefit to making it a tab target? When in focus there isn't anything you can do, unless you have the multi-part toolbar (but in that case you would have to tab to get to the toolbar anyway, losing focus on the template). If I understood this incorrectly, let me know! I'm also not sure why it would be needed when there are no parameters. It would mean there is nothing to focus on in the sidebar, but maybe that's actually better that it jumps to the main area where there is helpful information and actions that can be taken?

While it's probably possible to make the template name part of the list again (as before), this is rather high effort, as it conflicts with the hierarchical structure.

Again, I'm not clear on the benefits of this.

What to do about the "can't use the toolbar without the mouse" situation?

Am I understanding the problem correctly? My understanding: the issue is that by the time you tab down to the toolbar and are able to activate any of the buttons/actions there, it is not clear which element in the sidebar will be affected by it. In this case, I'm wondering which element actually will move after you've tabbed out - will it always be the final element in the list?

Just realized I forgot to respond to this one:

Spacebar toggles a checkbox on/off. Should enabling a checkbox with the spacebar move the focus to the content pane on the right? (Note that enter already does this.)

I think it's actually nice that they behave slightly differently, then a user has options. If they want to check a bunch of parameters, then they can move down the list using the spacebar. If they want to turn it on, then directly fill it out, they can press enter. I would leave it as it currently is then.

Last comment: I think it would be helpful if the task description helped show the current progress. I'm not sure if the way that you updated it Friday @thiemowmde also reflects the current state?

ECohen_WMDE renamed this task from Placeholder: implement access keys for VE template dialog to Implement keyboard navigation for VE template dialog.Aug 23 2021, 9:54 AM

Change 713259 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Rename \u2026ParameterCheckboxLayout now that it's an actual Widget

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

Change 711145 abandoned by Thiemo Kreuz (WMDE):

[mediawiki/extensions/VisualEditor@master] Make use of OO.ui.mixin.RequiredElement for required parameters

Reason:

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

Change 713291 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Basic cursor key support in new template dialog sidebar

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

awight added a subscriber: awight.

All patches are merged, moving this to demo.

Change 715258 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Allow selecting top-level parts in the new sidebar

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

Change 715265 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] More complete top-level part selection support in new sidebar

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

Change 715258 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Allow selecting top-level parts in the new sidebar

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

Change 715265 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] More complete top-level part selection support in new sidebar

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

Change 715702 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Remove unused event listener from \u2026ParameterSelectWidget

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

From today's demo time:

Change 715714 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Rename \u2026OutlineItem CSS class to match widget class name

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

Change 715715 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Fix inconsistent keyboard :focus styles in template outline

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

Change 715714 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Rename \u2026OutlineItem CSS class to match widget class name

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

Change 715725 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Fix click/enter on template parameters not focusing the input

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

Change 715726 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Rename and document select/focus events in template dialog

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

Change 715750 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Highlight first template parameter when using tab to navigate

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

WMDE-Fisch set the point value for this task to 5.
WMDE-Fisch added a subscriber: WMDE-Fisch.

Access keys will be split of ~3points.
Done maybe ~8.

Change 715927 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Highlight corresponding template parameter in new sidebar

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

Change 715702 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Remove unused event listener from \u2026ParameterSelectWidget

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

Change 715927 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Highlight corresponding template parameter in new sidebar

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

Change 715725 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Fix click/enter on template parameters not focusing the input

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

Change 715750 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Highlight first template parameter when using tab to navigate

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

Change 715715 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Fix inconsistent keyboard :focus styles in template outline

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

Change 716411 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Fix space bar on top-level template parts loosing focus

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

Change 716430 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] Stop space bar in parameter selection loosing focus

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

Change 715726 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Rename and document select/focus events in template dialog

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

Change 719289 had a related patch set uploaded (by Thiemo Kreuz (WMDE); author: Thiemo Kreuz (WMDE)):

[mediawiki/extensions/VisualEditor@master] [WIP] Split focus handling from add/remove parameter events

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

Change 716411 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Fix space bar on top-level template parts loosing focus

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

Change 719289 merged by jenkins-bot:

[mediawiki/extensions/VisualEditor@master] Split focus handling from add/remove parameter events

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

thiemowmde moved this task from Demo to Done on the WMDE-TechWish-Sprint-2021-09-01 board.

Change 716430 abandoned by Thiemo Kreuz (WMDE):

[mediawiki/extensions/VisualEditor@master] Stop space bar in parameter selection loosing focus

Reason:

Ok, obsolete via I93f1772.

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