204106 - enter bug form should indicate which fields are required/mandatory

Status: RESOLVED FIXED

(Bugzilla :: User Interface, defect, P1)

Description

[Myk Melez [:myk] [@mykmelez]]

The "enter bug" form doesn't say which fields are required/mandatory and which
are not.  It should, so users don't have to submit the form to find out this
information.

Comment 1

[Matthew Tuck [:CodeMachine]]

It should be split into two halves, each with a header.  The optional fields
would be in the second section, which could be ignored, so users don't need to
hunt and peck to figure out what needs to be changed.

Comment 2

[Stephen Lee]

A standard UI on many webapps I've seen is to put a (*) next to the required 
fields...

Perhaps this could be implemented as a CSS style for "required_field" which 
could be applied in many other places?

Comment 3

[Paul]

This might get fixed with bug# 36843 or bug# 317051 when the required fields will have defaults!

Comment 4

[Bill Barry]

This should be done with a css based solution of putting all required elements in a required_field class.

Then it would be up to CSS to decide what to do with required elements. I suggest making the background #F7F7BD (the color yellow as the location box in firefox when a secure site is being visited). That way the elements stand out more than they would if there was a * on the side of the field (I always seem to miss them on other sites). A * could still be added on fields in browsers that support css like the following:

.required_field:after { content: "(*)" }

Comment 5

[Jesse Ruderman]

It would be even better if there were a script preventing me from submitting the form with required fields missing.  I keep forgetting to select a component, and when I attach a testcase, I often forget to give it a description.

Comment 6

[Sandeep A.S]

Mandatory fields comes not only at the time of creation of the bug.
But also at the time of updating the bugs.
for example while  closing the bug we may need to have some fields to be 
filled like build fixed.

Comment 7

[Max Kanat-Alexander]

Pyrzak's students' research pointed this out as a significant issue for new users, and I agree that we should note that certain fields are required, and remove the (optional) after Keywords (because almost all the fields are optional...).

Comment 8

[Nitish Bezzala]

Attachment: v1

Made the change for the "Summary:" label on the Create New Bug page. It shows up in a yellow background with a red star next to it. 
Added the required_field class to global.css

Please let me know if this is fine, and I can make changes at other places.

Comment 9

[Ashley Bischoff (blog at handcoding.com)]

(In reply to comment #8)
> Made the change for the "Summary:" label on the Create New Bug page. It shows
> up in a yellow background with a red star next to it. 
> Added the required_field class to global.css
> 
> Please let me know if this is fine, and I can make changes at other places.

For accessibility's sake, perhaps it may also be worth making use of the "aria-required" attribute on required form field(s)? For instance, such as this?

<input name="short_desc" size="70" value="[% short_desc FILTER html %]"
              maxlength="255" spellcheck="true" aria-required="true">

(This page has more on "aria-required", in case that may be of use:
http://wiki.codetalks.org/wiki/index.php/Technique:_marking_form_fields_as_required_using_aria-required )

Comment 10

[Max Kanat-Alexander]

Comment on attachment 377701 [details] [diff] [review]
v1

I don't want a background color on those required fields. I do want the field labels themselves colored, or if they're links, the star itself is enough.

However, you must indicate what the star means, on the page itself.

Comment 11

[David Bolter [:davidb] (NeedInfo me for attention)]

(In reply to comment #9)
> (In reply to comment #8)
> For accessibility's sake, perhaps it may also be worth making use of the
> "aria-required" attribute on required form field(s)?

Yes. Absolutely.

Comment 12

[Max Kanat-Alexander]

Attachment: v2

Okay, here we go, this adds a red star before the field name (which was a bit cleaner than adding it after), sets the background of required fields to a specific color, adds aria-required, and also adds a note that explains what the stars and background colors mean.

Comment 13

[Max Kanat-Alexander]

Attachment: Screenshot of V2

Comment 14

[Marco Zehe (:MarcoZ)]

Great to see you're making use of aria-required here!

Comment 15

[David Lawrence [:dkl]]

Comment on attachment 412726 [details] [diff] [review]
v2

>Index: template/en/default/bug/create/create.html.tmpl
>   <tr>
>-    <td colspan="4">
>-        <a id="expert_fields_controller" class="controller bz_default_hidden"
>-            href="javascript:TUI_toggle_class('expert_fields')">Hide
>+   <td colspan="2">
>+      <a id="expert_fields_controller" class="controller bz_default_hidden"
>+          href="javascript:TUI_toggle_class('expert_fields')">Hide

Nit: indentation on a few lines got messed up here. Please correct on checkin.

Otherwise everything looks good to me and works as expected.

r=dkl

Comment 16

[Max Kanat-Alexander]

Thanks! Indentation fixed on checkin.

Checking in skins/standard/global.css;
/cvsroot/mozilla/webtools/bugzilla/skins/standard/global.css,v  <--  global.css
new revision: 1.70; previous revision: 1.69
done
Checking in template/en/default/bug/create/create.html.tmpl;
/cvsroot/mozilla/webtools/bugzilla/template/en/default/bug/create/create.html.tmpl,v  <--  create.html.tmpl
new revision: 1.101; previous revision: 1.100
done

Comment 17

[Max Kanat-Alexander]

Added to the release notes in bug 547466.