Add accessibility functionality to onscreen slides

js/animate.js

@@ -127,6 +127,8 @@ proto.settle = function( previousX ) {
     this.positionSlider();
     this.dispatchEvent( 'settle', null, [ this.selectedIndex ] );
   }
+
+  this.checkVisibility();
 };
 
 proto.shiftWrapCells = function( x ) {

js/drag.js

@@ -83,6 +83,8 @@ proto.updateDraggable = function() {
   // disable dragging if less than 2 slides. #278
   if ( this.options.draggable == '>1' ) {
     this.isDraggable = this.slides.length > 1;
+  } else if (this.options.draggable === 'onOverflow') {
+    this.isDraggable = this.viewport.scrollWidth > this.viewport.offsetWidth;
   } else {
     this.isDraggable = this.options.draggable;
   }

js/flickity.js

@@ -757,6 +757,34 @@ proto.queryCell = function( selector ) {
   return this.getCell( selector );
 };
 
+proto.checkVisibility = function() {
+  var viewportX = this.viewport.getBoundingClientRect().x;
+  var viewportWidth = this.viewport.offsetWidth;
+
+  this.cells.forEach(function (cell) {
+    var cellX = cell.element.getBoundingClientRect().x - viewportX;
+    var isVisible = (
+        (cellX + cell.size.innerWidth > viewportX) && (cellX + cell.size.innerWidth < viewportWidth) ||
+        (cellX > viewportX) && (cellX < viewportWidth)
+    );
+
+    if (isVisible) {
+      cell.element.classList.add('is-visible');
+      cell.element.removeAttribute('aria-hidden');
+      const targetable =  cell.element.querySelectorAll('button, a');
+
+      targetable.forEach(target => target.tabIndex = 0);
+
+    } else {
+      cell.element.classList.remove('is-visible');
+      cell.element.setAttribute('aria-hidden', true);
+      const targetable =  cell.element.querySelectorAll('button, a');
+
+      targetable.forEach(target => target.tabIndex = -1);
+    }
+  });
+};
+
 // -------------------------- events -------------------------- //
 
 proto.uiChange = function() {

js/slide.js

@@ -51,6 +51,8 @@ proto.getLastCell = function() {
 };
 
 proto.select = function() {
+  this.parent.checkVisibility();
+
   this.cells.forEach( function( cell ) {
     cell.select();
   } );

sandbox/basic.html

@@ -143,6 +143,18 @@ <h2>contain, few</h2>
 
   <h2>watch, activate >900px</h2>
 
+  <h2>contain, only draggable if overflow</h2>
+
+  <div class="container variable-width js-flickity"
+       data-flickity-options='{ "contain": true, "cellAlign": "left", "draggable": "onOverflow" }'>
+    <div class="cell n1">1</div>
+    <div class="cell n2">2</div>
+    <div class="cell n3">3</div>
+    <div class="cell n4">4</div>
+    <div class="cell n5">5</div>
+    <div class="cell n6">6</div>
+  </div>
+
   <div id="gallery5" class="container variable-width js-flickity"
     data-flickity-options='{ "wrapAround": true, "watchCSS": true }'>
     <div class="cell n1 w3"></div>