Merge pull request #957 from edx/aj/TNL-5197_review_form_a11y

Updates to labeling of the review inputs

openassessment/templates/openassessmentblock/oa_rubric.html

@@ -10,7 +10,7 @@
                 <button class="ui-slidable" aria-expanded="true" id="oa_rubric__{{ rubric_type }}__{{ submission.uuid }}__{{ criterion.order_num }}" aria-controls="oa_rubric__{{ rubric_type }}__{{ submission.uuid }}__{{ criterion.order_num }}__content">
                     <span class="icon fa fa-caret-right" aria-hidden="true"></span>
                     <span id="{{ rubric_type }}__assessment__rubric__prompt--{{ criterion.order_num }}" class="ui-slidable__control__copy question__title__copy">{{ criterion.prompt }}</span>
-                    <span class="label--required sr">* ({% trans "Required" %})</span>
+                    <span class="label--required sr">({% trans "Required" %})</span>
                 </button>
             </div>
 
@@ -25,12 +25,14 @@
                                        class="answer__value rubric_{{ criterion.order_num }}_{{ option.order_num }}"
                                        id="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"
                                        value="{{ option.name }}"
-                                       name="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}"/>
+                                       name="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}"
+                                       aria-describedby="{{ rubric_type }}__assessment__rubric__meta--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"/>
                                 <label for="{{ rubric_type }}__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"
                                        class="answer__label"
                                        >{{ option.label }}</label>
                             </div>
-                            <div class="wrapper--metadata">
+                            <div class="wrapper--metadata"
+                                 id="{{ rubric_type }}__assessment__rubric__meta--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}">
                                 <span class="answer__tip">{{ option.explanation }}</span>
                                 <span class="answer__points">{{ option.points }} <span class="answer__points__label">{% trans "points" %}</span></span>
                             </div>

openassessment/templates/openassessmentblock/student_training/student_training.html

@@ -85,7 +85,7 @@
                                         <button class="ui-slidable" aria-expanded="true" id="oa_training_{{ xblock_id }}_criterion--{{ criterion.order_num }}" aria-controls="oa_training_{{ xblock_id }}_content_criterion--{{  criterion.order_num }}">
                                             <span class="icon fa fa-caret-right" aria-hidden="true"></span>
                                             <span id="training__assessment__rubric__prompt--{{ criterion.order_num }}__{{ xblock_id }}" class="question__title__copy">{{ criterion.prompt }}</span>
-                                            <span class="label--required sr">* ({% trans "Required" %})</span>
+                                            <span class="label--required sr">({% trans "Required" %})</span>
                                         </button>
                                     </div>
                                     <div class="ui-slidable__content" aria-labelledby="oa_training_{{ xblock_id }}_criterion--{{ criterion.order_num }}" id="oa_training_{{ xblock_id }}_content_criterion--{{  criterion.order_num }}">
@@ -113,11 +113,13 @@
                                                                id="training__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"
                                                                class="answer__value rubric_{{ criterion.order_num }}_{{ option.order_num }}"
                                                                value="{{ option.name }}"
-                                                               name="training__assessment__rubric__question--{{ criterion.order_num }}"/>
+                                                               name="training__assessment__rubric__question--{{ criterion.order_num }}"
+                                                               aria-describedby="training__assessment__rubric__meta--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"/>
                                                         <label for="training__assessment__rubric__question--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}"
                                                                class="answer__label">{{ option.label }}</label>
                                                     </div>
-                                                    <div class="wrapper--metadata">
+                                                    <div class="wrapper--metadata"
+                                                         id="training__assessment__rubric__meta--{{ criterion.order_num }}__{{ option.order_num }}__{{ xblock_id }}">
                                                         <span class="answer__tip">{{ option.explanation }}</span>
                                                         <span class="answer__points">{{option.points}} <span class="answer__points__label">{% trans "points" %}</span></span>
                                                     </div>