diff --git a/js/cell.js b/js/cell.js index 9244eae4..5cb402d9 100644 --- a/js/cell.js +++ b/js/cell.js @@ -39,6 +39,7 @@ var proto = Cell.prototype; proto.create = function() { this.element.style.position = 'absolute'; + this.element.setAttribute( 'aria-selected', 'false' ); this.x = 0; this.shift = 0; }; @@ -47,6 +48,7 @@ proto.destroy = function() { // reset style this.element.style.position = ''; var side = this.parent.originSide; + this.element.removeAttribute('aria-selected'); this.element.style[ side ] = ''; }; diff --git a/js/page-dots.js b/js/page-dots.js index c8964b61..ce1db204 100644 --- a/js/page-dots.js +++ b/js/page-dots.js @@ -79,13 +79,17 @@ PageDots.prototype.setDots = function() { PageDots.prototype.addDots = function( count ) { var fragment = document.createDocumentFragment(); var newDots = []; - while ( count ) { + var length = this.dots.length; + var max = length + count; + + for ( var i = length; i < max; i++ ) { var dot = document.createElement('li'); dot.className = 'dot'; + dot.setAttribute( 'aria-label', 'Page dot ' + ( i + 1 ) ); fragment.appendChild( dot ); newDots.push( dot ); - count--; } + this.holder.appendChild( fragment ); this.dots = this.dots.concat( newDots ); }; @@ -103,6 +107,7 @@ PageDots.prototype.updateSelected = function() { // remove selected class on previous if ( this.selectedDot ) { this.selectedDot.className = 'dot'; + this.selectedDot.removeAttribute('aria-current'); } // don't proceed if no dots if ( !this.dots.length ) { @@ -110,6 +115,7 @@ PageDots.prototype.updateSelected = function() { } this.selectedDot = this.dots[ this.parent.selectedIndex ]; this.selectedDot.className = 'dot is-selected'; + this.selectedDot.setAttribute( 'aria-current', 'step' ); }; PageDots.prototype.onTap = function( event ) { diff --git a/js/slide.js b/js/slide.js index 8650b0d1..9515bf8e 100644 --- a/js/slide.js +++ b/js/slide.js @@ -52,16 +52,18 @@ proto.getLastCell = function() { }; proto.select = function() { - this.changeSelectedClass('add'); + this.changeSelected( true ); }; proto.unselect = function() { - this.changeSelectedClass('remove'); + this.changeSelected( false ); }; -proto.changeSelectedClass = function( method ) { +proto.changeSelected = function( isSelected ) { + var classMethod = isSelected ? 'add' : 'remove'; this.cells.forEach( function( cell ) { - cell.element.classList[ method ]('is-selected'); + cell.element.classList[ classMethod ]('is-selected'); + cell.element.setAttribute( 'aria-selected', isSelected.toString() ); }); };