Page MenuHomePhabricator

Add * mandatory field indicator to Special:NewLexemeAlpha form page
Closed, ResolvedPublic3 Estimated Story Points

Description

As a Wikidata editor, I want to see an indication of the mandatory fields that I need to enter in the Special:NewLexeme (experimental) page form when I am creating a new Lexeme.

Problem:
The absence of the * in the fields makes it look like filling those fields is optional.

Screenshots

image.png (568×983 px, 93 KB)
in contrast with the old Special:NewLexeme page:
image.png (532×922 px, 93 KB)

Acceptance criteria:

  • mandatory fields are indicated as mandatory

Event Timeline

Lydia_Pintscher updated the task description. (Show Details)
Lydia_Pintscher added a subscriber: Sarai-WMDE.

@Sarai-WMDE Could you please have a look at this? We received it as part of teh testing feedback.

The new designs are aligned with the system design proposal to only display an indicator when fields are optional. Even if that's the general rule, I agree that informing users about required fields after submission might not be the best pattern in the context at hand. I think we should make it apparent to users of the NewLexemeAlpha page that all fields are required.

Now, adding an asterisk within the fields is not recommended: as of now, the decision is to not introduced this pattern in our new common system [1]. A simple solution instead might be to add an asterisk beside the fields' labels (e.g. Lemma*) :

Screenshot 2022-07-22 at 11.25.35.png (742×2 px, 252 KB)

There's no need to update WiKit for this, as the indicators can be added in context. This pattern is visually aligned with the general Norman/Nielsen recommendation, but we can iterate (e.g. use a different color or placement) if we detect that the indicator is not sufficiently visible.

[1] The current end icon included within the fields is not compatible with all form elements (e.g. Select). The design system team didn't find it acceptable to display said asterisk sometimes inside and sometimes outside of form elements (depending on whether it fits or not), as it impacts recognition. Therefore, the current solution (depicted in the second screenshot included in the description) was discarded.

Thank you! That makes sense. Let's do that.

Implementation note:

We should make sure that the fields have the aria-required attribute set to true to ensure that this information is also translated to screen readers.

Implementation note:

We should make sure that the fields have the aria-required attribute set to true to ensure that this information is also translated to screen readers.

I'm not sure if this is necessary, The input field is still an input at the lowest level, and I should hope that any signifier of it as a required field would find itself in the input field too. AFAIK, aria-required is only needed on non semantic elements like a <div> with contenteditable for example.

Implementation note:

We should make sure that the fields have the aria-required attribute set to true to ensure that this information is also translated to screen readers.

It looks like that’s already the case, so we just need to not remove it:

<div class="wikit wikit-TextInput wbl-snl-lemma-input" data-v-0aac40c2="">
  <span class="wikit-TextInput__label-wrapper">
    <label class="wikit-TextInput__label" for="wikit-TextInput-725624">Lemma</label>
    <span></span>
  </span>
  <input type="text" class="wikit wikit-Input" id="wikit-TextInput-725624" placeholder="Base form of a word, e.g. 'cat'" name="lemma" aria-required="true">
  <!---->
</div>

I agree with the need to add aria-required to all the fields in order to make users of screen readers aware of a state that we're communicating via a visual cue in the label. I didn't mention it myself because I found that attribute already applied on inspection.

Screenshot 2022-07-25 at 11.34.00.png (644×2 px, 269 KB)

But I'm realizing now that the attribute is not used by lookups:

Screenshot 2022-07-25 at 11.39.58.png (294×2 px, 144 KB)

Task Breakdown Notes:

  • We can make two tasks, one to add the asterisk (in special-new-lexeme-page.git), and the other to add the aria-required attribute
  • The aria-required attribute should probably be a toggled boolean prop passed down to the lookup's input
  • Adding the asterisk can be done by adding it to the suffix slot of the input label
  • To hide the asterisk from screen readers, we can wrap it in a span and add aria-hidden to it

Potential Plan of Action:

Change 820097 had a related patch set uploaded (by Lucas Werkmeister (WMDE); author: Lucas Werkmeister (WMDE)):

[mediawiki/extensions/WikibaseLexeme@master] Bump Special:NewLexemeAlpha

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

Change 820097 merged by jenkins-bot:

[mediawiki/extensions/WikibaseLexeme@master] Bump Special:NewLexemeAlpha

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