issues/3200 add missing img alt text (#132)

adaptlearning · Aug 23, 2021 · d3d3100 · d3d3100
1 parent 2174cd0
commit d3d3100
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 2 deletions.
diff --git a/js/adapt-contrib-gmcq.js b/js/adapt-contrib-gmcq.js
@@ -49,6 +49,51 @@ define([
 
       this.$el.toggleClass('has-column-layout', isLarge);
       this.$('.js-mcq-item').css('width', isLarge ? (100 / columns) + '%' : '');
+    },
+
+    updateMarking: function() {
+
+      var isInteractive = this.model.isInteractive();
+      var canShowMarking = this.model.get('_canShowMarking');
+      var ariaLabels = Adapt.course.get('_globals')._accessibility._ariaLabels;
+
+      this.model.getChildren().forEach(function(itemModel) {
+
+        var index = itemModel.get('_index');
+        var $itemInput = this.$('.js-item-input').filter('[data-adapt-index="' + index + '"]');
+        var $item = $itemInput.parents('.js-mcq-item');
+
+        if (isInteractive || !canShowMarking) {
+          // Remove item marking
+          $item.removeClass('is-correct is-incorrect');
+          $itemInput.attr('aria-label', [
+            Adapt.a11y.normalize(itemModel.get('text')),
+            '. ',
+            Adapt.a11y.normalize(itemModel.get('_graphic').alt)
+          ].join(''));
+          return;
+        }
+
+        // Mark item
+        var shouldBeSelected = itemModel.get('_shouldBeSelected');
+        var isCorrect = Boolean(itemModel.get('_isCorrect'));
+        var isActive = Boolean(itemModel.get('_isActive'));
+
+        $item
+          .toggleClass('is-correct', isCorrect)
+          .toggleClass('is-incorrect', !isCorrect);
+
+        $itemInput.attr('aria-label', [
+          (shouldBeSelected ? ariaLabels.correct : ariaLabels.incorrect),
+          ', ',
+          (isActive ? ariaLabels.selectedAnswer : ariaLabels.unselectedAnswer),
+          '. ',
+          $.a11y_normalize(itemModel.get('text')),
+          '. ',
+          $.a11y_normalize(itemModel.get('_graphic').alt)
+        ].join(''));
+
+      }, this);
     }
 
   }, {

diff --git a/templates/gmcq.hbs b/templates/gmcq.hbs
@@ -7,11 +7,11 @@
     {{#each _items}}
     <div class="gmcq__item js-mcq-item item-{{@index}} {{odd @index}}{{#unless ../_isEnabled}}{{#if ../_canShowMarking}}{{#if _isCorrect}} is-correct{{else}} is-incorrect{{/if}}{{/if}}{{/unless}}">
 
-      <input class="gmcq__item-input js-item-input" id="{{../_id}}-{{@index}}" {{#if ../_isRadio}}name="{{../_id}}-item" {{/if}} type="{{#if ../_isRadio}}radio{{else}}checkbox{{/if}}" {{#unless ../_isEnabled}} disabled{{/unless}} aria-label="{{{a11y_normalize text}}}" data-adapt-index="{{_index}}" />
+      <input class="gmcq__item-input js-item-input" id="{{../_id}}-{{@index}}" {{#if ../_isRadio}}name="{{../_id}}-item" {{/if}} type="{{#if ../_isRadio}}radio{{else}}checkbox{{/if}}" {{#unless ../_isEnabled}} disabled{{/unless}} aria-label="{{{a11y_normalize text}}}{{#if _graphic.alt}} {{_graphic.alt}}{{/if}}" data-adapt-index="{{_index}}" />
 
       <label class="gmcq__item-label js-item-label{{#unless ../_isEnabled}} is-disabled{{/unless}}{{#if _isSelected}} is-selected{{/if}}{{#if _graphic.attribution}} has-attribution{{/if}}" aria-hidden="true" for="{{../_id}}-{{@index}}" data-adapt-index="{{_index}}" >
 
-        <img class="gmcq__item-image" src="{{_graphic.src}}" data-large="{{_graphic.large}}" data-small="{{_graphic.small}}" {{#if _graphic.alt}}aria-label="{{_graphic.alt}}"{{else}}aria-hidden="true"{{/if}}>
+        <img class="gmcq__item-image" src="{{_graphic.src}}" data-large="{{_graphic.large}}" data-small="{{_graphic.small}}">
 
         {{#if _graphic.attribution}}
         <div class="component__attribution gmcq__attribution">