Page MenuHomePhabricator

Audit keyboard navigation on Special:NewLexeme
Closed, ResolvedPublic3 Estimated Story Points

Authored By
Lea_Lacroix_WMDE
Aug 9 2018, 8:44 AM
Referenced Files
F35215612: image.png
Jun 7 2022, 3:18 PM
F35215554: image.png
Jun 7 2022, 2:35 PM
F35215479: image.png
Jun 7 2022, 2:17 PM
F35215483: image.png
Jun 7 2022, 2:17 PM
F35215488: image.png
Jun 7 2022, 2:17 PM
F35215523: image.png
Jun 7 2022, 2:17 PM
F35215476: image.png
Jun 7 2022, 2:17 PM
F35215495: image.png
Jun 7 2022, 2:17 PM

Description

As a user, I want to be able to create Lexemes only using the keyboard.

Problem: Some actions on the page might not be keyboard-friendly and need the use of the mouse, we would like to confirm that this is not the case.

Notes:

A/C

  • manual test is done
  • if automated testing is needed or there are navigatioal pitfalls, follow up tasks are written

Event Timeline

ItamarWMDE renamed this task from Investigate keyboard navigation on Special:NewLexeme to Audit keyboard navigation on Special:NewLexeme.May 11 2022, 10:54 AM
ItamarWMDE updated the task description. (Show Details)
ItamarWMDE subscribed.

Task Breakdown Notes:

  • To view the tabbing order in Firefox, open the developer tools panel. In the accesibilty tab, press the "Show tabbing order" checkbox.
  • To enable caret browsing (in most browsers on ubuntu, press the F7 key). Caret browsing = arrow key navigation.

Potential Plan of Action (Checklist edition):

  • Tabbing order
  • Lookup Options Navigation
  • Link, Button and Lookup Dropdown Activation (w. Enter)
  • Enter key-press submission

I noticed something while reviewing another change that I think fits here: if the lexeme language has an item without a language code selected, then just tabbing through that field will wipe whatever you had in the spelling variant input. This applies to both the old and the new version of the special page. (It’s arguably worse on the old version of the special page, because there the spelling variant field comes before the language field, so you have to tab through the language in order to get to the lexical category; on the new version of the special page, the spelling variant comes after the language field, so you would only tab through the language to get back to the lemma.)

I noticed something while reviewing another change that I think fits here: if the lexeme language has an item without a language code selected, then just tabbing through that field will wipe whatever you had in the spelling variant input. This applies to both the old and the new version of the special page. (It’s arguably worse on the old version of the special page, because there the spelling variant field comes before the language field, so you have to tab through the language in order to get to the lexical category; on the new version of the special page, the spelling variant comes after the language field, so you would only tab through the language to get back to the lemma.)

https://github.com/wmde/new-lexeme-special-page/pull/215

I think the rest of this task is effectively blocked until T305359: Adjust behavior of pressing "enter" in Lookups is done – at least to me, that is the biggest issue with the current keyboard navigation, and it doesn’t seem useful to test the rest of the form until that’s fixed.

https://github.com/wmde/new-lexeme-special-page/pull/215

Merged.

I think the rest of this task is effectively blocked until T305359: Adjust behavior of pressing "enter" in Lookups is done – at least to me, that is the biggest issue with the current keyboard navigation, and it doesn’t seem useful to test the rest of the form until that’s fixed.

Unblocked.

  • Results from testing on vue instance:

Note 1:

image.png (345×621 px, 37 KB)

If something is typed in the Lexeme's language and Lexical category fields, and then the user goes to the next element by pressing Tab but not pressing enter to confirm the selection in the lookup , the fields still contain the typed in text but throw an empty field error. This is somehow ok because what was typed has not been submitted but feels strange because technically the fields are not empty. Maybe we can process the values in the lookup on pressing Tab as well as when pressing Enter.

Note 2:

If the other three fields are filled out, if the last field to be filled out is the Spelling Variant of the Lemma, the form is submitted automatically upon selection of the spelling variant. 🤔

Tabbing order running local instance on vue:

image.png (554×1 px, 71 KB)


Pre-results from local testing on mediawiki.

Notes on tabbing order:

Tabbing order (as shown in Firefox) seems to be ok within the new-lexeme-page

image.png (487×1 px, 119 KB)


Enter event is working fine in Firefox for Button, Links and Lookup selection of menu Items.