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);
+      }
+
       // 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
+      // 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
   };
 });