640579 - Make Advanced search page compliant with WAI

Status: ASSIGNED

(Bugzilla :: User Interface, enhancement)

Description

[Francisco Donalisio]

User-Agent:       Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.9.2.13) Gecko/20101206 Ubuntu/10.10 (CK-IBM) (CK-IBM) Firefox/3.6.13
Build Identifier: 

We should change the Simple Search page to make it complaint with W3C Web
Accessibility Initiative.



Reproducible: Always

Comment 1

[Francisco Donalisio]

Attachment: Remove WCAG 2.0 violations in the advanced search page

Remove WCAG 2.0 violations in the advanced search page

Implements the following W3C accessibility techniques:
-Using the title attribute to identify form controls when the label element
cannot be used http://www.w3.org/TR/WCAG20-TECHS/H65.html
-Providing a description for groups of form controls using fieldset and legend elements http://www.w3.org/TR/WCAG20-TECHS/H71.html

Comment 2

[Frédéric Buclin]

Comment on attachment 519427 [details] [diff] [review]
Remove WCAG 2.0 violations in the advanced search page

>=== modified file 'template/en/default/search/boolean-charts.html.tmpl'

>-</div>
>\ No newline at end of file
>+</div>

Has the newline been removed or added?



>=== modified file 'template/en/default/search/form.html.tmpl'

>+    <select name="bug_id_type" id="bug_id_type" title="Olny included or excluded in the results">

Typo: Only


>+      <select name="emailtype[% n %]" title="Match option" >

Extra whitespace before >.



>=== modified file 'template/en/default/search/search-advanced.html.tmpl'

>+<fieldset class="bz_advanced_search_fieldset">

Does a fieldset really make sense here? The comment applies to the whole page, not to a specific group only.

Comment 3

[Tiago Mello [:timello]]

Comment on attachment 519427 [details] [diff] [review]
Remove WCAG 2.0 violations in the advanced search page

See Comment #2

Comment 4

[Francisco Donalisio]

Attachment: Remove WCAG 2.0 violations in the advanced search page

Implements the following W3C accessibility techniques:
-Using the title attribute to identify form controls when the label element
cannot be used http://www.w3.org/TR/WCAG20-TECHS/H65.html
-Providing a description for groups of form controls using fieldset and legend
elements http://www.w3.org/TR/WCAG20-TECHS/H71.html

Comment 5

[Tiago Mello [:timello]]

Comment on attachment 526710 [details] [diff] [review]
Remove WCAG 2.0 violations in the advanced search page

Review of attachment 526710 [details] [diff] [review]:
-----------------------------------------------------------------

Your patch is bit-rotted. I can't apply in the current trunk. You need to update it.

::: skins/standard/search_form.css
@@ +201,4 @@
>    margin-top: 1em;
>  }
>  
> +.bz_advanced_search_fieldset { 

Use something like:

fieldset.bz_search_by_people {

}

@@ +206,5 @@
> +  margin-left: 0em;
> +  border: none;
> +}
> +
> +.bz_advanced_search_legend {

Instead of this, use:

fieldset.bz_search_by_people legend {

}

Then you don't need to define the class="" in the <legend> tag.

::: template/en/default/search/form.html.tmpl
@@ +391,4 @@
>    </li>
>    <li>
>      <label for="chfieldfrom">between:</label>
> +    <input name="chfieldfrom" id="chfieldfrom" size="10" title="First day to be searched" 

Initial date

@@ +397,5 @@
>                            id="button_calendar_chfieldfrom"
>                            onclick="showCalendar('chfieldfrom')"><span>Calendar</span></button>
>             and 
>             <div id="con_calendar_chfieldfrom"></div>
> +          <input name="chfieldto" size="10" id="chfieldto" title="Last day to be searched" 

Final/End date?

Comment 6

[Francisco Donalisio]

Attachment: Remove WCAG 2.0 violations in the advanced search page

Implements the following W3C accessibility techniques:
-Using the title attribute to identify form controls when the label element
cannot be used http://www.w3.org/TR/WCAG20-TECHS/H65.html
-Providing a description for groups of form controls using fieldset and legend
elements http://www.w3.org/TR/WCAG20-TECHS/H71.html

Comment 7

[Tiago Mello [:timello]]

Comment on attachment 537817 [details] [diff] [review]
Remove WCAG 2.0 violations in the advanced search page

Review of attachment 537817 [details] [diff] [review]:
-----------------------------------------------------------------

Please, update your patch. It's bit rotted.

Comment 8

[Francisco Donalisio]

Attachment: Remove WCAG 2.0 violations in the advanced search help page

Implements the following W3C accessibility techniques:
-Using the title attribute to identify form controls when the label element
cannot be used http://www.w3.org/TR/WCAG20-TECHS/H65.html
-Providing a description for groups of form controls using fieldset and legend
elements http://www.w3.org/TR/WCAG20-TECHS/H71.html

Comment 9

[:glob ✱]

Comment on attachment 643948 [details] [diff] [review]
Remove WCAG 2.0 violations in the advanced search help page

timello's probably a better pick to do this review; retargeting.

Comment 10

[Frédéric Buclin]

Comment on attachment 643948 [details] [diff] [review]
Remove WCAG 2.0 violations in the advanced search help page

>=== modified file 'template/en/default/search/field.html.tmpl'

>+    <label for="[% field.name FILTER html %]to">to</label> <input name="[% field.name FILTER html %]to" 

This line is a bit too long. Move <input> on its own line.



>=== modified file 'template/en/default/search/form.html.tmpl'

>+<fieldset class="bz_search_by_people">
>+<legend>Search By People</legend>

Why setting a fieldset for this section only, but not for the other ones? What's the rationale behind this?

Comment 11

[Francisco Donalisio]

(In reply to Frédéric Buclin from comment #10)
> Comment on attachment 643948 [details] [diff] [review]
> Remove WCAG 2.0 violations in the advanced search help page
> 

> >=== modified file 'template/en/default/search/form.html.tmpl'
> 
> >+<fieldset class="bz_search_by_people">
> >+<legend>Search By People</legend>
> 
> Why setting a fieldset for this section only, but not for the other ones?
> What's the rationale behind this?
Grouping controls is most important for related radio buttons and checkboxes.
  http://www.w3.org/TR/WCAG20-TECHS/H71.html

I suppose we could use in other fields, but since we also should avoid nesting fieldsets, I only put in the field I really thought it was necessary.

Comment 12

[Benjamin Smedberg]

Comment on attachment 643948 [details] [diff] [review]
Remove WCAG 2.0 violations in the advanced search help page

Fixing empty review requests

Comment 13

[Frédéric Buclin]

Comment on attachment 643948 [details] [diff] [review]
Remove WCAG 2.0 violations in the advanced search help page

There has been a lot of changes in Bugzilla 5.0: several CSS files have been merged, and we moved from HTML4 to HTML5. Your patch no longer applies cleanly, unfortunately.