Fix accessibility issue affecting carousel homepage (#347)

Author: gathogojr

_includes/head.html

@@ -30,19 +30,6 @@
   </script>
   
   -->
-  <script>
-  $(function(){
-    $('#myCarousel.slide').carousel({
-        interval: 5000,
-        pause: "hover"
-    });
-    $('input').focus(function(){
-       $("#myCarousel").carousel('pause');
-    }).blur(function() {
-       $("#myCarousel").carousel('cycle');
-    });
-});
-</script>
 
   <link rel="stylesheet" href="https://www.odata.org/public/css/bootstrap.min.css"/>
   <link rel="stylesheet" href="{{'/public/css/site.css' | prepend: site.baseurl | prepend: site.url}}">

index.html

@@ -189,3 +189,37 @@ <h4><a href="{{'/odata-services/' | prepend: site.baseurl | prepend: site.url}}"
   </div>
   </div>
 </div>
+
+<script>
+  $(function(){
+    var myCarousel = $("#myCarousel");
+
+    $('#myCarousel.slide').carousel({
+        interval: 5000,
+        pause: "hover"
+    });
+    
+    $('input').focus(function(){
+       myCarousel.carousel('pause');
+    }).blur(function() {
+      myCarousel.carousel('cycle');
+    });
+
+    var carousel = document.getElementById('myCarousel');
+
+    var liveRegion = document.createElement('span');
+    liveRegion.setAttribute('aria-live', 'polite');
+    liveRegion.setAttribute('aria-atomic', 'true');
+    liveRegion.setAttribute('class', 'live-region sr-only');
+    carousel.appendChild(liveRegion);
+
+    var headers = $(myCarousel).find('div.carousel-inner > div > div > h1');
+
+    myCarousel.on('slid.bs.carousel', function () {
+      var activeSlide = $('#myCarousel > div.carousel-inner > div.active > div > h1');
+      var captionText = activeSlide.text();
+      var position =  headers.index(activeSlide) + 1
+      liveRegion.textContent = 'Slide ' + position + ' of ' + headers.length + ' - ' + captionText;
+    });
+});
+</script>