From 2d47cccdbcf09e673358afc6ffd0221244bda915 Mon Sep 17 00:00:00 2001
From: imakewebthings <caleb@imakewebthings.com>
Date: Fri, 6 Dec 2013 14:53:23 -0800
Subject: [PATCH] #47, set aria-hidden states in core

---
 core/deck.core.js | 27 +++++++++++++++++++++++++--
 test/spec.core.js | 30 ++++++++++++++++++++++++++++++
 2 files changed, 55 insertions(+), 2 deletions(-)

diff --git a/core/deck.core.js b/core/deck.core.js
index 4c415581..31dec96d 100644
--- a/core/deck.core.js
+++ b/core/deck.core.js
@@ -124,11 +124,27 @@ that use the API provided by core.
     }
   };
 
+  var setAriaHiddens = function() {
+    $(options.selectors.slides).each(function() {
+      var $slide = $(this);
+      var isSub = $slide.closest('.' + options.classes.childCurrent).length;
+      var isBefore = $slide.hasClass(options.classes.before) && !isSub;
+      var isPrevious = $slide.hasClass(options.classes.previous) && !isSub;
+      var isNext = $slide.hasClass(options.classes.next);
+      var isAfter = $slide.hasClass(options.classes.after);
+      var ariaHiddenValue = isBefore || isPrevious || isNext || isAfter;
+      $slide.attr('aria-hidden', ariaHiddenValue);
+    });
+  };
+
   var updateStates = function() {
     updateContainerState();
     updateChildCurrent();
     removeOldSlideStates();
     addNewSlideStates();
+    if (options.setAriaHiddens) {
+      setAriaHiddens();
+    }
   };
 
   var initSlidesArray = function(elements) {
@@ -509,7 +525,6 @@ that use the API provided by core.
     If there are no nested slides this will return an empty array.
     */
     getNestedSlides: function(index) {
-      debugger;
       var targetIndex = index == null ? currentIndex : index;
       var $targetSlide = $.deck('getSlide', targetIndex);
       var $nesteds = $targetSlide.find(options.selectors.slides);
@@ -649,6 +664,13 @@ that use the API provided by core.
     When deep linking to a hash of a nested slide, this scrolls the deck
     container to the top, undoing the natural browser behavior of scrolling
     to the document fragment on load.
+
+  options.setAriaHiddens
+    When set to true, deck.js will set aria hidden attributes for slides
+    that do not appear offscreen according to a typical heirarchical
+    deck structure. You may want to turn this off if you are using a theme
+    where slides besides the current slide are visible on screen and should
+    be accessible to screenreaders.
   */
   $.deck.defaults = {
     classes: {
@@ -681,7 +703,8 @@ that use the API provided by core.
 
     initLockTimeout: 10000,
     hashPrefix: 'slide-',
-    preventFragmentScroll: true
+    preventFragmentScroll: true,
+    setAriaHiddens: true
   };
 
   $document.ready(function() {
diff --git a/test/spec.core.js b/test/spec.core.js
index 5b3e5bf1..cec71413 100755
--- a/test/spec.core.js
+++ b/test/spec.core.js
@@ -67,6 +67,36 @@ describe('Deck JS', function() {
           $.deck('go', 'i-dont-exist');
           expect($.deck('getSlide')).toHaveClass('slide1');
         });
+
+        describe('aria attribute updates', function() {
+          beforeEach(function() {
+            loadFixtures('nesteds.html');
+            $.deck();
+            $.deck('go', 5);
+          });
+
+          it('should set offscreen slides to hidden true', function() {
+            $([
+              '.toplevel.deck-before:not(.deck-child-current)',
+              '.toplevel.deck-previous:not(.deck-child-current)',
+              '.deck-next',
+              '.deck-after'
+            ].join(', ')).each(function() {
+              expect($(this)).toHaveAttr('aria-hidden', 'true');
+            });
+          });
+
+          it('should set onscreen slides to hidden false', function() {
+            $([
+              '.deck-child-current.slide',
+              '.deck-child-current .deck-before',
+              '.deck-child-current .deck-previous',
+              '.deck-current'
+            ].join(', ')).each(function() {
+              expect($(this)).toHaveAttr('aria-hidden', 'false');
+            });
+          });
+        });
       });
 
       describe('next()', function() {