Page MenuHomePhabricator

Improve keyboard navigation on Lexeme pages
Open, MediumPublic

Description

As an user I want to be able to navigate/edit Lexeme pages using the keyboard.

Problem: Some actions on the page are not keyboard-friendly and need the use of the mouse. Often the focus is not set right.

Example:

BDD
GIVEN
AND
WHEN
AND
THEN
AND

Acceptance criteria:

Event Timeline

Restricted Application added a project: Wikidata. · View Herald TranscriptAug 9 2018, 8:44 AM
Lydia_Pintscher renamed this task from Investigate keyboard navigation on Lexeme pages to Improve keyboard navigation on Lexeme pages.Sep 1 2018, 7:18 PM
Lydia_Pintscher triaged this task as Medium priority.Sep 2 2018, 3:10 PM
Lydia_Pintscher added a project: WMDE-Design.
Lydia_Pintscher updated the task description. (Show Details)
Restricted Application added a project: Design. · View Herald TranscriptSep 2 2018, 3:10 PM

Which actions are these? We would need a list of problems OR try to find them ourselves, but that might not surface the relevant ones since we are no frequent editors of Lexeme.

KaMan added a comment.Sep 4 2018, 8:55 AM

@Jan_Dittrich to name one: when new area if opened (new/edit Form, new/edit Sense/Gloss) then always focus first field in opened area. Now focus is placed nowhere. See screenshot in https://phabricator.wikimedia.org/T197594

Nikki added a subscriber: Nikki.Apr 3 2020, 6:16 PM
Nikki added a comment.Apr 3 2020, 6:28 PM

There's also no field focused when editing the lemma.

Nikki added a comment.Apr 4 2020, 9:38 AM

In case it's useful to anyone else, I cobbled together the following bit of code last night and put it in my common.js:

mw.hook('wikibase.entityPage.entityView.rendered').add(function () {
	/* focus lexeme form when editing */
	$(".wikibase-lexeme-form .wikibase-toolbar-button-edit a").each(function() {
		var id = $(this).parents(".wikibase-lexeme-form").attr("id");
		$(this).on("click", function() {
			setTimeout(function() {
				$("#"+id).find(".representation-widget_representation-value-input").eq(0).trigger("focus");
			}, 500);
		});
	});

	/* focus lexeme lemma when editing */
	$(".lemma-widget_edit").on("click", function() {
		setTimeout(function() {
			$(".lemma-widget_lemma-value-input").eq(0).trigger("focus");
		}, 500);
	});
});

It only works for editing lemmas and existing forms, since that's all what I was trying to edit at the time.

Change 592418 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/WikibaseLexeme@master] Autofocus inputs in lemmas widget

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

Change 592419 had a related patch set uploaded (by Lucas Werkmeister (WMDE); owner: Lucas Werkmeister (WMDE)):
[mediawiki/extensions/WikibaseLexeme@master] Autofocus inputs in form representations widget

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

Change 592418 merged by jenkins-bot:
[mediawiki/extensions/WikibaseLexeme@master] Autofocus inputs in lemmas widget

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

Change 592419 merged by jenkins-bot:
[mediawiki/extensions/WikibaseLexeme@master] Autofocus inputs in form representations widget

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

One issue that still exists is that all the statements of a Sense or Form come before the “edit” button for the glosses or form representations in the tab order. So if you tab through Beta’s L1, for example, you’ll first get the two “jump to” navigation links, then the lemmas link (so far so good), then the language and lexical category, then the Lexeme statements (good), then the Sense statements (skipping over the Sense “edit” link) until the Sense “add statements” link, then jump back up to the Sense “edit” link, then jump down to the second Sense’s statements, go through those statements until “add statement”, then back up to the second Sense’s “edit” link, and so on. This jumping around is fairly confusing.