Accessibility updates - using sr and aria-hidden for better screen reader experience

problem_builder/dashboard.py

@@ -402,6 +402,7 @@ class DashboardBlock(StudioEditableXBlockMixin, XBlock):
                 block['mcqs'].append({
                     "display_name": mcq_block.display_name_with_default,
                     "value": value,
+                    "accessible_value": _("Score: {value}").format(value=value) if value else _("No value yet"),
                     "color": self.color_for_value(value) if value is not None else None,
                 })
             # If the values are numeric, display an average:
@@ -412,6 +413,8 @@ class DashboardBlock(StudioEditableXBlockMixin, XBlock):
             if numeric_values:
                 average_value = sum(numeric_values) / len(numeric_values)
                 block['average'] = average_value
+                # average block is shown only if average value exists, so accessible text for no data is not required
+                block['accessible_average'] = _("Score: {average_value:.2f}").format(average_value=average_value)
                 block['average_label'] = self.average_labels.get(mentoring_block.url_name, _("Average"))
                 block['has_average'] = True
                 block['average_color'] = self.color_for_value(average_value)

problem_builder/templates/html/dashboard.html

@@ -42,30 +42,22 @@
           {% for mcq in block.mcqs %}
             <tr>
               <th class="desc">{{ mcq.display_name }}</th>
-              <td class="value"
-                  {% if mcq.color %} style="border-right-color: {{mcq.color}};"{% endif %}
-                  {% if not show_numbers %}
-                    {% if mcq.value %} aria-label="Score: {{mcq.value}}" {% else %} aria-label="{% trans 'No value yet' %}" {%endif%}
-                  {% endif %}
-              >
+              <td class="value" {% if mcq.color %} style="border-right-color: {{mcq.color}};"{% endif %}>
                 {% if mcq.value and show_numbers %}
-                  {{ mcq.value }}
+                  <span aria-hidden="true">{{ mcq.value }}</span>
                 {% endif %}
+                <span class="sr">{{ mcq.accessible_value }}</span>
               </td>
             </tr>
           {% endfor %}
           {% if block.has_average %}
            <tr class="avg-row">
               <th class="desc">{{ block.average_label }}</th>
-              <td class="value"
-                  {% if block.average_color %} style="border-right-color: {{block.average_color}};"{% endif %}
-                  {% if not show_numbers %}
-                    {% if block.average %} aria-label="Score: {{block.average|floatformat}}" {% else %} aria-label="{% trans 'No value yet' %}" {%endif%}
-                  {% endif %}
-              >
+              <td class="value" {% if block.average_color %} style="border-right-color: {{block.average_color}};"{% endif %}>
                 {% if show_numbers %}
-                  {{ block.average|floatformat }}
+                  <span aria-hidden="true">{{ block.average|floatformat }}</span>
                 {% endif %}
+                <span class="sr">{{ block.accessible_average }}</span>
               </td>
             </tr>
           {% endif %}