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

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 added a project: WMDE-Design.
Lydia_Pintscher updated the task description. (Show Details)

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.

@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

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

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.

More issues:

Clicking "edit" for the lemma focuses the lemma field, but clicking the buttons to add or remove spelling variants doesn't put the focus back in a field. For add, I would expect the focus in the lemma field of the new spelling variant. For remove I think it would make sense to put the focus in the lemma field of the previous spelling variant if the one you're removing is not the first or the new first one if it is.

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.

I can't tab to them at all because they're not buttons and don't have a tabindex attribute - T250519