Dev: ul/li on multichoice with comment https://github.com/Shnoulle/Li…

…meSurvey-Shnoulle/issues/3 Dev: fix some aria
LimeSurvey · Sep 8, 2016 · 8c6d2e4 · 8c6d2e4
1 parent 8dc0e65
commit 8c6d2e4
Show file tree

Hide file tree

Showing 4 changed files with 21 additions and 53 deletions.
diff --git a/application/views/survey/questions/listradio/rows/answer_row_other.php b/application/views/survey/questions/listradio/rows/answer_row_other.php
@@ -41,7 +41,7 @@ class="form-control <?php echo $kpclass; ?> input-sm"
         name="<?php echo $name; ?>other"
         title="<?php eT('Other'); ?>" <?php echo $answer_other;?>
         onkeyup="if($.trim($(this).val())!=''){ $('#SOTH<?php echo $name; ?>').click(); };  <?php echo $oth_checkconditionFunction; ?>",
-        labelled-by="label-id-<?php echo $name; ?>"
+        aria-labelledby="label-id-<?php echo $name; ?>"
         />
     </div>
 </li>

diff --git a/application/views/survey/questions/multiplechoice_with_comments/answer.php b/application/views/survey/questions/multiplechoice_with_comments/answer.php
@@ -12,10 +12,10 @@
 
 <!-- answer -->
 <input type='hidden' name='<?php echo $name; ?>' value='<?php echo $value;?>' />
-<table class="multiple-choice-with-comment list-unstyled subquestion-list questions-list checkbox-text-list no-more-tables table table-condensed table-hover">
+<ul class="multiple-choice-with-comment list-unstyled subquestion-list questions-list checkbox-text-list">
     <?php
         // rows/answer_row.php
         echo $sRows;
     ?>
-</table>
+</ul>
 <!-- end of answer -->
diff --git a/application/views/survey/questions/multiplechoice_with_comments/rows/answer_row.php b/application/views/survey/questions/multiplechoice_with_comments/rows/answer_row.php
@@ -24,11 +24,10 @@
  */
 ?>
 <!-- answer_row -->
-<tr class='<?php echo $liclasses;?>'>
+<li id="javatbd<?php echo $name; ?>" class='answer-item checkbox-text-item form-group form-inline clearfix'  <?php echo $sDisplayStyle ;?>>
 
     <!-- Checkbox + label -->
-    <!-- <div class="pull-left othertext-label-checkox-container checkbox"  <?php // echo $sDisplayStyle ;?>> -->
-    <td class="checkbox-item" <?php echo $sDisplayStyle ;?> id="javatbd<?php echo $name; ?>">
+    <div class="form-group checkbox-item col-sm-6 col-xs-12">
         <input
             class="<?php echo $classes; echo $kpclass; ?>"
             title="<?php echo $title;?>"
@@ -38,20 +37,9 @@ class="<?php echo $classes; echo $kpclass; ?>"
             value="<?php echo $value?>"
             <?php echo $checked;?>
             onclick="<?php echo $checkconditionFunction;?>"
-            aria-labelledby="label-<?php echo $id;?>"
           />
 
-        <label for="<?php echo $id;?>" class="answertext control-label"></label>
-
-        <!--
-             The label text is provided inside a div,
-             so final user can add paragraph, div, or whatever he wants in the subquestion text
-             This field is related to the input thanks to attribute aria-labelledby
-        -->
-        <div class="label-text label-clickable" id="label-<?php echo $id;?>">
-            <?php echo $labeltext;?>
-        </div>
-
+        <label id="label-<?php echo $id;?>" for="<?php echo $id;?>" class="control-label checkbox-label"><?php echo $labeltext;?></label>
 
         <?php if($javainput):?>
             <input
@@ -62,25 +50,23 @@ class="<?php echo $classes; echo $kpclass; ?>"
             <?php echo $checked;?>
             />
         <?php endif;?>
-    </td>
+    </div>
 
     <!-- Comment -->
-    <!-- <div class="pull-left"  <?php // echo $sDisplayStyle; ?>> -->
-    <td <?php echo $sDisplayStyle; ?> class="comment-container">
-    <!-- <div class="comment col-xs-12 form-group" <?php // echo $sDisplayStyle; ?>> -->
-        <label for='<?php echo $inputCommentId;?>' class="answer-comment hide control-label">
+    <div class="form-group text-item col-sm-6 col-xs-12 comment-container">
+        <label id='label-<?php echo $inputCommentId;?>' for='<?php echo $inputCommentId;?>' class="lext-label control-label sr-only">
             <?php echo $commentLabelText;?>
         </label>
-
         <input
-            class='form-control text input-sm <?php echo $kpclass; ?>'
+            class='form-control input-sm <?php echo $kpclass; ?>'
             type='text'
             size='40'
             id='<?php echo $inputCommentId;?>'
             name='<?php echo $inputCommentName; ?>'
             value='<?php echo $inputCOmmentValue; ?>'
             onkeyup='<?php echo $checkconditionFunctionComment;?>'
+            aria-labelled='label-<?php echo $id;?> label-<?php echo $inputCommentId;?>'
         />
-    </td>
-</tr>
+    </div>
+</li>
 <!-- end of answer_row -->
diff --git a/application/views/survey/questions/multiplechoice_with_comments/rows/answer_row_other.php b/application/views/survey/questions/multiplechoice_with_comments/rows/answer_row_other.php
@@ -24,35 +24,21 @@
  */
 ?>
 <!-- answer_row -->
-<tr class='<?php echo $liclasses;?>'>
+<li id="javatbd<?php echo $name; ?>" class='answer-item checkbox-text-item form-group form-inline noanswer-item clearfix' <?php echo $sDisplayStyle ;?>>
 
     <!-- Checkbox + label -->
-
-    <td class=""  <?php echo $sDisplayStyle ;?>>
-
-        <label for="<?php echo $id;?>" class="answertext control-label"></label>
-
-        <!--
-             The label text is provided inside a div,
-             so final user can add paragraph, div, or whatever he wants in the subquestion text
-             This field is related to the input thanks to attribute aria-labelledby
-        -->
-        <div class="label-text label-clickable" id="label-<?php echo $id;?>">
-            <?php echo $labeltext;?>
-        </div>
+    <div class="form-group text-item other-text-item col-sm-6 col-xs-12">
+        <label if="label-<?php echo $name; ?>" for="<?php echo $id;?>" class="label-text control-label"><?php echo $labeltext;?></label>
 
         <input
-           class="text other form-control input-sm  multipleco-other-topic <?php echo $classes; echo $kpclass;?>"
-
+           class="other-text form-control input-sm  multipleco-other-topic <?php echo $classes; echo $kpclass;?>"
            type="text"
            name="<?php echo $name; ?>"
            id="<?php echo $id;?>"
-           title="<?php eT('Other'); ?>"
            size="10"
            onkeyup="<?php echo $checkconditionFunction;?>"
            value="<?php  echo $value; ?>"
         />
-
         <?php if($javainput):?>
             <input
             type='hidden'
@@ -62,23 +48,19 @@ class="text other form-control input-sm  multipleco-other-topic <?php echo $clas
             <?php echo $checked;?>
             />
         <?php endif;?>
-    </td>
+    </div>
 
     <!-- Comment -->
-    <td <?php echo $sDisplayStyle; ?> class="comment-container">
-        <label for='<?php echo $inputCommentId;?>' class="answer-comment hide control-label">
-            <?php echo $commentLabelText;?>
-        </label>
-
+    <div class="form-group text-item col-sm-6 col-xs-12 comment-container">
         <input
-            class='form-control text input-sm <?php echo $kpclass; ?>'
-
+            class='form-control input-sm <?php echo $kpclass; ?>'
             type='text'
             size='40'
             id='<?php echo $inputCommentId;?>'
             name='<?php echo $inputCommentName; ?>'
             value='<?php echo $inputCOmmentValue; ?>'
             onkeyup='<?php echo $checkconditionFunctionComment;?>'
+            aria-labelledby='label-<?php echo $name; ?> <?php echo $name; ?>'
         />
     </td>
 </tr>