From 81b65f0616f425340c22e7307f0305b773b12286 Mon Sep 17 00:00:00 2001
From: Shahriar Rostami <shahriar.rostami@gmail.com>
Date: Wed, 13 Apr 2016 16:44:59 -0400
Subject: [PATCH] Make image hotspot more accessible

---
 scripts/hotspot.js        | 11 +++++++++--
 scripts/image-hotspots.js |  3 ++-
 semantics.json            |  6 ++++++
 3 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/scripts/hotspot.js b/scripts/hotspot.js
index 434d6a9..e9574df 100644
--- a/scripts/hotspot.js
+++ b/scripts/hotspot.js
@@ -14,19 +14,23 @@
    * @param  {boolean} isSmallDeviceCB
    * @param  {H5P.ImageHotspots} parent
    */
-  ImageHotspots.Hotspot = function (config, color, id, isSmallDeviceCB, parent) {
+  ImageHotspots.Hotspot = function (config, color, id, isSmallDeviceCB, parent, index) {
     var self = this;
     this.config = config;
     this.visible = false;
     this.id = id;
     this.isSmallDeviceCB = isSmallDeviceCB;
+    this.tabIndex = index;
 
     if (!this.config.content.length) {
       throw new Error('Missing mandatory library for hotspot');
     }
 
     this.$element = $('<div/>', {
+      'id': 'hotspot-' + this.tabIndex,
       'class': 'h5p-image-hotspot',
+      'title': 'Clickable hotspot number: '+ this.tabIndex,
+      'tabindex': this.tabIndex,
       click: function(){
         if(self.visible) {
           self.hidePopup();
@@ -76,7 +80,10 @@
     var self = this;
 
     // Create popup content:
-    var $popupBody = $('<div/>', {'class': 'h5p-image-hotspot-popup-body'});
+    var $popupBody = $('<div/>', {
+      'class': 'h5p-image-hotspot-popup-body',
+      'title': 'The hotspot name is: ' + self.config.header
+    });
 
     this.actionInstances = [];
     var waitForLoaded = [];
diff --git a/scripts/image-hotspots.js b/scripts/image-hotspots.js
index 148b32d..9032095 100644
--- a/scripts/image-hotspots.js
+++ b/scripts/image-hotspots.js
@@ -67,6 +67,7 @@ H5P.ImageHotspots = (function ($, EventDispatcher) {
     if (this.options.image && this.options.image.path) {
       this.$image = $('<img/>', {
         'class': 'h5p-image-hotspots-background',
+        'alt': this.options.alt,
         src: H5P.getPath(this.options.image.path, this.id)
       }).appendTo(this.$hotspotContainer);
     }
@@ -79,7 +80,7 @@ H5P.ImageHotspots = (function ($, EventDispatcher) {
     var numHotspots = this.options.hotspots.length;
     for(var i=0; i<numHotspots; i++) {
       try {
-        new ImageHotspots.Hotspot(this.options.hotspots[i], this.options.color, this.id, isSmallDevice, self).appendTo(this.$hotspotContainer);
+        new ImageHotspots.Hotspot(this.options.hotspots[i], this.options.color, this.id, isSmallDevice, self, i + 1).appendTo(this.$hotspotContainer);
       }
       catch (e) {
         H5P.error(e);
diff --git a/semantics.json b/semantics.json
index e786737..d6a2146 100644
--- a/semantics.json
+++ b/semantics.json
@@ -17,6 +17,12 @@
       "showInput": true
     }
   },
+  {
+    "label": "Alternate text for the image",
+    "name": "alt",
+    "type": "text",
+    "description": "Put the alternate text here to make the image accessible!"
+  },
   {
     "name": "hotspots",
     "type": "list",