fix(SUP-28484): make chapters thumbnails actionable (#4239)

- add description to slides/chapters area label;
- use role "button" to define clickable item

modules/KalturaSupport/KalturaSupport.i18n.json

@@ -67,6 +67,8 @@
         "ks-chapters-locate-active-media": "Locate current slide",
         "ks-chapters-slider-locator": "Slide Locator",
         "ks-chapters-toggle-chapter": "Expand\/collapse chapter",
+        "ks-chapters-chapter": "Chapter",
+        "ks-chapters-slide": "Slide",
         "ks-chapters-toggle-all-chapter": "Expand\/collapse all chapters",
         "ks-chapters-chapterNumber": "Chapter number",
         "ks-chapters-chapter-start-time": "Chapter start time",

modules/KalturaSupport/components/chapters/chapters.js

@@ -458,7 +458,9 @@
 				chapterToggle: gM("ks-chapters-toggle-chapter"),
 				slideNumber: gM("ks-chapters-slideNumber"),
 				slideStartTime: gM("ks-chapters-slide-start-time"),
-				slideDuration: gM("ks-chapters-slide-duration")
+				slideDuration: gM("ks-chapters-slide-duration"),
+				chapter: gM("ks-chapters-chapter"),
+				slide: gM("ks-chapters-slide")
 
 			};
 			return metaData;

modules/KalturaSupport/components/chapters/chapters.tmpl.html

@@ -1,4 +1,6 @@
 <li class="mediaBox chapterBox collapsed"
+    role="button"
+    aria-label="<%=meta.titles.chapter%> - <%=mediaItem.description%>"
     data-chapter-index="<%=mediaItem.chapterNumber%>"
     data-obj-id="<%=mediaItem.id%>"
     data-starttime="<%=mediaItem.startTime%>"

modules/KalturaSupport/components/chapters/slides.tmpl.html

@@ -1,4 +1,6 @@
 <li class="mediaBox slideBox <% if (mediaItem.chapterNumber !== -1){%>collapsed<%}%>"
+    role="button"
+    aria-label="<%=meta.titles.slide%> - <%=mediaItem.description%>"
     data-chapter-index="<%=mediaItem.chapterNumber%>"
     data-slide-index="<%=mediaItem.slideNumber%>"
     data-box-type="<%=mediaItem.type%>"