From 91705c23b44e4cc36a1d5225c3013aa1920b2101 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Sat, 23 Mar 2019 19:56:35 -0500
Subject: [PATCH 01/20] added visable pause button and converted a elements to
 button elements

---
 examples/carousel/carousel-1/carousel-1.html  |  93 ++++----
 examples/carousel/carousel-1/css/carousel.css | 201 +++++++++++++-----
 examples/carousel/carousel-1/js/carousel.js   |  26 +--
 .../carousel/carousel-1/js/carouselButtons.js |  21 --
 .../carousel/carousel-1/js/pauseButton.js     |  16 +-
 test/tests/carousel-1.js                      |  10 +-
 6 files changed, 213 insertions(+), 154 deletions(-)

diff --git a/examples/carousel/carousel-1/carousel-1.html b/examples/carousel/carousel-1/carousel-1.html
index 3c93d9c3cf..9630943a20 100644
--- a/examples/carousel/carousel-1/carousel-1.html
+++ b/examples/carousel/carousel-1/carousel-1.html
@@ -48,31 +48,54 @@ <h2 id="ex_label">Example</h2>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
             <section id="myCarousel" class="carousel slide" aria-roledescription="carousel" aria-label="Highlighted television shows">
-              <button class="pause">Stop Carousel</button>
+
+              <button class="carousel-pause" aria-label="pause">
+                <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg">
+
+                  <circle class="outer" cx="30" cy="30" r="28" stroke-width="1" stroke="black"/>
+
+                  <circle class="inner" cx="30" cy="30" r="25" stroke-width="4"/>
+
+                  <polygon class="pause" points="23 18 23 40"
+                      stroke="white" fill="white" stroke-width="8" />
+
+                  <polygon class="pause" points="37 18 37 40"
+                      stroke="white" fill="white" stroke-width="8" />
+
+                  <polygon class="play" points="22 20 22 40 43 28"
+                      stroke="transparent" fill="transparent" stroke-width="2" />
+
+                  <polygon class="disabled" points="24 24 24 34 36 34 36 24 24 24"
+                      stroke="transparent" fill="trasparent" stroke-width="8" />
+
+                </svg>
+              </button>
+
 
               <div class="carousel-inner">
 
-                <a class="previous carousel-control"
-                   role="button"
-                   tabindex="0"
+                <button class="previous carousel-control"
                    aria-controls="myCarousel-items"
                    aria-label="Previous Slide">
-                  <svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
-                    <polygon points="30 0 30 30 0 15"
+                  <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                    <circle class="outer" cx="30" cy="30" r="28" stroke-width="1" stroke="#005a9c"/>
+                    <circle class="inner" cx="30" cy="30" r="25" stroke="white" stroke-width="4" fill="black"/>
+                    <polygon points="40 18 40 42 15 30"
                         stroke="white" fill="white" stroke-width="2"/>
                   </svg>
-                </a>
+                </button>
 
-                <a class="next carousel-control"
-                   role="button"
+                <button class="next carousel-control"
                    tabindex="0"
                    aria-controls="myCarousel-items"
                    aria-label="Next Slide">
-                  <svg width="30" height="30" version="1.1" xmlns="http://www.w3.org/2000/svg">
-                    <polygon points="0 0 30 15 0 30"
+                  <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                    <circle class="outer" cx="30" cy="30" r="28" stroke-width="1" stroke="#005a9c"/>
+                    <circle class="inner" cx="30" cy="30" r="25" stroke="white" stroke-width="4" fill="black"/>
+                    <polygon points="20 18 20 42 45 30"
                         stroke="white" fill="white" stroke-width="2"/>
                   </svg>
-                </a>
+                </button>
 
                 <div id="myCarousel-items" class="carousel-items" aria-live="off">
 
@@ -436,55 +459,45 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                 </ul>
               </td>
             </tr>
-            <tr data-test-id="carousel-button-start-disabled">
+              <tr data-test-id="carousel-button-aria-label">
                 <td></td>
                 <th scope="row">
-                  <code>aria-disabled="true"</code>
+                  <code>aria-label="LABEL_STRING"</code>
                 </th>
                 <td>
                   <code>button</code>
                 </td>
-                <td>
-                  <ul>
-                    <li>Applied to the automatic rotation control button when rotation is stopped and conditions that prevent automatic rotation are present.</li>
-                    <li>The button is disabled when a pointer is hovering over the carousel or any element in the carousel has keyboard focus.</li>
-                    <li>The <code>aria-disabled</code> state is used instead of the HTML <code>disabled</code> attribute to keep the button in the <kbd>Tab</kbd> sequence.</li>
-                    <li>If hover or focus is removed from the carousel, the <code>aria-disabled</code> attribute is removed from the button.</li>
-                  </ul>
-                </td>
+                <td>Defines the accessible name for the pause auto-rotation button and the next and previous slide buttons.</td>
               </tr>
-              <tr data-test-id="carousel-button-role-link">
+              <tr data-test-id="carousel-button-aria-controls">
+                <td></td>
                 <th scope="row">
-                  <code>button</code>
+                  <code>aria-controls="IDREF"</code>
                 </th>
-                <td></td>
                 <td>
-                  <code>a</code>
+                  <code>button</code>
                 </td>
-                <td>Identifies the element as a <code>button</code>.</td>
-              </tr>
-              <tr data-test-id="carousel-button-aria-label-next-previous">
-                <td></td>
-                <th scope="row">
-                  <code>aria-label="LABEL_STRING"</code>
-                </th>
                 <td>
-                  <code>a</code>
+                  <ul>
+                    <li>Identifies the content on the page that the button controls.</li>
+                    <li>Refers to the <code>div</code> that contains all the slides.</li>
+                  </ul>
                 </td>
-                <td>Defines the accessible name for the next and previous slide buttons.</td>
               </tr>
-              <tr data-test-id="carousel-button-aria-controls">
+            <tr data-test-id="carousel-button-start-disabled">
                 <td></td>
                 <th scope="row">
-                  <code>aria-controls="IDREF"</code>
+                  <code>aria-disabled="true"</code>
                 </th>
                 <td>
-                  <code>a</code>
+                  <code>button</code>
                 </td>
                 <td>
                   <ul>
-                    <li>Identifies the content on the page that the button controls.</li>
-                    <li>Refers to the <code>div</code> that contains all the slides.</li>
+                    <li>Applied to the automatic rotation control button when rotation is stopped and conditions that prevent automatic rotation are present.</li>
+                    <li>The button is disabled when a pointer is hovering over the carousel or any element in the carousel has keyboard focus.</li>
+                    <li>The <code>aria-disabled</code> state is used instead of the HTML <code>disabled</code> attribute to keep the button in the <kbd>Tab</kbd> sequence.</li>
+                    <li>If hover or focus is removed from the carousel, the <code>aria-disabled</code> attribute is removed from the button.</li>
                   </ul>
                 </td>
               </tr>
diff --git a/examples/carousel/carousel-1/css/carousel.css b/examples/carousel/carousel-1/css/carousel.css
index 11ce7cd722..a6a534c880 100644
--- a/examples/carousel/carousel-1/css/carousel.css
+++ b/examples/carousel/carousel-1/css/carousel.css
@@ -20,35 +20,6 @@
   position: relative;
 }
 
-.carousel button.pause {
-  display: block;
-  font-size: 20px;
-  width: auto;
-  left: -300em;
-  margin-bottom: 10px;
-  height: auto;
-  position: relative;
-  top: 5px;
-  right: -20px;
-  border: thin solid outset;
-}
-
-.carousel button[aria-disabled=true] {
-  color: #666;
-}
-
-.carousel button.pause:focus {
-  display: block;
-  position: relative;
-  font-size: 20px;
-  width: auto;
-  left: 0;
-  margin-bottom: 10px;
-  height: auto;
-  top: 5px;
-  right: -20px;
-}
-
 .carousel .carousel-items {
   border: solid 2px transparent;
 }
@@ -116,61 +87,173 @@
   max-height: 400px;
 }
 
+/* Next and Previous Slide Controls */
+
 .carousel .carousel-control {
   position: absolute;
   top: 0;
   z-index: 10;
-  font-size: 200%;
-  font-weight: bold;
-  color: #fff;
-  text-align: center;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
+  background-color: transparent;
 }
 
-.carousel a.carousel-control svg {
+.carousel .carousel-control svg {
   position: relative;
   display: inline-block;
   top: 45%;
 }
 
-.carousel a.carousel-control svg polygon {
+.carousel .carousel-control svg polygon {
   opacity: 0.7;
 }
 
-.carousel a.carousel-control:focus {
-  border: 3px solid #fff;
-  outline: 1px solid #005a9c;
+.carousel .carousel-control svg circle {
+  opacity: 0;
 }
 
-.carousel a.carousel-control:focus svg polygon,
-.carousel a.carousel-control:hover svg polygon {
-  opacity: 1;
-}
-
-.carousel a.carousel-control.previous {
+.carousel .carousel-control.previous {
+  left: 0;
   bottom: 0;
   width: 15%;
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0, rgba(0, 0, 0, 0.0001) 100%);
+  border: none;
 }
 
-.carousel a.carousel-control.previous:focus,
-.carousel a.carousel-control.previous:hover {
+.carousel .carousel-control.next {
+  right: 0;
   bottom: 0;
   width: 15%;
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.0001) 100%);
+  border: none;
 }
 
-.carousel a.carousel-control.next {
-  right: 0;
-  bottom: 0;
-  width: 15%;
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.5) 100%);
+.carousel .carousel-control.previous:focus,
+.carousel .carousel-control.previous:hover {
+  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.0001) 100%);
+  outline: none;
 }
 
-.carousel a.carousel-control.next:focus,
-.carousel a.carousel-control.next:hover {
-  right: 0;
-  bottom: 0;
-  width: 15%;
+.carousel .carousel-control.next:focus,
+.carousel .carousel-control.next:hover {
   background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.7) 100%);
+  outline: none;
+}
+
+/* Pause Control */
+
+.carousel .carousel-pause {
+  position: absolute;
+  left: 45%;
+  z-index: 10;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.carousel .carousel-pause svg circle {
+  stroke: black;
+  opacity: 0.1;
+  fill: black;
+}
+
+.carousel .carousel-pause.pause svg polygon {
+  opacity: 0.7;
+}
+
+.carousel .carousel-pause.pause svg polygon.pause {
+  stroke: white;
+  fill: white;
+}
+
+.carousel .carousel-pause.pause svg polygon.play,
+.carousel .carousel-pause.pause svg polygon.disabled {
+  stroke: transparent;
+  fill: transparent;
+}
+
+.carousel .carousel-pause.play svg polygon.pause,
+.carousel .carousel-pause.play svg polygon.disabled {
+  stroke: transparent;
+  fill: transparent;
+}
+
+.carousel .carousel-pause.play svg polygon.play {
+  stroke: white;
+  fill: white;
+}
+
+.carousel .carousel-pause[aria-disabled=true] svg polygon.pause,
+.carousel .carousel-pause[aria-disabled=true] svg polygon.play {
+  stroke: transparent;
+  fill: transparent;
+}
+
+.carousel .carousel-pause[aria-disabled=true] svg polygon.disabled {
+  stroke: white;
+  fill: white;
+}
+
+.carousel .carousel-pause[aria-disabled=true] svg circle.outer,
+.carousel .carousel-pause[aria-disabled=true] svg circle.inner {
+  opacity: 0.1;
+  stroke: black;
+  fill: black;
+}
+
+.carousel .carousel-pause[aria-disabled=true] svg polygon {
+  opacity: 0.7;
+}
+
+/* Common focus styling for svg buttons */
+
+.carousel .carousel-pause:focus svg polygon,
+.carousel .carousel-pause:hover svg polygon,
+.carousel .carousel-control:focus svg polygon,
+.carousel .carousel-control:hover svg polygon {
+  opacity: 1;
+  stroke: white;
+  fill: white;
+}
+
+.carousel .carousel-pause:focus svg circle.inner,
+.carousel .carousel-control:focus svg circle.inner {
+  stroke: white;
+  opacity: 1;
+  fill: #005a9c;
+}
+
+.carousel .carousel-pause:hover svg circle.outer,
+.carousel .carousel-pause:hover svg circle.inner,
+.carousel .carousel-control:hover svg circle.outer,
+.carousel .carousel-control:hover svg circle.inner {
+  stroke: #005a9c;
+  opacity: 1;
+  fill: #005a9c;
+}
+
+.carousel .carousel-pause:focus svg circle.outer,
+.carousel .carousel-pause:hover svg circle.outer,
+.carousel .carousel-control:focus svg circle.outer,
+.carousel .carousel-control:hover svg circle.outer,
+.carousel .carousel-pause[aria-disabled=true]:focus svg circle.outer,
+.carousel .carousel-pause[aria-disabled=true]:hover svg circle.outer {
+  stroke: #005a9c;
+  opacity: 1;
+}
+
+.carousel .carousel-pause[aria-disabled=true]:focus svg circle.inner {
+  stroke: white;
+  opacity: 1;
+  fill: #005a9c;
+}
+
+.carousel .carousel-pause[aria-disabled=true]:focus svg polygon.disabled,
+.carousel .carousel-pause[aria-disabled=true]:hover svg polygon.disabled {
+  opacity: 0.7;
+  stroke: white;
+  fill: white;
+}
+
+.carousel .carousel-pause[aria-disabled=true]:hover svg circle.outer,
+.carousel .carousel-pause[aria-disabled=true]:hover svg circle.inner {
+  stroke: #005a9c;
+  opacity: 0.7;
+  fill: #005a9c;
 }
diff --git a/examples/carousel/carousel-1/js/carousel.js b/examples/carousel/carousel-1/js/carousel.js
index 9e3071e921..f94dcb8e4c 100644
--- a/examples/carousel/carousel-1/js/carousel.js
+++ b/examples/carousel/carousel-1/js/carousel.js
@@ -22,8 +22,8 @@ var Carousel = function (domNode) {
   this.currentItem = null;
   this.pauseButton = null;
 
-  this.startLabel = 'Start automatic slide show';
-  this.stopLabel = 'Stop automatic slide show';
+  this.playLabel = 'Start automatic slide show';
+  this.pauseLabel = 'Stop automatic slide show';
 
   this.rotate = true;
   this.hasFocus = false;
@@ -61,23 +61,21 @@ Carousel.prototype.init = function () {
 
   // Next Slide and Previous Slide Buttons
 
-  var elems = document.querySelectorAll('.carousel a.carousel-control');
+  var elems = document.querySelectorAll('.carousel .carousel-control');
 
   for (var i = 0; i < elems.length; i++) {
-    if (elems[i].tagName.toLowerCase() == 'a') {
-      var button = new CarouselButton(elems[i], this);
-
-      button.init();
-    }
+    var button = new CarouselButton(elems[i], this);
+    button.init();
   }
 
   this.currentItem = this.firstItem;
 
-  this.pauseButton = this.domNode.parentNode.parentNode.querySelector('button.pause');
+  this.pauseButton = this.domNode.parentNode.parentNode.querySelector('button.carousel-pause');
   if (this.pauseButton) {
     var button = new PauseButton(this.pauseButton, this);
     button.init();
-    this.pauseButton.innerHTML = this.stopLabel;
+    this.pauseButton.setAttribute('aria-label', this.pauseLabel);
+    this.pauseButton.classList.add('pause');
   }
 
   this.domNode.addEventListener('mouseover', this.handleMouseOver.bind(this));
@@ -155,7 +153,9 @@ Carousel.prototype.startRotation = function () {
   if (!this.hasHover && !this.hasFocus && !this.isStopped) {
     this.rotate = true;
     this.liveRegionNode.setAttribute('aria-live', 'off');
-    this.pauseButton.innerHTML = this.stopLabel;
+    this.pauseButton.setAttribute('aria-label', this.pauseLabel);
+    this.pauseButton.classList.remove('play');
+    this.pauseButton.classList.add('pause');
   }
   this.disablePauseButton();
 };
@@ -163,7 +163,9 @@ Carousel.prototype.startRotation = function () {
 Carousel.prototype.stopRotation = function () {
   this.rotate = false;
   this.liveRegionNode.setAttribute('aria-live', 'polite');
-  this.pauseButton.innerHTML = this.startLabel;
+  this.pauseButton.setAttribute('aria-label', this.playLabel);
+  this.pauseButton.classList.remove('pause');
+  this.pauseButton.classList.add('play');
   this.disablePauseButton();
 };
 
diff --git a/examples/carousel/carousel-1/js/carouselButtons.js b/examples/carousel/carousel-1/js/carouselButtons.js
index 22bde956e9..d2acf78cc4 100644
--- a/examples/carousel/carousel-1/js/carouselButtons.js
+++ b/examples/carousel/carousel-1/js/carouselButtons.js
@@ -33,7 +33,6 @@ var CarouselButton = function (domNode, carouselObj) {
 };
 
 CarouselButton.prototype.init = function () {
-  this.domNode.addEventListener('keydown', this.handleKeydown.bind(this));
   this.domNode.addEventListener('click', this.handleClick.bind(this));
   this.domNode.addEventListener('focus', this.handleFocus.bind(this));
   this.domNode.addEventListener('blur', this.handleBlur.bind(this));
@@ -51,26 +50,6 @@ CarouselButton.prototype.changeItem = function () {
 
 /* EVENT HANDLERS */
 
-CarouselButton.prototype.handleKeydown = function (event) {
-  var flag = false;
-
-  switch (event.keyCode) {
-    case this.keyCode.SPACE:
-    case this.keyCode.RETURN:
-      this.changeItem();
-      this.domNode.focus();
-      flag = true;
-      break;
-
-    default:
-      break;
-  }
-
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
 
 CarouselButton.prototype.handleClick = function (event) {
   this.changeItem();
diff --git a/examples/carousel/carousel-1/js/pauseButton.js b/examples/carousel/carousel-1/js/pauseButton.js
index ebd875ee56..dfa6c78659 100644
--- a/examples/carousel/carousel-1/js/pauseButton.js
+++ b/examples/carousel/carousel-1/js/pauseButton.js
@@ -11,28 +11,14 @@ var PauseButton = function (domNode, carouselObj) {
   this.carousel = carouselObj;
 };
 
-var StartButton = function (domNode, carouselObj) {
-  this.domNode = domNode;
-
-  this.carousel = carouselObj;
-};
-
 PauseButton.prototype.init = function () {
   this.domNode.addEventListener('click', this.handleClick.bind(this));
-  this.domNode.addEventListener('focus', this.handleFocus.bind(this));
-  this.domNode.addEventListener('blur', this.handleBlur.bind(this));
 };
 
 /* EVENT HANDLERS */
 
 PauseButton.prototype.handleClick = function (event) {
+  console.log('handleClick');
   this.carousel.toggleRotation();
 };
 
-PauseButton.prototype.handleFocus = function (event) {
-  this.domNode.classList.add('focus');
-};
-
-PauseButton.prototype.handleBlur = function (event) {
-  this.domNode.classList.remove('focus');
-};
diff --git a/test/tests/carousel-1.js b/test/tests/carousel-1.js
index 1ef6cc95c8..f53c56f3fb 100644
--- a/test/tests/carousel-1.js
+++ b/test/tests/carousel-1.js
@@ -15,6 +15,7 @@ const exampleFile = 'carousel/carousel-1/carousel-1.html';
 
 const ex = {
   landmarkSelector: '#myCarousel',
+  buttonSelector: '#ex1 button',
   previousNextButtonSelector: '#ex1 .carousel-control',
   slideContainerSelector: '#ex1 .carousel-items',
   slideSelector: '#ex1 .carousel-item'
@@ -35,14 +36,9 @@ ariaTest('Carousel 1: section has aria-roledescription set to carousel', example
   await assertAttributeValues(t, ex.landmarkSelector, 'aria-roledescription', 'carousel');
 });
 
-ariaTest('Carousel 1: previous and next buttons have role button', exampleFile, 'carousel-button-role-link', async (t) => {
+ariaTest('Carousel 1: pause, previous and next buttons have aria-label', exampleFile, 'carousel-button-aria-label', async (t) => {
   t.plan(1);
-  await assertAriaRoles(t, 'myCarousel', 'button', 2, 'a');
-});
-
-ariaTest('Carousel 1: previous and next buttons have aria-label', exampleFile, 'carousel-button-aria-label-next-previous', async (t) => {
-  t.plan(1);
-  await assertAriaLabelExists(t, ex.previousNextButtonSelector);
+  await assertAriaLabelExists(t, ex.buttonSelector);
 });
 
 ariaTest('Carousel 1: previous and next buttons have aria-controls', exampleFile, 'carousel-button-aria-controls', async (t) => {

From b903d69add456a701ea3047b080f9df2a5eb4418 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Sat, 23 Mar 2019 20:04:42 -0500
Subject: [PATCH 02/20] fixed pause button positioning issue

---
 examples/carousel/carousel-1/carousel-1.html | 30 ++++++++++----------
 1 file changed, 15 insertions(+), 15 deletions(-)

diff --git a/examples/carousel/carousel-1/carousel-1.html b/examples/carousel/carousel-1/carousel-1.html
index 9630943a20..8028340b4a 100644
--- a/examples/carousel/carousel-1/carousel-1.html
+++ b/examples/carousel/carousel-1/carousel-1.html
@@ -49,30 +49,30 @@ <h2 id="ex_label">Example</h2>
         <div id="ex1">
             <section id="myCarousel" class="carousel slide" aria-roledescription="carousel" aria-label="Highlighted television shows">
 
-              <button class="carousel-pause" aria-label="pause">
-                <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg">
+              <div class="carousel-inner">
 
-                  <circle class="outer" cx="30" cy="30" r="28" stroke-width="1" stroke="black"/>
+                <button class="carousel-pause" aria-label="pause">
+                  <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg">
 
-                  <circle class="inner" cx="30" cy="30" r="25" stroke-width="4"/>
+                    <circle class="outer" cx="30" cy="30" r="28" stroke-width="1" stroke="black"/>
 
-                  <polygon class="pause" points="23 18 23 40"
-                      stroke="white" fill="white" stroke-width="8" />
+                    <circle class="inner" cx="30" cy="30" r="25" stroke-width="4"/>
 
-                  <polygon class="pause" points="37 18 37 40"
-                      stroke="white" fill="white" stroke-width="8" />
+                    <polygon class="pause" points="23 18 23 40"
+                        stroke="white" fill="white" stroke-width="8" />
 
-                  <polygon class="play" points="22 20 22 40 43 28"
-                      stroke="transparent" fill="transparent" stroke-width="2" />
+                    <polygon class="pause" points="37 18 37 40"
+                        stroke="white" fill="white" stroke-width="8" />
 
-                  <polygon class="disabled" points="24 24 24 34 36 34 36 24 24 24"
-                      stroke="transparent" fill="trasparent" stroke-width="8" />
+                    <polygon class="play" points="22 20 22 40 43 28"
+                        stroke="transparent" fill="transparent" stroke-width="2" />
 
-                </svg>
-              </button>
+                    <polygon class="disabled" points="24 24 24 34 36 34 36 24 24 24"
+                        stroke="transparent" fill="trasparent" stroke-width="8" />
 
+                  </svg>
+                </button>
 
-              <div class="carousel-inner">
 
                 <button class="previous carousel-control"
                    aria-controls="myCarousel-items"

From e8e5c8407cde5ef54ca57d402b0e4eb0b89a4a88 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Mon, 25 Mar 2019 16:44:03 -0500
Subject: [PATCH 03/20] updated code to improve color contrast and button
 positioning

---
 examples/carousel/carousel-1/carousel-1.html  |  8 +--
 examples/carousel/carousel-1/css/carousel.css | 57 ++++++++-----------
 2 files changed, 29 insertions(+), 36 deletions(-)

diff --git a/examples/carousel/carousel-1/carousel-1.html b/examples/carousel/carousel-1/carousel-1.html
index 8028340b4a..2d468920ae 100644
--- a/examples/carousel/carousel-1/carousel-1.html
+++ b/examples/carousel/carousel-1/carousel-1.html
@@ -116,7 +116,7 @@ <h3>
                       </h3>
 
                       <div class="hidden-xs hidden-sm">
-                        <p>7 pm Tuesday, March 3, on TV</p>
+                        <p><span class="contrast">7 pm Tuesday, March 3, on TV</span></p>
                       </div>
                     </div>  <!-- .carousel-caption -->
                   </div>   <!-- .item -->
@@ -138,7 +138,7 @@ <h3>
                       </h3>
 
                       <div>
-                        <p>Sept. 14 to Sept. 24 or 27</p>
+                        <p><span class="contrast">Sept. 14 to Sept. 24 or 27</span></p>
                       </div>
                     </div>  <!-- .carousel-caption -->
                   </div>   <!-- .item -->
@@ -182,7 +182,7 @@ <h3>
                       </h3>
 
                       <div>
-                        <p>8 pm Sunday, March 8, on TV: Sneak peak at the final season.</p>
+                        <p><span class="contrast">8 pm Sunday, March 8, on TV: Sneak peak at the final season.</span></p>
                       </div>
                     </div>  <!-- .carousel-caption -->
                   </div>   <!-- .item -->
@@ -223,7 +223,7 @@ <h3>
                       </h3>
 
                       <div class="hidden-xs hidden-sm">
-                        <p>Watch the latest episodes.</p>
+                        <p><span class="contrast">Watch the latest episodes.</span></p>
                       </div>
                     </div>  <!-- .carousel-caption -->
                   </div>   <!-- .item -->
diff --git a/examples/carousel/carousel-1/css/carousel.css b/examples/carousel/carousel-1/css/carousel.css
index a6a534c880..3dbc8445cc 100644
--- a/examples/carousel/carousel-1/css/carousel.css
+++ b/examples/carousel/carousel-1/css/carousel.css
@@ -36,7 +36,17 @@
 
 .carousel .carousel-inner .carousel-caption a {
   text-decoration: underline;
-  border: none;
+}
+
+.carousel .carousel-inner .carousel-caption a,
+.carousel .carousel-inner .carousel-caption span.contrast {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.6);
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+  border-radius: 5px;
+  border: 2px solid transparent;
+  margin: 0;
 }
 
 .carousel .carousel-inner .carousel-caption h3 a {
@@ -44,10 +54,16 @@
   font-weight: 600;
 }
 
-.carousel .carousel-inner .carousel-caption a:focus,
-.carousel .carousel-inner .carousel-caption a:hover {
-  outline: solid 2px #fff;
-  outline-offset: 1px;
+.carousel .carousel-inner .carousel-caption a:hover,
+.carousel .carousel-inner .carousel-caption span.contrast:hover {
+  background-color: rgba(0, 0, 0, 1);
+  margin: 0;
+}
+
+.carousel .carousel-inner .carousel-caption a:focus {
+  background-color: rgba(0, 0, 0, 1);
+  border-color: #fff;
+  margin: 0;
 }
 
 .carousel .carousel-inner .carousel-caption p {
@@ -56,7 +72,7 @@
   margin-bottom: 0;
 }
 
-.carousel .carousel-caption {
+.carousel .carousel-inner .carousel-caption {
   position: absolute;
   right: 15%;
   bottom: 0;
@@ -65,20 +81,6 @@
   padding-bottom: 20px;
   color: #fff;
   text-align: center;
-  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6);
-}
-
-.carousel .carousel-inner .carousel-caption {
-  bottom: 0;
-  left: 0;
-  padding: 3% 3% 50px;
-  right: 0;
-  text-shadow: none;
-}
-
-.carousel:hover .carousel-inner .carousel-caption,
-.carousel .carousel-item.focus .carousel-caption {
-  background-color: rgba(0, 0, 0, 0.4);
 }
 
 .carousel .carousel-inner,
@@ -92,14 +94,11 @@
 .carousel .carousel-control {
   position: absolute;
   top: 0;
+  bottom: 0;
   z-index: 10;
   background-color: transparent;
-}
-
-.carousel .carousel-control svg {
-  position: relative;
-  display: inline-block;
-  top: 45%;
+  width: 15%;
+  border: 1px solid red;
 }
 
 .carousel .carousel-control svg polygon {
@@ -112,16 +111,10 @@
 
 .carousel .carousel-control.previous {
   left: 0;
-  bottom: 0;
-  width: 15%;
-  border: none;
 }
 
 .carousel .carousel-control.next {
   right: 0;
-  bottom: 0;
-  width: 15%;
-  border: none;
 }
 
 .carousel .carousel-control.previous:focus,

From 4cf22c63b6e679c3944126aa6695efb1cf9b6bae Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Mon, 25 Mar 2019 16:46:07 -0500
Subject: [PATCH 04/20] fixed css issue

---
 examples/carousel/carousel-1/css/carousel.css | 1 -
 1 file changed, 1 deletion(-)

diff --git a/examples/carousel/carousel-1/css/carousel.css b/examples/carousel/carousel-1/css/carousel.css
index 3dbc8445cc..f45c2b3adc 100644
--- a/examples/carousel/carousel-1/css/carousel.css
+++ b/examples/carousel/carousel-1/css/carousel.css
@@ -98,7 +98,6 @@
   z-index: 10;
   background-color: transparent;
   width: 15%;
-  border: 1px solid red;
 }
 
 .carousel .carousel-control svg polygon {

From 36561169e3bb09ca4e69d5358c1f2dd028d7e3e0 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Mon, 25 Mar 2019 17:42:10 -0500
Subject: [PATCH 05/20] fixed css issue

---
 examples/carousel/carousel-1/css/carousel.css | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/examples/carousel/carousel-1/css/carousel.css b/examples/carousel/carousel-1/css/carousel.css
index f45c2b3adc..9703a109d8 100644
--- a/examples/carousel/carousel-1/css/carousel.css
+++ b/examples/carousel/carousel-1/css/carousel.css
@@ -41,7 +41,7 @@
 .carousel .carousel-inner .carousel-caption a,
 .carousel .carousel-inner .carousel-caption span.contrast {
   display: inline-block;
-  background-color: rgba(0, 0, 0, 0.6);
+  background-color: rgba(0, 0, 0, 0.65);
   padding-left: 0.25em;
   padding-right: 0.25em;
   border-radius: 5px;
@@ -98,6 +98,7 @@
   z-index: 10;
   background-color: transparent;
   width: 15%;
+  border: none;
 }
 
 .carousel .carousel-control svg polygon {

From afbd4c6f54ff7bc45a4b1d745c3c20981a446c1c Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Wed, 27 Mar 2019 16:36:20 -0500
Subject: [PATCH 06/20] updated color contrast of text and positining of
 controls

---
 examples/carousel/carousel-1/carousel-1.html  |  9 ++-
 examples/carousel/carousel-1/css/carousel.css |  3 +-
 examples/carousel/carousel-1/js/carousel.js   | 57 +++++++++++--------
 .../carousel/carousel-1/js/carouselButtons.js |  4 +-
 .../carousel/carousel-1/js/carouselItem.js    |  4 +-
 5 files changed, 43 insertions(+), 34 deletions(-)

diff --git a/examples/carousel/carousel-1/carousel-1.html b/examples/carousel/carousel-1/carousel-1.html
index 2d468920ae..42a47fdfa6 100644
--- a/examples/carousel/carousel-1/carousel-1.html
+++ b/examples/carousel/carousel-1/carousel-1.html
@@ -67,8 +67,11 @@ <h2 id="ex_label">Example</h2>
                     <polygon class="play" points="22 20 22 40 43 28"
                         stroke="transparent" fill="transparent" stroke-width="2" />
 
-                    <polygon class="disabled" points="24 24 24 34 36 34 36 24 24 24"
-                        stroke="transparent" fill="trasparent" stroke-width="8" />
+                    <polygon class="disabled" points="15 15 19 15 45 45 42 45"
+                        stroke="transparent" fill="trasparent" stroke-width="1" />
+
+                    <polygon class="disabled" points="45 15 42 15 19 45 15 45"
+                        stroke="transparent" fill="trasparent" stroke-width="1" />
 
                   </svg>
                 </button>
@@ -155,7 +158,7 @@ <h3>
 
                       <h3>
                         <a href="#" id="carousel-label-3">
-                          Survey confirms that TV  is America&#8217;s most trusted institution
+                          Great Children's Programming on Public TV
                         </a>
                       </h3>
 
diff --git a/examples/carousel/carousel-1/css/carousel.css b/examples/carousel/carousel-1/css/carousel.css
index 9703a109d8..fb13731c8f 100644
--- a/examples/carousel/carousel-1/css/carousel.css
+++ b/examples/carousel/carousel-1/css/carousel.css
@@ -174,8 +174,7 @@
 
 .carousel .carousel-pause[aria-disabled=true] svg polygon.pause,
 .carousel .carousel-pause[aria-disabled=true] svg polygon.play {
-  stroke: transparent;
-  fill: transparent;
+  opacity: 0.7;
 }
 
 .carousel .carousel-pause[aria-disabled=true] svg polygon.disabled {
diff --git a/examples/carousel/carousel-1/js/carousel.js b/examples/carousel/carousel-1/js/carousel.js
index f94dcb8e4c..757b737745 100644
--- a/examples/carousel/carousel-1/js/carousel.js
+++ b/examples/carousel/carousel-1/js/carousel.js
@@ -149,45 +149,50 @@ Carousel.prototype.rotateSlides = function () {
   setTimeout(this.rotateSlides.bind(this), this.timeInterval);
 };
 
-Carousel.prototype.startRotation = function () {
+Carousel.prototype.updatePauseButtonDisabledState = function () {
+  if (this.hasHover || this.hasFocus) {
+    this.pauseButton.setAttribute('aria-disabled', 'true');
+  }
+  else {
+    this.pauseButton.removeAttribute('aria-disabled');
+  }
+};
+
+Carousel.prototype.updateRotation = function () {
+
   if (!this.hasHover && !this.hasFocus && !this.isStopped) {
     this.rotate = true;
+  }
+  else {
+    this.rotate = false;
+  }
+
+  if (this.isStopped) {
     this.liveRegionNode.setAttribute('aria-live', 'off');
+    this.pauseButton.setAttribute('aria-label', this.playLabel);
+    this.pauseButton.classList.remove('pause');
+    this.pauseButton.classList.add('play');
+  }
+  else {
+    this.liveRegionNode.setAttribute('aria-live', 'polite');
     this.pauseButton.setAttribute('aria-label', this.pauseLabel);
     this.pauseButton.classList.remove('play');
     this.pauseButton.classList.add('pause');
   }
-  this.disablePauseButton();
-};
 
-Carousel.prototype.stopRotation = function () {
-  this.rotate = false;
-  this.liveRegionNode.setAttribute('aria-live', 'polite');
-  this.pauseButton.setAttribute('aria-label', this.playLabel);
-  this.pauseButton.classList.remove('pause');
-  this.pauseButton.classList.add('play');
-  this.disablePauseButton();
-};
-
-Carousel.prototype.disablePauseButton = function () {
-  if (this.hasHover || this.hasFocus) {
-    this.pauseButton.setAttribute('aria-disabled', 'true');
-  }
-  else {
-    this.pauseButton.removeAttribute('aria-disabled');
-  }
+  this.updatePauseButtonDisabledState();
 };
 
 Carousel.prototype.toggleRotation = function () {
   if (this.isStopped) {
     if (this.pauseButton.getAttribute('aria-disabled') !== 'true') {
       this.isStopped = false;
-      this.startRotation();
+      this.updateRotation();
     }
   }
   else {
     this.isStopped = true;
-    this.stopRotation();
+    this.updateRotation();
   }
 };
 
@@ -199,14 +204,16 @@ Carousel.prototype.handleImageLinkBlur = function () {
   this.liveRegionNode.classList.remove('focus');
 };
 
-Carousel.prototype.handleMouseOver = function () {
-  this.hasHover = true;
-  this.stopRotation();
+Carousel.prototype.handleMouseOver = function (event) {
+  if (!this.pauseButton.contains(event.target)) {
+    this.hasHover = true;
+  }
+  this.updateRotation();
 };
 
 Carousel.prototype.handleMouseOut = function () {
   this.hasHover = false;
-  this.startRotation();
+  this.updateRotation();
 };
 
 /* Initialize Carousel Tablists */
diff --git a/examples/carousel/carousel-1/js/carouselButtons.js b/examples/carousel/carousel-1/js/carouselButtons.js
index d2acf78cc4..82c6396775 100644
--- a/examples/carousel/carousel-1/js/carouselButtons.js
+++ b/examples/carousel/carousel-1/js/carouselButtons.js
@@ -58,11 +58,11 @@ CarouselButton.prototype.handleClick = function (event) {
 CarouselButton.prototype.handleFocus = function (event) {
   this.carousel.hasFocus = true;
   this.domNode.classList.add('focus');
-  this.carousel.stopRotation();
+  this.carousel.updateRotation();
 };
 
 CarouselButton.prototype.handleBlur = function (event) {
   this.carousel.hasFocus = false;
   this.domNode.classList.remove('focus');
-  this.carousel.startRotation();
+  this.carousel.updateRotation();
 };
diff --git a/examples/carousel/carousel-1/js/carouselItem.js b/examples/carousel/carousel-1/js/carouselItem.js
index 7ed5417f63..dc1f1d1513 100644
--- a/examples/carousel/carousel-1/js/carouselItem.js
+++ b/examples/carousel/carousel-1/js/carouselItem.js
@@ -32,11 +32,11 @@ CarouselItem.prototype.show = function () {
 CarouselItem.prototype.handleFocusIn = function (event) {
   this.domNode.classList.add('focus');
   this.carousel.hasFocus = true;
-  this.carousel.stopRotation();
+  this.carousel.updateRotation();
 };
 
 CarouselItem.prototype.handleFocusOut = function (event) {
   this.domNode.classList.remove('focus');
   this.carousel.hasFocus = false;
-  this.carousel.startRotation();
+  this.carousel.updateRotation();
 };

From 753f8ba72fb8e50c5dad0514b4b1a04e9880ed64 Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Mon, 13 May 2019 20:01:31 -0500
Subject: [PATCH 07/20] updated carousel example

---
 .../carousel/{carousel-1 => }/carousel-1.html |  83 +++---
 examples/carousel/carousel-1/css/carousel.css | 251 ------------------
 examples/carousel/css/carousel-1.css          | 186 +++++++++++++
 .../images/amsterdamslide__800x600.jpg        | Bin
 .../images/britcomdavidslide__800x600.jpg     | Bin
 .../images/foyleswarslide__800x600.jpg        | Bin
 .../images/lands-endslide__800x600.jpg        | Bin
 .../images/mag800-2__800x600.jpg              | Bin
 .../images/trustslide-2__800x600.jpg          | Bin
 .../carousel/{carousel-1 => }/js/carousel.js  |  37 +--
 .../{carousel-1 => }/js/carouselButtons.js    |   0
 .../{carousel-1 => }/js/carouselItem.js       |   0
 .../{carousel-1 => }/js/pauseButton.js        |   0
 13 files changed, 244 insertions(+), 313 deletions(-)
 rename examples/carousel/{carousel-1 => }/carousel-1.html (87%)
 delete mode 100644 examples/carousel/carousel-1/css/carousel.css
 create mode 100644 examples/carousel/css/carousel-1.css
 rename examples/carousel/{carousel-1 => }/images/amsterdamslide__800x600.jpg (100%)
 rename examples/carousel/{carousel-1 => }/images/britcomdavidslide__800x600.jpg (100%)
 rename examples/carousel/{carousel-1 => }/images/foyleswarslide__800x600.jpg (100%)
 rename examples/carousel/{carousel-1 => }/images/lands-endslide__800x600.jpg (100%)
 rename examples/carousel/{carousel-1 => }/images/mag800-2__800x600.jpg (100%)
 rename examples/carousel/{carousel-1 => }/images/trustslide-2__800x600.jpg (100%)
 rename examples/carousel/{carousel-1 => }/js/carousel.js (86%)
 rename examples/carousel/{carousel-1 => }/js/carouselButtons.js (100%)
 rename examples/carousel/{carousel-1 => }/js/carouselItem.js (100%)
 rename examples/carousel/{carousel-1 => }/js/pauseButton.js (100%)

diff --git a/examples/carousel/carousel-1/carousel-1.html b/examples/carousel/carousel-1.html
similarity index 87%
rename from examples/carousel/carousel-1/carousel-1.html
rename to examples/carousel/carousel-1.html
index 42a47fdfa6..9369dbffa9 100644
--- a/examples/carousel/carousel-1/carousel-1.html
+++ b/examples/carousel/carousel-1.html
@@ -6,13 +6,13 @@
 
     <!--  Core js and css shared by all examples; do not modify when using this template. -->
     <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
-    <link rel="stylesheet" href="../../css/core.css">
-    <script src="../../js/examples.js"></script>
-    <script src="../../js/highlight.pack.js"></script>
-    <script src="../../js/app.js"></script>
+    <link rel="stylesheet" href="../css/core.css">
+    <script src="../js/examples.js"></script>
+    <script src="../js/highlight.pack.js"></script>
+    <script src="../js/app.js"></script>
 
     <!--  js and css for this example. -->
-    <link rel="stylesheet" href="css/carousel.css">
+    <link rel="stylesheet" href="css/carousel-1.css">
     <script src="js/carousel.js" type="text/javascript"></script>
     <script src="js/carouselItem.js" type="text/javascript"></script>
     <script src="js/carouselButtons.js" type="text/javascript"></script>
@@ -22,10 +22,10 @@
   <body>
     <nav aria-label="Related Links" class="feedback">
       <ul>
-        <li><a href="../../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
+        <li><a href="../../#browser_and_AT_support">Browser and Assistive Technology Support</a></li>
         <li><a href="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
         <li><a href="https://github.com/w3c/aria-practices/projects/10">Related Issues</a></li>
-        <li><a href="../../../#carousel">Design Pattern</a></li>
+        <li><a href="../../#carousel">Design Pattern</a></li>
       </ul>
     </nav>
     <main>
@@ -51,54 +51,45 @@ <h2 id="ex_label">Example</h2>
 
               <div class="carousel-inner">
 
-                <button class="carousel-pause" aria-label="pause">
-                  <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                <div class="controls">
 
-                    <circle class="outer" cx="30" cy="30" r="28" stroke-width="1" stroke="black"/>
+                  <button class="rotation pause" aria-label="Stop automatic slide show">
+                    <svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                      <rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24"/>
+                      <rect class="border" x="4" y="4" rx="5" ry="5" width="34" height="20"/>
 
-                    <circle class="inner" cx="30" cy="30" r="25" stroke-width="4"/>
+                      <polygon class="pause" points="17 8 17 20"/>
 
-                    <polygon class="pause" points="23 18 23 40"
-                        stroke="white" fill="white" stroke-width="8" />
+                      <polygon class="pause" points="24 8 24 20"/>
 
-                    <polygon class="pause" points="37 18 37 40"
-                        stroke="white" fill="white" stroke-width="8" />
+                      <polygon class="play" points="15 8 15 20 27 14" />
 
-                    <polygon class="play" points="22 20 22 40 43 28"
-                        stroke="transparent" fill="transparent" stroke-width="2" />
+                    </svg>
+                  </button>
 
-                    <polygon class="disabled" points="15 15 19 15 45 45 42 45"
-                        stroke="transparent" fill="trasparent" stroke-width="1" />
 
-                    <polygon class="disabled" points="45 15 42 15 19 45 15 45"
-                        stroke="transparent" fill="trasparent" stroke-width="1" />
+                  <button class="previous"
+                     aria-controls="myCarousel-items"
+                     aria-label="Previous Slide">
+                    <svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                      <rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24"/>
+                      <rect class="border" x="4" y="4" rx="5" ry="5" width="34" height="20"/>
+                      <polygon points="9 14 21 8 21 11 33 11 33 17 21 17 21 20" />
+                    </svg>
+                  </button>
 
-                  </svg>
-                </button>
+                  <button class="next"
+                     aria-controls="myCarousel-items"
+                     aria-label="Next Slide">
+                    <svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
+                      <rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24"/>
+                      <rect class="border" x="4" y="4" rx="5" ry="5" width="34" height="20"/>
+                      <polygon points="9 11 21 11 21 8 33 14 21 20 21 17 9 17" />
+                    </svg>
+                  </button>
 
+                </div>
 
-                <button class="previous carousel-control"
-                   aria-controls="myCarousel-items"
-                   aria-label="Previous Slide">
-                  <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg">
-                    <circle class="outer" cx="30" cy="30" r="28" stroke-width="1" stroke="#005a9c"/>
-                    <circle class="inner" cx="30" cy="30" r="25" stroke="white" stroke-width="4" fill="black"/>
-                    <polygon points="40 18 40 42 15 30"
-                        stroke="white" fill="white" stroke-width="2"/>
-                  </svg>
-                </button>
-
-                <button class="next carousel-control"
-                   tabindex="0"
-                   aria-controls="myCarousel-items"
-                   aria-label="Next Slide">
-                  <svg width="60" height="60" version="1.1" xmlns="http://www.w3.org/2000/svg">
-                    <circle class="outer" cx="30" cy="30" r="28" stroke-width="1" stroke="#005a9c"/>
-                    <circle class="inner" cx="30" cy="30" r="25" stroke="white" stroke-width="4" fill="black"/>
-                    <polygon points="20 18 20 42 45 30"
-                        stroke="white" fill="white" stroke-width="2"/>
-                  </svg>
-                </button>
 
                 <div id="myCarousel-items" class="carousel-items" aria-live="off">
 
@@ -511,7 +502,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
       <section>
         <h2>Javascript and CSS Source Code</h2>
         <ul>
-          <li>CSS: <a href="css/carousel.css" type="text/css">carousel.css</a></li>
+          <li>CSS: <a href="css/carousel-1.css" type="text/css">carousel-1.css</a></li>
           <li>Javascript: <a href="js/carousel.js" type="text/javascript">carousel.js</a></li>
           <li>Javascript: <a href="js/carouselItem.js" type="text/javascript">carouselItem.js</a></li>
           <li>Javascript: <a href="js/carouselButtons.js" type="text/javascript">carouselButtons.js</a></li>
diff --git a/examples/carousel/carousel-1/css/carousel.css b/examples/carousel/carousel-1/css/carousel.css
deleted file mode 100644
index fb13731c8f..0000000000
--- a/examples/carousel/carousel-1/css/carousel.css
+++ /dev/null
@@ -1,251 +0,0 @@
-
-/* .carousel */
-.carousel-item {
-  display: none;
-  max-height: 400px;
-  max-width: 900px;
-  position: relative;
-  overflow: hidden;
-  width: 100%;
-}
-
-.carousel .carousel-item.active {
-  display: block;
-}
-
-/* More like bootstrap, less accessible */
-
-.carousel .carousel-inner {
-  max-width: 900px;
-  position: relative;
-}
-
-.carousel .carousel-items {
-  border: solid 2px transparent;
-}
-
-.carousel .carousel-items.focus {
-  border-color: white;
-  outline: solid 3px #005a9c;
-}
-
-.carousel .carousel-inner .carousel-image a img {
-  height: 100%;
-  width: 100%;
-}
-
-.carousel .carousel-inner .carousel-caption a {
-  text-decoration: underline;
-}
-
-.carousel .carousel-inner .carousel-caption a,
-.carousel .carousel-inner .carousel-caption span.contrast {
-  display: inline-block;
-  background-color: rgba(0, 0, 0, 0.65);
-  padding-left: 0.25em;
-  padding-right: 0.25em;
-  border-radius: 5px;
-  border: 2px solid transparent;
-  margin: 0;
-}
-
-.carousel .carousel-inner .carousel-caption h3 a {
-  color: #fff;
-  font-weight: 600;
-}
-
-.carousel .carousel-inner .carousel-caption a:hover,
-.carousel .carousel-inner .carousel-caption span.contrast:hover {
-  background-color: rgba(0, 0, 0, 1);
-  margin: 0;
-}
-
-.carousel .carousel-inner .carousel-caption a:focus {
-  background-color: rgba(0, 0, 0, 1);
-  border-color: #fff;
-  margin: 0;
-}
-
-.carousel .carousel-inner .carousel-caption p {
-  font-size: 1em;
-  line-height: 1.5;
-  margin-bottom: 0;
-}
-
-.carousel .carousel-inner .carousel-caption {
-  position: absolute;
-  right: 15%;
-  bottom: 0;
-  left: 15%;
-  padding-top: 20px;
-  padding-bottom: 20px;
-  color: #fff;
-  text-align: center;
-}
-
-.carousel .carousel-inner,
-.carousel .carousel-item,
-.carousel .carousel-slide {
-  max-height: 400px;
-}
-
-/* Next and Previous Slide Controls */
-
-.carousel .carousel-control {
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  z-index: 10;
-  background-color: transparent;
-  width: 15%;
-  border: none;
-}
-
-.carousel .carousel-control svg polygon {
-  opacity: 0.7;
-}
-
-.carousel .carousel-control svg circle {
-  opacity: 0;
-}
-
-.carousel .carousel-control.previous {
-  left: 0;
-}
-
-.carousel .carousel-control.next {
-  right: 0;
-}
-
-.carousel .carousel-control.previous:focus,
-.carousel .carousel-control.previous:hover {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.7) 0, rgba(0, 0, 0, 0.0001) 100%);
-  outline: none;
-}
-
-.carousel .carousel-control.next:focus,
-.carousel .carousel-control.next:hover {
-  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0, rgba(0, 0, 0, 0.7) 100%);
-  outline: none;
-}
-
-/* Pause Control */
-
-.carousel .carousel-pause {
-  position: absolute;
-  left: 45%;
-  z-index: 10;
-  background-color: transparent;
-  border: none;
-  outline: none;
-}
-
-.carousel .carousel-pause svg circle {
-  stroke: black;
-  opacity: 0.1;
-  fill: black;
-}
-
-.carousel .carousel-pause.pause svg polygon {
-  opacity: 0.7;
-}
-
-.carousel .carousel-pause.pause svg polygon.pause {
-  stroke: white;
-  fill: white;
-}
-
-.carousel .carousel-pause.pause svg polygon.play,
-.carousel .carousel-pause.pause svg polygon.disabled {
-  stroke: transparent;
-  fill: transparent;
-}
-
-.carousel .carousel-pause.play svg polygon.pause,
-.carousel .carousel-pause.play svg polygon.disabled {
-  stroke: transparent;
-  fill: transparent;
-}
-
-.carousel .carousel-pause.play svg polygon.play {
-  stroke: white;
-  fill: white;
-}
-
-.carousel .carousel-pause[aria-disabled=true] svg polygon.pause,
-.carousel .carousel-pause[aria-disabled=true] svg polygon.play {
-  opacity: 0.7;
-}
-
-.carousel .carousel-pause[aria-disabled=true] svg polygon.disabled {
-  stroke: white;
-  fill: white;
-}
-
-.carousel .carousel-pause[aria-disabled=true] svg circle.outer,
-.carousel .carousel-pause[aria-disabled=true] svg circle.inner {
-  opacity: 0.1;
-  stroke: black;
-  fill: black;
-}
-
-.carousel .carousel-pause[aria-disabled=true] svg polygon {
-  opacity: 0.7;
-}
-
-/* Common focus styling for svg buttons */
-
-.carousel .carousel-pause:focus svg polygon,
-.carousel .carousel-pause:hover svg polygon,
-.carousel .carousel-control:focus svg polygon,
-.carousel .carousel-control:hover svg polygon {
-  opacity: 1;
-  stroke: white;
-  fill: white;
-}
-
-.carousel .carousel-pause:focus svg circle.inner,
-.carousel .carousel-control:focus svg circle.inner {
-  stroke: white;
-  opacity: 1;
-  fill: #005a9c;
-}
-
-.carousel .carousel-pause:hover svg circle.outer,
-.carousel .carousel-pause:hover svg circle.inner,
-.carousel .carousel-control:hover svg circle.outer,
-.carousel .carousel-control:hover svg circle.inner {
-  stroke: #005a9c;
-  opacity: 1;
-  fill: #005a9c;
-}
-
-.carousel .carousel-pause:focus svg circle.outer,
-.carousel .carousel-pause:hover svg circle.outer,
-.carousel .carousel-control:focus svg circle.outer,
-.carousel .carousel-control:hover svg circle.outer,
-.carousel .carousel-pause[aria-disabled=true]:focus svg circle.outer,
-.carousel .carousel-pause[aria-disabled=true]:hover svg circle.outer {
-  stroke: #005a9c;
-  opacity: 1;
-}
-
-.carousel .carousel-pause[aria-disabled=true]:focus svg circle.inner {
-  stroke: white;
-  opacity: 1;
-  fill: #005a9c;
-}
-
-.carousel .carousel-pause[aria-disabled=true]:focus svg polygon.disabled,
-.carousel .carousel-pause[aria-disabled=true]:hover svg polygon.disabled {
-  opacity: 0.7;
-  stroke: white;
-  fill: white;
-}
-
-.carousel .carousel-pause[aria-disabled=true]:hover svg circle.outer,
-.carousel .carousel-pause[aria-disabled=true]:hover svg circle.inner {
-  stroke: #005a9c;
-  opacity: 0.7;
-  fill: #005a9c;
-}
diff --git a/examples/carousel/css/carousel-1.css b/examples/carousel/css/carousel-1.css
new file mode 100644
index 0000000000..9a4a52fdaf
--- /dev/null
+++ b/examples/carousel/css/carousel-1.css
@@ -0,0 +1,186 @@
+
+/* .carousel */
+.carousel-item {
+  display: none;
+  max-height: 400px;
+  max-width: 900px;
+  position: relative;
+  overflow: hidden;
+  width: 100%;
+}
+
+.carousel .carousel-item.active {
+  display: block;
+}
+
+/* More like bootstrap, less accessible */
+
+.carousel .carousel-inner {
+  max-width: 900px;
+  position: relative;
+}
+
+.carousel .carousel-items {
+  border: solid 2px transparent;
+}
+
+.carousel .carousel-items.focus {
+  border-color: white;
+  outline: solid 3px #005a9c;
+}
+
+.carousel .carousel-inner .carousel-image a img {
+  height: 100%;
+  width: 100%;
+}
+
+.carousel .carousel-inner .carousel-caption a {
+  text-decoration: underline;
+}
+
+.carousel .carousel-inner .carousel-caption a,
+.carousel .carousel-inner .carousel-caption span.contrast {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.65);
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+  border-radius: 5px;
+  border: 2px solid transparent;
+  margin: 0;
+}
+
+.carousel .carousel-inner .carousel-caption h3 a {
+  color: #fff;
+  font-weight: 600;
+}
+
+.carousel .carousel-inner .carousel-caption a:hover,
+.carousel .carousel-inner .carousel-caption span.contrast:hover {
+  background-color: rgba(0, 0, 0, 1);
+  margin: 0;
+}
+
+.carousel .carousel-inner .carousel-caption a:focus {
+  background-color: rgba(0, 0, 0, 1);
+  border-color: #fff;
+  margin: 0;
+}
+
+.carousel .carousel-inner .carousel-caption p {
+  font-size: 1em;
+  line-height: 1.5;
+  margin-bottom: 0;
+}
+
+.carousel .carousel-inner .carousel-caption {
+  position: absolute;
+  right: 15%;
+  bottom: 0;
+  left: 15%;
+  padding-top: 20px;
+  padding-bottom: 20px;
+  color: #fff;
+  text-align: center;
+}
+
+.carousel .carousel-inner,
+.carousel .carousel-item,
+.carousel .carousel-slide {
+  max-height: 400px;
+}
+
+/* Shared CSS for Pause, Next and Previous Slide Controls */
+
+.carousel .controls button {
+  padding: 0;
+  position: absolute;
+  top: 5px;
+  z-index: 10;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.carousel .controls button svg rect.background {
+  stroke: black;
+  fill: black;
+  stroke-width: 1px;
+  opacity: 0.6;
+}
+
+.carousel .controls button svg rect.border {
+  fill: transparent;
+  stroke: transparent;
+  stroke-width: 2px;
+}
+
+.carousel .controls button[aria-disabled=true] svg rect.background,
+.carousel .controls button[aria-disabled=true] svg rect.border {
+  opacity: 1;
+  stroke: #555;
+  fill: #555;
+}
+
+/* Next and Previous Slide Controls */
+
+.carousel .controls button svg polygon {
+  stroke: white;
+  fill: white;
+  stroke-width: 2;
+  opacity: 1.0;
+}
+
+.carousel .controls button.previous {
+  right: 50px;
+}
+
+.carousel .controls button.next {
+  right: 6px;
+}
+
+/* Pause Control */
+
+.carousel .controls button.rotation {
+  left: 6px;
+}
+
+.carousel .controls button.rotation svg polygon.pause {
+  stroke-width: 4;
+  fill: transparent;
+  stroke: transparent;
+}
+
+.carousel .controls button.rotation svg polygon.play {
+  stroke-width: 1;
+  fill: transparent;
+  stroke: transparent;
+}
+
+.carousel .controls button.rotation.pause svg polygon.pause,
+.carousel .controls button.rotation.play svg polygon.play {
+  fill: white;
+  stroke: white;
+}
+
+.carousel .controls button.rotation.pause[aria-disabled=true] svg polygon.pause,
+.carousel .controls button.rotation.play[aria-disabled=true] svg polygon.play {
+  fill: #ddd;
+  stroke: #ddd;
+}
+
+/* Common focus styling for svg buttons */
+
+.carousel .controls button:focus rect.background,
+.carousel .controls button:hover rect.background,
+.carousel .controls button:focus rect.border,
+.carousel .controls button:hover rect.border {
+  fill: #005a9c;
+  stroke: #005a9c;
+  opacity: 1.0;
+}
+
+.carousel .controls button:focus rect.border,
+.carousel .controls button[aria-disabled=true]:focus rect.border {
+  stroke: white;
+}
+
diff --git a/examples/carousel/carousel-1/images/amsterdamslide__800x600.jpg b/examples/carousel/images/amsterdamslide__800x600.jpg
similarity index 100%
rename from examples/carousel/carousel-1/images/amsterdamslide__800x600.jpg
rename to examples/carousel/images/amsterdamslide__800x600.jpg
diff --git a/examples/carousel/carousel-1/images/britcomdavidslide__800x600.jpg b/examples/carousel/images/britcomdavidslide__800x600.jpg
similarity index 100%
rename from examples/carousel/carousel-1/images/britcomdavidslide__800x600.jpg
rename to examples/carousel/images/britcomdavidslide__800x600.jpg
diff --git a/examples/carousel/carousel-1/images/foyleswarslide__800x600.jpg b/examples/carousel/images/foyleswarslide__800x600.jpg
similarity index 100%
rename from examples/carousel/carousel-1/images/foyleswarslide__800x600.jpg
rename to examples/carousel/images/foyleswarslide__800x600.jpg
diff --git a/examples/carousel/carousel-1/images/lands-endslide__800x600.jpg b/examples/carousel/images/lands-endslide__800x600.jpg
similarity index 100%
rename from examples/carousel/carousel-1/images/lands-endslide__800x600.jpg
rename to examples/carousel/images/lands-endslide__800x600.jpg
diff --git a/examples/carousel/carousel-1/images/mag800-2__800x600.jpg b/examples/carousel/images/mag800-2__800x600.jpg
similarity index 100%
rename from examples/carousel/carousel-1/images/mag800-2__800x600.jpg
rename to examples/carousel/images/mag800-2__800x600.jpg
diff --git a/examples/carousel/carousel-1/images/trustslide-2__800x600.jpg b/examples/carousel/images/trustslide-2__800x600.jpg
similarity index 100%
rename from examples/carousel/carousel-1/images/trustslide-2__800x600.jpg
rename to examples/carousel/images/trustslide-2__800x600.jpg
diff --git a/examples/carousel/carousel-1/js/carousel.js b/examples/carousel/js/carousel.js
similarity index 86%
rename from examples/carousel/carousel-1/js/carousel.js
rename to examples/carousel/js/carousel.js
index 757b737745..05e12330c6 100644
--- a/examples/carousel/carousel-1/js/carousel.js
+++ b/examples/carousel/js/carousel.js
@@ -34,12 +34,14 @@ var Carousel = function (domNode) {
 
 Carousel.prototype.init = function () {
 
+  var elems, elem, button, items, item, imageLinks, i;
+
   this.liveRegionNode = this.domNode.querySelector('.carousel-items');
 
-  var items = this.domNode.querySelectorAll('.carousel-item');
+  items = this.domNode.querySelectorAll('.carousel-item');
 
-  for (var i = 0; i < items.length; i++) {
-    var item = new CarouselItem(items[i], this);
+  for (i = 0; i < items.length; i++) {
+    item = new CarouselItem(items[i], this);
 
     item.init();
     this.items.push(item);
@@ -50,7 +52,7 @@ Carousel.prototype.init = function () {
     }
     this.lastItem = item;
 
-    var imageLinks = items[i].querySelectorAll('.carousel-image a');
+    imageLinks = items[i].querySelectorAll('.carousel-image a');
 
     if (imageLinks && imageLinks[0]) {
       imageLinks[0].addEventListener('focus', this.handleImageLinkFocus.bind(this));
@@ -59,25 +61,28 @@ Carousel.prototype.init = function () {
 
   }
 
-  // Next Slide and Previous Slide Buttons
+  // Pause, Next Slide and Previous Slide Buttons
 
-  var elems = document.querySelectorAll('.carousel .carousel-control');
+  elems = document.querySelectorAll('.carousel .controls button');
 
-  for (var i = 0; i < elems.length; i++) {
-    var button = new CarouselButton(elems[i], this);
-    button.init();
-  }
+  for (i = 0; i < elems.length; i++) {
+    elem = elems[i];
 
-  this.currentItem = this.firstItem;
+    if (elem.classList.contains('rotation')) {
+      button = new PauseButton(elem, this);
+      this.pauseButton = elem;
+      this.pauseButton.classList.add('pause');
+      this.pauseButton.setAttribute('aria-label', this.pauseLabel);
+    }
+    else {
+      button = new CarouselButton(elem, this);
+    }
 
-  this.pauseButton = this.domNode.parentNode.parentNode.querySelector('button.carousel-pause');
-  if (this.pauseButton) {
-    var button = new PauseButton(this.pauseButton, this);
     button.init();
-    this.pauseButton.setAttribute('aria-label', this.pauseLabel);
-    this.pauseButton.classList.add('pause');
   }
 
+  this.currentItem = this.firstItem;
+
   this.domNode.addEventListener('mouseover', this.handleMouseOver.bind(this));
   this.domNode.addEventListener('mouseout', this.handleMouseOut.bind(this));
 
diff --git a/examples/carousel/carousel-1/js/carouselButtons.js b/examples/carousel/js/carouselButtons.js
similarity index 100%
rename from examples/carousel/carousel-1/js/carouselButtons.js
rename to examples/carousel/js/carouselButtons.js
diff --git a/examples/carousel/carousel-1/js/carouselItem.js b/examples/carousel/js/carouselItem.js
similarity index 100%
rename from examples/carousel/carousel-1/js/carouselItem.js
rename to examples/carousel/js/carouselItem.js
diff --git a/examples/carousel/carousel-1/js/pauseButton.js b/examples/carousel/js/pauseButton.js
similarity index 100%
rename from examples/carousel/carousel-1/js/pauseButton.js
rename to examples/carousel/js/pauseButton.js

From b6c21274e3de877daab198cece49b773dea902f8 Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Mon, 13 May 2019 20:20:54 -0500
Subject: [PATCH 08/20] updated carousel documentation

---
 examples/carousel/carousel-1.html | 55 +++++++++++++++++--------------
 1 file changed, 30 insertions(+), 25 deletions(-)

diff --git a/examples/carousel/carousel-1.html b/examples/carousel/carousel-1.html
index 9369dbffa9..609f964bd8 100644
--- a/examples/carousel/carousel-1.html
+++ b/examples/carousel/carousel-1.html
@@ -238,36 +238,41 @@ <h3>
 
       <section>
         <h2>Accessibility Features</h2>
+
+        <h3>Pausing Automatic Slide Rotation</h3>
+        <p>Pausing the automatic rotation of slides is important for people using screen readeers, since moving the reading cursor into the auto-rotating content will be disorienting.   When the cursor is in content that is unexpectantly hidden the screen reader moves the reading cursor back to the top of the page.   This sudden jump will be difficult for the screen reader user to understand.   People with low vision and leanring disabilities that effect visual processing or reading also benefit from being able to stop the rotation of the images by giving them more time and control to explore the image and read the slide captions.</p>
+
+        <p>The following features are included in this example to pause the rotation:</p>
+
         <ul>
-          <li>Automatic rotation of slides in the carousel can be easily controlled by any user.
+          <li>
+            Hovering the mouse over any carousel content pauses automatic rotation.
+            Automatic rotation resumes when the mouse moves away from the carousel unless another condition, such as keyboard focus,  that prevents rotation has been triggered.
+          </li>
+          <li>
+            Moving keyboard focus to any of the carousel content, including the next and previous slide elements, pauses automatic rotation.
+            Automatic rotation resumes when keyboard focus moves out of the carousel content unless another condition, such as mouse hover,  that prevents rotation has been triggered.
+          </li>
+          <li>The carousel also contains a rotation control button that can stop and start automatic rotation.
             <ul>
-              <li>
-                Hovering the mouse over any carousel content pauses automatic rotation.
-                Automatic rotation resumes when the mouse moves away from the carousel unless another condition, such as keyboard focus,  that prevents rotation has been triggered.
-              </li>
-              <li>
-                Moving keyboard focus to any of the carousel content, including the next and previous slide elements, pauses automatic rotation.
-                Automatic rotation resumes when keyboard focus moves out of the carousel content unless another condition, such as mouse hover,  that prevents rotation has been triggered.
-              </li>
-              <li>The carousel also contains a rotation control button that can stop and start automatic rotation.
-                <ul>
-                  <li>The rotation control button is the first element in the screen reader reading order.</li>
-                  <li>The button is hidden off-screen when it does not have keyboard focus, and becomes visible when users move focus to it with <kbd>Tab</kbd>.</li>
-                  <li>
-                    When not visible, the button is positioned off-screen, instead of being hidden with <code>display:none</code>, so it is always available to screen reader users.
-                    This ensures the rotation control is accessible to people using a screen reader that does not move the mouse or keyboard focus when the user is moving its reading cursor.
-                  </li>
-                  <li>If the carousel is rotating, the button is labeled "Stop Automatic Slide Show," informing screen reader users that the slides are changing in addition to providing a way to stop the changes.</li>
-                  <li>If the carousel is not rotating, the button is labeled "Start Automatic Slide Show."</li>
-                  <li>If a user has activated the button to stop the show, the rotation will only restart if the button is activated. Moving keyboard focus or the mouse out of the carousel will not restart rotation.</li>
-                  <li>If keyboard focus is inside the carousel, or if the mouse is hovering over the carousel, the button is disabled; it cannot be used to start rotation.</li>
-                </ul>
-              </li>
+              <li>The rotation control button is the first element in the screen reader reading order.</li>
+              <li>The pause button is always visible so sighted users can also benefit from stoping the auto-rotation of images.</li>
+              <li>If the carousel is rotating, the button is labeled "Stop Automatic Slide Show," informing screen reader users that the slides are changing in addition to providing a way to stop the changes.</li>
+              <li>If the carousel is not rotating, the button is labeled "Start Automatic Slide Show."</li>
+              <li>If a user has activated the button to stop the show, the rotation will only restart if the button is activated. Moving keyboard focus or the mouse out of the carousel will not restart rotation.</li>
+              <li>If keyboard focus is inside the carousel, or if the mouse is hovering over the carousel, the button is disabled; it cannot be used to start rotation.</li>
             </ul>
           </li>
+        </ul>
+
+        <h3>Color Contrast of Text and Rotation Controls</h3>
+
+        <ul>
+          <li>
+            To improve the identification of the pause, next and previous slide buttons when they are visually rendered over the carousel images, the buttons have forground and background color that meet the WCAG 2.1 color contrast requirements.  SVG images are user to make the focus styling highly visible when a control receives keyboard focus.
+          </li>
           <li>
-            To improve readability of the caption text and content, the transparency of the caption area is decreased when the mouse hovers over the carousel content.
-            This improves the color contrast ratio of the white text, especially when light colored images are present in the background.
+            To improve readability of the caption text and content, the transparency of the caption area is decreased to to meet the WCAG 2.1 color contrast requirements.
           </li>
         </ul>
       </section>

From d8899a35c0da81818943c11fdd5e865dd2442506 Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Fri, 21 Jun 2019 16:20:56 -0500
Subject: [PATCH 09/20]  added view with controls outside the image

---
 examples/carousel/carousel-1.html             |  23 +-
 .../css/carousel-1-more-accessible.css        | 203 ++++++++++++++++++
 examples/carousel/css/carousel-1.css          |  38 ++--
 3 files changed, 239 insertions(+), 25 deletions(-)
 create mode 100644 examples/carousel/css/carousel-1-more-accessible.css

diff --git a/examples/carousel/carousel-1.html b/examples/carousel/carousel-1.html
index 609f964bd8..c07e05d20f 100644
--- a/examples/carousel/carousel-1.html
+++ b/examples/carousel/carousel-1.html
@@ -12,7 +12,15 @@
     <script src="../js/app.js"></script>
 
     <!--  js and css for this example. -->
-    <link rel="stylesheet" href="css/carousel-1.css">
+    <script type="text/javascript">
+      var stylesheet = 'css/carousel-1.css';
+      if (location.href.indexOf('moreaccessible') > 0) {
+        console.log('loaded more accessible');
+        stylesheet = 'css/carousel-1-more-accessible.css';
+      }
+      document.write('<link rel="stylesheet" type="text/css" href="' + stylesheet + '">')
+    </script>
+
     <script src="js/carousel.js" type="text/javascript"></script>
     <script src="js/carouselItem.js" type="text/javascript"></script>
     <script src="js/carouselButtons.js" type="text/javascript"></script>
@@ -43,17 +51,26 @@ <h1>Auto-Rotating Image Carousel Example</h1>
         The accessibility features section that follows the example describes these features in detail.
       </p>
 
+      <section>
+        <h2>Rendering Options</h2>
+        <ul>
+          <li><a href="carousel-1.html">Carousel controls and captions over image</a>, this option is not as accessible since the controls are more difficult to find and the captions are more difficult to read when they are over the rotating images.</li>
+          <li><a href="carousel-1.html?moreaccessible">Carousel controls and captions above and below the image</a>, this option is the preferred method since the controls are easier to find and the captions are easier to read.</li>
+        </ul>
+      </section>
+
       <section>
         <h2 id="ex_label">Example</h2>
         <div role="separator" id="ex_start_sep" aria-labelledby="ex_start_sep ex_label" aria-label="Start of"></div>
         <div id="ex1">
-            <section id="myCarousel" class="carousel slide" aria-roledescription="carousel" aria-label="Highlighted television shows">
+            <section id="myCarousel" class="carousel" aria-roledescription="carousel" aria-label="Highlighted television shows">
 
               <div class="carousel-inner">
 
                 <div class="controls">
 
-                  <button class="rotation pause" aria-label="Stop automatic slide show">
+                  <button class="rotation pause"
+                          aria-label="Stop automatic slide show">
                     <svg width="42" height="34" version="1.1" xmlns="http://www.w3.org/2000/svg">
                       <rect class="background" x="2" y="2" rx="5" ry="5" width="38" height="24"/>
                       <rect class="border" x="4" y="4" rx="5" ry="5" width="34" height="20"/>
diff --git a/examples/carousel/css/carousel-1-more-accessible.css b/examples/carousel/css/carousel-1-more-accessible.css
new file mode 100644
index 0000000000..2c4cef6b0b
--- /dev/null
+++ b/examples/carousel/css/carousel-1-more-accessible.css
@@ -0,0 +1,203 @@
+/* .carousel */
+
+.carousel .carousel-inner {
+  display: static;
+}
+
+.carousel .carousel-item {
+  display: none;
+  max-width: 900px;
+  width: 100%;
+}
+
+.carousel .carousel-item.active {
+  display: block;
+}
+
+
+/* More like bootstrap, less accessible */
+
+
+/* Shared CSS for Pause, Next and Previous Slide Controls */
+
+.carousel .controls {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+  position: relative;
+  height: 36px;
+  background-color: #EEE;
+  border: 4px solid #EEE;
+  border-radius: 5px 5px 0 0;
+}
+
+.carousel .controls button {
+  position: absolute;
+  top: 6px;
+  display: block;
+  background-color: transparent;
+  border: none;
+  outline: none;
+}
+
+.carousel .controls button.previous {
+  right: 58px;
+}
+
+.carousel .controls button.next {
+  right: 4px;
+}
+
+.carousel .controls button.rotation {
+  left: 4px;
+}
+
+.carousel .controls button svg rect.background {
+  stroke: black;
+  fill: black;
+  stroke-width: 1px;
+  opacity: 0.8;
+}
+
+.carousel .controls button svg rect.border {
+  fill: transparent;
+  stroke: transparent;
+  stroke-width: 2px;
+}
+
+.carousel .controls button[aria-disabled=true] svg rect.background,
+.carousel .controls button[aria-disabled=true] svg rect.border {
+  opacity: 1;
+  stroke: #555;
+  fill: #555;
+}
+
+/* Next and Previous Slide Controls */
+
+.carousel .controls button svg polygon {
+  stroke: white;
+  fill: white;
+  stroke-width: 2;
+  opacity: 1.0;
+}
+
+.carousel .controls button.rotation svg polygon.pause {
+  stroke-width: 4;
+  fill: transparent;
+  stroke: transparent;
+}
+
+.carousel .controls button.rotation svg polygon.play {
+  stroke-width: 1;
+  fill: transparent;
+  stroke: transparent;
+}
+
+.carousel .controls button.rotation.pause svg polygon.pause,
+.carousel .controls button.rotation.play svg polygon.play {
+  fill: white;
+  stroke: white;
+}
+
+.carousel .controls button.rotation.pause[aria-disabled=true] svg polygon.pause,
+.carousel .controls button.rotation.play[aria-disabled=true] svg polygon.play {
+  fill: #ddd;
+  stroke: #ddd;
+}
+
+/* Common focus styling for svg buttons */
+
+.carousel .controls button:focus rect.background,
+.carousel .controls button:hover rect.background,
+.carousel .controls button:focus rect.border,
+.carousel .controls button:hover rect.border {
+  fill: #005a9c;
+  stroke: #005a9c;
+  opacity: 1.0;
+}
+
+.carousel .controls button:focus rect.border,
+.carousel .controls button[aria-disabled=true]:focus rect.border {
+  stroke: white;
+}
+
+/* Caption Positioning */
+
+.carousel .carousel-items {
+  width: 100%;
+  background-color: #EEE;
+  border: solid 4px #EEE;
+  border-radius: 0 0 5px 5px;
+
+}
+
+.carousel .carousel-items.focus {
+  border-color: #005a9c;
+}
+
+.carousel .carousel-item .carousel-image {
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.carousel .carousel-item .carousel-image a {
+  margin: 0;
+  padding: 0;
+}
+
+.carousel .carousel-item .carousel-image a img {
+  margin: 0;
+  padding: 0;
+  display: block;
+  overflow: hidden;
+  max-height: 100%;
+  max-width: 100%;
+}
+
+.carousel .carousel-item .carousel-caption {
+  margin: 0;
+  padding: 0.5em;
+  width: 100%;
+  height: 3em;
+  text-align: center;
+}
+
+.carousel .carousel-item .carousel-caption a {
+  display: inline-block;
+  background-color: rgba(0, 0, 0, 0.0);
+  padding-left: 0.25em;
+  padding-right: 0.25em;
+  padding-top: 0.125em;
+  padding-bottom: 0.125em;
+  border-radius: 5px;
+  border: 2px solid transparent;
+  margin: 0;
+  text-decoration: underline;
+}
+
+.carousel .carousel-item .carousel-caption h3 {
+  margin: 0;
+  padding: 0;
+  font-weight: bold;
+}
+
+.carousel .carousel-item .carousel-caption h3 a {
+  color: black;
+}
+
+.carousel .carousel-item .carousel-caption a:hover {
+  background-color: rgba(0, 0, 0, 0.1);
+}
+
+.carousel .carousel-item .carousel-caption a:focus {
+  border-color: #005a9c;
+  background-color: rgba(0, 0, 0, 0.1);
+  outline: none;
+}
+
+.carousel .carousel-item .carousel-caption p {
+  margin: 0;
+  padding: 0;
+}
+
diff --git a/examples/carousel/css/carousel-1.css b/examples/carousel/css/carousel-1.css
index 9a4a52fdaf..02b90dcbf9 100644
--- a/examples/carousel/css/carousel-1.css
+++ b/examples/carousel/css/carousel-1.css
@@ -1,6 +1,11 @@
 
 /* .carousel */
-.carousel-item {
+
+.carousel .carousel-inner {
+  position: relative;
+}
+
+.carousel .carousel-item {
   display: none;
   max-height: 400px;
   max-width: 900px;
@@ -15,11 +20,6 @@
 
 /* More like bootstrap, less accessible */
 
-.carousel .carousel-inner {
-  max-width: 900px;
-  position: relative;
-}
-
 .carousel .carousel-items {
   border: solid 2px transparent;
 }
@@ -29,17 +29,17 @@
   outline: solid 3px #005a9c;
 }
 
-.carousel .carousel-inner .carousel-image a img {
+.carousel .carousel-item .carousel-image a img {
   height: 100%;
   width: 100%;
 }
 
-.carousel .carousel-inner .carousel-caption a {
+.carousel .carousel-item .carousel-caption a {
   text-decoration: underline;
 }
 
-.carousel .carousel-inner .carousel-caption a,
-.carousel .carousel-inner .carousel-caption span.contrast {
+.carousel .carousel-item .carousel-caption a,
+.carousel .carousel-item .carousel-caption span.contrast {
   display: inline-block;
   background-color: rgba(0, 0, 0, 0.65);
   padding-left: 0.25em;
@@ -49,30 +49,30 @@
   margin: 0;
 }
 
-.carousel .carousel-inner .carousel-caption h3 a {
+.carousel .carousel-item .carousel-caption h3 a {
   color: #fff;
   font-weight: 600;
 }
 
-.carousel .carousel-inner .carousel-caption a:hover,
-.carousel .carousel-inner .carousel-caption span.contrast:hover {
+.carousel .carousel-item .carousel-caption a:hover,
+.carousel .carousel-item .carousel-caption span.contrast:hover {
   background-color: rgba(0, 0, 0, 1);
   margin: 0;
 }
 
-.carousel .carousel-inner .carousel-caption a:focus {
+.carousel .carousel-item .carousel-caption a:focus {
   background-color: rgba(0, 0, 0, 1);
   border-color: #fff;
   margin: 0;
 }
 
-.carousel .carousel-inner .carousel-caption p {
+.carousel .carousel-item .carousel-caption p {
   font-size: 1em;
   line-height: 1.5;
   margin-bottom: 0;
 }
 
-.carousel .carousel-inner .carousel-caption {
+.carousel .carousel-item .carousel-caption {
   position: absolute;
   right: 15%;
   bottom: 0;
@@ -83,11 +83,6 @@
   text-align: center;
 }
 
-.carousel .carousel-inner,
-.carousel .carousel-item,
-.carousel .carousel-slide {
-  max-height: 400px;
-}
 
 /* Shared CSS for Pause, Next and Previous Slide Controls */
 
@@ -183,4 +178,3 @@
 .carousel .controls button[aria-disabled=true]:focus rect.border {
   stroke: white;
 }
-

From a637155f4818e6a4966fe4b9a8170ae5f0e05d9c Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Fri, 21 Jun 2019 16:25:39 -0500
Subject: [PATCH 10/20]  updated documentation

---
 examples/carousel/carousel-1.html | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/examples/carousel/carousel-1.html b/examples/carousel/carousel-1.html
index c07e05d20f..422287856b 100644
--- a/examples/carousel/carousel-1.html
+++ b/examples/carousel/carousel-1.html
@@ -52,7 +52,7 @@ <h1>Auto-Rotating Image Carousel Example</h1>
       </p>
 
       <section>
-        <h2>Rendering Options</h2>
+        <h2>View Options</h2>
         <ul>
           <li><a href="carousel-1.html">Carousel controls and captions over image</a>, this option is not as accessible since the controls are more difficult to find and the captions are more difficult to read when they are over the rotating images.</li>
           <li><a href="carousel-1.html?moreaccessible">Carousel controls and captions above and below the image</a>, this option is the preferred method since the controls are easier to find and the captions are easier to read.</li>
@@ -284,6 +284,8 @@ <h3>Pausing Automatic Slide Rotation</h3>
 
         <h3>Color Contrast of Text and Rotation Controls</h3>
 
+        <p>In the view with the controls and captions on top of the image a major issue is color contrast with the controls and text with the image in the background.  The following was implemented for this view to meet WCAG 2.1 color contrast requirements:</p>
+
         <ul>
           <li>
             To improve the identification of the pause, next and previous slide buttons when they are visually rendered over the carousel images, the buttons have forground and background color that meet the WCAG 2.1 color contrast requirements.  SVG images are user to make the focus styling highly visible when a control receives keyboard focus.

From 4698b3e42d2b0bdb5f7cf25d9ef4b75e09326493 Mon Sep 17 00:00:00 2001
From: Valerie R Young <valerie@bocoup.com>
Date: Mon, 1 Jul 2019 18:09:28 -0400
Subject: [PATCH 11/20] Fix tests, add two attribute tests

---
 examples/carousel/carousel-1.html |  4 +-
 test/tests/carousel-1.js          | 79 +++++++++++++++++++++++--------
 2 files changed, 61 insertions(+), 22 deletions(-)

diff --git a/examples/carousel/carousel-1.html b/examples/carousel/carousel-1.html
index 422287856b..1cb4111eec 100644
--- a/examples/carousel/carousel-1.html
+++ b/examples/carousel/carousel-1.html
@@ -400,7 +400,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
               </td>
               <td>Provides a label that describes the content in the carousel region.</td>
             </tr>
-            <tr data-test-id="carousel-aria-live-off">
+            <tr data-test-id="carousel-aria-live">
                 <td></td>
                 <th scope="row">
                   <code>aria-live=<q>off</q></code>
@@ -416,7 +416,7 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   </ul>
                 </td>
               </tr>
-              <tr data-test-id="carousel-aria-live-polite">
+              <tr data-test-id="carousel-aria-live">
                 <td></td>
                 <th scope="row">
                   <code>aria-live=<q>polite</q></code>
diff --git a/test/tests/carousel-1.js b/test/tests/carousel-1.js
index f53c56f3fb..cb56f585e1 100644
--- a/test/tests/carousel-1.js
+++ b/test/tests/carousel-1.js
@@ -2,21 +2,20 @@
 
 const { ariaTest } = require('..');
 const { By, Key } = require('selenium-webdriver');
+const assertAttributeDNE = require('../util/assertAttributeDNE');
 const assertAttributeValues = require('../util/assertAttributeValues');
 const assertAriaControls = require('../util/assertAriaControls');
-const assertAriaLabelledby = require('../util/assertAriaLabelledby');
-const assertAriaDescribedby = require('../util/assertAriaDescribedby');
 const assertAriaLabelExists = require('../util/assertAriaLabelExists');
 const assertAriaRoles = require('../util/assertAriaRoles');
-const assertTabOrder = require('../util/assertTabOrder');
 
-
-const exampleFile = 'carousel/carousel-1/carousel-1.html';
+const exampleFile = 'carousel/carousel-1.html';
 
 const ex = {
   landmarkSelector: '#myCarousel',
   buttonSelector: '#ex1 button',
-  previousNextButtonSelector: '#ex1 .carousel-control',
+  pausePlayButtonSelector: '#ex1 button:first-of-type',
+  previousButtonSelector: '#ex1 .previous',
+  nextButtonSelector: '#ex1 .next',
   slideContainerSelector: '#ex1 .carousel-items',
   slideSelector: '#ex1 .carousel-item'
 };
@@ -24,49 +23,89 @@ const ex = {
 
 // Attributes
 
-ariaTest('Carousel 1: section has aria-label', exampleFile, 'carousel-region-role', async (t) => {
+ariaTest('section element used to contain slider', exampleFile, 'carousel-region-role', async (t) => {
   t.plan(1);
-  await assertAriaLabelExists(t, ex.landmarkSelector);
+
+  // This test primarially tests that the ex.landmarkSelector points to a `section` element
+  const landmarkEl = await t.context.session.findElement(By.css(ex.landmarkSelector));
+  t.is(
+    await landmarkEl.getTagName(),
+    'section',
+    ex.landmarkSelector + ' selector should select `section` element'
+  );
 });
 
-ariaTest('Carousel 1: section has aria-roledescription set to carousel', exampleFile, 'carousel-region-aria-roledescription', async (t) => {
+ariaTest('section has aria-roledescription set to carousel', exampleFile, 'carousel-region-aria-roledescription', async (t) => {
   t.plan(1);
 
   // check the aria-roledescrption set to carousel
   await assertAttributeValues(t, ex.landmarkSelector, 'aria-roledescription', 'carousel');
 });
 
-ariaTest('Carousel 1: pause, previous and next buttons have aria-label', exampleFile, 'carousel-button-aria-label', async (t) => {
+ariaTest('section has aria-label', exampleFile, 'carousel-region-aria-label', async (t) => {
   t.plan(1);
-  await assertAriaLabelExists(t, ex.buttonSelector);
+
+  await assertAriaLabelExists(t, ex.landmarkSelector);
 });
 
-ariaTest('Carousel 1: previous and next buttons have aria-controls', exampleFile, 'carousel-button-aria-controls', async (t) => {
-  t.plan(1);
-  await assertAriaControls(t, ex.previousNextButtonSelector);
+ariaTest('slide container have aria-live initially set to off', exampleFile, 'carousel-aria-live', async (t) => {
+  t.plan(4);
+
+  // On page load, `aria-level` is `off`
+  await assertAttributeValues(t, ex.slideContainerSelector, 'aria-live', 'off');
+
+  // Focus on the widget, and aria-selected should change to 'polite'
+  await t.context.session.findElement(By.css(ex.nextButtonSelector)).click();
+  await assertAttributeValues(t, ex.slideContainerSelector, 'aria-live', 'polite');
+
+  // Move focus off the widget, and the aria-selected should change to 'off' agains
+  await t.context.session.findElement(By.css('#ex_label')).click();
+  await assertAttributeValues(t, ex.slideContainerSelector, 'aria-live', 'off');
+
+  // Click the pause button, and the aria-selected should change to 'polite' again
+  await t.context.session.findElement(By.css(ex.pausePlayButtonSelector)).click();
+  await assertAttributeValues(t, ex.slideContainerSelector, 'aria-live', 'polite');
 });
 
-ariaTest('Carousel 1: slide container have aria-live initially set to off', exampleFile, 'carousel-group-aria-roledescription', async (t) => {
+ariaTest('pause, previous and next buttons have aria-label', exampleFile, 'carousel-button-aria-label', async (t) => {
   t.plan(1);
+  await assertAriaLabelExists(t, ex.buttonSelector);
+});
 
-  // check the aria-roledescrption set to carousel
-  await assertAttributeValues(t, ex.slideContainerSelector, 'aria-live', 'off');
+ariaTest('previous and next buttons have aria-controls', exampleFile, 'carousel-button-aria-controls', async (t) => {
+  t.plan(2);
+  await assertAriaControls(t, ex.previousButtonSelector);
+  await assertAriaControls(t, ex.nextButtonSelector);
 });
 
-ariaTest('Carousel 1: slides have role group', exampleFile, 'carousel-group-role', async (t) => {
+ariaTest('slides have role group', exampleFile, 'carousel-group-role', async (t) => {
   t.plan(1);
   await assertAriaRoles(t, 'myCarousel', 'group', 6, 'div');
 });
 
-ariaTest('Carousel 1: slides have aria-label', exampleFile, 'carousel-group-aria-label', async (t) => {
+ariaTest('slides have aria-label', exampleFile, 'carousel-group-aria-label', async (t) => {
   t.plan(1);
   await assertAriaLabelExists(t, ex.slideSelector);
 });
 
-ariaTest('Carousel 1: slides have aria-roledescription set to slide', exampleFile, 'carousel-group-aria-roledescription', async (t) => {
+ariaTest('slides have aria-roledescription set to slide', exampleFile, 'carousel-group-aria-roledescription', async (t) => {
   t.plan(1);
 
   // check the aria-roledescrption set to carousel
   await assertAttributeValues(t, ex.slideSelector, 'aria-roledescription', 'slide');
 });
 
+ariaTest('Pause button uses aria-disabled', exampleFile, 'carousel-button-start-disabled', async (t) => {
+  t.plan(3);
+
+  // On page load, `aria-disabled` is not present on pause button
+  await assertAttributeDNE(t, ex.pausePlayButtonSelector, 'aria-disabled');
+
+  // Focus on the widget, and aria-disabled should change to true
+  await t.context.session.findElement(By.css(ex.previousButtonSelector)).click();
+  await assertAttributeValues(t, ex.pausePlayButtonSelector, 'aria-disabled', 'true');
+
+  // Move to focus to pause button, and the aria-disabled should change to false
+  await t.context.session.findElement(By.css(ex.previousButtonSelector)).sendKeys(Key.chord(Key.SHIFT, Key.TAB));
+  await assertAttributeDNE(t, ex.pausePlayButtonSelector, 'aria-disabled');
+});

From 1506986cd57791455b78a662b8718966ce9df511 Mon Sep 17 00:00:00 2001
From: Valerie R Young <valerie@bocoup.com>
Date: Tue, 2 Jul 2019 12:18:08 -0400
Subject: [PATCH 12/20] Add remaining keyboard tests

---
 test/tests/carousel-1.js | 156 ++++++++++++++++++++++++++++++++++++++-
 1 file changed, 155 insertions(+), 1 deletion(-)

diff --git a/test/tests/carousel-1.js b/test/tests/carousel-1.js
index cb56f585e1..7a051ad538 100644
--- a/test/tests/carousel-1.js
+++ b/test/tests/carousel-1.js
@@ -7,6 +7,7 @@ const assertAttributeValues = require('../util/assertAttributeValues');
 const assertAriaControls = require('../util/assertAriaControls');
 const assertAriaLabelExists = require('../util/assertAriaLabelExists');
 const assertAriaRoles = require('../util/assertAriaRoles');
+const assertTabOrder = require('../util/assertTabOrder');
 
 const exampleFile = 'carousel/carousel-1.html';
 
@@ -17,7 +18,15 @@ const ex = {
   previousButtonSelector: '#ex1 .previous',
   nextButtonSelector: '#ex1 .next',
   slideContainerSelector: '#ex1 .carousel-items',
-  slideSelector: '#ex1 .carousel-item'
+  slideSelector: '#ex1 .carousel-item',
+  allFocusableItems: [
+    '#ex1 button:first-of-type',
+    '#ex1 .previous',
+    '#ex1 .next',
+    '#ex1 .active .carousel-image a',
+    '#ex1 .active .carousel-caption a'
+  ],
+  activeCarouselItem: '#ex1 .active'
 };
 
 
@@ -109,3 +118,148 @@ ariaTest('Pause button uses aria-disabled', exampleFile, 'carousel-button-start-
   await t.context.session.findElement(By.css(ex.previousButtonSelector)).sendKeys(Key.chord(Key.SHIFT, Key.TAB));
   await assertAttributeDNE(t, ex.pausePlayButtonSelector, 'aria-disabled');
 });
+
+// Keyboard interaction
+
+ariaTest('TAB moves key through buttons', exampleFile, 'carousel-key-tab', async (t) => {
+  t.plan(1);
+
+  await assertTabOrder(t, ex.allFocusableItems);
+});
+
+ariaTest('ENTER pause and start carousel motion', exampleFile, 'carousel-enter-or-space-toggle', async (t) => {
+  t.plan(2);
+
+  let activeElement = await t.context.session.findElement(By.css(ex.activeCarouselItem)).getAttribute('aria-label');
+
+  await t.context.session.findElement(By.css(ex.pausePlayButtonSelector)).sendKeys(Key.ENTER);
+  // Move focus from widget
+  await t.context.session.findElement(By.css(ex.pausePlayButtonSelector)).sendKeys(Key.chord(Key.SHIFT, Key.TAB));
+
+  let compareWithNextElement = await t.context.session.wait(async function () {
+    let newActiveElement = await t.context.session.findElement(By.css(ex.activeCarouselItem)).getAttribute('aria-label');
+    return activeElement === newActiveElement;
+  }, t.context.WaitTime);
+
+  t.true(
+    compareWithNextElement,
+    'The active elements should stay the same when the pause button has been sent ENTER'
+  );
+
+  await t.context.session.findElement(By.css(ex.pausePlayButtonSelector)).sendKeys(Key.ENTER);
+  // Move focus from widget
+  await t.context.session.findElement(By.css(ex.pausePlayButtonSelector)).sendKeys(Key.chord(Key.SHIFT, Key.TAB));
+
+  compareWithNextElement = await t.context.session.wait(async function () {
+    let newActiveElement = await t.context.session.findElement(By.css(ex.activeCarouselItem)).getAttribute('aria-label');
+    return activeElement !== newActiveElement;
+  }, t.context.WaitTime);
+
+  t.true(
+    compareWithNextElement,
+    'The active elements should change when the play button has been sent ENTER'
+  );
+
+});
+
+
+ariaTest('SPACE pause and start carousel motion', exampleFile, 'carousel-enter-or-space-toggle', async (t) => {
+  t.plan(2);
+
+  let activeElement = await t.context.session.findElement(By.css(ex.activeCarouselItem)).getAttribute('aria-label');
+
+  await t.context.session.findElement(By.css(ex.pausePlayButtonSelector)).sendKeys(Key.SPACE);
+  // Move focus from widget
+  await t.context.session.findElement(By.css(ex.pausePlayButtonSelector)).sendKeys(Key.chord(Key.SHIFT, Key.TAB));
+
+  let compareWithNextElement = await t.context.session.wait(async function () {
+    let newActiveElement = await t.context.session.findElement(By.css(ex.activeCarouselItem)).getAttribute('aria-label');
+    return activeElement === newActiveElement;
+  }, t.context.WaitTime);
+
+  t.true(
+    compareWithNextElement,
+    'The active elements should stay the same when the pause button has been sent SPACE'
+  );
+
+  await t.context.session.findElement(By.css(ex.pausePlayButtonSelector)).sendKeys(Key.SPACE);
+  // Move focus from widget
+  await t.context.session.findElement(By.css(ex.pausePlayButtonSelector)).sendKeys(Key.chord(Key.SHIFT, Key.TAB));
+
+  compareWithNextElement = await t.context.session.wait(async function () {
+    let newActiveElement = await t.context.session.findElement(By.css(ex.activeCarouselItem)).getAttribute('aria-label');
+    return activeElement !== newActiveElement;
+  }, t.context.WaitTime);
+
+  t.true(
+    compareWithNextElement,
+    'The active elements should change when the play button has been sent SPACE'
+  );
+});
+
+
+ariaTest('SPACE on previous and next', exampleFile, 'carousel-key-enter-or-space-move', async (t) => {
+  t.plan(2);
+
+  let activeElement = await t.context.session.findElement(By.css(ex.activeCarouselItem))
+    .getAttribute('aria-label');
+
+  await t.context.session.findElement(By.css(ex.previousButtonSelector)).sendKeys(Key.SPACE);
+
+  let compareWithNextElement = await t.context.session.wait(async function () {
+    let newActiveElement = await t.context.session.findElement(By.css(ex.activeCarouselItem))
+      .getAttribute('aria-label');
+    return activeElement !== newActiveElement;
+  }, t.context.WaitTime);
+
+  t.true(
+    compareWithNextElement,
+    'After sending SPACE to previous button, the carousel should show a different element'
+  );
+
+  await t.context.session.findElement(By.css(ex.nextButtonSelector)).sendKeys(Key.SPACE);
+
+  compareWithNextElement = await t.context.session.wait(async function () {
+    let newActiveElement = await t.context.session.findElement(By.css(ex.activeCarouselItem))
+      .getAttribute('aria-label');
+    return activeElement === newActiveElement;
+  }, t.context.WaitTime);
+
+  t.true(
+    compareWithNextElement,
+    'After sending SPACE to previous button then SPACE to next button, the carousel should show the first carousel item'
+  );
+});
+
+ariaTest('ENTER on previous and next', exampleFile, 'carousel-key-enter-or-space-move', async (t) => {
+  t.plan(2);
+
+  let activeElement = await t.context.session.findElement(By.css(ex.activeCarouselItem))
+    .getAttribute('aria-label');
+
+  await t.context.session.findElement(By.css(ex.previousButtonSelector)).sendKeys(Key.ENTER);
+
+  let compareWithNextElement = await t.context.session.wait(async function () {
+    let newActiveElement = await t.context.session.findElement(By.css(ex.activeCarouselItem))
+      .getAttribute('aria-label');
+    return activeElement !== newActiveElement;
+  }, t.context.WaitTime);
+
+  t.true(
+    compareWithNextElement,
+    'After sending ENTER to previous button, the carousel should show a different element'
+  );
+
+  await t.context.session.findElement(By.css(ex.nextButtonSelector)).sendKeys(Key.ENTER);
+
+  compareWithNextElement = await t.context.session.wait(async function () {
+    let newActiveElement = await t.context.session.findElement(By.css(ex.activeCarouselItem))
+      .getAttribute('aria-label');
+    return activeElement === newActiveElement;
+  }, t.context.WaitTime);
+
+  t.true(
+    compareWithNextElement,
+    'After sending ENTER to previous button then ENTER to next button, the carousel should show the first carousel item'
+  );
+});

From 72230ceb43b7763c41dc04ba816a336fc9efc591 Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Wed, 3 Jul 2019 13:19:02 -0500
Subject: [PATCH 13/20] fixed aria-live region update problem and changed group
 label to use 'current value is'

---
 examples/carousel/carousel-1.html             | 17 ----------
 .../css/carousel-1-more-accessible.css        | 34 +++++--------------
 examples/carousel/css/carousel-1.css          | 21 ++----------
 examples/carousel/js/carousel.js              | 23 ++++---------
 examples/carousel/js/pauseButton.js           |  4 +--
 5 files changed, 19 insertions(+), 80 deletions(-)

diff --git a/examples/carousel/carousel-1.html b/examples/carousel/carousel-1.html
index 1cb4111eec..6b151e7685 100644
--- a/examples/carousel/carousel-1.html
+++ b/examples/carousel/carousel-1.html
@@ -502,23 +502,6 @@ <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
                   </ul>
                 </td>
               </tr>
-            <tr data-test-id="carousel-button-start-disabled">
-                <td></td>
-                <th scope="row">
-                  <code>aria-disabled="true"</code>
-                </th>
-                <td>
-                  <code>button</code>
-                </td>
-                <td>
-                  <ul>
-                    <li>Applied to the automatic rotation control button when rotation is stopped and conditions that prevent automatic rotation are present.</li>
-                    <li>The button is disabled when a pointer is hovering over the carousel or any element in the carousel has keyboard focus.</li>
-                    <li>The <code>aria-disabled</code> state is used instead of the HTML <code>disabled</code> attribute to keep the button in the <kbd>Tab</kbd> sequence.</li>
-                    <li>If hover or focus is removed from the carousel, the <code>aria-disabled</code> attribute is removed from the button.</li>
-                  </ul>
-                </td>
-              </tr>
             </tbody>
           </table>
       </section>
diff --git a/examples/carousel/css/carousel-1-more-accessible.css b/examples/carousel/css/carousel-1-more-accessible.css
index 2c4cef6b0b..4342f03dd6 100644
--- a/examples/carousel/css/carousel-1-more-accessible.css
+++ b/examples/carousel/css/carousel-1-more-accessible.css
@@ -14,10 +14,8 @@
   display: block;
 }
 
-
 /* More like bootstrap, less accessible */
 
-
 /* Shared CSS for Pause, Next and Previous Slide Controls */
 
 .carousel .controls {
@@ -26,8 +24,8 @@
   width: 100%;
   position: relative;
   height: 36px;
-  background-color: #EEE;
-  border: 4px solid #EEE;
+  background-color: #eee;
+  border: 4px solid #eee;
   border-radius: 5px 5px 0 0;
 }
 
@@ -65,20 +63,13 @@
   stroke-width: 2px;
 }
 
-.carousel .controls button[aria-disabled=true] svg rect.background,
-.carousel .controls button[aria-disabled=true] svg rect.border {
-  opacity: 1;
-  stroke: #555;
-  fill: #555;
-}
-
 /* Next and Previous Slide Controls */
 
 .carousel .controls button svg polygon {
   stroke: white;
   fill: white;
   stroke-width: 2;
-  opacity: 1.0;
+  opacity: 1;
 }
 
 .carousel .controls button.rotation svg polygon.pause {
@@ -99,12 +90,6 @@
   stroke: white;
 }
 
-.carousel .controls button.rotation.pause[aria-disabled=true] svg polygon.pause,
-.carousel .controls button.rotation.play[aria-disabled=true] svg polygon.play {
-  fill: #ddd;
-  stroke: #ddd;
-}
-
 /* Common focus styling for svg buttons */
 
 .carousel .controls button:focus rect.background,
@@ -113,11 +98,10 @@
 .carousel .controls button:hover rect.border {
   fill: #005a9c;
   stroke: #005a9c;
-  opacity: 1.0;
+  opacity: 1;
 }
 
-.carousel .controls button:focus rect.border,
-.carousel .controls button[aria-disabled=true]:focus rect.border {
+.carousel .controls button:focus rect.border {
   stroke: white;
 }
 
@@ -125,10 +109,9 @@
 
 .carousel .carousel-items {
   width: 100%;
-  background-color: #EEE;
-  border: solid 4px #EEE;
+  background-color: #eee;
+  border: solid 4px #eee;
   border-radius: 0 0 5px 5px;
-
 }
 
 .carousel .carousel-items.focus {
@@ -165,7 +148,7 @@
 
 .carousel .carousel-item .carousel-caption a {
   display: inline-block;
-  background-color: rgba(0, 0, 0, 0.0);
+  background-color: rgba(0, 0, 0, 0);
   padding-left: 0.25em;
   padding-right: 0.25em;
   padding-top: 0.125em;
@@ -200,4 +183,3 @@
   margin: 0;
   padding: 0;
 }
-
diff --git a/examples/carousel/css/carousel-1.css b/examples/carousel/css/carousel-1.css
index 02b90dcbf9..735f61e3db 100644
--- a/examples/carousel/css/carousel-1.css
+++ b/examples/carousel/css/carousel-1.css
@@ -83,7 +83,6 @@
   text-align: center;
 }
 
-
 /* Shared CSS for Pause, Next and Previous Slide Controls */
 
 .carousel .controls button {
@@ -109,20 +108,13 @@
   stroke-width: 2px;
 }
 
-.carousel .controls button[aria-disabled=true] svg rect.background,
-.carousel .controls button[aria-disabled=true] svg rect.border {
-  opacity: 1;
-  stroke: #555;
-  fill: #555;
-}
-
 /* Next and Previous Slide Controls */
 
 .carousel .controls button svg polygon {
   stroke: white;
   fill: white;
   stroke-width: 2;
-  opacity: 1.0;
+  opacity: 1;
 }
 
 .carousel .controls button.previous {
@@ -157,12 +149,6 @@
   stroke: white;
 }
 
-.carousel .controls button.rotation.pause[aria-disabled=true] svg polygon.pause,
-.carousel .controls button.rotation.play[aria-disabled=true] svg polygon.play {
-  fill: #ddd;
-  stroke: #ddd;
-}
-
 /* Common focus styling for svg buttons */
 
 .carousel .controls button:focus rect.background,
@@ -171,10 +157,9 @@
 .carousel .controls button:hover rect.border {
   fill: #005a9c;
   stroke: #005a9c;
-  opacity: 1.0;
+  opacity: 1;
 }
 
-.carousel .controls button:focus rect.border,
-.carousel .controls button[aria-disabled=true]:focus rect.border {
+.carousel .controls button:focus rect.border {
   stroke: white;
 }
diff --git a/examples/carousel/js/carousel.js b/examples/carousel/js/carousel.js
index 05e12330c6..96e79aeaef 100644
--- a/examples/carousel/js/carousel.js
+++ b/examples/carousel/js/carousel.js
@@ -154,51 +154,42 @@ Carousel.prototype.rotateSlides = function () {
   setTimeout(this.rotateSlides.bind(this), this.timeInterval);
 };
 
-Carousel.prototype.updatePauseButtonDisabledState = function () {
-  if (this.hasHover || this.hasFocus) {
-    this.pauseButton.setAttribute('aria-disabled', 'true');
-  }
-  else {
-    this.pauseButton.removeAttribute('aria-disabled');
-  }
-};
-
 Carousel.prototype.updateRotation = function () {
 
   if (!this.hasHover && !this.hasFocus && !this.isStopped) {
     this.rotate = true;
+    this.liveRegionNode.setAttribute('aria-live', 'off');
   }
   else {
     this.rotate = false;
+    this.liveRegionNode.setAttribute('aria-live', 'polite');
   }
 
   if (this.isStopped) {
-    this.liveRegionNode.setAttribute('aria-live', 'off');
     this.pauseButton.setAttribute('aria-label', this.playLabel);
     this.pauseButton.classList.remove('pause');
     this.pauseButton.classList.add('play');
   }
   else {
-    this.liveRegionNode.setAttribute('aria-live', 'polite');
     this.pauseButton.setAttribute('aria-label', this.pauseLabel);
     this.pauseButton.classList.remove('play');
     this.pauseButton.classList.add('pause');
   }
 
-  this.updatePauseButtonDisabledState();
 };
 
 Carousel.prototype.toggleRotation = function () {
   if (this.isStopped) {
-    if (this.pauseButton.getAttribute('aria-disabled') !== 'true') {
+    if (!this.hasHover && !this.hasFocus) {
       this.isStopped = false;
-      this.updateRotation();
     }
   }
   else {
     this.isStopped = true;
-    this.updateRotation();
   }
+
+  this.updateRotation();
+
 };
 
 Carousel.prototype.handleImageLinkFocus = function () {
@@ -223,7 +214,7 @@ Carousel.prototype.handleMouseOut = function () {
 
 /* Initialize Carousel Tablists */
 
-window.addEventListener('load', function (event) {
+window.addEventListener('load', function () {
   var carousels = document.querySelectorAll('.carousel');
 
   for (var i = 0; i < carousels.length; i++) {
diff --git a/examples/carousel/js/pauseButton.js b/examples/carousel/js/pauseButton.js
index dfa6c78659..833e274307 100644
--- a/examples/carousel/js/pauseButton.js
+++ b/examples/carousel/js/pauseButton.js
@@ -17,8 +17,6 @@ PauseButton.prototype.init = function () {
 
 /* EVENT HANDLERS */
 
-PauseButton.prototype.handleClick = function (event) {
-  console.log('handleClick');
+PauseButton.prototype.handleClick = function () {
   this.carousel.toggleRotation();
 };
-

From 7703c5378de71d84c3de793f8201753b4f58772f Mon Sep 17 00:00:00 2001
From: Valerie R Young <valerie@bocoup.com>
Date: Mon, 8 Jul 2019 11:03:09 -0400
Subject: [PATCH 14/20] Fix tests from change in example

---
 test/tests/carousel-1.js | 21 ++++-----------------
 1 file changed, 4 insertions(+), 17 deletions(-)

diff --git a/test/tests/carousel-1.js b/test/tests/carousel-1.js
index 7a051ad538..b91632abfe 100644
--- a/test/tests/carousel-1.js
+++ b/test/tests/carousel-1.js
@@ -67,8 +67,10 @@ ariaTest('slide container have aria-live initially set to off', exampleFile, 'ca
   await t.context.session.findElement(By.css(ex.nextButtonSelector)).click();
   await assertAttributeValues(t, ex.slideContainerSelector, 'aria-live', 'polite');
 
-  // Move focus off the widget, and the aria-selected should change to 'off' agains
-  await t.context.session.findElement(By.css('#ex_label')).click();
+  // Move focus off the widget, and the aria-selected should change to 'off' again
+  await t.context.session.executeScript(function () {
+    return document.querySelector('a').focus();
+  });
   await assertAttributeValues(t, ex.slideContainerSelector, 'aria-live', 'off');
 
   // Click the pause button, and the aria-selected should change to 'polite' again
@@ -104,21 +106,6 @@ ariaTest('slides have aria-roledescription set to slide', exampleFile, 'carousel
   await assertAttributeValues(t, ex.slideSelector, 'aria-roledescription', 'slide');
 });
 
-ariaTest('Pause button uses aria-disabled', exampleFile, 'carousel-button-start-disabled', async (t) => {
-  t.plan(3);
-
-  // On page load, `aria-disabled` is not present on pause button
-  await assertAttributeDNE(t, ex.pausePlayButtonSelector, 'aria-disabled');
-
-  // Focus on the widget, and aria-disabled should change to true
-  await t.context.session.findElement(By.css(ex.previousButtonSelector)).click();
-  await assertAttributeValues(t, ex.pausePlayButtonSelector, 'aria-disabled', 'true');
-
-  // Move to focus to pause button, and the aria-disabled should change to false
-  await t.context.session.findElement(By.css(ex.previousButtonSelector)).sendKeys(Key.chord(Key.SHIFT, Key.TAB));
-  await assertAttributeDNE(t, ex.pausePlayButtonSelector, 'aria-disabled');
-});
-
 // Keyboard interaction
 
 ariaTest('TAB moves key through buttons', exampleFile, 'carousel-key-tab', async (t) => {

From e1e6af4566919131559f47a2f9fd90d53beaf7e3 Mon Sep 17 00:00:00 2001
From: Valerie R Young <valerie@bocoup.com>
Date: Mon, 8 Jul 2019 12:05:31 -0400
Subject: [PATCH 15/20] Fix flacky test

---
 test/tests/carousel-1.js | 8 ++++----
 1 file changed, 4 insertions(+), 4 deletions(-)

diff --git a/test/tests/carousel-1.js b/test/tests/carousel-1.js
index b91632abfe..6799670016 100644
--- a/test/tests/carousel-1.js
+++ b/test/tests/carousel-1.js
@@ -64,13 +64,13 @@ ariaTest('slide container have aria-live initially set to off', exampleFile, 'ca
   await assertAttributeValues(t, ex.slideContainerSelector, 'aria-live', 'off');
 
   // Focus on the widget, and aria-selected should change to 'polite'
-  await t.context.session.findElement(By.css(ex.nextButtonSelector)).click();
+  await t.context.session.findElement(By.css(ex.nextButtonSelector)).sendKeys(Key.ENTER);
+
   await assertAttributeValues(t, ex.slideContainerSelector, 'aria-live', 'polite');
 
   // Move focus off the widget, and the aria-selected should change to 'off' again
-  await t.context.session.executeScript(function () {
-    return document.querySelector('a').focus();
-  });
+  await t.context.session.findElement(By.css(ex.nextButtonSelector)).sendKeys(Key.chord(Key.SHIFT, Key.TAB));
+  await t.context.session.findElement(By.css(ex.pausePlayButtonSelector)).sendKeys(Key.chord(Key.SHIFT, Key.TAB));
   await assertAttributeValues(t, ex.slideContainerSelector, 'aria-live', 'off');
 
   // Click the pause button, and the aria-selected should change to 'polite' again

From ec03e04cc708f25dd074637581efe683c9cec4e4 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Wed, 10 Jul 2019 20:05:07 -0700
Subject: [PATCH 16/20] Remove link to feedback issue

---
 examples/carousel/carousel-1.html | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/examples/carousel/carousel-1.html b/examples/carousel/carousel-1.html
index 6b151e7685..2d4d5ff3be 100644
--- a/examples/carousel/carousel-1.html
+++ b/examples/carousel/carousel-1.html
@@ -38,11 +38,6 @@
     </nav>
     <main>
       <h1>Auto-Rotating Image Carousel Example</h1>
-      <p>
-        <strong>NOTE:</strong> This is a new example as of the January 2019 release of WAI-ARIA Authoring Practices 1.1.
-        Please provide feedback in
-        <a href="https://github.com/w3c/aria-practices/issues/971">issue 971.</a>
-      </p>
       <p>
         The following example implementation of the
         <a href="../../../#carousel">carousel design pattern</a>

From cf6cbc0b84dab2a7f5b7f5ddb1bc21c4f665c683 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Wed, 10 Jul 2019 20:15:27 -0700
Subject: [PATCH 17/20] Editorial revisions to introduction

---
 examples/carousel/carousel-1.html | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/examples/carousel/carousel-1.html b/examples/carousel/carousel-1.html
index 2d4d5ff3be..c0bcc095db 100644
--- a/examples/carousel/carousel-1.html
+++ b/examples/carousel/carousel-1.html
@@ -49,8 +49,8 @@ <h1>Auto-Rotating Image Carousel Example</h1>
       <section>
         <h2>View Options</h2>
         <ul>
-          <li><a href="carousel-1.html">Carousel controls and captions over image</a>, this option is not as accessible since the controls are more difficult to find and the captions are more difficult to read when they are over the rotating images.</li>
-          <li><a href="carousel-1.html?moreaccessible">Carousel controls and captions above and below the image</a>, this option is the preferred method since the controls are easier to find and the captions are easier to read.</li>
+          <li><a href="carousel-1.html">Carousel controls and captions displayed on image</a>: This option is less accessible than the other option because the controls are harder to perceive and captions are more difficult to read with rotating images behind them.</li>
+          <li><a href="carousel-1.html?moreaccessible">Carousel controls and captions displayed above and below the image</a>: This option is preferable because controls and captions are easier to perceive.</li>
         </ul>
       </section>
 

From a35dc8693d93b1b62b77e6d81a0102fbc602fbf3 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Wed, 10 Jul 2019 22:40:24 -0700
Subject: [PATCH 18/20] Editorial revisions to accessibility features, remove
 keyboard info about hiding rotation control.

---
 examples/carousel/carousel-1.html | 39 +++++++++++++++----------------
 1 file changed, 19 insertions(+), 20 deletions(-)

diff --git a/examples/carousel/carousel-1.html b/examples/carousel/carousel-1.html
index c0bcc095db..5bdf88e0e2 100644
--- a/examples/carousel/carousel-1.html
+++ b/examples/carousel/carousel-1.html
@@ -47,7 +47,7 @@ <h1>Auto-Rotating Image Carousel Example</h1>
       </p>
 
       <section>
-        <h2>View Options</h2>
+        <h2>Example View Options</h2>
         <ul>
           <li><a href="carousel-1.html">Carousel controls and captions displayed on image</a>: This option is less accessible than the other option because the controls are harder to perceive and captions are more difficult to read with rotating images behind them.</li>
           <li><a href="carousel-1.html?moreaccessible">Carousel controls and captions displayed above and below the image</a>: This option is preferable because controls and captions are easier to perceive.</li>
@@ -250,12 +250,14 @@ <h3>
 
       <section>
         <h2>Accessibility Features</h2>
-
-        <h3>Pausing Automatic Slide Rotation</h3>
-        <p>Pausing the automatic rotation of slides is important for people using screen readeers, since moving the reading cursor into the auto-rotating content will be disorienting.   When the cursor is in content that is unexpectantly hidden the screen reader moves the reading cursor back to the top of the page.   This sudden jump will be difficult for the screen reader user to understand.   People with low vision and leanring disabilities that effect visual processing or reading also benefit from being able to stop the rotation of the images by giving them more time and control to explore the image and read the slide captions.</p>
-
-        <p>The following features are included in this example to pause the rotation:</p>
-
+        <h3>Controlling Automatic Slide Rotation</h3>
+        <p>
+          Users can stop and start slide rotation, which is an essential aspect of accessibility of the carousel for a variety of people with disabilities.
+          People with low vision or a cognitive disability that effects visual processing or reading benefit from being able to control slide rotation so they have sufficient time to explore slide content.
+          Similarly, since screen reader users cannot perceive automatic rotation, it can make reading the page confusing and disorienting.
+          For example, when slides are automatically rotating, a screen reader user may read an element on slide one, execute a screen reader command to read the next element, and, instead of hearing the next element on slide one, hear an element from slide 2 without any knowledge that the element just announced is from an entirely new context.
+        </p>
+        <p>This example includes the following features for giving users control over slide rotation:</p>
         <ul>
           <li>
             Hovering the mouse over any carousel content pauses automatic rotation.
@@ -268,26 +270,25 @@ <h3>Pausing Automatic Slide Rotation</h3>
           <li>The carousel also contains a rotation control button that can stop and start automatic rotation.
             <ul>
               <li>The rotation control button is the first element in the screen reader reading order.</li>
-              <li>The pause button is always visible so sighted users can also benefit from stoping the auto-rotation of images.</li>
-              <li>If the carousel is rotating, the button is labeled "Stop Automatic Slide Show," informing screen reader users that the slides are changing in addition to providing a way to stop the changes.</li>
-              <li>If the carousel is not rotating, the button is labeled "Start Automatic Slide Show."</li>
+              <li>The rotation control button is always visible so it is available to all users whether they are interacting via a mouse, keyboard, assistive technology, or touch.</li>
+              <li>If the carousel is rotating, its accessible name is <q>Stop Automatic Slide Show</q>, informing screen reader users that the slides are changing in addition to providing a way to stop the changes.</li>
+              <li>If the carousel is not rotating, the accessible name of the button is <q>Start Automatic Slide Show</q>.</li>
               <li>If a user has activated the button to stop the show, the rotation will only restart if the button is activated. Moving keyboard focus or the mouse out of the carousel will not restart rotation.</li>
               <li>If keyboard focus is inside the carousel, or if the mouse is hovering over the carousel, the button is disabled; it cannot be used to start rotation.</li>
             </ul>
           </li>
         </ul>
-
         <h3>Color Contrast of Text and Rotation Controls</h3>
-
-        <p>In the view with the controls and captions on top of the image a major issue is color contrast with the controls and text with the image in the background.  The following was implemented for this view to meet WCAG 2.1 color contrast requirements:</p>
-
+        <p>
+          In the view of this carousel where the controls and captions are displayed on top of the image, the background images can cause color contrast for the controls and text to become insufficient.
+          This view includes the following features to meet WCAG 2.1 color contrast requirements:
+        </p>
         <ul>
           <li>
-            To improve the identification of the pause, next and previous slide buttons when they are visually rendered over the carousel images, the buttons have forground and background color that meet the WCAG 2.1 color contrast requirements.  SVG images are user to make the focus styling highly visible when a control receives keyboard focus.
-          </li>
-          <li>
-            To improve readability of the caption text and content, the transparency of the caption area is decreased to to meet the WCAG 2.1 color contrast requirements.
+            When the rotation control, next slide,  and previous slide buttons are rendered on top of the carousel images, the buttons have forground and background colors that meet WCAG 2.1 color contrast requirements.
+            In addition, the focus styling uses SVG images that make the focus indicator highly visible when a control receives keyboard focus.
           </li>
+          <li>The transparency of the caption area is decreased so the caption text meets the WCAG 2.1 color contrast requirements.</li>
         </ul>
       </section>
 
@@ -309,8 +310,6 @@ <h3 id="kbd_label_2">Rotation Control Button</h3>
                   <ul>
                     <li>Moves focus through interactive elements in the carousel.</li>
                     <li>Rotation control, previous slide, and next slide buttons precede the slide content in the <kbd>Tab</kbd> sequence.</li>
-                    <li>The rotation control button moves on screen when it receives keyboard focus and off screen when it is not focused.</li>
-                    <li>Off-screen positioning allows it to be available to screen reader users when not focused.</li>
                   </ul>
                 </td>
               </tr>

From 8044e13d30daf0c7b9cdc806571fbe7d1c708e5f Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Wed, 10 Jul 2019 22:53:23 -0700
Subject: [PATCH 19/20] Add live region information to accessibility features
 section.

---
 examples/carousel/carousel-1.html | 8 ++++++++
 1 file changed, 8 insertions(+)

diff --git a/examples/carousel/carousel-1.html b/examples/carousel/carousel-1.html
index 5bdf88e0e2..7e187f87e6 100644
--- a/examples/carousel/carousel-1.html
+++ b/examples/carousel/carousel-1.html
@@ -290,6 +290,14 @@ <h3>Color Contrast of Text and Rotation Controls</h3>
           </li>
           <li>The transparency of the caption area is decreased so the caption text meets the WCAG 2.1 color contrast requirements.</li>
         </ul>
+        <h3>Screen Reader Announcement of Slide Changes</h3>
+        <p>
+          When automatic rotation is turned off, the carousel slide content is included in a live region.
+          This makes it easier for screen reader users to scan through the carousel slides.
+          When screen reader users activate the next or previous slide button , the new slide content is announced, giving users immediate feedback that helps them determine whether or not to interact with the content.
+          Very importantly, if automatic rotation is turned on, the live region is disabled.
+          If it were not, the page would be come unusable as announcements of the continuously changing content constantly interrupt anything else the user is reading.
+        </p>
       </section>
 
       <section>

From 0611f090550daa082ed468bfea05cf14efd160f7 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Wed, 10 Jul 2019 22:58:40 -0700
Subject: [PATCH 20/20] Remove feedback link from carousel pattern section.

---
 aria-practices.html | 5 -----
 1 file changed, 5 deletions(-)

diff --git a/aria-practices.html b/aria-practices.html
index c826b0c267..e092a5f010 100644
--- a/aria-practices.html
+++ b/aria-practices.html
@@ -480,11 +480,6 @@ <h4>WAI-ARIA Roles, States, and Properties</h4>
 
     <section class="widget" id="carousel">
       <h3>Carousel (Slide Show or Image Rotator)</h3>
-      <p>
-        <strong>NOTE:</strong> This is a new pattern as of the January 2019 release of WAI-ARIA Authoring Practices 1.1.
-        Please provide feedback in
-        <a href="https://github.com/w3c/aria-practices/issues/970">issue 970.</a>
-      </p>
       <p>
         A carousel presents a set of items, referred to as slides, by sequentially displaying a subset of one or more slides.
         Typically, one slide is displayed at a time, and users can activate a next or previous slide control that hides the current slide and &quot;rotates&quot; the next or previous slide into view.