From b75ef3cbba495a18b281eefeb56b04016d23d477 Mon Sep 17 00:00:00 2001
From: "Evan.Duncan" <Evan.Duncan@target.com>
Date: Fri, 25 Sep 2015 16:06:45 -0500
Subject: [PATCH] fix(carousel): Better a11y with sr-only text and markup
 structure

---
 template/carousel/carousel.html | 22 +++++++++++++++-------
 1 file changed, 15 insertions(+), 7 deletions(-)

diff --git a/template/carousel/carousel.html b/template/carousel/carousel.html
index 6577b73f45..6cd83360fe 100644
--- a/template/carousel/carousel.html
+++ b/template/carousel/carousel.html
@@ -1,8 +1,16 @@
 <div ng-mouseenter="pause()" ng-mouseleave="play()" class="carousel" ng-swipe-right="prev()" ng-swipe-left="next()">
-    <ol class="carousel-indicators" ng-show="slides.length > 1">
-        <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{active: isActive(slide)}" ng-click="select(slide)"></li>
-    </ol>
-    <div class="carousel-inner" ng-transclude></div>
-    <a class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1"><span class="glyphicon glyphicon-chevron-left"></span></a>
-    <a class="right carousel-control" ng-click="next()" ng-show="slides.length > 1"><span class="glyphicon glyphicon-chevron-right"></span></a>
-</div>
+  <div class="carousel-inner" ng-transclude></div>
+  <a role="button" href="#" class="left carousel-control" ng-click="prev()" ng-show="slides.length > 1">
+    <span aria-hidden="true" class="glyphicon glyphicon-chevron-left"></span>
+    <span class="sr-only">previous</span>
+  </a>
+  <a role="button" href="#" class="right carousel-control" ng-click="next()" ng-show="slides.length > 1">
+    <span aria-hidden="true" class="glyphicon glyphicon-chevron-right"></span>
+    <span class="sr-only">next</span>
+  </a>
+  <ol class="carousel-indicators" ng-show="slides.length > 1">
+    <li ng-repeat="slide in slides | orderBy:indexOfSlide track by $index" ng-class="{ active: isActive(slide) }" ng-click="select(slide)">
+      <span class="sr-only">slide {{ $index + 1 }} of {{ slides.length }}<span ng-if="isActive(slide)">, currently active</span></span>
+    </li>
+  </ol>
+</div>
\ No newline at end of file