Fix element styling + aria attributes (#1173)

* Fix element styling + aria attributes * Add changelog entry
PrairieLearn · Jun 1, 2018 · d7ea9ab · d7ea9ab
1 parent de35d2e
commit d7ea9ab
Show file tree

Hide file tree

Showing 4 changed files with 13 additions and 7 deletions.
diff --git a/ChangeLog.md b/ChangeLog.md
@@ -10,6 +10,8 @@
   * Fix HTML rendering by reverting `cheerio.js` to `0.22.0` (Matt West).
 
   * Fix Google auth using new API (Matt West).
+
+  * Fix several issues with various elements (Nathan Walters).
 
 * __3.0.0__ - 2018-05-23
 

diff --git a/elements/pl_integer_input/pl_integer_input.mustache b/elements/pl_integer_input/pl_integer_input.mustache
@@ -12,12 +12,14 @@
     <span id="pl-integer-input-{{uuid}}" class="input-group pl-integer-input">
         {{#label}}
         <span class="input-group-prepend">
-            <span class="input-group-text">{{label}}</span>
+            <span class="input-group-text" id="pl-integer-input-{{uuid}}-label">{{label}}</span>
         </span>
         {{/label}}
-        <input name="{{name}}" type="text" class="form-control" size="35" {{^editable}}disabled{{/editable}} {{#raw_submitted_answer}}value="{{raw_submitted_answer}}"{{/raw_submitted_answer}} aria-describedby="basic-addon1" placeholder="{{shortinfo}}" />
+        <input name="{{name}}" type="text" class="form-control" size="35" {{^editable}}disabled{{/editable}} {{#raw_submitted_answer}}value="{{raw_submitted_answer}}"{{/raw_submitted_answer}} aria-describedby="pl-integer-input-{{uuid}}-label pl-integer-input-{{uuid}}-suffix" placeholder="{{shortinfo}}" />
         <span class="input-group-append">
-            {{#suffix}}<span class="input-group-text">{{suffix}}</span>{{/suffix}}
+            {{#suffix}}
+            <span class="input-group-text" id="pl-integer-input-{{uuid}}-suffix">{{suffix}}</span>
+            {{/suffix}}
             <a class="btn btn-light border" role="button" data-toggle="popover" data-html="true" title="Number" data-content="{{info}}" data-placement="auto" data-trigger="focus" tabindex="0">
                 <i class="fa fa-question-circle" aria-hidden="true"></i>
                 {{#correct}}&nbsp;<span class="badge badge-success"><i class="fa fa-check" aria-hidden="true"></i> 100%</span>{{/correct}}

diff --git a/elements/pl_matrix_input/pl_matrix_input.mustache b/elements/pl_matrix_input/pl_matrix_input.mustache
@@ -8,10 +8,12 @@
     });
 </script>
 <div id="pl-matrix-input-{{uuid}}" class="input-group">
+    {{#label}}
     <span class="input-group-prepend">
-        {{#label}}<label class="input-group-text" id="basic-addon2">{{label}}</label>{{/label}}
+        <label class="input-group-text" id="pl-matrix-input-{{uuid}}-label">{{label}}</label>
     </span>
-    <input name="{{name}}" type="text" class="form-control" {{^editable}}disabled{{/editable}} {{#raw_submitted_answer}}value="{{raw_submitted_answer}}"{{/raw_submitted_answer}} aria-describedby="basic-addon1" placeholder="{{shortinfo}}" />
+    {{/label}}
+    <input name="{{name}}" type="text" class="form-control" {{^editable}}disabled{{/editable}} {{#raw_submitted_answer}}value="{{raw_submitted_answer}}"{{/raw_submitted_answer}} aria-describedby="pl-matrix-input-{{uuid}}-label" placeholder="{{shortinfo}}" />
     <div class="input-group-append">
         <a class="btn btn-light border" role="button" data-toggle="popover" data-html="true" title="Matrix" data-content="{{info}}" data-placement="auto" data-trigger="focus" tabindex="0">
             <i class="fa fa-question-circle" aria-hidden="true"></i>

diff --git a/elements/pl_symbolic_input/pl_symbolic_input.mustache b/elements/pl_symbolic_input/pl_symbolic_input.mustache
@@ -10,8 +10,8 @@
 
 <span class="form-inline d-inline-block">
     <span id="pl-symbolic-input-{{uuid}}" class="input-group pl-symbolic-input">
-        <input name="{{name}}" type="text" class="form-control" size="35" {{^editable}}disabled{{/editable}} {{#raw_submitted_answer}}value="{{raw_submitted_answer}}"{{/raw_submitted_answer}} aria-describedby="basic-addon1" placeholder="{{shortinfo}}" />
-        <span class="input-group-btn" id="basic-addon1">
+        <input name="{{name}}" type="text" class="form-control" size="35" {{^editable}}disabled{{/editable}} {{#raw_submitted_answer}}value="{{raw_submitted_answer}}"{{/raw_submitted_answer}} placeholder="{{shortinfo}}" />
+        <span class="input-group-append">
             <a class="btn btn-light border" role="button" data-toggle="popover" data-html="true" title="Symbolic" data-content="{{info}}" data-placement="auto" data-trigger="focus" tabindex="0">
                 <i class="fa fa-question-circle" aria-hidden="true"></i>
                 {{#correct}}&nbsp;<span class="badge badge-success"><i class="fa fa-check" aria-hidden="true"></i> 100%</span>{{/correct}}