r13766 - in Products.Archetypes/trunk: . Products/Archetypes/skins/archetypes/widgets

"Steve McMahon" <[email protected]> Fri, 19 Aug 2011 17:31:31 +0000
Newsgroups gmane.comp.web.zope.plone.archetypes.cvs
Message-ID <[email protected]>
Author: smcmahon
Date: Fri Aug 19 17:31:30 2011
New Revision: 13766

Modified:
   Products.Archetypes/trunk/CHANGES.txt
   Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/field.pt
   Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/label.pt
   Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/multiselection.pt
   Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/selection.pt
Log:
Fix accessibility issue in labels for selection, multiselection and label widgets. Fixes #11387

Modified: Products.Archetypes/trunk/CHANGES.txt
==============================================================================
--- Products.Archetypes/trunk/CHANGES.txt	(original)
+++ Products.Archetypes/trunk/CHANGES.txt	Fri Aug 19 17:31:30 2011
@@ -4,6 +4,14 @@
 1.7.7 - Unreleased
 ------------------
 
+- Fixed http://dev.plone.org/plone/ticket/11387 (Missing & orphaned labels
+  for check boxes and radio buttons) by deferring label generation for label,
+  select and multi-select widgets to each widget's edit macro. In the case
+  of the select and multi-select widgets, this allows the label to be generated
+  (or not) once the format (checkbox, dropdown...) is known.
+  Thanks to mattbarkau and jdeluca for researching this and proposing a solution.
+  [smcmahon]
+
 - When checking isVisible in validation, use instance, not widget as argument.
   [tesdal]
 

Modified: Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/field.pt
==============================================================================
--- Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/field.pt	(original)
+++ Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/field.pt	Fri Aug 19 17:31:30 2011
@@ -81,25 +81,32 @@
              tal:attributes="class python: test(error_id, 'field error ' + 'Archetypes' + widget.getName(), 'field ' + 'Archetypes' + widget.getName()) + ' ' + kss_class;
                              id python: 'archetypes-fieldname-' + fieldName">
           <span metal:define-slot="widget_body_label_prefix"></span>
-          <label class="formQuestion"
-                 tal:attributes="for python:fieldName">
-              <span tal:replace="python:widget.Label(here)" 
-                    i18n:translate="" />
-              <span class="required"
-                    tal:condition="field/required"
-                    title="Required"
-                    i18n:attributes="title title_required;"
-                    style="color: #f00;">
-                &#x25a0;
-              </span>
-          </label>
-          <div class="formHelp"
-               tal:define="description python:widget.Description(here)"
-               tal:content="structure description"
-               tal:attributes="id string:${fieldName}_help"
-               i18n:translate="">
-            Help
-          </div>
+          <tal:comment tal:condition="nothing">
+            Label insertion for the selection and multi-selection widgets is deferred to the widget, as they must
+            consider their format (checkbox, radio, select box ...) to correctly format the label to meet
+            accessibility standards.
+          </tal:comment>
+          <tal:ifLabel tal:condition="python: widget.getName() not in ('LabelWidget', 'SelectionWidget', 'MultiSelectionWidget')">
+            <label class="formQuestion"
+                   tal:attributes="for python:fieldName">
+                <span tal:replace="python:widget.Label(here)" 
+                      i18n:translate="" />
+                <span class="required"
+                      tal:condition="field/required"
+                      title="Required"
+                      i18n:attributes="title title_required;"
+                      style="color: #f00;">
+                  &#x25a0;
+                </span>
+            </label>
+            <div class="formHelp"
+                 tal:define="description python:widget.Description(here)"
+                 tal:content="structure description"
+                 tal:attributes="id string:${fieldName}_help"
+                 i18n:translate="">
+              Help
+            </div>
+          </tal:ifLabel>
           <span tal:condition="field/workflowable | nothing"
                 tal:omit-tag="">
             State:

Modified: Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/label.pt
==============================================================================
--- Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/label.pt	(original)
+++ Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/label.pt	Fri Aug 19 17:31:30 2011
@@ -11,7 +11,26 @@
 
     <metal:define define-macro="edit">
       <metal:use use-macro="field_macro | context/widgets/field/macros/edit">
-	<metal:fill fill-slot="widget_body" />
+      <metal:fill fill-slot="widget_body">
+          <div class="formQuestion label">
+              <span tal:replace="python:widget.Label(here)" 
+                    i18n:translate="" />
+              <span class="required"
+                    tal:condition="field/required"
+                    title="Required"
+                    i18n:attributes="title title_required;"
+                    style="color: #f00;">
+                &#x25a0;
+              </span>
+          </div>
+          <div class="formHelp"
+               tal:define="description python:widget.Description(here)"
+               tal:content="structure description"
+               tal:attributes="id string:${fieldName}_help"
+               i18n:translate="">
+            Help
+          </div>
+      </metal:fill>
       </metal:use>
     </metal:define>
 

Modified: Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/multiselection.pt
==============================================================================
--- Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/multiselection.pt	(original)
+++ Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/multiselection.pt	Fri Aug 19 17:31:30 2011
@@ -30,6 +30,27 @@
 
       <div tal:condition="python:format=='checkbox'"
             tal:attributes="id fieldName;">
+
+        <div class="formQuestion label">
+            <span tal:replace="python:widget.Label(here)" 
+                  i18n:translate="" />
+            <span class="required"
+                  tal:condition="field/required"
+                  title="Required"
+                  i18n:attributes="title title_required;"
+                  style="color: #f00;">
+              &#x25a0;
+            </span>
+        </div>
+
+        <div class="formHelp"
+             tal:define="description python:widget.Description(here)"
+             tal:content="structure description"
+             tal:attributes="id string:${fieldName}_help"
+             i18n:translate="">
+          Help
+        </div>
+
         <tal:item repeat="item vocab">
           <div class="ArchetypesMultiSelectionValue" id=""
                tal:attributes="id string:archetypes-value-${fieldName}_${repeat/item/number}">
@@ -44,21 +65,42 @@
                    tal:attributes="for string:${fieldName}_${repeat/item/number}" />
           </div>
         </tal:item>
+
       </div>
 
-      <select multiple="multiple"
-              class="blurrable"
-              tal:condition="python:format=='select'"
-              tal:attributes="name string:${fieldName}:list;
-                              id fieldName;
-                              size widget/size;">
-        <option selected=""
-                tal:repeat="item vocab"
-                tal:attributes="value nocall:item;
-                                selected python:item in selection and 'checked' or None;"
-                tal:content="python:vocab.getValue(item)"
-                i18n:translate="" />
-      </select>
+      <tal:useSelect tal:condition="python:format=='select'">
+        <label class="formQuestion"
+               tal:attributes="for python:fieldName">
+            <span tal:replace="python:widget.Label(here)" 
+                  i18n:translate="" />
+            <span class="required"
+                  tal:condition="field/required"
+                  title="Required"
+                  i18n:attributes="title title_required;"
+                  style="color: #f00;">
+              &#x25a0;
+            </span>
+        </label>
+        <div class="formHelp"
+             tal:define="description python:widget.Description(here)"
+             tal:content="structure description"
+             tal:attributes="id string:${fieldName}_help"
+             i18n:translate="">
+          Help
+        </div>
+        <select multiple="multiple"
+                class="blurrable"
+                tal:attributes="name string:${fieldName}:list;
+                                id fieldName;
+                                size widget/size;">
+          <option selected=""
+                  tal:repeat="item vocab"
+                  tal:attributes="value nocall:item;
+                                  selected python:item in selection and 'checked' or None;"
+                  tal:content="python:vocab.getValue(item)"
+                  i18n:translate="" />
+        </select>
+      </tal:useSelect>
     </metal:fill>
     </metal:use>
     </metal:define>

Modified: Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/selection.pt
==============================================================================
--- Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/selection.pt	(original)
+++ Products.Archetypes/trunk/Products/Archetypes/skins/archetypes/widgets/selection.pt	Fri Aug 19 17:31:30 2011
@@ -44,6 +44,25 @@
 
                     <!-- Radio when the vocab is short < 4 -->
 
+                    <div class="formQuestion label">
+                        <span tal:replace="python:widget.Label(here)" 
+                              i18n:translate="" />
+                        <span class="required"
+                              tal:condition="field/required"
+                              title="Required"
+                              i18n:attributes="title title_required;"
+                              style="color: #f00;">
+                          &#x25a0;
+                        </span>
+                    </div>
+                    <div class="formHelp"
+                         tal:define="description python:widget.Description(here)"
+                         tal:content="structure description"
+                         tal:attributes="id string:${fieldName}_help"
+                         i18n:translate="">
+                      Help
+                    </div>
+
                     <tal:radios repeat="item vocab">
 
                         <input class="noborder blurrable"
@@ -67,6 +86,27 @@
                 <tal:longVocab condition="python:(vlen >= 4 and format == 'flex') or (format in ('select', 'pulldown'))">
 
                     <!-- Pulldown when longer -->
+
+                    <label class="formQuestion"
+                           tal:attributes="for python:fieldName">
+                        <span tal:replace="python:widget.Label(here)" 
+                              i18n:translate="" />
+                        <span class="required"
+                              tal:condition="field/required"
+                              title="Required"
+                              i18n:attributes="title title_required;"
+                              style="color: #f00;">
+                          &#x25a0;
+                        </span>
+                    </label>
+                    <div class="formHelp"
+                         tal:define="description python:widget.Description(here)"
+                         tal:content="structure description"
+                         tal:attributes="id string:${fieldName}_help"
+                         i18n:translate="">
+                      Help
+                    </div>
+
                     <select tal:attributes="name fieldName;
                                             id fieldName;">
 

------------------------------------------------------------------------------
Get a FREE DOWNLOAD! and learn more about uberSVN rich system, 
user administration capabilities and model configuration. Take 
the hassle out of deploying and managing Subversion and the 
tools developers use with it. http://p.sf.net/sfu/wandisco-d2d-2