issue/50: accessibility updates

cgkineo · Aug 13, 2019 · 29b972d · 29b972d
1 parent ecdf322
commit 29b972d
Show file tree

Hide file tree

Showing 3 changed files with 26 additions and 12 deletions.
diff --git a/js/hotgridPopupView.js b/js/hotgridPopupView.js
@@ -44,7 +44,7 @@ define([
         },
 
         updatePageCount: function() {
-            var template = Adapt.course.get('_globals')._components._hotgrid.popupPagination;
+            var template = Adapt.course.get('_globals')._components._hotgrid.popupPagination || '{{itemNumber}} / {{totalItems}}';
             var labelText = Handlebars.compile(template || '')({
                 itemNumber: this.model.getActiveItem().get('_index') + 1,
                 totalItems: this.model.get('_items').length
@@ -53,28 +53,30 @@ define([
         },
 
         handleTabs: function() {
-            this.$('.hotgrid-popup-inner').a11y_on(false);
-            this.$('.hotgrid-popup-inner .active').a11y_on(true);
+            this.$('.hotgrid-item:not(.active) *').a11y_on(false);
+            this.$('.hotgrid-item.active *').a11y_on(true);
         },
 
         onItemsActiveChange: function(item, _isActive) {
             if (!_isActive) return;
 
             var index = item.get('_index');
-            this.applyNavigationClasses(index);
             this.updatePageCount();
             this.handleTabs();
             this.applyItemClasses(index);
-            this.handleFocus();
+            this.handleFocus(index);
         },
 
         applyItemClasses: function(index) {
-            this.$('.hotgrid-item.active').removeClass('active');
-            this.$('.hotgrid-item').filter('[data-index="' + index + '"]').addClass('active');
+            this.$('.hotgrid-item[data-index="' + index + '"]').addClass('active').removeAttr('aria-hidden');
+            this.$('.hotgrid-item[data-index="' + index + '"] .hotgrid-content-title').attr("id", "notify-heading");
+            this.$('.hotgrid-item:not([data-index="' + index + '"])').removeClass('active').attr('aria-hidden', 'true');
+            this.$('.hotgrid-item:not([data-index="' + index + '"]) .hotgrid-content-title').removeAttr("id");
         },
 
-        handleFocus: function() {
+        handleFocus: function(index) {
             this.$('.hotgrid-popup-inner .active').a11y_focus();
+            this.applyNavigationClasses(index);
         },
 
         onItemsVisitedChange: function(item, _isVisited) {
@@ -102,9 +104,9 @@ define([
             var direction = $(event.currentTarget).hasClass('back') ? 'back' : 'next';
             var index = this.getNextIndex(direction);
 
-            if (index === -1) return;
-
-            this.setItemState(index);
+            if (index !== -1) {
+                this.setItemState(index);
+            }
         },
 
         getNextIndex: function(direction) {

diff --git a/properties.schema b/properties.schema
@@ -161,6 +161,15 @@
                 "inputType": "Text",
                 "validators": [],
                 "translatable": true
+              },
+              "attribution": {
+                "type":"string",
+                "required":false,
+                "default": "",
+                "inputType": "Text",
+                "validators": [],
+                "help": "Text to be displayed as an attribution for the popup image",
+                "translatable": true
               }
             }
           }

diff --git a/templates/hotgridPopup.hbs b/templates/hotgridPopup.hbs
@@ -3,7 +3,7 @@
     <div class="hotgrid-item component-item clearfix {{#if _isVisited}}visited{{/if}} {{#if _isActive}}active{{/if}} {{_classes}}" data-index={{@index}}>
         <div class="hotgrid-item-content">
             <div class="hotgrid-item-content-inner">
-            <div class="hotgrid-content-title" {{a11y_attrs_heading 'componentItem'}}>
+            <div{{#if _isActive}} id="notify-heading"{{/if}} class="hotgrid-content-title" {{a11y_attrs_heading 'componentItem'}}>
                 {{{title}}}
             </div>
             <div class="hotgrid-content-body">
@@ -19,6 +19,9 @@
                 <img src="{{_graphic.src}}" aria-label="{{_graphic.alt}}"/>
                 {{/if}}
             </div>
+            {{#if _graphic.attribution}}
+            <div class="graphic-attribution">{{{_graphic.attribution}}}</div>
+            {{/if}}
         </div>
     </div>
     {{/each}}