Make non-visible cards hidden for accessibility in CardSlider.

chrome/browser/resources/shared/js/cr/ui/card_slider.js

 // Copyright (c) 2012 The Chromium Authors. All rights reserved.
 // Use of this source code is governed by a BSD-style license that can be
 // found in the LICENSE file.
 
 /**
  * @fileoverview Card slider implementation. Allows you to create interactions
  * that have items that can slide left to right to reveal additional items.
  * Works by adding the necessary event handlers to a specific DOM structure
  * including a frame, container and cards.
  * - The frame defines the boundary of one item. Each card will be expanded to
@@ skipping 168 matching lines @@
      * @param {number} index Index of the card to in the new set of cards to
      *     navigate to.
      */
     setCards: function(cards, index) {
       assert(index >= 0 && index < cards.length,
           'Invalid index in CardSlider#setCards');
       this.cards_ = cards;
 
       this.updateCardWidths_();
 
+      // Mark all cards as hidden for accessibility. The selected card will
+      // be marked visible during selectCard().
+      for (var i = 0; i < cards.length; i++)
+          this.cards_[i].setAttribute('aria-hidden', true);

[Dan Beam, 2012/09/14 02:48:38]

nit: 2 \s indent, optionally we usually use curlies around for loops as it's
pretty easy to think this is python and slap another method on there that might
still work but not as you'd expect.

[aboxhall, 2012/09/14 03:50:37]

Done.

+
       // Jump to the given card index.
       this.selectCard(index);
     },
 
     /**
      * Updates the width of each card.
      * @private
      */
     updateCardWidths_: function() {
       for (var i = 0, card; card = this.cards_[i]; i++)
@@ skipping 144 matching lines @@
      * @param {!Node} card A card that will be added to the card slider.
      * @param {number} index An index at which the given |card| should be
      *     inserted. Must be positive and less than the number of cards.
      */
     addCardAtIndex: function(card, index) {
       assert(card instanceof Node, '|card| isn\'t a Node');
       this.assertValidIndex_(index);
       this.cards_ = Array.prototype.concat.call(
           this.cards_.slice(0, index), card, this.cards_.slice(index));
 
+      // Mark the new card as hidden for accessibility.  This will be corrected

[Dan Beam, 2012/09/14 02:48:38]

nit: 1 \s between sentences

[aboxhall, 2012/09/14 03:50:37]

Done.

+      // during selectCard() if this is the selected card.
+      card.setAttribute('aria-hidden', true);
+
       if (this.currentCard_ == -1)
         this.currentCard_ = 0;
       else if (index <= this.currentCard_)
         this.selectCard(this.currentCard_ + 1, false, true, true);
 
       this.fireAddedEvent_(card, index);
     },
 
     /**
      * Append a card to the end of the list.
@@ skipping 101 matching lines @@
       this.assertValidIndex_(newCardIndex);
 
       var previousCard = this.currentCardValue;
       var isChangingCard =
           !this.cards_[newCardIndex].classList.contains('selected-card');
 
       if (typeof opt_forceChange != 'undefined' && opt_forceChange)
         isChangingCard = true;
 
       if (isChangingCard) {
-        if (previousCard)
+        if (previousCard) {
           previousCard.classList.remove('selected-card');
+          previousCard.setAttribute('aria-hidden', true);
+        }
         this.currentCard_ = newCardIndex;
         this.currentCardValue.classList.add('selected-card');
+        this.currentCardValue.setAttribute('aria-hidden', false);
       }
 
       var willTransitionHappen = this.transformToCurrentCard_(opt_animate);
 
       if (isChangingCard && !opt_dontNotify) {
         var event = document.createEvent('Event');
         event.initEvent('cardSlider:card_changed', true, true);
         event.cardSlider = this;
         event.wasAnimated = !!opt_animate;
         this.container_.dispatchEvent(event);
@@ skipping 152 matching lines @@
 
       // Ensure we're at a card bounary
       this.transformToCurrentCard_(true);
     },
   };
 
   return {
     CardSlider: CardSlider
   };
 });