From 10a8f125e098093049147437f3d93a108e58016b Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Mon, 30 Mar 2020 15:25:38 -0500
Subject: [PATCH 01/46] updated datepicker dialog example

---
 .../dialog-modal/css/datepicker-dialog.css    | 229 +++++
 examples/dialog-modal/css/datepicker.css      | 198 -----
 examples/dialog-modal/datepicker-dialog.html  | 143 +--
 examples/dialog-modal/js/calendar-button.js   | 110 ---
 examples/dialog-modal/js/datepicker-day.js    | 174 ----
 examples/dialog-modal/js/datepicker-dialog.js | 839 ++++++++++++++++++
 examples/dialog-modal/js/datepicker.js        | 579 ------------
 7 files changed, 1140 insertions(+), 1132 deletions(-)
 create mode 100644 examples/dialog-modal/css/datepicker-dialog.css
 delete mode 100644 examples/dialog-modal/css/datepicker.css
 delete mode 100644 examples/dialog-modal/js/calendar-button.js
 delete mode 100644 examples/dialog-modal/js/datepicker-day.js
 create mode 100644 examples/dialog-modal/js/datepicker-dialog.js
 delete mode 100644 examples/dialog-modal/js/datepicker.js

diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
new file mode 100644
index 0000000000..507a08d94e
--- /dev/null
+++ b/examples/dialog-modal/css/datepicker-dialog.css
@@ -0,0 +1,229 @@
+.datepicker {
+  margin-top: 1em;
+  position: relative;
+}
+
+.datepicker .group {
+  display: inline-flex;
+}
+
+.datepicker label {
+  display: block;
+}
+
+.datepicker input,
+.datepicker button {
+  background-color: white;
+  color: black;
+  box-sizing: border-box;
+  height: 1.75rem;
+  padding: 0;
+  margin: 0;
+  vertical-align: bottom;
+  border: 1px solid gray;
+  position: relative;
+}
+
+.datepicker input {
+  width: 10.75rem;
+  border-right: none;
+  outline: none;
+  font-size: 87.5%;
+  padding: 0.1em 0.3em;
+}
+
+.datepicker button {
+  width: 1.25rem;
+  border-left: none;
+  outline: none;
+}
+
+.datepicker .group.focus {
+  outline: 2px solid black;
+  outline-offset: 1px;
+}
+
+.datepicker .group.focus input,
+.datepicker .group.focus button {
+  background-color: #DEF;
+}
+
+.datepicker.group button[aria-expanded="true"] svg {
+  transform: rotate(180deg) translate(0, -1px);
+}
+
+.datepicker .group.focus {
+  outline: 2px solid black;
+  outline-offset: 1px;
+}
+
+.datepicker .group.focus input,
+.datepicker .group.focus button {
+  background-color: #DEF;
+}
+
+.datepicker .group polygon {
+  fill: gray;
+  stroke: transparent;
+}
+
+.datepicker .group button[aria-expanded="true"] polygon,
+.datepicker .group.focus polygon {
+  fill: black;
+  stroke: white;
+}
+
+.datepicker-dialog {
+  position: absolute;
+  width: 320px;
+  clear: both;
+  border: 3px solid hsl(216, 80%, 51%);
+  margin-top: 1em;
+  border-radius: 5px;
+  padding: 0;
+  background-color: #fff;
+}
+
+.datepicker-dialog .header {
+  cursor: default;
+  background-color: hsl(216, 80%, 51%);
+  padding: 7px;
+  font-weight: bold;
+  text-transform: uppercase;
+  color: white;
+  display: flex;
+  justify-content: space-around;
+}
+
+.datepicker-dialog h2 {
+  margin: 0;
+  padding: 0;
+  display: inline-block;
+  font-size: 1em;
+  color: white;
+  text-transform: none;
+  font-weight: bold;
+}
+
+.datepicker-dialog button {
+  border-style: none;
+  background: transparent;
+}
+
+.datepicker-dialog button::-moz-focus-inner {
+  border: 0;
+}
+
+.datepicker-dialog .dates {
+  width: 320px;
+}
+
+.datepicker-dialog .prev-year,
+.datepicker-dialog .prev-month,
+.datepicker-dialog .next-month,
+.datepicker-dialog .next-year {
+  padding: 4px;
+  width: 24px;
+  height: 24px;
+  color: white;
+}
+
+.datepicker-dialog .prev-year:focus,
+.datepicker-dialog .prev-month:focus,
+.datepicker-dialog .next-month:focus,
+.datepicker-dialog .next-year:focus {
+  padding: 2px;
+  border: 2px solid white;
+  border-radius: 4px;
+  outline: 0;
+}
+
+.datepicker-dialog .dialog-ok-cancel-group {
+  text-align: right;
+  margin-top: 1em;
+  margin-bottom: 1em;
+  margin-right: 1em;
+}
+
+.datepicker-dialog .dialog-ok-cancel-group button {
+  padding: 5px;
+  margin-left: 1em;
+  width: 5em;
+  background-color: hsl(216, 80%, 92%);
+  font-size: 0.85em;
+  color: black;
+  outline: none;
+  border: 1px solid hsl(216, 80%, 92%);
+  border-radius: 5px;
+}
+
+.datepicker-dialog .dialog-button:focus {
+  padding: 4px;
+  border: 2px solid black;
+}
+
+.datepicker-dialog .fa-calendar-alt {
+  color: hsl(216, 89%, 51%);
+}
+
+.datepicker-dialog .month-year {
+  display: inline-block;
+  width: 12em;
+  text-align: center;
+}
+
+.datepicker-dialog .dates {
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 1em;
+}
+
+.datepicker-dialog .dates th,
+.datepicker-dialog .dates td {
+  text-align: center;
+}
+
+.datepicker-dialog .dates tr {
+  border: 1px solid black;
+}
+
+.datepicker-dialog .dates td {
+  padding: 1px;
+  margin: 0;
+  line-height: inherit;
+  height: 40px;
+  width: 40px;
+  border: 1px solid #eee;
+  border-radius: 5px;
+  font-size: 15px;
+  background: #eee;
+}
+
+.datepicker-dialog .dates td:focus,
+.datepicker-dialog .dates td:hover {
+  padding: 0;
+  background-color: hsl(216, 80%, 92%);
+}
+
+.datepicker-dialog .dates td:focus {
+  border-width: 2px;
+  border-color: rgb(100, 100, 100);
+  outline: 0;
+}
+
+.datepicker-dialog .dates td[aria-selected] {
+  border-color: rgb(100, 100, 100);
+}
+
+.datepicker-dialog .dates td[tabindex="0"] {
+  background-color: hsl(216, 80%, 92%);
+}
+
+
+.datepicker-dialog .dialog-message {
+  padding-top: 0.25em;
+  padding-left: 1em;
+  height: 1.75em;
+  background: hsl(216, 80%, 51%);
+  color: white;
+}
diff --git a/examples/dialog-modal/css/datepicker.css b/examples/dialog-modal/css/datepicker.css
deleted file mode 100644
index cb367e06c7..0000000000
--- a/examples/dialog-modal/css/datepicker.css
+++ /dev/null
@@ -1,198 +0,0 @@
-.datepicker {
-  margin-top: 1em;
-  position: relative;
-}
-
-.datepicker button.icon {
-  padding: 4px;
-  margin: 0;
-  border: transparent 2px solid;
-  border-radius: 5px;
-  text-align: left;
-  background-color: white;
-  position: relative;
-  left: -4px;
-  top: 3px;
-}
-
-.datepicker button.icon:focus {
-  outline: none;
-  border-color: hsl(216, 80%, 51%);
-}
-
-.datepicker span.arrow {
-  margin: 0;
-  padding: 0;
-  display: none;
-  background: transparent;
-}
-
-.datepicker input {
-  margin: 0;
-  width: 20%;
-}
-
-.datepicker .datepickerDialog {
-  position: absolute;
-  width: 45%;
-  clear: both;
-  display: none;
-  border: 3px solid hsl(216, 80%, 51%);
-  margin-top: 1em;
-  border-radius: 5px;
-  padding: 0;
-  background-color: #fff;
-}
-
-.datepicker .header {
-  cursor: default;
-  background-color: hsl(216, 80%, 51%);
-  padding: 7px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: white;
-  display: flex;
-  justify-content: space-around;
-}
-
-.datepicker .header h2 {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  font-size: 1em;
-  color: white;
-  text-transform: none;
-  font-weight: bold;
-}
-
-.datepicker .header button {
-  border-style: none;
-  background: transparent;
-}
-
-.datepicker .datepickerDialog button::-moz-focus-inner {
-  border: 0;
-}
-
-.datepicker .prevYear,
-.datepicker .prevMonth,
-.datepicker .nextMonth,
-.datepicker .nextYear {
-  padding: 4px;
-  width: 24px;
-  height: 24px;
-  color: white;
-}
-
-.datepicker .prevYear:focus,
-.datepicker .prevMonth:focus,
-.datepicker .nextMonth:focus,
-.datepicker .nextYear:focus {
-  padding: 2px;
-  border: 2px solid white;
-  border-radius: 4px;
-  outline: 0;
-}
-
-.datepicker .dialogButtonGroup {
-  text-align: right;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-right: 1em;
-}
-
-.datepicker .dialogButton {
-  padding: 5px;
-  margin-left: 1em;
-  width: 5em;
-  background-color: hsl(216, 80%, 92%);
-  font-size: 0.85em;
-  color: black;
-  outline: none;
-  border: 1px solid hsl(216, 80%, 92%);
-  border-radius: 5px;
-}
-
-.datepicker .dialogButton:focus {
-  padding: 4px;
-  border: 2px solid black;
-}
-
-.datepicker .fa-calendar-alt {
-  color: hsl(216, 89%, 51%);
-}
-
-.datepicker .monthYear {
-  display: inline-block;
-  width: 12em;
-  text-align: center;
-}
-
-.datepicker table.dates {
-  width: 100%;
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 1em;
-}
-
-.datepicker table.dates th,
-.datepicker table.dates td {
-  text-align: center;
-}
-
-.datepicker .dateRow {
-  border: 1px solid black;
-}
-
-.datepicker .dateCell {
-  outline: 0;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  height: 40px;
-  width: 40px;
-}
-
-.datepicker .dateButton {
-  padding: 0;
-  margin: 0;
-  line-height: inherit;
-  height: 100%;
-  width: 100%;
-  border: 1px solid #eee;
-  border-radius: 5px;
-  font-size: 15px;
-  background: #eee;
-}
-
-.datepicker .dateButton:focus,
-.datepicker .dateButton:hover {
-  padding: 0;
-  background-color: hsl(216, 80%, 92%);
-}
-
-.datepicker .dateButton:focus {
-  border-width: 2px;
-  border-color: rgb(100, 100, 100);
-  outline: 0;
-}
-
-.datepicker .dateButton[aria-selected] {
-  border-color: rgb(100, 100, 100);
-}
-
-.datepicker .dateButton[tabindex="0"] {
-  background-color: hsl(216, 80%, 92%);
-}
-
-.datepicker .disabled {
-  visibility: hidden;
-}
-
-.datepicker .message {
-  padding-top: 0.25em;
-  padding-left: 1em;
-  height: 1.75em;
-  background: hsl(216, 80%, 51%);
-  color: white;
-}
diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 631e07373c..e3f6c2343d 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -13,10 +13,8 @@
 <script src="../js/highlight.pack.js"></script>
 <script src="../js/app.js"></script>
 
-<link href="css/datepicker.css" rel="stylesheet">
-<script src="js/datepicker-day.js" type="text/javascript"></script>
-<script src="js/datepicker.js" type="text/javascript"></script>
-<script src="js/calendar-button.js" type="text/javascript"></script>
+<link href="css/datepicker-dialog.css" rel="stylesheet">
+<script src="js/datepicker-dialog.js"></script>
 </head>
 <body>
   <nav aria-label="Related Links" class="feedback">
@@ -52,59 +50,61 @@ <h2 id="ex_label">Example</h2>
         <div class="date">
           <label for="id-textbox-1">Date</label>
 
-          <input type="text"
-                placeholder="mm/dd/yyyy"
-                id="id-textbox-1"
-                aria-autocomplete="none">
+          <div class="group">
+            <input type="text"
+                  placeholder="mm/dd/yyyy"
+                  id="id-textbox-1"
+                  aria-autocomplete="none">
 
-          <button type="button" class="icon"
-            aria-label="Choose Date"
-            >
-            <span class="fa fa-calendar-alt fa-2x"></span>
-          </button>
+            <button type="button" class="icon"
+              aria-label="Choose Date"
+              >
+              <span class="fa fa-calendar-alt fa-2x"></span>
+            </button>
+            </div>
 
         </div>
 
         <div id="id-datepicker-1"
-             class="datepickerDialog"
+             class="datepicker-dialog"
              role="dialog"
              aria-modal="true"
              aria-labelledby="id-dialog-label">
 
           <div class="header">
 
-            <button type="button" class="prevYear"
+            <button type="button" class="prev-year"
               aria-label="previous year">
               <span class="fas fa-angle-double-left fa-lg"></span>
             </button>
 
-            <button type="button" class="prevMonth"
+            <button type="button" class="prev-month"
               aria-label="previous month">
               <span class="fas fa-angle-left fa-lg"></span>
             </button>
 
             <h2 id="id-dialog-label"
-                  class="monthYear"
+                  class="month-year"
                   aria-live="polite">
-              Month Year
+              February 2020
             </h2>
 
-            <button type="button" class="nextMonth"
+            <button type="button" class="next-month"
               aria-label="next month">
               <span class="fas fa-angle-right fa-lg"></span>
             </button>
 
-            <button type="button" class="nextYear"
+            <button type="button" class="next-year"
               aria-label="next year">
               <span class="fas fa-angle-double-right fa-lg"></span>
             </button>
           </div>
 
-          <table
+         <table
             id="myDatepickerGrid"
             class="dates"
             role="grid"
-            aria-labelledby="id-dialog-label">
+            aria-labelledby="cb-dialog-label">
             <thead>
               <tr>
                 <th scope="col" abbr="Sunday">Su</th>
@@ -119,70 +119,71 @@ <h2 id="ex_label">Example</h2>
 
             <tbody>
               <tr>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">25</button></td>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">26</button></td>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">27</button></td>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">28</button></td>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">29</button></td>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">30</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">1</button></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td tabindex="-1" data-date="2020-02-01">1</td>
               </tr>
               <tr>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">2</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">3</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">4</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">5</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">6</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">7</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">8</button></td>
+                <td tabindex="-1" data-date="2020-02-02">2</td>
+                <td tabindex="-1" data-date="2020-02-03">3</td>
+                <td tabindex="-1" data-date="2020-02-04">4</td>
+                <td tabindex="-1" data-date="2020-02-05">5</td>
+                <td tabindex="-1" data-date="2020-02-06">6</td>
+                <td tabindex="-1" data-date="2020-02-07">7</td>
+                <td tabindex="-1" data-date="2020-02-08">8</td>
               </tr>
               <tr>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">9</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">10</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">11</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">12</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">13</button></td>
-                <td class="dateCell"><button type="button" class="dateButton">14</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">15</button></td>
+                <td tabindex="-1" data-date="2020-02-09">9</td>
+                <td tabindex="-1" data-date="2020-02-10">10</td>
+                <td tabindex="-1" data-date="2020-02-11">11</td>
+                <td tabindex="-1" data-date="2020-02-12">12</td>
+                <td tabindex="-1" data-date="2020-02-13">13</td>
+                <td role="gridcell" aria-selected="true" data-date="2020-02-14">14</td>
+                <td tabindex="-1" data-date="2020-02-15">15</td>
               </tr>
               <tr>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">16</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">17</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">18</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">19</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">20</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">21</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">22</button></td>
+                <td tabindex="-1" data-date="2020-02-16">16</td>
+                <td tabindex="-1" data-date="2020-02-17">17</td>
+                <td tabindex="-1" data-date="2020-02-18">18</td>
+                <td tabindex="-1" data-date="2020-02-19">19</td>
+                <td tabindex="-1" data-date="2020-02-20">20</td>
+                <td tabindex="-1" data-date="2020-02-21">21</td>
+                <td tabindex="-1" data-date="2020-02-22">22</td>
               </tr>
               <tr>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">23</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">24</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">25</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">26</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">27</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">28</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">29</button></td>
+                <td tabindex="-1" data-date="2020-02-23">23</td>
+                <td tabindex="-1" data-date="2020-02-24">24</td>
+                <td tabindex="-1" data-date="2020-02-25">25</td>
+                <td tabindex="-1" data-date="2020-02-26">26</td>
+                <td tabindex="-1" data-date="2020-02-27">27</td>
+                <td tabindex="-1" data-date="2020-02-28">28</td>
+                <td tabindex="-1" data-date="2020-02-29">29</td>
               </tr>
               <tr>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">30</button></td>
-                <td class="dateCell"><button type="button" class="dateButton" tabindex="-1">31</button></td>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">1</button></td>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">2</button></td>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">3</button></td>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">4</button></td>
-                <td class="dateCell"><button type="button" class="dateButton disabled" tabindex="-1">5</button></td>
+                <td tabindex="-1" data-date="2020-02-30">30</td>
+                <td tabindex="-1" data-date="2020-02-31">31</td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
               </tr>
             </tbody>
           </table>
 
-          <div class="dialogButtonGroup">
-            <button type="button" class="dialogButton" value="cancel">Cancel</button>
-            <button type="button" class="dialogButton" value="ok">OK</button>
-          </div>
-
-          <div class="message" aria-live="polite">
-            Test
+          <div class="dialog-ok-cancel-group">
+            <button class="dialog-button" value="cancel">
+              Cancel
+            </button>
+            <button class="dialog-button" value="ok">
+              OK
+            </button>
           </div>
+          <div class="dialog-message" aria-live="polite"></div>
 
         </div>
       </div>
diff --git a/examples/dialog-modal/js/calendar-button.js b/examples/dialog-modal/js/calendar-button.js
deleted file mode 100644
index 16de124601..0000000000
--- a/examples/dialog-modal/js/calendar-button.js
+++ /dev/null
@@ -1,110 +0,0 @@
-/*
-*   This content is licensed according to the W3C Software License at
-*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-*   File:   calendar-button.js
-*/
-
-var DatePicker = DatePicker || {};
-
-var CalendarButtonInput = function (inputNode, buttonNode, datepicker) {
-  this.inputNode    = inputNode;
-  this.buttonNode   = buttonNode;
-  this.imageNode    = false;
-
-  this.datepicker = datepicker;
-
-  this.defaultLabel = 'Choose Date';
-
-  this.keyCode = Object.freeze({
-    'ENTER': 13,
-    'SPACE': 32
-  });
-};
-
-CalendarButtonInput.prototype.init = function () {
-  this.buttonNode.addEventListener('click', this.handleClick.bind(this));
-  this.buttonNode.addEventListener('focus', this.handleFocus.bind(this));
-};
-
-CalendarButtonInput.prototype.handleClick = function () {
-  if (!this.datepicker.isOpen()) {
-    this.datepicker.show();
-    this.datepicker.setFocusDay();
-  }
-  else {
-    this.datepicker.hide();
-  }
-
-  event.stopPropagation();
-  event.preventDefault();
-
-};
-
-CalendarButtonInput.prototype.setLabel = function (str) {
-  if (typeof str === 'string' && str.length) {
-    str = ', ' + str;
-  }
-  this.buttonNode.setAttribute('aria-label', this.defaultLabel + str);
-};
-
-CalendarButtonInput.prototype.setFocus = function () {
-  this.buttonNode.focus();
-};
-
-CalendarButtonInput.prototype.setDate = function (day) {
-  this.inputNode.value = (day.getMonth() + 1) + '/' + day.getDate() + '/' + day.getFullYear();
-};
-
-CalendarButtonInput.prototype.getDate = function () {
-  return this.inputNode.value;
-};
-
-CalendarButtonInput.prototype.getDateLabel = function () {
-  var label = '';
-
-  var parts = this.inputNode.value.split('/');
-
-  if ((parts.length === 3) &&
-      Number.isInteger(parseInt(parts[0])) &&
-      Number.isInteger(parseInt(parts[1])) &&
-      Number.isInteger(parseInt(parts[2]))) {
-    var month = parseInt(parts[0]) - 1;
-    var day = parseInt(parts[1]);
-    var year = parseInt(parts[2]);
-
-    label = this.datepicker.getDateForButtonLabel(year, month, day);
-  }
-
-  return label;
-};
-
-CalendarButtonInput.prototype.handleFocus = function () {
-  var dateLabel = this.getDateLabel();
-
-  if (dateLabel) {
-    this.setLabel('selected date is ' + dateLabel);
-  }
-  else {
-    this.setLabel('');
-  }
-};
-
-// Initialize menu button date picker
-
-window.addEventListener('load' , function () {
-
-  var datePickers = document.querySelectorAll('.datepicker');
-
-  datePickers.forEach(function (dp) {
-    var inputNode   = dp.querySelector('input');
-    var buttonNode  = dp.querySelector('button');
-    var dialogNode  = dp.querySelector('[role=dialog]');
-
-    var datePicker = new DatePicker(inputNode, buttonNode, dialogNode);
-    datePicker.init();
-  });
-
-});
-
-
diff --git a/examples/dialog-modal/js/datepicker-day.js b/examples/dialog-modal/js/datepicker-day.js
deleted file mode 100644
index e24ca25125..0000000000
--- a/examples/dialog-modal/js/datepicker-day.js
+++ /dev/null
@@ -1,174 +0,0 @@
-/*
-*   This content is licensed according to the W3C Software License at
-*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-*   File:   datepickerDay.js
-*/
-
-var DatePickerDay = function (domNode, datepicker, index, row, column) {
-
-  this.index = index;
-  this.row = row;
-  this.column = column;
-
-  this.day = new Date();
-
-  this.domNode = domNode;
-  this.datepicker = datepicker;
-
-  this.keyCode = Object.freeze({
-    'TAB': 9,
-    'ENTER': 13,
-    'ESC': 27,
-    'SPACE': 32,
-    'PAGEUP': 33,
-    'PAGEDOWN': 34,
-    'END': 35,
-    'HOME': 36,
-    'LEFT': 37,
-    'UP': 38,
-    'RIGHT': 39,
-    'DOWN': 40
-  });
-};
-
-DatePickerDay.prototype.init = function () {
-  this.domNode.setAttribute('tabindex', '-1');
-  this.domNode.addEventListener('click', this.handleClick.bind(this));
-  this.domNode.addEventListener('keydown', this.handleKeyDown.bind(this));
-  this.domNode.addEventListener('focus', this.handleFocus.bind(this));
-
-  this.domNode.innerHTML = '-1';
-
-};
-
-DatePickerDay.prototype.isDisabled = function () {
-  return this.domNode.classList.contains('disabled');
-};
-
-DatePickerDay.prototype.updateDay = function (disable, day, selected) {
-
-  this.day = new Date(day);
-
-  var d = this.day.getDate().toString();
-  if (this.day.getDate() <= 9) {
-    d = '0' + d;
-  }
-
-  var m = this.day.getMonth() + 1;
-  if (this.day.getMonth() < 9) {
-    m = '0' + m;
-  }
-
-  this.domNode.setAttribute('tabindex', '-1');
-  this.domNode.removeAttribute('aria-selected');
-  this.domNode.setAttribute('data-date', this.day.getFullYear() + '-' + m + '-' + d);
-
-  if (disable) {
-    this.domNode.classList.add('disabled');
-    this.domNode.innerHTML = '';
-  }
-  else {
-    this.domNode.classList.remove('disabled');
-    this.domNode.innerHTML = this.day.getDate();
-    if (selected) {
-      this.domNode.setAttribute('aria-selected', 'true');
-      this.domNode.setAttribute('tabindex', '0');
-    }
-  }
-
-};
-
-DatePickerDay.prototype.handleKeyDown = function (event) {
-  var flag = false;
-
-  switch (event.keyCode) {
-
-    case this.keyCode.ESC:
-      this.datepicker.hide();
-      break;
-
-    case this.keyCode.TAB:
-      this.datepicker.cancelButtonNode.focus();
-      if (event.shiftKey) {
-        this.datepicker.nextYearNode.focus();
-      }
-      this.datepicker.setMessage('');
-      flag = true;
-      break;
-
-    case this.keyCode.RIGHT:
-      this.datepicker.moveFocusToNextDay();
-      flag = true;
-      break;
-
-    case this.keyCode.LEFT:
-      this.datepicker.moveFocusToPreviousDay();
-      flag = true;
-      break;
-
-    case this.keyCode.DOWN:
-      this.datepicker.moveFocusToNextWeek();
-      flag = true;
-      break;
-
-    case this.keyCode.UP:
-      this.datepicker.moveFocusToPreviousWeek();
-      flag = true;
-      break;
-
-    case this.keyCode.PAGEUP:
-      if (event.shiftKey) {
-        this.datepicker.moveToPreviousYear();
-      }
-      else {
-        this.datepicker.moveToPreviousMonth();
-      }
-      this.datepicker.setFocusDay();
-      flag = true;
-      break;
-
-    case this.keyCode.PAGEDOWN:
-      if (event.shiftKey) {
-        this.datepicker.moveToNextYear();
-      }
-      else {
-        this.datepicker.moveToNextMonth();
-      }
-      this.datepicker.setFocusDay();
-      flag = true;
-      break;
-
-    case this.keyCode.HOME:
-      this.datepicker.moveFocusToFirstDayOfWeek();
-      flag = true;
-      break;
-
-    case this.keyCode.END:
-      this.datepicker.moveFocusToLastDayOfWeek();
-      flag = true;
-      break;
-  }
-
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
-
-DatePickerDay.prototype.handleClick = function (event) {
-
-  if (!this.isDisabled()) {
-    this.datepicker.setTextboxDate(this.day);
-    this.datepicker.hide();
-  }
-
-  event.stopPropagation();
-  event.preventDefault();
-
-};
-
-DatePickerDay.prototype.handleFocus = function () {
-  this.datepicker.setMessage(this.datepicker.messageCursorKeys);
-};
-
diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
new file mode 100644
index 0000000000..b4fdad8b4f
--- /dev/null
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -0,0 +1,839 @@
+/*
+*   This content is licensed according to the W3C Software License at
+*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*
+*   File:   DatePickerDialog.js
+*/
+
+var DatePickerDialog = function (cdp) {
+  this.buttonLabel = 'Date';
+  this.dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
+  this.monthLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+  this.messageCursorKeys = 'Cursor keys can navigate dates';
+  this.lastMessage = '';
+
+  this.comboboxNode   = cdp.querySelector('input[type="text"');
+  this.buttonNode     = cdp.querySelector('.group button');
+  this.dialogNode     = cdp.querySelector('[role="dialog"]');
+  this.messageNode    = this.dialogNode.querySelector('.dialog-message');
+
+  this.monthYearNode = this.dialogNode.querySelector('.month-year');
+
+  this.prevYearNode  = this.dialogNode.querySelector('.prev-year');
+  this.prevMonthNode = this.dialogNode.querySelector('.prev-month');
+  this.nextMonthNode = this.dialogNode.querySelector('.next-month');
+  this.nextYearNode  = this.dialogNode.querySelector('.next-year');
+
+  this.okButtonNode     = this.dialogNode.querySelector('button[value="ok"]');
+  this.cancelButtonNode = this.dialogNode.querySelector('button[value="cancel"]');
+
+  this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
+
+  this.lastRowNode = null;
+
+  this.days = [];
+
+  this.focusDay = new Date();
+  this.selectedDay = new Date(0,0,1);
+
+  this.isMouseDownOnBackground = false;
+
+  this.init();
+
+};
+
+DatePickerDialog.prototype.init = function () {
+
+  this.comboboxNode.addEventListener('keydown', this.handleComboboxKeyDown.bind(this));
+  this.comboboxNode.addEventListener('mouseup',   this.handleComboboxMouseUp.bind(this));
+  this.comboboxNode.addEventListener('focus',   this.handleComboboxFocus.bind(this));
+  this.comboboxNode.addEventListener('blur',   this.handleComboboxBlur.bind(this));
+
+  this.buttonNode.addEventListener('mouseup',   this.handleButtonMouseUp.bind(this));
+
+  this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
+  this.okButtonNode.addEventListener('keydown', this.handleOkButton.bind(this));
+
+  this.cancelButtonNode.addEventListener('click', this.handleCancelButton.bind(this));
+  this.cancelButtonNode.addEventListener('keydown', this.handleCancelButton.bind(this));
+
+  this.prevMonthNode.addEventListener('click', this.handlePreviousMonthButton.bind(this));
+  this.nextMonthNode.addEventListener('click', this.handleNextMonthButton.bind(this));
+  this.prevYearNode.addEventListener('click', this.handlePreviousYearButton.bind(this));
+  this.nextYearNode.addEventListener('click', this.handleNextYearButton.bind(this));
+
+  this.prevMonthNode.addEventListener('keydown', this.handlePreviousMonthButton.bind(this));
+  this.nextMonthNode.addEventListener('keydown', this.handleNextMonthButton.bind(this));
+  this.prevYearNode.addEventListener('keydown', this.handlePreviousYearButton.bind(this));
+  this.nextYearNode.addEventListener('keydown', this.handleNextYearButton.bind(this));
+
+  document.body.addEventListener('mouseup', this.handleBackgroundMouseUp.bind(this), true);
+
+  // Create Grid of Dates
+
+  this.tbodyNode.innerHTML = '';
+  for (var i = 0; i < 6; i++) {
+    var row = this.tbodyNode.insertRow(i);
+    this.lastRowNode = row;
+    for (var j = 0; j < 7; j++) {
+      var cell = document.createElement('td');
+
+      cell.setAttribute('tabindex', '-1');
+      cell.addEventListener('click', this.handleDayClick.bind(this));
+      cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
+      cell.addEventListener('focus', this.handleDayFocus.bind(this));
+
+      cell.innerHTML = '-1';
+
+      row.appendChild(cell);
+      this.days.push(cell);
+    }
+  }
+
+  this.updateGrid();
+  this.close();
+};
+
+DatePickerDialog.prototype.isSameDay = function (day1, day2) {
+  return (day1.getFullYear() == day2.getFullYear()) &&
+        (day1.getMonth() == day2.getMonth()) &&
+        (day1.getDate() == day2.getDate());
+};
+
+DatePickerDialog.prototype.isNotSameMonth = function (day1, day2) {
+  return (day1.getFullYear() != day2.getFullYear()) ||
+        (day1.getMonth() != day2.getMonth());
+};
+
+DatePickerDialog.prototype.updateGrid = function () {
+
+  var i, flag;
+  var fd = this.focusDay;
+
+  this.monthYearNode.innerHTML = this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
+
+  var firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
+  var dayOfWeek = firstDayOfMonth.getDay();
+
+  firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
+
+  var d = new Date(firstDayOfMonth);
+
+  for (i = 0; i < this.days.length; i++) {
+    flag = d.getMonth() != fd.getMonth();
+    this.updateDate(this.days[i], flag, d, this.isSameDay(d, this.selectedDay));
+    d.setDate(d.getDate() + 1);
+
+    // Hide last row if all disabled dates
+    if (i === 35) {
+      if (flag) {
+        this.lastRowNode.style.visibility = 'hidden';
+      }
+      else {
+        this.lastRowNode.style.visibility = 'visible';
+      }
+    }
+  }
+};
+
+DatePickerDialog.prototype.setFocusDay = function (flag) {
+
+  if (typeof flag !== 'boolean') {
+    flag = true;
+  }
+
+  var fd = this.focusDay;
+  var getDayFromDataDateAttribute = this.getDayFromDataDateAttribute;
+
+  function checkDay (domNode) {
+
+    var d = getDayFromDataDateAttribute(domNode);
+
+    domNode.setAttribute('tabindex', '-1');
+    if (this.isSameDay(d, fd)) {
+      domNode.setAttribute('tabindex', '0');
+      if (flag) {
+        domNode.focus();
+      }
+    }
+  }
+
+
+  this.days.forEach(checkDay.bind(this));
+
+};
+
+DatePickerDialog.prototype.updateDay = function (day) {
+  var d = this.focusDay;
+  this.focusDay = day;
+  if (this.isNotSameMonth(d, day)) {
+    this.updateGrid();
+    this.setFocusDay();
+  }
+};
+
+DatePickerDialog.prototype.open = function () {
+  this.dialogNode.style.display = 'block';
+  this.dialogNode.style.zIndex = 2;
+
+  this.comboboxNode.setAttribute('aria-expanded', 'true')
+  this.buttonNode.setAttribute('aria-expanded', 'true')
+  this.getDateFromCombobox();
+  this.updateGrid();
+};
+
+DatePickerDialog.prototype.isOpen = function () {
+  return window.getComputedStyle(this.dialogNode).display !== 'none';
+};
+
+DatePickerDialog.prototype.close = function (flag) {
+  if (typeof flag !== 'boolean') {
+    // Default is to move focus to combobox
+    flag = true;
+  }
+
+  this.setMessage('');
+  this.dialogNode.style.display = 'none';
+  this.comboboxNode.setAttribute('aria-expanded', 'false')
+  this.buttonNode.setAttribute('aria-expanded', 'false')
+
+  if (flag) {
+    this.comboboxNode.focus();
+  }
+};
+
+DatePickerDialog.prototype.handleOkButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+    case 'keydown':
+
+      switch (event.key) {
+        case "Tab":
+          if (!event.shiftKey) {
+            this.prevYearNode.focus();
+            flag = true;
+          }
+          break;
+
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        default:
+          break;
+
+      }
+      break;
+
+    case 'click':
+      this.setComboboxDate();
+      this.close();
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+DatePickerDialog.prototype.handleCancelButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+    case 'keydown':
+
+      switch (event.key) {
+
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        default:
+          break;
+
+      }
+      break;
+
+    case 'click':
+      this.close();
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+DatePickerDialog.prototype.handleNextYearButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        case "Enter":
+          this.moveToNextYear();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToNextYear();
+      this.setFocusDay(false);
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+DatePickerDialog.prototype.handlePreviousYearButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+
+        case "Enter":
+          this.moveToPreviousYear();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+
+        case "Tab":
+          if (event.shiftKey) {
+            this.okButtonNode.focus();
+            flag = true;
+          }
+          break;
+
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        default:
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToPreviousYear();
+      this.setFocusDay(false);
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+DatePickerDialog.prototype.handleNextMonthButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        case "Enter":
+          this.moveToNextMonth();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToNextMonth();
+      this.setFocusDay(false);
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+DatePickerDialog.prototype.handlePreviousMonthButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        case "Enter":
+          this.moveToPreviousMonth();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToPreviousMonth();
+      this.setFocusDay(false);
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+DatePickerDialog.prototype.moveFocusToDay = function (day) {
+  var d = this.focusDay;
+
+  this.focusDay = day;
+
+  if ((d.getMonth() != this.focusDay.getMonth()) ||
+      (d.getYear() != this.focusDay.getYear())) {
+    this.updateGrid();
+  }
+  this.setFocusDay();
+};
+
+
+DatePickerDialog.prototype.moveToNextYear = function () {
+  this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
+  this.updateGrid();
+};
+
+DatePickerDialog.prototype.moveToPreviousYear = function () {
+  this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
+  this.updateGrid();
+};
+
+DatePickerDialog.prototype.moveToNextMonth = function () {
+  this.focusDay.setMonth(this.focusDay.getMonth() + 1);
+  this.updateGrid();
+};
+
+DatePickerDialog.prototype.moveToPreviousMonth = function () {
+  this.focusDay.setMonth(this.focusDay.getMonth() - 1);
+  this.updateGrid();
+};
+
+DatePickerDialog.prototype.moveFocusToNextDay = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + 1);
+  this.moveFocusToDay(d);
+};
+
+DatePickerDialog.prototype.moveFocusToNextWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + 7);
+  this.moveFocusToDay(d);
+};
+
+DatePickerDialog.prototype.moveFocusToPreviousDay = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - 1);
+  this.moveFocusToDay(d);
+};
+
+DatePickerDialog.prototype.moveFocusToPreviousWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - 7);
+  this.moveFocusToDay(d);
+};
+
+DatePickerDialog.prototype.moveFocusToFirstDayOfWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - d.getDay());
+  this.moveFocusToDay(d);
+};
+
+DatePickerDialog.prototype.moveFocusToLastDayOfWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + (6 - d.getDay()));
+  this.moveFocusToDay(d);
+};
+
+// Day methods
+
+DatePickerDialog.prototype.isDayDisabled = function (domNode) {
+  return domNode.classList.contains('disabled');
+};
+
+DatePickerDialog.prototype.getDayFromDataDateAttribute = function (domNode) {
+  var parts = domNode.getAttribute('data-date').split('-');
+  return new Date(parts[0], parseInt(parts[1])-1, parts[2]);
+};
+
+DatePickerDialog.prototype.updateDate = function (domNode, disable, day, selected) {
+
+  var d = day.getDate().toString();
+  if (day.getDate() <= 9) {
+    d = '0' + d;
+  }
+
+  var m = day.getMonth() + 1;
+  if (day.getMonth() < 9) {
+    m = '0' + m;
+  }
+
+  domNode.setAttribute('tabindex', '-1');
+  domNode.removeAttribute('aria-selected');
+  domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
+
+  if (disable) {
+    domNode.classList.add('disabled');
+    domNode.innerHTML = '';
+  }
+  else {
+    domNode.classList.remove('disabled');
+    domNode.innerHTML = day.getDate();
+    if (selected) {
+      domNode.setAttribute('aria-selected', 'true');
+      domNode.setAttribute('tabindex', '0');
+    }
+  }
+
+};
+
+DatePickerDialog.prototype.handleDayKeyDown = function (event) {
+  var flag = false;
+
+  if (event.keyCode === 32) {
+    event.key = " ";
+  }
+
+  switch (event.key) {
+
+    case "Esc":
+    case "Escape":
+      this.close();
+      break;
+
+    case " ":
+      this.setComboboxDate(event.currentTarget);
+      flag = true;
+      break;
+
+    case "Enter":
+      this.setComboboxDate(event.currentTarget);
+      this.close();
+      break;
+
+    case "Tab":
+      this.cancelButtonNode.focus();
+      if (event.shiftKey) {
+        this.nextYearNode.focus();
+      }
+      this.setMessage('');
+      flag = true;
+      break;
+
+    case "Right":
+    case "ArrowRight":
+      this.moveFocusToNextDay();
+      flag = true;
+      break;
+
+    case "Left":
+    case "ArrowLeft":
+      this.moveFocusToPreviousDay();
+      flag = true;
+      break;
+
+    case "Down":
+    case "ArrowDown":
+      this.moveFocusToNextWeek();
+      flag = true;
+      break;
+
+    case "Up":
+    case "ArrowUp":
+      this.moveFocusToPreviousWeek();
+      flag = true;
+      break;
+
+    case "PageUp":
+      if (event.shiftKey) {
+        this.moveToPreviousYear();
+      }
+      else {
+        this.moveToPreviousMonth();
+      }
+      this.setFocusDay();
+      flag = true;
+      break;
+
+    case "PageDown":
+      if (event.shiftKey) {
+        this.moveToNextYear();
+      }
+      else {
+        this.moveToNextMonth();
+      }
+      this.setFocusDay();
+      flag = true;
+      break;
+
+    case "Home":
+      this.moveFocusToFirstDayOfWeek();
+      flag = true;
+      break;
+
+    case "End":
+      this.moveFocusToLastDayOfWeek();
+      flag = true;
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+DatePickerDialog.prototype.handleDayClick = function (event) {
+
+  if (!this.isDayDisabled(event.currentTarget)) {
+    this.setComboboxDate(event.currentTarget);
+    this.close();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+
+};
+
+DatePickerDialog.prototype.handleDayFocus = function () {
+  this.setMessage(this.messageCursorKeys);
+};
+
+// Combobox methods
+
+DatePickerDialog.prototype.setComboboxDate = function (domNode) {
+
+  var d = this.focusDay;
+
+  if (domNode) {
+    d = this.getDayFromDataDateAttribute(domNode);
+  }
+
+  this.comboboxNode.value = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
+  this.setDateForButtonLabel(d.getFullYear(), d.getMonth(), d.getDate());
+
+};
+
+DatePickerDialog.prototype.getDateFromCombobox = function () {
+
+  var parts = this.comboboxNode.value.split('/');
+
+  if ((parts.length === 3) &&
+      Number.isInteger(parseInt(parts[0])) &&
+      Number.isInteger(parseInt(parts[1])) &&
+      Number.isInteger(parseInt(parts[2]))) {
+    this.focusDay = new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1]));
+    this.selectedDay = new Date(this.focusDay);
+  }
+  else {
+    // If not a valid date (MM/DD/YY) initialize with todays date
+    this.focusDay = new Date();
+    this.selectedDay = new Date(0,0,1);
+  }
+
+};
+
+DatePickerDialog.prototype.setDateForButtonLabel = function (year, month, day) {
+  if (typeof year !== 'number' || typeof month !== 'number' || typeof day !== 'number') {
+    this.selectedDay = this.focusDay;
+  }
+  else {
+    this.selectedDay = new Date(year, month, day);
+  }
+
+  var label = this.buttonLabel;
+  label += ', ' + this.dayLabels[this.selectedDay.getDay()];
+  label += ' ' + this.monthLabels[this.selectedDay.getMonth()];
+  label += ' ' + (this.selectedDay.getDate());
+  label += ', ' + this.selectedDay.getFullYear();
+  this.buttonNode.setAttribute('aria-label', label);
+};
+
+DatePickerDialog.prototype.setMessage = function (str) {
+
+  function setMessageDelayed () {
+    this.messageNode.textContent = str;
+  }
+
+  if (str !== this.lastMessage) {
+    setTimeout(setMessageDelayed.bind(this), 200);
+    this.lastMessage = str;
+  }
+};
+
+DatePickerDialog.prototype.setFocusCombobox = function () {
+  this.comboboxNode.focus();
+};
+
+DatePickerDialog.prototype.handleComboboxKeyDown = function (event) {
+  var flag = false,
+    char = event.key,
+    altKey   = event.altKey;
+
+  if (event.ctrlKey || event.shiftKey) {
+    return;
+  }
+
+  switch (event.key) {
+
+    case "Enter":
+    case "Down":
+    case "ArrowDown":
+      this.open();
+      this.setFocusDay();
+      flag = true;
+      break;
+
+    case "Esc":
+    case "Escape":
+      if (this.isOpen()) {
+        this.close(false);
+      }
+      else {
+        this.comboboxNode.value = '';
+      }
+      this.option = null;
+      flag = true;
+      break;
+
+    case "Tab":
+      this.close(false);
+      break;
+
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+};
+
+DatePickerDialog.prototype.handleComboboxMouseUp = function (event) {
+  if (this.isOpen()) {
+    this.close(false);
+  }
+  else {
+    this.open();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+};
+
+DatePickerDialog.prototype.handleButtonMouseUp = function (event) {
+  if (this.isOpen()) {
+    this.close();
+  }
+  else {
+    this.open();
+    this.setFocusCombobox();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+};
+
+DatePickerDialog.prototype.handleComboboxFocus = function (event) {
+  event.currentTarget.parentNode.classList.add('focus');
+};
+
+DatePickerDialog.prototype.handleComboboxBlur = function (event) {
+  event.currentTarget.parentNode.classList.remove('focus');
+};
+
+DatePickerDialog.prototype.handleBackgroundMouseUp = function (event) {
+  if (!this.comboboxNode.contains(event.target) &&
+      !this.buttonNode.contains(event.target) &&
+      !this.dialogNode.contains(event.target)) {
+
+    if (this.isOpen()) {
+      this.close(false);
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+};
+
+// Initialize menu button date picker
+
+window.addEventListener('load' , function () {
+
+  var datePickers = document.querySelectorAll('.datepicker');
+
+  datePickers.forEach(function (dp) {
+    var datePicker = new DatePickerDialog(dp);
+  });
+
+});
diff --git a/examples/dialog-modal/js/datepicker.js b/examples/dialog-modal/js/datepicker.js
deleted file mode 100644
index 0058fb7be5..0000000000
--- a/examples/dialog-modal/js/datepicker.js
+++ /dev/null
@@ -1,579 +0,0 @@
-/*
-*   This content is licensed according to the W3C Software License at
-*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-*   File:   datepicker.js
-*/
-
-var CalendarButtonInput = CalendarButtonInput || {};
-var DatePickerDay = DatePickerDay || {};
-
-var DatePicker = function (inputNode, buttonNode, dialogNode) {
-  this.dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
-  this.monthLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
-
-  this.messageCursorKeys = 'Cursor keys can navigate dates';
-  this.lastMessage = '';
-
-  this.inputNode   = inputNode;
-  this.buttonNode  = buttonNode;
-  this.dialogNode  = dialogNode;
-  this.messageNode = dialogNode.querySelector('.message');
-
-  this.dateInput = new CalendarButtonInput(this.inputNode, this.buttonNode, this);
-
-  this.MonthYearNode = this.dialogNode.querySelector('.monthYear');
-
-  this.prevYearNode = this.dialogNode.querySelector('.prevYear');
-  this.prevMonthNode = this.dialogNode.querySelector('.prevMonth');
-  this.nextMonthNode = this.dialogNode.querySelector('.nextMonth');
-  this.nextYearNode = this.dialogNode.querySelector('.nextYear');
-
-  this.okButtonNode = this.dialogNode.querySelector('button[value="ok"]');
-  this.cancelButtonNode = this.dialogNode.querySelector('button[value="cancel"]');
-
-  this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
-
-  this.lastRowNode = null;
-
-  this.days = [];
-
-  this.focusDay = new Date();
-  this.selectedDay = new Date(0,0,1);
-
-  this.isMouseDownOnBackground = false;
-
-  this.keyCode = Object.freeze({
-    'TAB': 9,
-    'ENTER': 13,
-    'ESC': 27,
-    'SPACE': 32,
-    'PAGEUP': 33,
-    'PAGEDOWN': 34,
-    'END': 35,
-    'HOME': 36,
-    'LEFT': 37,
-    'UP': 38,
-    'RIGHT': 39,
-    'DOWN': 40
-  });
-
-};
-
-DatePicker.prototype.init = function () {
-
-  this.dateInput.init();
-
-  this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
-  this.okButtonNode.addEventListener('keydown', this.handleOkButton.bind(this));
-
-  this.cancelButtonNode.addEventListener('click', this.handleCancelButton.bind(this));
-  this.cancelButtonNode.addEventListener('keydown', this.handleCancelButton.bind(this));
-
-  this.prevMonthNode.addEventListener('click', this.handlePreviousMonthButton.bind(this));
-  this.nextMonthNode.addEventListener('click', this.handleNextMonthButton.bind(this));
-  this.prevYearNode.addEventListener('click', this.handlePreviousYearButton.bind(this));
-  this.nextYearNode.addEventListener('click', this.handleNextYearButton.bind(this));
-
-  this.prevMonthNode.addEventListener('keydown', this.handlePreviousMonthButton.bind(this));
-  this.nextMonthNode.addEventListener('keydown', this.handleNextMonthButton.bind(this));
-  this.prevYearNode.addEventListener('keydown', this.handlePreviousYearButton.bind(this));
-  this.nextYearNode.addEventListener('keydown', this.handleNextYearButton.bind(this));
-
-  document.body.addEventListener('mousedown', this.handleBackgroundMouseDown.bind(this), true);
-  document.body.addEventListener('mouseup', this.handleBackgroundMouseUp.bind(this), true);
-
-  // Create Grid of Dates
-
-  this.tbodyNode.innerHTML = '';
-  var index = 0;
-  for (var i = 0; i < 6; i++) {
-    var row = this.tbodyNode.insertRow(i);
-    this.lastRowNode = row;
-    row.classList.add('dateRow');
-    for (var j = 0; j < 7; j++) {
-      var cell = document.createElement('td');
-      cell.classList.add('dateCell');
-      var cellButton = document.createElement('button');
-      cellButton.classList.add('dateButton');
-      cellButton.setAttribute('type', 'button');
-      cell.appendChild(cellButton);
-      row.appendChild(cell);
-      var dpDay = new DatePickerDay(cellButton, this, index, i, j);
-      dpDay.init();
-      this.days.push(dpDay);
-      index++;
-    }
-  }
-
-  this.updateGrid();
-  this.setFocusDay();
-};
-
-DatePicker.prototype.isSameDay = function (day1, day2) {
-  return (day1.getFullYear() == day2.getFullYear()) &&
-        (day1.getMonth() == day2.getMonth()) &&
-        (day1.getDate() == day2.getDate());
-};
-
-DatePicker.prototype.isNotSameMonth = function (day1, day2) {
-  return (day1.getFullYear() != day2.getFullYear()) ||
-        (day1.getMonth() != day2.getMonth());
-};
-
-DatePicker.prototype.updateGrid = function () {
-
-  var i, flag;
-  var fd = this.focusDay;
-
-  this.MonthYearNode.innerHTML = this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
-
-  var firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
-  var dayOfWeek = firstDayOfMonth.getDay();
-
-  firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
-
-  var d = new Date(firstDayOfMonth);
-
-  for (i = 0; i < this.days.length; i++) {
-    flag = d.getMonth() != fd.getMonth();
-    this.days[i].updateDay(flag, d, this.isSameDay(d, this.selectedDay));
-    d.setDate(d.getDate() + 1);
-  }
-};
-
-DatePicker.prototype.setFocusDay = function (flag) {
-
-  if (typeof flag !== 'boolean') {
-    flag = true;
-  }
-
-  var fd = this.focusDay;
-
-  function checkDay (d) {
-
-    d.domNode.setAttribute('tabindex', '-1');
-    if (this.isSameDay(d.day, fd)) {
-      d.domNode.setAttribute('tabindex', '0');
-      if (flag) {
-        d.domNode.focus();
-      }
-    }
-  }
-
-
-  this.days.forEach(checkDay.bind(this));
-};
-
-DatePicker.prototype.updateDay = function (day) {
-  var d = this.focusDay;
-  this.focusDay = day;
-  if (this.isNotSameMonth(d, day)) {
-    this.updateGrid();
-    this.setFocusDay();
-  }
-};
-
-DatePicker.prototype.show = function () {
-
-  this.dialogNode.style.display = 'block';
-  this.dialogNode.style.zIndex = 2;
-
-  this.getDateInput();
-  this.updateGrid();
-  this.setFocusDay();
-
-};
-
-DatePicker.prototype.isOpen = function () {
-  return window.getComputedStyle(this.dialogNode).display !== 'none';
-};
-
-DatePicker.prototype.hide = function () {
-
-  this.setMessage('');
-
-  this.dialogNode.style.display = 'none';
-
-  this.hasFocusFlag = false;
-  this.dateInput.setFocus();
-};
-
-DatePicker.prototype.handleBackgroundMouseDown = function (event) {
-  if (!this.buttonNode.contains(event.target) &&
-      !this.dialogNode.contains(event.target)) {
-
-    this.isMouseDownOnBackground = true;
-
-    if (this.isOpen()) {
-      this.hide();
-      event.stopPropagation();
-      event.preventDefault();
-    }
-  }
-};
-
-DatePicker.prototype.handleBackgroundMouseUp = function () {
-  this.isMouseDownOnBackground = false;
-};
-
-
-DatePicker.prototype.handleOkButton = function (event) {
-  var flag = false;
-
-  switch (event.type) {
-    case 'keydown':
-
-      switch (event.keyCode) {
-        case this.keyCode.TAB:
-          if (!event.shiftKey) {
-            this.prevYearNode.focus();
-            flag = true;
-          }
-          break;
-
-        case this.keyCode.ESC:
-          this.hide();
-          flag = true;
-          break;
-
-        default:
-          break;
-
-      }
-      break;
-
-    case 'click':
-      this.setTextboxDate();
-      this.hide();
-      flag = true;
-      break;
-
-    default:
-      break;
-  }
-
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
-
-DatePicker.prototype.handleCancelButton = function (event) {
-  var flag = false;
-
-  switch (event.type) {
-    case 'keydown':
-
-      switch (event.keyCode) {
-
-        case this.keyCode.ESC:
-          this.hide();
-          flag = true;
-          break;
-
-        default:
-          break;
-
-      }
-      break;
-
-    case 'click':
-      this.hide();
-      flag = true;
-      break;
-
-    default:
-      break;
-  }
-
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
-
-DatePicker.prototype.handleNextYearButton = function (event) {
-  var flag = false;
-
-  switch (event.type) {
-
-    case 'keydown':
-
-      switch (event.keyCode) {
-        case this.keyCode.ESC:
-          this.hide();
-          flag = true;
-          break;
-
-        case this.keyCode.ENTER:
-          this.moveToNextYear();
-          this.setFocusDay(false);
-          flag = true;
-          break;
-      }
-
-      break;
-
-    case 'click':
-      this.moveToNextYear();
-      this.setFocusDay(false);
-      break;
-
-    default:
-      break;
-  }
-
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
-
-DatePicker.prototype.handlePreviousYearButton = function (event) {
-  var flag = false;
-
-  switch (event.type) {
-
-    case 'keydown':
-
-      switch (event.keyCode) {
-
-        case this.keyCode.ENTER:
-          this.moveToPreviousYear();
-          this.setFocusDay(false);
-          flag = true;
-          break;
-
-        case this.keyCode.TAB:
-          if (event.shiftKey) {
-            this.okButtonNode.focus();
-            flag = true;
-          }
-          break;
-
-        case this.keyCode.ESC:
-          this.hide();
-          flag = true;
-          break;
-
-        default:
-          break;
-      }
-
-      break;
-
-    case 'click':
-      this.moveToPreviousYear();
-      this.setFocusDay(false);
-      break;
-
-    default:
-      break;
-  }
-
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
-
-DatePicker.prototype.handleNextMonthButton = function (event) {
-  var flag = false;
-
-  switch (event.type) {
-
-    case 'keydown':
-
-      switch (event.keyCode) {
-        case this.keyCode.ESC:
-          this.hide();
-          flag = true;
-          break;
-
-        case this.keyCode.ENTER:
-          this.moveToNextMonth();
-          this.setFocusDay(false);
-          flag = true;
-          break;
-      }
-
-      break;
-
-    case 'click':
-      this.moveToNextMonth();
-      this.setFocusDay(false);
-      break;
-
-    default:
-      break;
-  }
-
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
-
-DatePicker.prototype.handlePreviousMonthButton = function (event) {
-  var flag = false;
-
-  switch (event.type) {
-
-    case 'keydown':
-
-      switch (event.keyCode) {
-        case this.keyCode.ESC:
-          this.hide();
-          flag = true;
-          break;
-
-        case this.keyCode.ENTER:
-          this.moveToPreviousMonth();
-          this.setFocusDay(false);
-          flag = true;
-          break;
-      }
-
-      break;
-
-    case 'click':
-      this.moveToPreviousMonth();
-      this.setFocusDay(false);
-      flag = true;
-      break;
-
-    default:
-      break;
-  }
-
-  if (flag) {
-    event.stopPropagation();
-    event.preventDefault();
-  }
-};
-
-DatePicker.prototype.moveToNextYear = function () {
-  this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
-  this.updateGrid();
-};
-
-DatePicker.prototype.moveToPreviousYear = function () {
-  this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
-  this.updateGrid();
-};
-
-DatePicker.prototype.moveToNextMonth = function () {
-  this.focusDay.setMonth(this.focusDay.getMonth() + 1);
-  this.updateGrid();
-};
-
-DatePicker.prototype.moveToPreviousMonth = function () {
-  this.focusDay.setMonth(this.focusDay.getMonth() - 1);
-  this.updateGrid();
-};
-
-DatePicker.prototype.moveFocusToDay = function (day) {
-  var d = this.focusDay;
-
-  this.focusDay = day;
-
-  if ((d.getMonth() != this.focusDay.getMonth()) ||
-      (d.getYear() != this.focusDay.getYear())) {
-    this.updateGrid();
-  }
-  this.setFocusDay();
-};
-
-DatePicker.prototype.moveFocusToNextDay = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() + 1);
-  this.moveFocusToDay(d);
-};
-
-DatePicker.prototype.moveFocusToNextWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() + 7);
-  this.moveFocusToDay(d);
-};
-
-DatePicker.prototype.moveFocusToPreviousDay = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() - 1);
-  this.moveFocusToDay(d);
-};
-
-DatePicker.prototype.moveFocusToPreviousWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() - 7);
-  this.moveFocusToDay(d);
-};
-
-DatePicker.prototype.moveFocusToFirstDayOfWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() - d.getDay());
-  this.moveFocusToDay(d);
-};
-
-DatePicker.prototype.moveFocusToLastDayOfWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() + (6 - d.getDay()));
-  this.moveFocusToDay(d);
-};
-
-DatePicker.prototype.setTextboxDate = function (day) {
-  if (day) {
-    this.dateInput.setDate(day);
-  }
-  else {
-    this.dateInput.setDate(this.focusDay);
-  }
-};
-
-DatePicker.prototype.getDateInput = function () {
-
-  var parts = this.dateInput.getDate().split('/');
-
-  if ((parts.length === 3) &&
-      Number.isInteger(parseInt(parts[0])) &&
-      Number.isInteger(parseInt(parts[1])) &&
-      Number.isInteger(parseInt(parts[2]))) {
-    this.focusDay = new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1]));
-    this.selectedDay = new Date(this.focusDay);
-  }
-  else {
-    // If not a valid date (MM/DD/YY) initialize with todays date
-    this.focusDay = new Date();
-    this.selectedDay = new Date(0,0,1);
-  }
-
-};
-
-DatePicker.prototype.getDateForButtonLabel = function (year, month, day) {
-  if (typeof year !== 'number' || typeof month !== 'number' || typeof day !== 'number') {
-    this.selectedDay = this.focusDay;
-  }
-  else {
-    this.selectedDay = new Date(year, month, day);
-  }
-
-  var label = this.dayLabels[this.selectedDay.getDay()];
-  label += ' ' + this.monthLabels[this.selectedDay.getMonth()];
-  label += ' ' + (this.selectedDay.getDate());
-  label += ', ' + this.selectedDay.getFullYear();
-  return label;
-};
-
-DatePicker.prototype.setMessage = function (str) {
-
-  function setMessageDelayed () {
-    this.messageNode.textContent = str;
-  }
-
-  if (str !== this.lastMessage) {
-    setTimeout(setMessageDelayed.bind(this), 200);
-    this.lastMessage = str;
-  }
-};
-
-

From 7d704c5ff5675a6d07747bcf97deb7a07343f018 Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Mon, 30 Mar 2020 16:52:19 -0500
Subject: [PATCH 02/46] updated datepicker dialog box example

---
 .../dialog-modal/css/datepicker-dialog.css    |  71 ++++------
 examples/dialog-modal/datepicker-dialog.html  |  13 +-
 examples/dialog-modal/js/datepicker-dialog.js | 122 +++++-------------
 3 files changed, 66 insertions(+), 140 deletions(-)

diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
index 507a08d94e..525d6796f1 100644
--- a/examples/dialog-modal/css/datepicker-dialog.css
+++ b/examples/dialog-modal/css/datepicker-dialog.css
@@ -11,66 +11,43 @@
   display: block;
 }
 
-.datepicker input,
-.datepicker button {
-  background-color: white;
-  color: black;
-  box-sizing: border-box;
-  height: 1.75rem;
+.datepicker input {
   padding: 0;
   margin: 0;
-  vertical-align: bottom;
+  height: 1.5em;
+  background-color: white;
+  color: black;
   border: 1px solid gray;
-  position: relative;
 }
 
-.datepicker input {
-  width: 10.75rem;
-  border-right: none;
-  outline: none;
-  font-size: 87.5%;
-  padding: 0.1em 0.3em;
-}
-
-.datepicker button {
-  width: 1.25rem;
-  border-left: none;
-  outline: none;
+.datepicker button.icon {
+  margin: 0;
+  margin-left: 10px;
+  padding: 3px;
+  margin: 0;
+  border: 0px solid #005a9c;
+  background-color: white;
+  border-radius: 5px;
+  position: relative;
+  left: 5px;
+  top: -4px;
 }
 
-.datepicker .group.focus {
-  outline: 2px solid black;
-  outline-offset: 1px;
+.datepicker .fa-calendar-alt {
+    color: hsl(216, 89%, 51%);
 }
 
-.datepicker .group.focus input,
-.datepicker .group.focus button {
+.datepicker button.icon:focus {
+  outline: none;
+  padding: 1px;
+  border-width: 2px;
   background-color: #DEF;
 }
 
-.datepicker.group button[aria-expanded="true"] svg {
-  transform: rotate(180deg) translate(0, -1px);
-}
-
-.datepicker .group.focus {
-  outline: 2px solid black;
-  outline-offset: 1px;
-}
-
-.datepicker .group.focus input,
-.datepicker .group.focus button {
+.datepicker input:focus {
   background-color: #DEF;
-}
-
-.datepicker .group polygon {
-  fill: gray;
-  stroke: transparent;
-}
-
-.datepicker .group button[aria-expanded="true"] polygon,
-.datepicker .group.focus polygon {
-  fill: black;
-  stroke: white;
+  outline: 2px solid #005a9c;
+  outline-offset: 1px;
 }
 
 .datepicker-dialog {
diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index e3f6c2343d..0fd8b46257 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -51,17 +51,20 @@ <h2 id="ex_label">Example</h2>
           <label for="id-textbox-1">Date</label>
 
           <div class="group">
-            <input type="text"
-                  placeholder="mm/dd/yyyy"
-                  id="id-textbox-1"
-                  aria-autocomplete="none">
+            <div class="textbox">
+              <input type="text"
+                    placeholder="mm/dd/yyyy"
+                    id="id-textbox-1"
+                    aria-autocomplete="none">
+
+            </div>
 
             <button type="button" class="icon"
               aria-label="Choose Date"
               >
               <span class="fa fa-calendar-alt fa-2x"></span>
             </button>
-            </div>
+          </div>
 
         </div>
 
diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index b4fdad8b4f..bceb2c45a8 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -13,7 +13,7 @@ var DatePickerDialog = function (cdp) {
   this.messageCursorKeys = 'Cursor keys can navigate dates';
   this.lastMessage = '';
 
-  this.comboboxNode   = cdp.querySelector('input[type="text"');
+  this.textboxNode   = cdp.querySelector('input[type="text"');
   this.buttonNode     = cdp.querySelector('.group button');
   this.dialogNode     = cdp.querySelector('[role="dialog"]');
   this.messageNode    = this.dialogNode.querySelector('.dialog-message');
@@ -45,11 +45,7 @@ var DatePickerDialog = function (cdp) {
 
 DatePickerDialog.prototype.init = function () {
 
-  this.comboboxNode.addEventListener('keydown', this.handleComboboxKeyDown.bind(this));
-  this.comboboxNode.addEventListener('mouseup',   this.handleComboboxMouseUp.bind(this));
-  this.comboboxNode.addEventListener('focus',   this.handleComboboxFocus.bind(this));
-  this.comboboxNode.addEventListener('blur',   this.handleComboboxBlur.bind(this));
-
+  this.buttonNode.addEventListener('keydown',   this.handleButtonKeydown.bind(this));
   this.buttonNode.addEventListener('mouseup',   this.handleButtonMouseUp.bind(this));
 
   this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
@@ -177,9 +173,9 @@ DatePickerDialog.prototype.open = function () {
   this.dialogNode.style.display = 'block';
   this.dialogNode.style.zIndex = 2;
 
-  this.comboboxNode.setAttribute('aria-expanded', 'true')
+  this.textboxNode.setAttribute('aria-expanded', 'true')
   this.buttonNode.setAttribute('aria-expanded', 'true')
-  this.getDateFromCombobox();
+  this.getDateFromTextbox();
   this.updateGrid();
 };
 
@@ -195,11 +191,11 @@ DatePickerDialog.prototype.close = function (flag) {
 
   this.setMessage('');
   this.dialogNode.style.display = 'none';
-  this.comboboxNode.setAttribute('aria-expanded', 'false')
+  this.textboxNode.setAttribute('aria-expanded', 'false')
   this.buttonNode.setAttribute('aria-expanded', 'false')
 
   if (flag) {
-    this.comboboxNode.focus();
+    this.buttonNode.focus();
   }
 };
 
@@ -230,7 +226,7 @@ DatePickerDialog.prototype.handleOkButton = function (event) {
       break;
 
     case 'click':
-      this.setComboboxDate();
+      this.setTextboxDate();
       this.close();
       flag = true;
       break;
@@ -555,13 +551,21 @@ DatePickerDialog.prototype.updateDate = function (domNode, disable, day, selecte
 
 };
 
+DatePickerDialog.prototype.updateSelected = function (domNode) {
+  for (i = 0; i < this.days.length; i++) {
+    var day = this.days[i];
+    if (day  === domNode) {
+      day.setAttribute('aria-selected', 'true');
+    }
+    else {
+      day.removeAttribute('aria-selected');
+    }
+  }
+};
+
 DatePickerDialog.prototype.handleDayKeyDown = function (event) {
   var flag = false;
 
-  if (event.keyCode === 32) {
-    event.key = " ";
-  }
-
   switch (event.key) {
 
     case "Esc":
@@ -570,12 +574,13 @@ DatePickerDialog.prototype.handleDayKeyDown = function (event) {
       break;
 
     case " ":
-      this.setComboboxDate(event.currentTarget);
+      this.updateSelected(event.currentTarget);
+      this.setTextboxDate(event.currentTarget);
       flag = true;
       break;
 
     case "Enter":
-      this.setComboboxDate(event.currentTarget);
+      this.setTextboxDate(event.currentTarget);
       this.close();
       break;
 
@@ -654,7 +659,7 @@ DatePickerDialog.prototype.handleDayKeyDown = function (event) {
 DatePickerDialog.prototype.handleDayClick = function (event) {
 
   if (!this.isDayDisabled(event.currentTarget)) {
-    this.setComboboxDate(event.currentTarget);
+    this.setTextboxDate(event.currentTarget);
     this.close();
   }
 
@@ -667,9 +672,9 @@ DatePickerDialog.prototype.handleDayFocus = function () {
   this.setMessage(this.messageCursorKeys);
 };
 
-// Combobox methods
+// Textbox methods
 
-DatePickerDialog.prototype.setComboboxDate = function (domNode) {
+DatePickerDialog.prototype.setTextboxDate = function (domNode) {
 
   var d = this.focusDay;
 
@@ -677,14 +682,14 @@ DatePickerDialog.prototype.setComboboxDate = function (domNode) {
     d = this.getDayFromDataDateAttribute(domNode);
   }
 
-  this.comboboxNode.value = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
+  this.textboxNode.value = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
   this.setDateForButtonLabel(d.getFullYear(), d.getMonth(), d.getDate());
 
 };
 
-DatePickerDialog.prototype.getDateFromCombobox = function () {
+DatePickerDialog.prototype.getDateFromTextbox = function () {
 
-  var parts = this.comboboxNode.value.split('/');
+  var parts = this.textboxNode.value.split('/');
 
   if ((parts.length === 3) &&
       Number.isInteger(parseInt(parts[0])) &&
@@ -729,92 +734,33 @@ DatePickerDialog.prototype.setMessage = function (str) {
   }
 };
 
-DatePickerDialog.prototype.setFocusCombobox = function () {
-  this.comboboxNode.focus();
-};
-
-DatePickerDialog.prototype.handleComboboxKeyDown = function (event) {
-  var flag = false,
-    char = event.key,
-    altKey   = event.altKey;
-
-  if (event.ctrlKey || event.shiftKey) {
-    return;
-  }
-
-  switch (event.key) {
-
-    case "Enter":
-    case "Down":
-    case "ArrowDown":
-      this.open();
-      this.setFocusDay();
-      flag = true;
-      break;
-
-    case "Esc":
-    case "Escape":
-      if (this.isOpen()) {
-        this.close(false);
-      }
-      else {
-        this.comboboxNode.value = '';
-      }
-      this.option = null;
-      flag = true;
-      break;
-
-    case "Tab":
-      this.close(false);
-      break;
-
+DatePickerDialog.prototype.handleButtonKeydown = function (event) {
 
-    default:
-      break;
-  }
+  if (event.key === 'Enter' || event.key == ' ') {
+    this.open();
+    this.setFocusDay();
 
-  if (flag) {
     event.stopPropagation();
     event.preventDefault();
   }
 
 };
 
-DatePickerDialog.prototype.handleComboboxMouseUp = function (event) {
-  if (this.isOpen()) {
-    this.close(false);
-  }
-  else {
-    this.open();
-  }
-
-  event.stopPropagation();
-  event.preventDefault();
-};
-
 DatePickerDialog.prototype.handleButtonMouseUp = function (event) {
   if (this.isOpen()) {
     this.close();
   }
   else {
     this.open();
-    this.setFocusCombobox();
+    this.setFocusDay();
   }
 
   event.stopPropagation();
   event.preventDefault();
 };
 
-DatePickerDialog.prototype.handleComboboxFocus = function (event) {
-  event.currentTarget.parentNode.classList.add('focus');
-};
-
-DatePickerDialog.prototype.handleComboboxBlur = function (event) {
-  event.currentTarget.parentNode.classList.remove('focus');
-};
-
 DatePickerDialog.prototype.handleBackgroundMouseUp = function (event) {
-  if (!this.comboboxNode.contains(event.target) &&
+  if (!this.textboxNode.contains(event.target) &&
       !this.buttonNode.contains(event.target) &&
       !this.dialogNode.contains(event.target)) {
 

From 27eed2ceef89ccaf71fb84ffef186f85f3259563 Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Tue, 31 Mar 2020 12:15:25 -0500
Subject: [PATCH 03/46] updated date picker menu button

---
 .../dialog-modal/css/datepicker-dialog.css    |  20 +-
 examples/dialog-modal/datepicker-dialog.html  |   4 +-
 examples/dialog-modal/js/datepicker-dialog.js | 442 +++++++++---------
 test/tests/dialog-modal_datepicker.js         |  50 +-
 4 files changed, 275 insertions(+), 241 deletions(-)

diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
index 525d6796f1..e89d1316ed 100644
--- a/examples/dialog-modal/css/datepicker-dialog.css
+++ b/examples/dialog-modal/css/datepicker-dialog.css
@@ -149,22 +149,22 @@
   text-align: center;
 }
 
-.datepicker-dialog .dates {
+.datepicker-dialog table.dates {
   padding-left: 1em;
   padding-right: 1em;
   padding-top: 1em;
 }
 
-.datepicker-dialog .dates th,
-.datepicker-dialog .dates td {
+.datepicker-dialog table.dates th,
+.datepicker-dialog table.dates td {
   text-align: center;
 }
 
-.datepicker-dialog .dates tr {
+.datepicker-dialog table.dates tr {
   border: 1px solid black;
 }
 
-.datepicker-dialog .dates td {
+.datepicker-dialog table.dates td {
   padding: 1px;
   margin: 0;
   line-height: inherit;
@@ -176,23 +176,23 @@
   background: #eee;
 }
 
-.datepicker-dialog .dates td:focus,
-.datepicker-dialog .dates td:hover {
+.datepicker-dialog table.dates td:focus,
+.datepicker-dialog table.dates td:hover {
   padding: 0;
   background-color: hsl(216, 80%, 92%);
 }
 
-.datepicker-dialog .dates td:focus {
+.datepicker-dialog table.dates td:focus {
   border-width: 2px;
   border-color: rgb(100, 100, 100);
   outline: 0;
 }
 
-.datepicker-dialog .dates td[aria-selected] {
+.datepicker-dialog table.dates td[aria-selected] {
   border-color: rgb(100, 100, 100);
 }
 
-.datepicker-dialog .dates td[tabindex="0"] {
+.datepicker-dialog table.dates td[tabindex="0"] {
   background-color: hsl(216, 80%, 92%);
 }
 
diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 0fd8b46257..791444b751 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -107,7 +107,7 @@ <h2 id="ex_label">Example</h2>
             id="myDatepickerGrid"
             class="dates"
             role="grid"
-            aria-labelledby="cb-dialog-label">
+            aria-labelledby="id-dialog-label">
             <thead>
               <tr>
                 <th scope="col" abbr="Sunday">Su</th>
@@ -225,7 +225,7 @@ <h3 id="kbd_label_2">Choose Date Button</h3>
         </thead>
         <tbody>
             <tr data-test-id="button-space-return-down-arrow">
-                <th><kbd>Space</kbd>,<br><kbd>Enter</kbd></th>
+                <th><kbd>Space</kbd>,<br><kbd>Enter</kbd>>,<br><kbd>Down Arrow</kbd></th>
                 <td>
                   <ul>
                     <li>Open the date picker dialog.</li>
diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index bceb2c45a8..88e634e2f4 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -2,10 +2,10 @@
 *   This content is licensed according to the W3C Software License at
 *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
 *
-*   File:   DatePickerDialog.js
+*   File:   MenuButtonDatePicker.js
 */
 
-var DatePickerDialog = function (cdp) {
+var MenuButtonDatePicker = function (cdp) {
   this.buttonLabel = 'Date';
   this.dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
   this.monthLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
@@ -43,7 +43,9 @@ var DatePickerDialog = function (cdp) {
 
 };
 
-DatePickerDialog.prototype.init = function () {
+MenuButtonDatePicker.prototype.init = function () {
+
+  this.textboxNode.addEventListener('mouseup',   this.handleTextboxMouseUp.bind(this));
 
   this.buttonNode.addEventListener('keydown',   this.handleButtonKeydown.bind(this));
   this.buttonNode.addEventListener('mouseup',   this.handleButtonMouseUp.bind(this));
@@ -91,18 +93,18 @@ DatePickerDialog.prototype.init = function () {
   this.close();
 };
 
-DatePickerDialog.prototype.isSameDay = function (day1, day2) {
+MenuButtonDatePicker.prototype.isSameDay = function (day1, day2) {
   return (day1.getFullYear() == day2.getFullYear()) &&
         (day1.getMonth() == day2.getMonth()) &&
         (day1.getDate() == day2.getDate());
 };
 
-DatePickerDialog.prototype.isNotSameMonth = function (day1, day2) {
+MenuButtonDatePicker.prototype.isNotSameMonth = function (day1, day2) {
   return (day1.getFullYear() != day2.getFullYear()) ||
         (day1.getMonth() != day2.getMonth());
 };
 
-DatePickerDialog.prototype.updateGrid = function () {
+MenuButtonDatePicker.prototype.updateGrid = function () {
 
   var i, flag;
   var fd = this.focusDay;
@@ -133,7 +135,7 @@ DatePickerDialog.prototype.updateGrid = function () {
   }
 };
 
-DatePickerDialog.prototype.setFocusDay = function (flag) {
+MenuButtonDatePicker.prototype.setFocusDay = function (flag) {
 
   if (typeof flag !== 'boolean') {
     flag = true;
@@ -160,7 +162,7 @@ DatePickerDialog.prototype.setFocusDay = function (flag) {
 
 };
 
-DatePickerDialog.prototype.updateDay = function (day) {
+MenuButtonDatePicker.prototype.updateDay = function (day) {
   var d = this.focusDay;
   this.focusDay = day;
   if (this.isNotSameMonth(d, day)) {
@@ -169,7 +171,7 @@ DatePickerDialog.prototype.updateDay = function (day) {
   }
 };
 
-DatePickerDialog.prototype.open = function () {
+MenuButtonDatePicker.prototype.open = function () {
   this.dialogNode.style.display = 'block';
   this.dialogNode.style.zIndex = 2;
 
@@ -179,11 +181,11 @@ DatePickerDialog.prototype.open = function () {
   this.updateGrid();
 };
 
-DatePickerDialog.prototype.isOpen = function () {
+MenuButtonDatePicker.prototype.isOpen = function () {
   return window.getComputedStyle(this.dialogNode).display !== 'none';
 };
 
-DatePickerDialog.prototype.close = function (flag) {
+MenuButtonDatePicker.prototype.close = function (flag) {
   if (typeof flag !== 'boolean') {
     // Default is to move focus to combobox
     flag = true;
@@ -199,7 +201,195 @@ DatePickerDialog.prototype.close = function (flag) {
   }
 };
 
-DatePickerDialog.prototype.handleOkButton = function (event) {
+MenuButtonDatePicker.prototype.moveFocusToDay = function (day) {
+  var d = this.focusDay;
+
+  this.focusDay = day;
+
+  if ((d.getMonth() != this.focusDay.getMonth()) ||
+      (d.getYear() != this.focusDay.getYear())) {
+    this.updateGrid();
+  }
+  this.setFocusDay();
+};
+
+
+MenuButtonDatePicker.prototype.moveToNextYear = function () {
+  this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
+  this.updateGrid();
+};
+
+MenuButtonDatePicker.prototype.moveToPreviousYear = function () {
+  this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
+  this.updateGrid();
+};
+
+MenuButtonDatePicker.prototype.moveToNextMonth = function () {
+  this.focusDay.setMonth(this.focusDay.getMonth() + 1);
+  this.updateGrid();
+};
+
+MenuButtonDatePicker.prototype.moveToPreviousMonth = function () {
+  this.focusDay.setMonth(this.focusDay.getMonth() - 1);
+  this.updateGrid();
+};
+
+MenuButtonDatePicker.prototype.moveFocusToNextDay = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + 1);
+  this.moveFocusToDay(d);
+};
+
+MenuButtonDatePicker.prototype.moveFocusToNextWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + 7);
+  this.moveFocusToDay(d);
+};
+
+MenuButtonDatePicker.prototype.moveFocusToPreviousDay = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - 1);
+  this.moveFocusToDay(d);
+};
+
+MenuButtonDatePicker.prototype.moveFocusToPreviousWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - 7);
+  this.moveFocusToDay(d);
+};
+
+MenuButtonDatePicker.prototype.moveFocusToFirstDayOfWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - d.getDay());
+  this.moveFocusToDay(d);
+};
+
+MenuButtonDatePicker.prototype.moveFocusToLastDayOfWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + (6 - d.getDay()));
+  this.moveFocusToDay(d);
+};
+
+// Day methods
+
+MenuButtonDatePicker.prototype.isDayDisabled = function (domNode) {
+  return domNode.classList.contains('disabled');
+};
+
+MenuButtonDatePicker.prototype.getDayFromDataDateAttribute = function (domNode) {
+  var parts = domNode.getAttribute('data-date').split('-');
+  return new Date(parts[0], parseInt(parts[1])-1, parts[2]);
+};
+
+MenuButtonDatePicker.prototype.updateDate = function (domNode, disable, day, selected) {
+
+  var d = day.getDate().toString();
+  if (day.getDate() <= 9) {
+    d = '0' + d;
+  }
+
+  var m = day.getMonth() + 1;
+  if (day.getMonth() < 9) {
+    m = '0' + m;
+  }
+
+  domNode.setAttribute('tabindex', '-1');
+  domNode.removeAttribute('aria-selected');
+  domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
+
+  if (disable) {
+    domNode.classList.add('disabled');
+    domNode.innerHTML = '';
+  }
+  else {
+    domNode.classList.remove('disabled');
+    domNode.innerHTML = day.getDate();
+    if (selected) {
+      domNode.setAttribute('aria-selected', 'true');
+      domNode.setAttribute('tabindex', '0');
+    }
+  }
+
+};
+
+MenuButtonDatePicker.prototype.updateSelected = function (domNode) {
+  for (i = 0; i < this.days.length; i++) {
+    var day = this.days[i];
+    if (day  === domNode) {
+      day.setAttribute('aria-selected', 'true');
+    }
+    else {
+      day.removeAttribute('aria-selected');
+    }
+  }
+};
+
+// Textbox methods
+
+MenuButtonDatePicker.prototype.setTextboxDate = function (domNode) {
+
+  var d = this.focusDay;
+
+  if (domNode) {
+    d = this.getDayFromDataDateAttribute(domNode);
+  }
+
+  this.textboxNode.value = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
+  this.setDateForButtonLabel(d.getFullYear(), d.getMonth(), d.getDate());
+
+};
+
+MenuButtonDatePicker.prototype.getDateFromTextbox = function () {
+
+  var parts = this.textboxNode.value.split('/');
+
+  if ((parts.length === 3) &&
+      Number.isInteger(parseInt(parts[0])) &&
+      Number.isInteger(parseInt(parts[1])) &&
+      Number.isInteger(parseInt(parts[2]))) {
+    this.focusDay = new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1]));
+    this.selectedDay = new Date(this.focusDay);
+  }
+  else {
+    // If not a valid date (MM/DD/YY) initialize with todays date
+    this.focusDay = new Date();
+    this.selectedDay = new Date(0,0,1);
+  }
+
+};
+
+MenuButtonDatePicker.prototype.setDateForButtonLabel = function (year, month, day) {
+  if (typeof year !== 'number' || typeof month !== 'number' || typeof day !== 'number') {
+    this.selectedDay = this.focusDay;
+  }
+  else {
+    this.selectedDay = new Date(year, month, day);
+  }
+
+  var label = this.buttonLabel;
+  label += ', ' + this.dayLabels[this.selectedDay.getDay()];
+  label += ' ' + this.monthLabels[this.selectedDay.getMonth()];
+  label += ' ' + (this.selectedDay.getDate());
+  label += ', ' + this.selectedDay.getFullYear();
+  this.buttonNode.setAttribute('aria-label', label);
+};
+
+MenuButtonDatePicker.prototype.setMessage = function (str) {
+
+  function setMessageDelayed () {
+    this.messageNode.textContent = str;
+  }
+
+  if (str !== this.lastMessage) {
+    setTimeout(setMessageDelayed.bind(this), 200);
+    this.lastMessage = str;
+  }
+};
+
+// Event handlers
+
+
+MenuButtonDatePicker.prototype.handleOkButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -241,7 +431,7 @@ DatePickerDialog.prototype.handleOkButton = function (event) {
   }
 };
 
-DatePickerDialog.prototype.handleCancelButton = function (event) {
+MenuButtonDatePicker.prototype.handleCancelButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -276,7 +466,7 @@ DatePickerDialog.prototype.handleCancelButton = function (event) {
   }
 };
 
-DatePickerDialog.prototype.handleNextYearButton = function (event) {
+MenuButtonDatePicker.prototype.handleNextYearButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -314,7 +504,7 @@ DatePickerDialog.prototype.handleNextYearButton = function (event) {
   }
 };
 
-DatePickerDialog.prototype.handlePreviousYearButton = function (event) {
+MenuButtonDatePicker.prototype.handlePreviousYearButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -363,7 +553,7 @@ DatePickerDialog.prototype.handlePreviousYearButton = function (event) {
   }
 };
 
-DatePickerDialog.prototype.handleNextMonthButton = function (event) {
+MenuButtonDatePicker.prototype.handleNextMonthButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -401,7 +591,7 @@ DatePickerDialog.prototype.handleNextMonthButton = function (event) {
   }
 };
 
-DatePickerDialog.prototype.handlePreviousMonthButton = function (event) {
+MenuButtonDatePicker.prototype.handlePreviousMonthButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -440,131 +630,13 @@ DatePickerDialog.prototype.handlePreviousMonthButton = function (event) {
   }
 };
 
-DatePickerDialog.prototype.moveFocusToDay = function (day) {
-  var d = this.focusDay;
-
-  this.focusDay = day;
-
-  if ((d.getMonth() != this.focusDay.getMonth()) ||
-      (d.getYear() != this.focusDay.getYear())) {
-    this.updateGrid();
-  }
-  this.setFocusDay();
-};
-
-
-DatePickerDialog.prototype.moveToNextYear = function () {
-  this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
-  this.updateGrid();
-};
-
-DatePickerDialog.prototype.moveToPreviousYear = function () {
-  this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
-  this.updateGrid();
-};
-
-DatePickerDialog.prototype.moveToNextMonth = function () {
-  this.focusDay.setMonth(this.focusDay.getMonth() + 1);
-  this.updateGrid();
-};
-
-DatePickerDialog.prototype.moveToPreviousMonth = function () {
-  this.focusDay.setMonth(this.focusDay.getMonth() - 1);
-  this.updateGrid();
-};
-
-DatePickerDialog.prototype.moveFocusToNextDay = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() + 1);
-  this.moveFocusToDay(d);
-};
-
-DatePickerDialog.prototype.moveFocusToNextWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() + 7);
-  this.moveFocusToDay(d);
-};
-
-DatePickerDialog.prototype.moveFocusToPreviousDay = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() - 1);
-  this.moveFocusToDay(d);
-};
-
-DatePickerDialog.prototype.moveFocusToPreviousWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() - 7);
-  this.moveFocusToDay(d);
-};
-
-DatePickerDialog.prototype.moveFocusToFirstDayOfWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() - d.getDay());
-  this.moveFocusToDay(d);
-};
-
-DatePickerDialog.prototype.moveFocusToLastDayOfWeek = function () {
-  var d = new Date(this.focusDay);
-  d.setDate(d.getDate() + (6 - d.getDay()));
-  this.moveFocusToDay(d);
-};
-
-// Day methods
-
-DatePickerDialog.prototype.isDayDisabled = function (domNode) {
-  return domNode.classList.contains('disabled');
-};
-
-DatePickerDialog.prototype.getDayFromDataDateAttribute = function (domNode) {
-  var parts = domNode.getAttribute('data-date').split('-');
-  return new Date(parts[0], parseInt(parts[1])-1, parts[2]);
-};
-
-DatePickerDialog.prototype.updateDate = function (domNode, disable, day, selected) {
-
-  var d = day.getDate().toString();
-  if (day.getDate() <= 9) {
-    d = '0' + d;
-  }
-
-  var m = day.getMonth() + 1;
-  if (day.getMonth() < 9) {
-    m = '0' + m;
-  }
-
-  domNode.setAttribute('tabindex', '-1');
-  domNode.removeAttribute('aria-selected');
-  domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
-
-  if (disable) {
-    domNode.classList.add('disabled');
-    domNode.innerHTML = '';
-  }
-  else {
-    domNode.classList.remove('disabled');
-    domNode.innerHTML = day.getDate();
-    if (selected) {
-      domNode.setAttribute('aria-selected', 'true');
-      domNode.setAttribute('tabindex', '0');
-    }
-  }
-
-};
+MenuButtonDatePicker.prototype.handleDayKeyDown = function (event) {
+  var flag = false;
 
-DatePickerDialog.prototype.updateSelected = function (domNode) {
-  for (i = 0; i < this.days.length; i++) {
-    var day = this.days[i];
-    if (day  === domNode) {
-      day.setAttribute('aria-selected', 'true');
-    }
-    else {
-      day.removeAttribute('aria-selected');
-    }
+  // fix bug in rgression code
+  if (event.keyCode === 32) {
+    event.key = " ";
   }
-};
-
-DatePickerDialog.prototype.handleDayKeyDown = function (event) {
-  var flag = false;
 
   switch (event.key) {
 
@@ -656,7 +728,7 @@ DatePickerDialog.prototype.handleDayKeyDown = function (event) {
   }
 };
 
-DatePickerDialog.prototype.handleDayClick = function (event) {
+MenuButtonDatePicker.prototype.handleDayClick = function (event) {
 
   if (!this.isDayDisabled(event.currentTarget)) {
     this.setTextboxDate(event.currentTarget);
@@ -668,75 +740,17 @@ DatePickerDialog.prototype.handleDayClick = function (event) {
 
 };
 
-DatePickerDialog.prototype.handleDayFocus = function () {
+MenuButtonDatePicker.prototype.handleDayFocus = function () {
   this.setMessage(this.messageCursorKeys);
 };
 
-// Textbox methods
+MenuButtonDatePicker.prototype.handleButtonKeydown = function (event) {
 
-DatePickerDialog.prototype.setTextboxDate = function (domNode) {
-
-  var d = this.focusDay;
-
-  if (domNode) {
-    d = this.getDayFromDataDateAttribute(domNode);
-  }
-
-  this.textboxNode.value = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
-  this.setDateForButtonLabel(d.getFullYear(), d.getMonth(), d.getDate());
-
-};
-
-DatePickerDialog.prototype.getDateFromTextbox = function () {
-
-  var parts = this.textboxNode.value.split('/');
-
-  if ((parts.length === 3) &&
-      Number.isInteger(parseInt(parts[0])) &&
-      Number.isInteger(parseInt(parts[1])) &&
-      Number.isInteger(parseInt(parts[2]))) {
-    this.focusDay = new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1]));
-    this.selectedDay = new Date(this.focusDay);
-  }
-  else {
-    // If not a valid date (MM/DD/YY) initialize with todays date
-    this.focusDay = new Date();
-    this.selectedDay = new Date(0,0,1);
-  }
-
-};
-
-DatePickerDialog.prototype.setDateForButtonLabel = function (year, month, day) {
-  if (typeof year !== 'number' || typeof month !== 'number' || typeof day !== 'number') {
-    this.selectedDay = this.focusDay;
-  }
-  else {
-    this.selectedDay = new Date(year, month, day);
-  }
-
-  var label = this.buttonLabel;
-  label += ', ' + this.dayLabels[this.selectedDay.getDay()];
-  label += ' ' + this.monthLabels[this.selectedDay.getMonth()];
-  label += ' ' + (this.selectedDay.getDate());
-  label += ', ' + this.selectedDay.getFullYear();
-  this.buttonNode.setAttribute('aria-label', label);
-};
-
-DatePickerDialog.prototype.setMessage = function (str) {
-
-  function setMessageDelayed () {
-    this.messageNode.textContent = str;
-  }
-
-  if (str !== this.lastMessage) {
-    setTimeout(setMessageDelayed.bind(this), 200);
-    this.lastMessage = str;
-  }
-};
-
-DatePickerDialog.prototype.handleButtonKeydown = function (event) {
-
-  if (event.key === 'Enter' || event.key == ' ') {
+  if ((event.key === "Enter") ||
+      (event.key == "Down")  ||
+      (event.key == "ArrowDown")  ||
+      (event.key == " ") ||
+      (event.keyCode == 32)) {
     this.open();
     this.setFocusDay();
 
@@ -746,7 +760,7 @@ DatePickerDialog.prototype.handleButtonKeydown = function (event) {
 
 };
 
-DatePickerDialog.prototype.handleButtonMouseUp = function (event) {
+MenuButtonDatePicker.prototype.handleButtonMouseUp = function (event) {
   if (this.isOpen()) {
     this.close();
   }
@@ -759,7 +773,17 @@ DatePickerDialog.prototype.handleButtonMouseUp = function (event) {
   event.preventDefault();
 };
 
-DatePickerDialog.prototype.handleBackgroundMouseUp = function (event) {
+
+MenuButtonDatePicker.prototype.handleTextboxMouseUp = function (event) {
+  if (this.isOpen()) {
+    this.close();
+    this.textboxNode.focus();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+};
+MenuButtonDatePicker.prototype.handleBackgroundMouseUp = function (event) {
   if (!this.textboxNode.contains(event.target) &&
       !this.buttonNode.contains(event.target) &&
       !this.dialogNode.contains(event.target)) {
@@ -779,7 +803,7 @@ window.addEventListener('load' , function () {
   var datePickers = document.querySelectorAll('.datepicker');
 
   datePickers.forEach(function (dp) {
-    var datePicker = new DatePickerDialog(dp);
+    var datePicker = new MenuButtonDatePicker(dp);
   });
 
 });
diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
index f6d3918697..4ef9b5c066 100644
--- a/test/tests/dialog-modal_datepicker.js
+++ b/test/tests/dialog-modal_datepicker.js
@@ -19,30 +19,29 @@ const ex = {
   dialogSelector: '#example [role="dialog"]',
   inputSelector: '#example input',
   buttonSelector: '#example button.icon',
-  statusSelector: '#example [role="status"]',
-  messageSelector: '#example .message',
-  gridSelector: '#example [role="grid"]',
-  gridcellSelector: '#example [role="gridcell"]',
+  messageSelector: '#example .dialog-message',
   controlButtons: '#example [role="dialog"] .header button',
-  currentMonthDateButtons: '#example [role="dialog"] button.dateButton:not(.disabled)',
-  allDateButtons: '#example [role="dialog"] button.dateButton',
-  jan12019Button: '#example [role="dialog"] button[data-date="2019-01-01"]',
-  jan22019Button: '#example [role="dialog"] button[data-date="2019-01-02"]',
-  todayButton: `#example [role="dialog"] button[data-date="${todayDataDate}"]`,
-  currentlyFocusedButton: '#example [role="dialog"] button[tabindex=\'0\']',
+  gridSelector: '#example [role="dialog"] table.dates',
+  gridcellSelector: '#example [role="dialog"] table.dates td',
+  currentMonthDateButtons: '#example table.dates td:not(.disabled)',
+  allDateButtons: '#example [role="dialog"] table.dates td',
+  jan12019Button: '#example [role="dialog"] table.dates td[data-date="2019-01-01"]',
+  jan22019Button: '#example [role="dialog"] table.dates td[data-date="2019-01-02"]',
+  todayButton: `#example [role="dialog"] table.dates td[data-date="${todayDataDate}"]`,
+  currentlyFocusedButton: '#example [role="dialog"] [tabindex=\'0\']',
   allFocusableElementsInDialog: [
-    `#example [role="dialog"] button[data-date="${todayDataDate}"]`,
+    `#example [role="dialog"] td[data-date="${todayDataDate}"]`,
     '#example [role="dialog"] button[value="cancel"]',
     '#example [role="dialog"] button[value="ok"]',
-    '#example [role="dialog"] button.prevYear',
-    '#example [role="dialog"] button.prevMonth',
-    '#example [role="dialog"] button.nextMonth',
-    '#example [role="dialog"] button.nextYear'
+    '#example [role="dialog"] button.prev-year',
+    '#example [role="dialog"] button.prev-month',
+    '#example [role="dialog"] button.next-month',
+    '#example [role="dialog"] button.next-year'
   ],
-  prevMonthButton: '#example button.prevMonth',
-  prevYearButton: '#example button.prevYear',
-  nextMonthButton: '#example button.nextMonth',
-  nextYearButton: '#example button.nextYear',
+  prevMonthButton: '#example [role="dialog"] button.prev-month',
+  prevYearButton: '#example [role="dialog"] button.prev-year',
+  nextMonthButton: '#example [role="dialog"] button.next-month',
+  nextYearButton: '#example [role="dialog"] button.next-year',
   cancelButton: '#example [role="dialog"] button[value="cancel"]',
   okButton: '#example [role="dialog"] button[value="ok"]'
 };
@@ -211,6 +210,17 @@ ariaTest('ENTER to open datepicker', exampleFile, 'button-space-return-down-arro
   );
 });
 
+ariaTest('DOWN ARROW to open datepicker', exampleFile, 'button-space-return-down-arrow', async (t) => {
+  let chooseDateButton = await t.context.session.findElement(By.css(ex.buttonSelector));
+  chooseDateButton.sendKeys(Key.ARROW_DOWN);
+
+  t.not(
+    await t.context.session.findElement(By.css(ex.dialogSelector)).getCssValue('display'),
+    'none',
+    'After sending DOWN ARROW to the "choose date" button, the calendar dialog should open'
+  );
+});
+
 ariaTest('SPACE to open datepicker', exampleFile, 'button-space-return-down-arrow', async (t) => {
   let chooseDateButton = await t.context.session.findElement(By.css(ex.buttonSelector));
   chooseDateButton.sendKeys(Key.SPACE);
@@ -229,7 +239,7 @@ ariaTest('Sending key ESC when focus is in dialog closes dialog', exampleFile, '
 
   for (let i = 0; i < ex.allFocusableElementsInDialog.length; i++) {
 
-    await chooseDateButton.click();
+    await chooseDateButton.sendKeys(Key.ENTER);
     let el = t.context.session.findElement(By.css(ex.allFocusableElementsInDialog[i]));
     await el.sendKeys(Key.ESCAPE);
 

From 7ade8e9a9b8363ce5307495f5bc71fb257ade4a9 Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Tue, 31 Mar 2020 12:46:40 -0500
Subject: [PATCH 04/46] updated menu button datepicker dialog example

---
 examples/dialog-modal/js/datepicker-dialog.js |   4 +-
 test/tests/dialog-modal_datepicker.js         | 120 +++++++++---------
 2 files changed, 63 insertions(+), 61 deletions(-)

diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index 88e634e2f4..f46c1d093f 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -635,7 +635,9 @@ MenuButtonDatePicker.prototype.handleDayKeyDown = function (event) {
 
   // fix bug in rgression code
   if (event.keyCode === 32) {
-    event.key = " ";
+    this.updateSelected(event.currentTarget);
+    this.setTextboxDate(event.currentTarget);
+    flag = true;
   }
 
   switch (event.key) {
diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
index 4ef9b5c066..1742808e67 100644
--- a/test/tests/dialog-modal_datepicker.js
+++ b/test/tests/dialog-modal_datepicker.js
@@ -24,13 +24,13 @@ const ex = {
   gridSelector: '#example [role="dialog"] table.dates',
   gridcellSelector: '#example [role="dialog"] table.dates td',
   currentMonthDateButtons: '#example table.dates td:not(.disabled)',
-  allDateButtons: '#example [role="dialog"] table.dates td',
-  jan12019Button: '#example [role="dialog"] table.dates td[data-date="2019-01-01"]',
-  jan22019Button: '#example [role="dialog"] table.dates td[data-date="2019-01-02"]',
-  todayButton: `#example [role="dialog"] table.dates td[data-date="${todayDataDate}"]`,
-  currentlyFocusedButton: '#example [role="dialog"] [tabindex=\'0\']',
+  allDates: '#example [role="dialog"] table.dates td',
+  jan12019Day: '#example [role="dialog"] table.dates td[data-date="2019-01-01"]',
+  jan22019Day: '#example [role="dialog"] table.dates td[data-date="2019-01-02"]',
+  todayDay: `#example [role="dialog"] table.dates td[data-date="${todayDataDate}"]`,
+  currentlyFocusedDay: '#example [role="dialog"] table.dates td[tabindex=\'0\']',
   allFocusableElementsInDialog: [
-    `#example [role="dialog"] td[data-date="${todayDataDate}"]`,
+    `#example [role="dialog"] table.dates td[data-date="${todayDataDate}"]`,
     '#example [role="dialog"] button[value="cancel"]',
     '#example [role="dialog"] button[value="ok"]',
     '#example [role="dialog"] button.prev-year',
@@ -136,7 +136,7 @@ ariaTest('Roving tab index on dates in gridcell', exampleFile, 'gridcell-button-
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
 
   let focusableButtons = await t.context.session.findElements(By.css(ex.currentMonthDateButtons));
-  let allButtons = await t.context.session.findElements(By.css(ex.allDateButtons));
+  let allButtons = await t.context.session.findElements(By.css(ex.allDates));
 
   // test only one element has tabindex="0"
   for (let tabableEl = 0; tabableEl < 30; tabableEl++) {
@@ -164,14 +164,14 @@ ariaTest('aria-selected on selected date', exampleFile, 'gridcell-button-aria-se
   t.plan(5);
 
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-  await assertAttributeDNE(t, ex.allDateButtons, 'aria-selected');
+  await assertAttributeDNE(t, ex.allDates, 'aria-selected');
 
   await setDateToJanFirst2019(t);
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-  await assertAttributeValues(t, ex.jan12019Button, 'aria-selected', 'true');
+  await assertAttributeValues(t, ex.jan12019Day, 'aria-selected', 'true');
 
   let selectedButtons = await t.context.session.findElements(
-    By.css(`${ex.allDateButtons}[aria-selected="true"]`)
+    By.css(`${ex.allDates}[aria-selected="true"]`)
   );
 
   t.is(
@@ -180,12 +180,12 @@ ariaTest('aria-selected on selected date', exampleFile, 'gridcell-button-aria-se
     'after setting date in box, only one button should have aria-selected'
   );
 
-  await t.context.session.findElement(By.css(ex.jan22019Button)).click();
+  await t.context.session.findElement(By.css(ex.jan22019Day)).click();
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-  await assertAttributeValues(t, ex.jan22019Button, 'aria-selected', 'true');
+  await assertAttributeValues(t, ex.jan22019Day, 'aria-selected', 'true');
 
   selectedButtons = await t.context.session.findElements(
-    By.css(`${ex.allDateButtons}[aria-selected="true"]`)
+    By.css(`${ex.allDates}[aria-selected="true"]`)
   );
 
   t.is(
@@ -309,7 +309,7 @@ ariaTest('ENTER to buttons change calendar and date in focus', exampleFile, 'mon
   await t.context.session.findElement(By.css(ex.nextMonthButton)).sendKeys(Key.ENTER);
   day.setMonth(day.getMonth() + 1);
   let dayInFocus = await t.context.session
-    .findElement(By.css(ex.currentlyFocusedButton))
+    .findElement(By.css(ex.currentlyFocusedDay))
     .getAttribute('data-date');
 
   t.is(
@@ -322,7 +322,7 @@ ariaTest('ENTER to buttons change calendar and date in focus', exampleFile, 'mon
   await t.context.session.findElement(By.css(ex.nextYearButton)).sendKeys(Key.ENTER);
   day.setFullYear(day.getFullYear() + 1);
   dayInFocus = await t.context.session
-    .findElement(By.css(ex.currentlyFocusedButton))
+    .findElement(By.css(ex.currentlyFocusedDay))
     .getAttribute('data-date');
 
   t.is(
@@ -335,7 +335,7 @@ ariaTest('ENTER to buttons change calendar and date in focus', exampleFile, 'mon
   await t.context.session.findElement(By.css(ex.prevMonthButton)).sendKeys(Key.ENTER);
   day.setMonth(day.getMonth() - 1);
   dayInFocus = await t.context.session
-    .findElement(By.css(ex.currentlyFocusedButton))
+    .findElement(By.css(ex.currentlyFocusedDay))
     .getAttribute('data-date');
 
   t.is(
@@ -349,7 +349,7 @@ ariaTest('ENTER to buttons change calendar and date in focus', exampleFile, 'mon
   await t.context.session.findElement(By.css(ex.prevYearButton)).sendKeys(Key.ENTER);
   day.setFullYear(day.getFullYear() - 1);
   dayInFocus = await t.context.session
-    .findElement(By.css(ex.currentlyFocusedButton))
+    .findElement(By.css(ex.currentlyFocusedDay))
     .getAttribute('data-date');
 
   t.is(
@@ -371,7 +371,7 @@ ariaTest('SPACE to buttons change calendar and date in focus', exampleFile, 'mon
   await t.context.session.findElement(By.css(ex.nextMonthButton)).sendKeys(Key.SPACE);
   day.setMonth(day.getMonth() + 1);
   let dayInFocus = await t.context.session
-    .findElement(By.css(ex.currentlyFocusedButton))
+    .findElement(By.css(ex.currentlyFocusedDay))
     .getAttribute('data-date');
 
   t.is(
@@ -384,7 +384,7 @@ ariaTest('SPACE to buttons change calendar and date in focus', exampleFile, 'mon
   await t.context.session.findElement(By.css(ex.nextYearButton)).sendKeys(Key.SPACE);
   day.setFullYear(day.getFullYear() + 1);
   dayInFocus = await t.context.session
-    .findElement(By.css(ex.currentlyFocusedButton))
+    .findElement(By.css(ex.currentlyFocusedDay))
     .getAttribute('data-date');
 
   t.is(
@@ -397,7 +397,7 @@ ariaTest('SPACE to buttons change calendar and date in focus', exampleFile, 'mon
   await t.context.session.findElement(By.css(ex.prevMonthButton)).sendKeys(Key.SPACE);
   day.setMonth(day.getMonth() - 1);
   dayInFocus = await t.context.session
-    .findElement(By.css(ex.currentlyFocusedButton))
+    .findElement(By.css(ex.currentlyFocusedDay))
     .getAttribute('data-date');
 
   t.is(
@@ -411,7 +411,7 @@ ariaTest('SPACE to buttons change calendar and date in focus', exampleFile, 'mon
   await t.context.session.findElement(By.css(ex.prevYearButton)).sendKeys(Key.SPACE);
   day.setFullYear(day.getFullYear() - 1);
   dayInFocus = await t.context.session
-    .findElement(By.css(ex.currentlyFocusedButton))
+    .findElement(By.css(ex.currentlyFocusedDay))
     .getAttribute('data-date');
 
   t.is(
@@ -428,7 +428,7 @@ ariaTest('SPACE or RETURN selects date in focus', exampleFile, 'grid-space-retur
   let day = new Date();
 
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-  await t.context.session.findElement(By.css(ex.todayButton)).sendKeys(Key.ENTER);
+  await t.context.session.findElement(By.css(ex.todayDay)).sendKeys(Key.ENTER);
   t.is(
     await t.context.session.findElement(By.css(ex.inputSelector)).getAttribute('value'),
     `${day.getMonth() + 1}/${day.getDate()}/${day.getFullYear()}`,
@@ -436,8 +436,8 @@ ariaTest('SPACE or RETURN selects date in focus', exampleFile, 'grid-space-retur
   );
 
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-  await t.context.session.findElement(By.css(ex.todayButton)).sendKeys(Key.ARROW_RIGHT);
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.SPACE);
+  await t.context.session.findElement(By.css(ex.todayDay)).sendKeys(Key.ARROW_RIGHT);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.SPACE);
   day.setDate(day.getDate() + 1);
   t.is(
     await t.context.session.findElement(By.css(ex.inputSelector)).getAttribute('value'),
@@ -455,11 +455,11 @@ ariaTest('UP ARROW moves date up by week', exampleFile, 'grid-up-arrow', async (
 
   for (let i = 1; i <= 5; i++) {
     // Send up arrow to key
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.ARROW_UP);
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.ARROW_UP);
 
     day.setDate(day.getDate() - 7);
     t.is(
-      await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+      await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
       day.toISOString().split('T')[0],
       'After sending ' + i + ' UP ARROWS to focused date, the focused date should be: ' + day.toISOString().split('T')[0]
     );
@@ -474,11 +474,11 @@ ariaTest('DOWN ARROW moves date down by week', exampleFile, 'grid-down-arrow', a
 
   for (let i = 1; i <= 5; i++) {
     // Send up arrow to key
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.ARROW_DOWN);
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.ARROW_DOWN);
 
     day.setDate(day.getDate() + 7);
     t.is(
-      await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+      await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
       day.toISOString().split('T')[0],
       'After sending ' + i + ' DOWN ARROWS to focused date, the focused date should be: ' + day.toISOString().split('T')[0]
     );
@@ -493,11 +493,11 @@ ariaTest('RIGHT ARROW moves date greater by one', exampleFile, 'grid-right-arrow
 
   for (let i = 1; i <= 31; i++) {
     // Send up arrow to key
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.ARROW_RIGHT);
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.ARROW_RIGHT);
 
     day.setDate(day.getDate() + 1);
     t.is(
-      await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+      await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
       day.toISOString().split('T')[0],
       'After sending ' + i + ' RIGHT ARROWS to focused date, the focused date should be: ' + day.toISOString().split('T')[0]
     );
@@ -512,11 +512,11 @@ ariaTest('LEFT ARROW moves date previous one', exampleFile, 'grid-left-arrow', a
 
   for (let i = 1; i <= 31; i++) {
     // Send up arrow to key
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.ARROW_LEFT);
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.ARROW_LEFT);
 
     day.setDate(day.getDate() - 1);
     t.is(
-      await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+      await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
       day.toISOString().split('T')[0],
       'After sending ' + i + ' LEFT ARROWS to focused date, the focused date should be: ' + day.toISOString().split('T')[0]
     );
@@ -528,17 +528,17 @@ ariaTest('Key HOME sends focus to begining of row', exampleFile, 'grid-home', as
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.HOME);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.HOME);
   day.setDate(day.getDate() - day.getDay()); // getDay returns day of week
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending HOME should move focus to Sunday: ' + day.toISOString().split('T')[0]
   );
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.HOME);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.HOME);
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending HOME to Sunday should not move focus from:' + day.toISOString().split('T')[0]
   );
@@ -549,18 +549,18 @@ ariaTest('Key END sends focus to end of row', exampleFile, 'grid-end', async (t)
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.END);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.END);
 
   day.setDate(day.getDate() + (6 - day.getDay())); // getDay returns day of week
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending END should move focus to Saturday: ' + day.toISOString().split('T')[0]
   );
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.END);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.END);
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending END to Saturday should not move focus from:' + day.toISOString().split('T')[0]
   );
@@ -571,18 +571,18 @@ ariaTest('Sending PAGE UP moves focus by back month', exampleFile, 'grid-pageup'
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.PAGE_UP);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.PAGE_UP);
   day.setMonth(day.getMonth() - 1);
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending PAGE UP should move focus back by month: ' + day.toISOString().split('T')[0]
   );
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.PAGE_UP);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.PAGE_UP);
   day.setMonth(day.getMonth() - 1);
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending PAGE UP should move focus back by month, again:' + day.toISOString().split('T')[0]
   );
@@ -593,18 +593,18 @@ ariaTest('Sending SHIFT+PAGE UP moves focus back by year', exampleFile, 'grid-sh
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.chord(Key.SHIFT, Key.PAGE_UP));
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.chord(Key.SHIFT, Key.PAGE_UP));
   day.setFullYear(day.getFullYear() - 1);
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending SHIFT+PAGE UP should move focus back by year: ' + day.toISOString().split('T')[0]
   );
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.chord(Key.SHIFT, Key.PAGE_UP));
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.chord(Key.SHIFT, Key.PAGE_UP));
   day.setFullYear(day.getFullYear() - 1);
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending SHIFT+PAGE UP should move focus back by year, again:' + day.toISOString().split('T')[0]
   );
@@ -615,18 +615,18 @@ ariaTest('Sending PAGE DOWN moves focus back by month', exampleFile, 'grid-paged
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.PAGE_DOWN);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.PAGE_DOWN);
   day.setMonth(day.getMonth() + 1);
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending PAGE UP should move focus forward by month: ' + day.toISOString().split('T')[0]
   );
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.PAGE_DOWN);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.PAGE_DOWN);
   day.setMonth(day.getMonth() + 1);
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending PAGE UP should move focus forward by month, again:' + day.toISOString().split('T')[0]
   );
@@ -637,18 +637,18 @@ ariaTest('Sending SHIFT+PAGE DOWN moves focus back by year', exampleFile, 'grid-
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.chord(Key.SHIFT, Key.PAGE_DOWN));
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.chord(Key.SHIFT, Key.PAGE_DOWN));
   day.setFullYear(day.getFullYear() + 1);
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending SHIFT+PAGE UP should move focus forward by year: ' + day.toISOString().split('T')[0]
   );
 
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.chord(Key.SHIFT, Key.PAGE_DOWN));
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.chord(Key.SHIFT, Key.PAGE_DOWN));
   day.setFullYear(day.getFullYear() + 1);
   t.is(
-    await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).getAttribute('data-date'),
+    await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).getAttribute('data-date'),
     day.toISOString().split('T')[0],
     'Sending SHIFT+PAGE UP should move focus forward by year, again:' + day.toISOString().split('T')[0]
   );
@@ -673,7 +673,7 @@ ariaTest('ENTER on cancel button does not select date', exampleFile, 'okay-cance
 
   await setDateToJanFirst2019(t);
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.ARROW_RIGHT);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.ARROW_RIGHT);
   await t.context.session.findElement(By.css(ex.cancelButton)).sendKeys(Key.ENTER);
   t.is(
     await t.context.session.findElement(By.css(ex.inputSelector)).getAttribute('value'),
@@ -706,7 +706,7 @@ ariaTest('SPACE on cancel button does not select date', exampleFile, 'okay-cance
 
   await setDateToJanFirst2019(t);
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.ARROW_RIGHT);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.ARROW_RIGHT);
   await t.context.session.findElement(By.css(ex.cancelButton)).sendKeys(Key.SPACE);
   t.is(
     await t.context.session.findElement(By.css(ex.inputSelector)).getAttribute('value'),
@@ -741,7 +741,7 @@ ariaTest('ENTER on ok button does selects date', exampleFile, 'okay-cancel-butto
 
   await setDateToJanFirst2019(t);
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.ARROW_RIGHT);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.ARROW_RIGHT);
   await t.context.session.findElement(By.css(ex.okButton)).sendKeys(Key.ENTER);
   t.is(
     await t.context.session.findElement(By.css(ex.inputSelector)).getAttribute('value'),
@@ -776,7 +776,7 @@ ariaTest('SPACE on ok button does selects date', exampleFile, 'okay-cancel-butto
 
   await setDateToJanFirst2019(t);
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
-  await t.context.session.findElement(By.css(ex.currentlyFocusedButton)).sendKeys(Key.ARROW_RIGHT);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.ARROW_RIGHT);
   await t.context.session.findElement(By.css(ex.okButton)).sendKeys(Key.SPACE);
   t.is(
     await t.context.session.findElement(By.css(ex.inputSelector)).getAttribute('value'),

From 8ba65a064b353a2fbad3f6b8be1b558008320f9b Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Tue, 31 Mar 2020 12:57:15 -0500
Subject: [PATCH 05/46] fixed references to source code

---
 examples/dialog-modal/datepicker-dialog.html | 8 ++------
 1 file changed, 2 insertions(+), 6 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 791444b751..fbde066bdd 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -612,15 +612,11 @@ <h2>Javascript and CSS Source Code</h2>
     <ul>
       <li>
         CSS:
-        <a href="css/datepicker.css" type="text/css">datepicker.css</a>
+        <a href="css/datepicker-dialog.css" type="text/css">datepicker-dialog.css</a>
       </li>
       <li>
         Javascript:
-        <ul>
-          <li><a href="js/calendar-button.js" type="text/javascript">calendar-button.js</a></li>
-          <li><a href="js/datepicker.js" type="text/javascript">datepicker.js</a></li>
-          <li><a href="js/datepicker-day.js" type="text/javascript">datepicker-day.js</a></li>
-        </ul>
+          <a href="js/datepicker-dialog.css" type="text/javascript">datepicker-dialog.css</a>
       </li>
     </ul>
   </section>

From 0506bbea6324c8e92e3f4b839072f332f16caedc Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Tue, 31 Mar 2020 12:58:34 -0500
Subject: [PATCH 06/46] fixed references to source code

---
 examples/dialog-modal/datepicker-dialog.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index fbde066bdd..e080bc10c4 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -616,7 +616,7 @@ <h2>Javascript and CSS Source Code</h2>
       </li>
       <li>
         Javascript:
-          <a href="js/datepicker-dialog.css" type="text/javascript">datepicker-dialog.css</a>
+          <a href="js/datepicker-dialog.js" type="text/javascript">datepicker-dialog.js</a>
       </li>
     </ul>
   </section>

From 447fb560bc665c32f1f3233903dd3791a4127011 Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Tue, 31 Mar 2020 13:06:12 -0500
Subject: [PATCH 07/46] fixed extra > in keyboard definition

---
 examples/dialog-modal/datepicker-dialog.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index e080bc10c4..774110faad 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -225,7 +225,7 @@ <h3 id="kbd_label_2">Choose Date Button</h3>
         </thead>
         <tbody>
             <tr data-test-id="button-space-return-down-arrow">
-                <th><kbd>Space</kbd>,<br><kbd>Enter</kbd>>,<br><kbd>Down Arrow</kbd></th>
+                <th><kbd>Space</kbd>,<br><kbd>Enter</kbd>,<br><kbd>Down Arrow</kbd></th>
                 <td>
                   <ul>
                     <li>Open the date picker dialog.</li>

From 0660a5a165564951ecd6f98305289e6a9b7bbd24 Mon Sep 17 00:00:00 2001
From: Jon <jongund@illinois.edu>
Date: Tue, 31 Mar 2020 15:34:50 -0500
Subject: [PATCH 08/46] updated tests to identify failing tests due to Issue
 1358

---
 examples/dialog-modal/js/datepicker-dialog.js | 10 +---------
 test/tests/dialog-modal_datepicker.js         |  6 +++---
 2 files changed, 4 insertions(+), 12 deletions(-)

diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index f46c1d093f..c07e3b0d6d 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -633,13 +633,6 @@ MenuButtonDatePicker.prototype.handlePreviousMonthButton = function (event) {
 MenuButtonDatePicker.prototype.handleDayKeyDown = function (event) {
   var flag = false;
 
-  // fix bug in rgression code
-  if (event.keyCode === 32) {
-    this.updateSelected(event.currentTarget);
-    this.setTextboxDate(event.currentTarget);
-    flag = true;
-  }
-
   switch (event.key) {
 
     case "Esc":
@@ -751,8 +744,7 @@ MenuButtonDatePicker.prototype.handleButtonKeydown = function (event) {
   if ((event.key === "Enter") ||
       (event.key == "Down")  ||
       (event.key == "ArrowDown")  ||
-      (event.key == " ") ||
-      (event.keyCode == 32)) {
+      (event.key == " ")) {
     this.open();
     this.setFocusDay();
 
diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
index 1742808e67..3e7d8679b6 100644
--- a/test/tests/dialog-modal_datepicker.js
+++ b/test/tests/dialog-modal_datepicker.js
@@ -221,7 +221,7 @@ ariaTest('DOWN ARROW to open datepicker', exampleFile, 'button-space-return-down
   );
 });
 
-ariaTest('SPACE to open datepicker', exampleFile, 'button-space-return-down-arrow', async (t) => {
+ariaTest.failing('SPACE to open datepicker', exampleFile, 'button-space-return-down-arrow', async (t) => {
   let chooseDateButton = await t.context.session.findElement(By.css(ex.buttonSelector));
   chooseDateButton.sendKeys(Key.SPACE);
 
@@ -359,7 +359,7 @@ ariaTest('ENTER to buttons change calendar and date in focus', exampleFile, 'mon
   );
 });
 
-ariaTest('SPACE to buttons change calendar and date in focus', exampleFile, 'month-year-button-space-return', async (t) => {
+ariaTest.failing('SPACE to buttons change calendar and date in focus', exampleFile, 'month-year-button-space-return', async (t) => {
   t.plan(4);
 
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
@@ -421,7 +421,7 @@ ariaTest('SPACE to buttons change calendar and date in focus', exampleFile, 'mon
   );
 });
 
-ariaTest('SPACE or RETURN selects date in focus', exampleFile, 'grid-space-return', async (t) => {
+ariaTest.failing('SPACE or RETURN selects date in focus', exampleFile, 'grid-space-return', async (t) => {
   t.plan(2);
 
   // By default, focus will be on todays date.

From 709bf0f99cf4a6cf09919e1d61f05f5dcbc71f58 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Wed, 1 Apr 2020 16:35:30 -0500
Subject: [PATCH 09/46] updated test with SPACE key

---
 test/tests/dialog-modal_datepicker.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
index 3e7d8679b6..e4e45aec1d 100644
--- a/test/tests/dialog-modal_datepicker.js
+++ b/test/tests/dialog-modal_datepicker.js
@@ -221,9 +221,9 @@ ariaTest('DOWN ARROW to open datepicker', exampleFile, 'button-space-return-down
   );
 });
 
-ariaTest.failing('SPACE to open datepicker', exampleFile, 'button-space-return-down-arrow', async (t) => {
+ariaTest('SPACE to open datepicker', exampleFile, 'button-space-return-down-arrow', async (t) => {
   let chooseDateButton = await t.context.session.findElement(By.css(ex.buttonSelector));
-  chooseDateButton.sendKeys(Key.SPACE);
+  chooseDateButton.sendKeys(' ');
 
   t.not(
     await t.context.session.findElement(By.css(ex.dialogSelector)).getCssValue('display'),

From bf35a0b003a9d19d20ae23398181670b2cdcbf19 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Fri, 3 Apr 2020 12:42:33 -0500
Subject: [PATCH 10/46] fixed failing tests for datepicker dialog example

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

diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
index e4e45aec1d..6421e3d88d 100644
--- a/test/tests/dialog-modal_datepicker.js
+++ b/test/tests/dialog-modal_datepicker.js
@@ -359,7 +359,7 @@ ariaTest('ENTER to buttons change calendar and date in focus', exampleFile, 'mon
   );
 });
 
-ariaTest.failing('SPACE to buttons change calendar and date in focus', exampleFile, 'month-year-button-space-return', async (t) => {
+ariaTest('SPACE to buttons change calendar and date in focus', exampleFile, 'month-year-button-space-return', async (t) => {
   t.plan(4);
 
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
@@ -421,13 +421,13 @@ ariaTest.failing('SPACE to buttons change calendar and date in focus', exampleFi
   );
 });
 
-ariaTest.failing('SPACE or RETURN selects date in focus', exampleFile, 'grid-space-return', async (t) => {
+ariaTest('SPACE or RETURN selects date in focus', exampleFile, 'grid-space-return', async (t) => {
   t.plan(2);
 
   // By default, focus will be on todays date.
   let day = new Date();
 
-  await t.context.session.findElement(By.css(ex.buttonSelector)).click();
+  await t.context.session.findElement(By.css(ex.buttonSelector)).sendKeys(Key.ENTER);
   await t.context.session.findElement(By.css(ex.todayDay)).sendKeys(Key.ENTER);
   t.is(
     await t.context.session.findElement(By.css(ex.inputSelector)).getAttribute('value'),
@@ -437,7 +437,7 @@ ariaTest.failing('SPACE or RETURN selects date in focus', exampleFile, 'grid-spa
 
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   await t.context.session.findElement(By.css(ex.todayDay)).sendKeys(Key.ARROW_RIGHT);
-  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(Key.SPACE);
+  await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(' ');
   day.setDate(day.getDate() + 1);
   t.is(
     await t.context.session.findElement(By.css(ex.inputSelector)).getAttribute('value'),

From 01e8047f78db776f73a064e1878bf33d50a6fbe4 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Fri, 3 Apr 2020 13:14:26 -0500
Subject: [PATCH 11/46] updated focus and aria-selected styling for high
 contrast support

---
 .../dialog-modal/css/datepicker-dialog.css    | 35 +++++++++++++------
 1 file changed, 24 insertions(+), 11 deletions(-)

diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
index e89d1316ed..56c7942471 100644
--- a/examples/dialog-modal/css/datepicker-dialog.css
+++ b/examples/dialog-modal/css/datepicker-dialog.css
@@ -23,14 +23,14 @@
 .datepicker button.icon {
   margin: 0;
   margin-left: 10px;
-  padding: 3px;
+  padding: 4px;
   margin: 0;
-  border: 0px solid #005a9c;
+  border: 0px dotted #005a9c;
   background-color: white;
   border-radius: 5px;
   position: relative;
   left: 5px;
-  top: -4px;
+  top: -6px;
 }
 
 .datepicker .fa-calendar-alt {
@@ -39,14 +39,14 @@
 
 .datepicker button.icon:focus {
   outline: none;
-  padding: 1px;
+  padding: 2px;
   border-width: 2px;
   background-color: #DEF;
 }
 
 .datepicker input:focus {
   background-color: #DEF;
-  outline: 2px solid #005a9c;
+  outline: 2px dotted #005a9c;
   outline-offset: 1px;
 }
 
@@ -110,7 +110,7 @@
 .datepicker-dialog .next-month:focus,
 .datepicker-dialog .next-year:focus {
   padding: 2px;
-  border: 2px solid white;
+  border: 2px dotted white;
   border-radius: 4px;
   outline: 0;
 }
@@ -136,7 +136,7 @@
 
 .datepicker-dialog .dialog-button:focus {
   padding: 4px;
-  border: 2px solid black;
+  border: 2px dotted black;
 }
 
 .datepicker-dialog .fa-calendar-alt {
@@ -165,7 +165,7 @@
 }
 
 .datepicker-dialog table.dates td {
-  padding: 1px;
+  padding: 2px;
   margin: 0;
   line-height: inherit;
   height: 40px;
@@ -176,6 +176,13 @@
   background: #eee;
 }
 
+.datepicker-dialog table.dates td.disabled {
+  padding: 2px;
+  border: none;
+  height: 41px;
+  width: 41px;
+}
+
 .datepicker-dialog table.dates td:focus,
 .datepicker-dialog table.dates td:hover {
   padding: 0;
@@ -183,13 +190,19 @@
 }
 
 .datepicker-dialog table.dates td:focus {
-  border-width: 2px;
-  border-color: rgb(100, 100, 100);
+  padding: 1px;
+  border: 2px dotted rgb(100, 100, 100);
   outline: 0;
 }
 
 .datepicker-dialog table.dates td[aria-selected] {
-  border-color: rgb(100, 100, 100);
+  padding: 1px;
+  border: 2px dashed rgb(100, 100, 100);
+}
+
+.datepicker-dialog table.dates td[aria-selected]:focus {
+  padding: 1px;
+  border: 2px dotted  rgb(100, 100, 100);
 }
 
 .datepicker-dialog table.dates td[tabindex="0"] {

From 93253f591383ea6c6c3437592d3bcd5aba5b084d Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Wed, 22 Apr 2020 13:04:58 -0500
Subject: [PATCH 12/46] updated focus styling to use solid borders

---
 examples/dialog-modal/css/datepicker-dialog.css | 14 +++++++-------
 1 file changed, 7 insertions(+), 7 deletions(-)

diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
index 56c7942471..acbcc2cd4b 100644
--- a/examples/dialog-modal/css/datepicker-dialog.css
+++ b/examples/dialog-modal/css/datepicker-dialog.css
@@ -25,7 +25,7 @@
   margin-left: 10px;
   padding: 4px;
   margin: 0;
-  border: 0px dotted #005a9c;
+  border: 0px solid #005a9c;
   background-color: white;
   border-radius: 5px;
   position: relative;
@@ -46,7 +46,7 @@
 
 .datepicker input:focus {
   background-color: #DEF;
-  outline: 2px dotted #005a9c;
+  outline: 2px solid #005a9c;
   outline-offset: 1px;
 }
 
@@ -110,7 +110,7 @@
 .datepicker-dialog .next-month:focus,
 .datepicker-dialog .next-year:focus {
   padding: 2px;
-  border: 2px dotted white;
+  border: 2px solid white;
   border-radius: 4px;
   outline: 0;
 }
@@ -136,7 +136,7 @@
 
 .datepicker-dialog .dialog-button:focus {
   padding: 4px;
-  border: 2px dotted black;
+  border: 2px solid black;
 }
 
 .datepicker-dialog .fa-calendar-alt {
@@ -191,18 +191,18 @@
 
 .datepicker-dialog table.dates td:focus {
   padding: 1px;
-  border: 2px dotted rgb(100, 100, 100);
+  border: 2px solid rgb(100, 100, 100);
   outline: 0;
 }
 
 .datepicker-dialog table.dates td[aria-selected] {
   padding: 1px;
-  border: 2px dashed rgb(100, 100, 100);
+  border: 2px dotted rgb(100, 100, 100);
 }
 
 .datepicker-dialog table.dates td[aria-selected]:focus {
   padding: 1px;
-  border: 2px dotted  rgb(100, 100, 100);
+  border: 2px solid  rgb(100, 100, 100);
 }
 
 .datepicker-dialog table.dates td[tabindex="0"] {

From bdbb108e6fe9d8624173ecabcef29489d9b84be7 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 5 May 2020 13:59:41 -0500
Subject: [PATCH 13/46] improved high contrast support

---
 examples/dialog-modal/css/datepicker-dialog.css | 5 ++---
 examples/dialog-modal/datepicker-dialog.html    | 2 ++
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
index acbcc2cd4b..59617e2ec2 100644
--- a/examples/dialog-modal/css/datepicker-dialog.css
+++ b/examples/dialog-modal/css/datepicker-dialog.css
@@ -165,12 +165,11 @@
 }
 
 .datepicker-dialog table.dates td {
-  padding: 2px;
+  padding: 3px;
   margin: 0;
   line-height: inherit;
   height: 40px;
   width: 40px;
-  border: 1px solid #eee;
   border-radius: 5px;
   font-size: 15px;
   background: #eee;
@@ -202,7 +201,7 @@
 
 .datepicker-dialog table.dates td[aria-selected]:focus {
   padding: 1px;
-  border: 2px solid  rgb(100, 100, 100);
+  border: 2px solid rgb(100, 100, 100);
 }
 
 .datepicker-dialog table.dates td[tabindex="0"] {
diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 774110faad..c1f08cc982 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -208,6 +208,8 @@ <h2>Accessibility Features</h2>
         When the dialog opens and a date in the calendar grid receives focus, a live region enables screen readers to announce keyboard instructions for navigating the calendar grid.
         The instructions are also visible at the bottom of the dialog box.
       </li>
+      <li>High contrast support includes adding a CSS border on the button or date when they receive focus in the date picker dialog.  When an button or date does not have focus it has no CSS border.
+      </li>
     </ul>
   </section>
 

From 98ac01f9ae8ec53918214708d22b4babffdeae52 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 5 May 2020 14:38:45 -0500
Subject: [PATCH 14/46] improved higher contrast support

---
 .../dialog-modal/css/datepicker-dialog.css    | 23 +++++++++++++++++--
 examples/dialog-modal/datepicker-dialog.html  |  7 ++++--
 2 files changed, 26 insertions(+), 4 deletions(-)

diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
index 59617e2ec2..87bf314c3c 100644
--- a/examples/dialog-modal/css/datepicker-dialog.css
+++ b/examples/dialog-modal/css/datepicker-dialog.css
@@ -115,6 +115,15 @@
   outline: 0;
 }
 
+.datepicker-dialog .prev-year:hover,
+.datepicker-dialog .prev-month:hover,
+.datepicker-dialog .next-month:hover,
+.datepicker-dialog .next-year:hover {
+  padding: 3px;
+  border: 1px solid white;
+  border-radius: 4px;
+}
+
 .datepicker-dialog .dialog-ok-cancel-group {
   text-align: right;
   margin-top: 1em;
@@ -123,14 +132,13 @@
 }
 
 .datepicker-dialog .dialog-ok-cancel-group button {
-  padding: 5px;
+  padding: 6px;
   margin-left: 1em;
   width: 5em;
   background-color: hsl(216, 80%, 92%);
   font-size: 0.85em;
   color: black;
   outline: none;
-  border: 1px solid hsl(216, 80%, 92%);
   border-radius: 5px;
 }
 
@@ -139,6 +147,11 @@
   border: 2px solid black;
 }
 
+.datepicker-dialog .dialog-button:hover {
+  padding: 5px;
+  border: 1px solid black;
+}
+
 .datepicker-dialog .fa-calendar-alt {
   color: hsl(216, 89%, 51%);
 }
@@ -194,6 +207,12 @@
   outline: 0;
 }
 
+.datepicker-dialog table.dates td:not(.disabled):hover {
+  padding: 2px;
+  border: 1px solid rgb(100, 100, 100);
+}
+
+
 .datepicker-dialog table.dates td[aria-selected] {
   padding: 1px;
   border: 2px dotted rgb(100, 100, 100);
diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index c1f08cc982..468c31e125 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -208,8 +208,11 @@ <h2>Accessibility Features</h2>
         When the dialog opens and a date in the calendar grid receives focus, a live region enables screen readers to announce keyboard instructions for navigating the calendar grid.
         The instructions are also visible at the bottom of the dialog box.
       </li>
-      <li>High contrast support includes adding a CSS border on the button or date when they receive focus in the date picker dialog.  When an button or date does not have focus it has no CSS border.
-      </li>
+      <li>High contrast support is included in the date picker dialog using the CSS border property:
+       <ul>
+        <li>When a button or date receives focus.</li>
+        <li>When hovering over a button or date with a pointing device.</li>
+      </ul>
     </ul>
   </section>
 

From 4d43300eef7ecfeb29d1e7aa9c8333f23bed5a05 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Wed, 6 May 2020 10:07:44 -0500
Subject: [PATCH 15/46] updated high contrast documentation

---
 examples/dialog-modal/datepicker-dialog.html | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 468c31e125..1a0b377f17 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -208,11 +208,13 @@ <h2>Accessibility Features</h2>
         When the dialog opens and a date in the calendar grid receives focus, a live region enables screen readers to announce keyboard instructions for navigating the calendar grid.
         The instructions are also visible at the bottom of the dialog box.
       </li>
-      <li>High contrast support is included in the date picker dialog using the CSS border property:
-       <ul>
-        <li>When a button or date receives focus.</li>
-        <li>When hovering over a button or date with a pointing device.</li>
-      </ul>
+      <li>High contrast support for the controls in the dialog box using the CSS border property:
+        <ul>
+          <li>When a button or date receives focus.</li>
+          <li>When hovering over a button or date with a pointing device.</li>
+          <li>When a button does not have focus or hover the border is removed.</li>
+        </ul>
+      </li>
     </ul>
   </section>
 

From 582e51d417fd73af458ef7de000792df5de80cd2 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Wed, 6 May 2020 10:11:47 -0500
Subject: [PATCH 16/46] updated documentation on high contrast support

---
 examples/combobox/combobox-datepicker.html | 848 +++++++++++++++++++++
 1 file changed, 848 insertions(+)
 create mode 100644 examples/combobox/combobox-datepicker.html

diff --git a/examples/combobox/combobox-datepicker.html b/examples/combobox/combobox-datepicker.html
new file mode 100644
index 0000000000..e56eb82e66
--- /dev/null
+++ b/examples/combobox/combobox-datepicker.html
@@ -0,0 +1,848 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8" />
+<title>Date Picker Combobox Example | WAI-ARIA Authoring Practices 1.2</title>
+
+<!--  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 type="text/javascript" src="../js/examples.js"></script>
+<script type="text/javascript" src="../js/highlight.pack.js"></script>
+<script type="text/javascript" src="../js/app.js"></script>
+
+
+<link href="css/combobox-datepicker.css" rel="stylesheet">
+<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
+<script src="js/combobox-datepicker.js" type="text/javascript"></script>
+</head>
+<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="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
+      <li><a href="https://github.com/w3c/aria-practices/projects/14">Related Issues</a></li>
+      <li><a href="../../#datepicker">Design Pattern</a></li>
+    </ul>
+  </nav>
+  <main>
+    <h1>Date Picker Combobox Example</h1>
+    <p>
+      <strong>NOTE:</strong> This example page is work in progress.
+      Please provide feedback in
+      <a href="https://github.com/w3c/aria-practices/pull/1017">pull request 1017.</a>
+    </p>
+    <p>
+      The date picker is an example of the <a href="../../#combobox"><code>combobox</code> design pattern</a> that opens a dialog box.
+      The date picker dialog box in this example is opened by moving keyboard focus to the text box and pressing either the <kbd>enter</kbd> key, <kbd>down arrow</kbd> key or <kbd>alt + down arrow</kbd> keys or by clicking on the choose date button.
+      The date picker dialog uses a <code>grid</code> pattern to show and select a date using the cursor keys.  Additional buttons in the dialog box can be used for changing the month and year shown in the grid.
+    </p>
+  <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">
+
+      <div id="myDatepicker"
+           class="combobox-datepicker">
+
+        <label id="id-label-1"
+               for="cb-textbox-1">Date</label>
+
+        <div class="group">
+          <input type="text"
+                placeholder="mm/dd/yyyy"
+                id="cb-textbox-1"
+                aria-autocomplete="none"
+                role="combobox"
+                aria-expanded="false"
+                aria-haspopup="dialog"
+                aria-controls="cb-dialog-1">
+
+          <button type="button"
+              class="arrow"
+              tabindex="-1"
+              aria-haspopup="dialog"
+              aria-label="Date"
+              aria-expanded="false"
+              aria-controls="cb-dialog-1">
+              <span>
+                <svg width="18" height="16" aria-hidden="true" focusable="false">
+                  <polygon points="2,4 16,4 9,14"></polygon>
+                </svg>
+              </span>
+          </button>
+
+        </div>
+
+        <div class="combobox-message" aria-live="polite"></div>
+
+        <div id="cb-dialog-1"
+             class="dialog"
+             role="dialog"
+             aria-modal="true"
+             aria-labelledby="cb-dialog-label">
+
+          <div class="header">
+
+            <button type="button"
+              class="prev-year"
+              aria-label="previous year">
+              <span class="fas fa-angle-double-left fa-lg"></span>
+            </button>
+
+            <button type="button"
+              class="prev-month"
+              aria-label="previous month">
+              <span class="fas fa-angle-left fa-lg"></span>
+            </button>
+
+            <h2 id="cb-dialog-label"
+                class="month-year"
+                aria-live="polite">
+              December 2020
+            </h2>
+
+            <button type="button"
+              class="next-month"
+              aria-label="next month">
+              <span class="fas fa-angle-right fa-lg"></span>
+            </button>
+
+            <button type="button"
+              class="next-year"
+              aria-label="next year">
+              <span class="fas fa-angle-double-right fa-lg"></span>
+            </button>
+
+          </div>
+
+          <table
+            id="myDatepickerGrid"
+            class="dates"
+            role="grid"
+            aria-labelledby="cb-dialog-label">
+            <thead>
+              <tr>
+                <th scope="col" abbr="Sunday">Su</th>
+                <th scope="col" abbr="Monday">Mo</th>
+                <th scope="col" abbr="Tuesday">Tu</th>
+                <th scope="col" abbr="Wednesday">We</th>
+                <th scope="col" abbr="Thursday">Th</th>
+                <th scope="col" abbr="Friday">Fr</th>
+                <th scope="col" abbr="Saturday">Sa</th>
+              </tr>
+            </thead>
+
+            <tbody>
+              <tr>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td tabindex="-1" data-date="2020-02-01">1</td>
+              </tr>
+              <tr>
+                <td tabindex="-1" data-date="2020-02-02">2</td>
+                <td tabindex="-1" data-date="2020-02-03">3</td>
+                <td tabindex="-1" data-date="2020-02-04">4</td>
+                <td tabindex="-1" data-date="2020-02-05">5</td>
+                <td tabindex="-1" data-date="2020-02-06">6</td>
+                <td tabindex="-1" data-date="2020-02-07">7</td>
+                <td tabindex="-1" data-date="2020-02-08">8</td>
+              </tr>
+              <tr>
+                <td tabindex="-1" data-date="2020-02-09">9</td>
+                <td tabindex="-1" data-date="2020-02-10">10</td>
+                <td tabindex="-1" data-date="2020-02-11">11</td>
+                <td tabindex="-1" data-date="2020-02-12">12</td>
+                <td tabindex="-1" data-date="2020-02-13">13</td>
+                <td role="gridcell" aria-selected="true" data-date="2020-02-14">14</td>
+                <td tabindex="-1" data-date="2020-02-15">15</td>
+              </tr>
+              <tr>
+                <td tabindex="-1" data-date="2020-02-16">16</td>
+                <td tabindex="-1" data-date="2020-02-17">17</td>
+                <td tabindex="-1" data-date="2020-02-18">18</td>
+                <td tabindex="-1" data-date="2020-02-19">19</td>
+                <td tabindex="-1" data-date="2020-02-20">20</td>
+                <td tabindex="-1" data-date="2020-02-21">21</td>
+                <td tabindex="-1" data-date="2020-02-22">22</td>
+              </tr>
+              <tr>
+                <td tabindex="-1" data-date="2020-02-23">23</td>
+                <td tabindex="-1" data-date="2020-02-24">24</td>
+                <td tabindex="-1" data-date="2020-02-25">25</td>
+                <td tabindex="-1" data-date="2020-02-26">26</td>
+                <td tabindex="-1" data-date="2020-02-27">27</td>
+                <td tabindex="-1" data-date="2020-02-28">28</td>
+                <td tabindex="-1" data-date="2020-02-29">29</td>
+              </tr>
+              <tr>
+                <td tabindex="-1" data-date="2020-02-30">30</td>
+                <td tabindex="-1" data-date="2020-02-31">31</td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+                <td class="disabled" tabindex="-1"></td>
+              </tr>
+            </tbody>
+          </table>
+
+          <div class="dialog-ok-cancel-group">
+            <button class="dialog-button" value="cancel">Cancel</button>
+            <button class="dialog-button" value="ok">OK</button>
+          </div>
+
+          <div class="dialog-message" aria-live="polite"></div>
+
+        </div>
+      </div>
+    </div>
+    <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
+  </section>
+
+  <section>
+    <h2>Accessibility Features</h2>
+    <p>There are three main featues of the combobox date picker example:</p>
+    <ul>
+      <li>Textbox: Holds the value of the selected date and can open the date picker dialog box.</li>
+      <li>Choose Date Button: Opens the datepicker dialog box.</li>
+      <li>Date Picker Dialog Box: Displays a grid of dates for the user to select from and provides additional buttons to change the month and year of dates shown in the grid.</li>
+    </ul>
+
+    <p>The <code>combobox</code>, <code>textbox</code> and <code>button</code> all have the same accessible name.</p>
+
+
+    <h3>Date Textbox</h3>
+
+    <ul>
+      <li>Contains the date value.</li>
+      <li>Opens and closes the date picker dialog box through keyboard, click and touch events.</li>
+      <li>A live region provides information on how to open the date picker dialog when textbox receives focus (e.g. using <kbd>down arrow</kbd> key).</li>
+      <li>To support people who are sighted in understanding the <kbd>down arrow</kbd> key opens the date picker dialog box, a down arrow icon appears in the <code>textbox</code> when the <code>textbox</code> receives keyboard focus and the down arrow icon is removed when the <code>textbox</code> does not have keyboard focus.</li>
+    </ul>
+
+    <h3>Choose Date Button</h3>
+
+    <ul>
+      <li>Opens and closes the date picker dialog box through click events.</li>
+      <li>Excluded from the <kbd>tab</kbd> sequence of the page (eg. <code>tabindex=-1</code>), since the user can use the <kbd>down arrow</kbd> or <kbd>enter</kbd> key to open the date picker dialog box from the <code>textbox</code>.</li>
+    </ul>
+
+    <h3>Date Picker Dialog</h3>
+
+    <ul>
+      <li>The date picker dialog is a modal dialog box for selecting a date from a grid of dates for a particular month and year.</li>
+      <li>Additional buttons and keyboard commands are used to change month and year.</li>
+      <li>A live region announces changes in the month and year.</li>
+      <li>A live region announces the use of cursor keys when a date in the grid of dates gets focus.  The message is also visible at the bottom of the dialog box to provide the same information to keyboard users.</li>
+      <li>The dialog is opened through keyboard commands in the textbox or by clicking on the choose date button.</li>
+      <li>High contrast support for the controls in the dialog box using the CSS border property:
+        <ul>
+          <li>When a button or date receives focus.</li>
+          <li>When hovering over a button or date with a pointing device.</li>
+          <li>When a button or date does not have focus or hover the border is removed.</li>
+        </ul>
+      </li>
+    </ul>
+
+    <h3>Mobile Support</h3>
+
+    <ul>
+      <li>One issue with mobile browsers is that the onscreen keyboard is visible when the textbox has focus.</li>
+      <li>Adding the <code>touchstart</code> event allows the user to close the onscreen keyboard when the textbox has focus.</li>
+    </ul>
+
+  </section>
+
+
+  <section>
+    <h2 id="kbd_label">Keyboard Support</h2>
+
+    <section>
+      <h3 id="kbd_label_1">Textbox</h3>
+      <table aria-labelledby="kbd_label_1 kbd_label" class="def">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+            <tr data-test-id="combobox-down-arrow-enter">
+                <th><kbd>Down Arrow</kbd>, <kbd>ALT + Down Arrow</kbd>, <kbd>Enter</kbd></th>
+                <td>
+                  <ul>
+                  <li>Open the date picker dialog.</li>
+                  <li>
+                    Move focus to selected date in the calendar grid, i.e., the date displayed in the date textbox.
+                    If no date has been selected, places focus on the current date.
+                  </li>
+                </ul>
+              </td>
+            </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <h3 id="kbd_label_2">Choose Date Button</h3>
+      <table aria-labelledby="kbd_label_2 kbd_label" class="def">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+            <tr data-test-id="button-space-return">
+              <th><kbd>Space</kbd>,<br> <kbd>Return</kbd></th>
+              <td>
+                <ul>
+                  <li>Open the date picker dialog.</li>
+                  <li>
+                    Move focus to selected date in the calendar grid, i.e., the date displayed in the date textbox.
+                    If no date has been selected, places focus on the current date.
+                  </li>
+                </ul>
+                <p>Note:
+                    The button has been excluded from <kbd>Tab</kbd> sequence of the page, since the dialog can be opened from the textbox.
+                </p>
+              </td>
+            </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <h3 id="kbd_label_3">Date Picker Dialog</h3>
+      <table aria-labelledby="kbd_label_3 kbd_label" class="def">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+            <tr data-test-id="dialog-esc">
+              <th><kbd>ESC</kbd></th>
+              <td>Close the dialog and move focus back to the date textbox.</td>
+            </tr>
+            <tr data-test-id="dialog-tab">
+              <th><kbd>TAB</kbd></th>
+              <td>
+                <ul>
+                  <li>Moves focus to next element in the dialog <kbd>Tab</kbd> sequence.</li>
+                  <li>Note that, as specified in the <a href="../../#grid">grid design pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
+                  <li>If focus is on the last button (i.e., <q>OK</q>), moves focus to the first button (i.e. <q>Previous Year</q>).</li>
+                </ul>
+              </td>
+            </tr>
+            <tr data-test-id="dialog-shift-tab">
+              <th><kbd>Shift</kbd> + <br><kbd>TAB</kbd></th>
+              <td>
+                <ul>
+                  <li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>
+                  <li>Note that, as specified in the <a href="../../#grid">grid design pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
+                  <li>If focus is on the first button (i.e., <q>Previous Year</q>), moves focus to the last button (i.e. <q>OK</q>).</li>
+                </ul>
+              </td>
+            </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <h3 id="kbd_label_4">Date Picker Dialog: Calendar Buttons</h3>
+      <table aria-labelledby="kbd_label_4 kbd_label" class="def">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+            <tr data-test-id="month-year-button-space-return">
+              <th><kbd>Space</kbd>,<br> <kbd>Return</kbd></th>
+              <td>
+                Change the month and/or year displayed in the calendar grid.
+              </td>
+            </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
+      <table aria-labelledby="kbd_label_5 kbd_label" class="def">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="grid-space">
+            <th><kbd>Space</kbd></th>
+            <td>
+              <ul>
+                <li>Select the date.</li>
+                <li>Update the value of the <q>Date</q> input with the selected date.</li>
+                <li>Update the accessible name of the <q>Choose Date</q> button to include the selected date.</li>
+              </ul>
+          </td>
+          <tr data-test-id="grid-return">
+            <th><kbd>Enter</kbd></th>
+            <td>
+              <ul>
+                <li>Select the date.</li>
+                <li>Update the value of the <q>Date</q> input with the selected date.</li>
+                <li>Update the accessible name of the <q>Choose Date</q> button to include the selected date.</li>
+                <li>Close the dialog, and move focus to the combobox.</li>
+              </ul>
+          </td>
+          </tr>
+          <tr data-test-id="grid-up-arrow">
+            <th><kbd>Up Arrow</kbd></th>
+            <td>Move the focus to the same day of the previous week.</td>
+          </tr>
+          <tr data-test-id="grid-down-arrow">
+            <th><kbd>Down Arrow</kbd></th>
+            <td>Move the focus to the same day of the next week.</td>
+          </tr>
+          <tr data-test-id="grid-right-arrow">
+            <th><kbd>Right Arrow</kbd></th>
+            <td>Move the focus to the next day.</td>
+          </tr>
+          <tr data-test-id="grid-left-arrow">
+            <th><kbd>Left Arrow</kbd></th>
+            <td>Move the focus to the previous day.</td>
+          </tr>
+          <tr data-test-id="grid-home">
+            <th><kbd>Home</kbd></th>
+            <td>Move the focus to the first day (e.g Sunday) of the current week.</td>
+          </tr>
+          <tr data-test-id="grid-end">
+            <th><kbd>End</kbd></th>
+            <td>Move the focus to the last day (e.g. Saturday) of the current week.</td>
+          </tr>
+          <tr data-test-id="grid-pageup">
+            <th><kbd>PageUp</kbd></th>
+            <td>
+              <ul>
+                <li>Changes the grid of dates to the previous month.</li>
+                <li>Sets focus on the same day of the same week. If that day does not exist, then moves focus to the same day of the previous or next week.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="grid-shift-pageup">
+            <th><kbd>Shift</kbd>+<br> <kbd>PageUp</kbd></th>
+            <td>
+              <ul>
+                <li>Change the grid of dates to the previous year.</li>
+                <li>The focus will be on the same day of that week, if it does not exist, then it will move the focus to the same day of previous or next week</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="grid-pagedown">
+            <th><kbd>PageDown</kbd></th>
+            <td>
+              <ul>
+                <li>Change the grid of dates to the next month.</li>
+                <li>The focus will be on the same day of that week, if it does not exist, then it will move the focus to the same day of previous or next week</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="grid-shift-pagedown">
+            <th><kbd>Shift</kbd>+<br> <kbd>PageDown</kbd></th>
+            <td>
+              <ul>
+                <li>Change the grid of dates to the next year.</li>
+                <li>The focus will be on the same day of that week, if it does not exist, then it will move the focus to the same day of previous or next week</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+        <h3 id="kbd_label_6">Date Picker Dialog: OK and Cancel Buttons</h3>
+        <table aria-labelledby="kbd_label_6 kbd_label" class="def">
+          <thead>
+            <tr>
+                <th>Key</th>
+                <th>Function</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr data-test-id="okay-cancel-button-space-return">
+              <th> <kbd>Space</kbd>,<br> <kbd>Return</kbd></th>
+              <td>
+                Activates the button:
+                <ul>
+                    <li><q>Cancel</q>: Closes the dialog, moves focus to combobox, does not update date in date textbox.</li>
+                    <li><q>OK</q>: Closes the dialog, moves focus to combobox, updates date in date textbox.</li>
+                </ul>
+              </td>
+            </tr>
+          </tbody>
+        </table>
+    </section>
+  </section>
+
+  <section>
+    <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
+
+    <section>
+      <h3 id="rps_label_combobox">Textbox</h3>
+      <table aria-labelledby="rps_label_combobox rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="textbox-role">
+            <th scope="row"><code>role=<q>combobox</q></code></th>
+            <td></td>
+            <td><code>input</code></td>
+            <td>
+              Identifes the <code>input</code> element as a combobox.
+            </td>
+          </tr>
+          <tr data-test-id="textbox-aria-haspopup">
+            <td></td>
+            <th scope="row"><code>aria-haspopup=<q>dialog</q></code></th>
+            <td><code>input</code></td>
+            <td>
+              Identifies that the combobox opens a dialog box.
+            </td>
+          </tr>
+          <tr data-test-id="textbox-aria-expanded-false">
+            <td></td>
+            <th scope="row"><code>aria-expanded=<q>false</q></code></th>
+            <td><code>input</code></td>
+            <td>
+              <code>aria-expanded=<q>false</q></code> when the date picker dialog box is closed.
+            </td>
+          </tr>
+          <tr data-test-id="textbox-aria-expanded-true">
+            <td></td>
+            <th scope="row"><code>aria-expanded=<q>true</q></code></th>
+            <td><code>input</code></td>
+            <td>
+              <code>aria-expanded=<q>true</q></code> when the date picker dialog box is open.
+            </td>
+          </tr>
+          <tr data-test-id="textbox-aria-autocomplete">
+            <td></td>
+            <th scope="row"><code>aria-autocomplete=<q>none</q></code></th>
+            <td><code>input</code></td>
+            <td>
+              <code>aria-autocomplete=<q>none</q></code> the textbox does not support autocompletion when text is entered.
+            </td>
+          </tr>
+          <tr data-test-id="textbox-aria-controls">
+            <td></td>
+            <th scope="row"><code>aria-controls=<q>IDREF</q></code></th>
+            <td><code>input</code></td>
+            <td>
+              Provides a reference to the screen reader for direct navigation to the dialog box.
+            </td>
+          </tr>
+          <tr data-test-id="textbox-aria-live">
+            <td></td>
+            <th scope="row"><code>aria-live=<q>polite</q></code></th>
+            <td><code>div</code></td>
+            <td>
+              <ul>
+                <li>Indicates the element that displays information about keyboard commands for opening the dialog box should be automatically announced by screen readers.</li>
+                <li>The script slightly delays display of the information so screen readers are more likely to read it after information related to change of focus.</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+        <h3 id="rps_label_2">Choose Date Button</h3>
+        <table aria-labelledby="rps_label_2 rps_label" class="data attributes">
+          <thead>
+            <tr>
+              <th scope="col">Role</th>
+              <th scope="col">Attribute</th>
+              <th scope="col">Element</th>
+              <th scope="col">Usage</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr data-test-id="calendar-button-tabindex">
+              <td></td>
+              <th scope="row"><code>tabindex=<q>-1</q></code></th>
+              <td><code>button</code></td>
+              <td>
+                <ul>
+                  <li>Exclude the button from tab sequence of the page.</li>
+                  <li>The textbox supports opening the dialog through the keyboard.</li>
+                </ul>
+              </td>
+            </tr>
+            <tr data-test-id="calendar-button-aria-label">
+              <td></td>
+              <th scope="row"><code>aria-label="string"</code></th>
+              <td><code>button</code></td>
+              <td>
+                <ul>
+                  <li>The initial value of accessible name is <q>Choose Date</q>.</li>
+                  <li>When users select a date, the accessible name is updated to also include the selected date.</li>
+                </ul>
+              </td>
+            </tr>
+            <tr data-test-id="calendar-button-aria-haspopup">
+              <td></td>
+              <th scope="row"><code>aria-haspopup=<q>dialog</q></code></th>
+              <td><code>button</code></td>
+              <td>
+                Identifies the button opens a dialog box.
+              </td>
+            </tr>
+            <tr data-test-id="calendar-button-aria-expanded-false">
+              <td></td>
+              <th scope="row"><code>aria-expanded=<q>false</q></code></th>
+              <td><code>button</code></td>
+              <td>
+                <code>aria-expanded=<q>false</q></code> when the date picker dialog box is closed.
+              </td>
+            </tr>
+            <tr data-test-id="calendar-button-aria-expanded-true">
+              <td></td>
+              <th scope="row"><code>aria-expanded=<q>true</q></code></th>
+              <td><code>button</code></td>
+              <td>
+                <code>aria-expanded=<q>true</q></code> when the date picker dialog box is open.
+              </td>
+            </tr>
+            <tr data-test-id="calendar-button-aria-controls">
+              <td></td>
+              <th scope="row"><code>aria-controls=<q>IDREF</q></code></th>
+              <td><code>button</code></td>
+              <td>
+                Provides a reference to the screen reader for direct navigation to the dialog box.
+              </td>
+            </tr>
+          </tbody>
+        </table>
+      </section>
+
+      <section>
+          <h3 id="rps_label_3">Date Picker Dialog</h3>
+          <table aria-labelledby="rps_label_3 rps_label" class="data attributes">
+            <thead>
+              <tr>
+                <th scope="col">Role</th>
+                <th scope="col">Attribute</th>
+                <th scope="col">Element</th>
+                <th scope="col">Usage</th>
+              </tr>
+            </thead>
+            <tbody>
+              <tr data-test-id="dialog-role">
+                <th scope="row"><code>dialog</code></th>
+                <td></td>
+                <td>
+                  <code>div</code>
+                </td>
+                <td>Identifies the element as a dialog .</td>
+              </tr>
+              <tr data-test-id="dialog-aria-modal">
+                <td></td>
+                <th scope="row"><code>aria-modal=<q>true</q></code></th>
+                <td><code>div</code></td>
+                <td>Indicates the dialog is modal.</td>
+              </tr>
+              <tr data-test-id="dialog-aria-labelledby">
+                <td></td>
+                <th scope="row"><code>aria-labelledby=<q>IDREFS</q></code></th>
+                <td><code>div</code></td>
+                <td>Refers to the heading containing the currently displayed month and year, which defines the accessible name for the dialog.</td>
+              </tr>
+              <tr data-test-id="dialog-aria-live">
+                <td></td>
+                <th scope="row"><code>aria-live=<q>polite</q></code></th>
+                <td><code>div</code></td>
+                <td>
+                  <ul>
+                    <li>Indicates the element that displays information about keyboard commands for navigating the grid should be automatically announced by screen readers.</li>
+                    <li>The script slightly delays display of the information so screen readers are more likely to read it after information related to change of focus.</li>
+                  </ul>
+                </td>
+              </tr>
+            </tbody>
+          </table>
+        </section>
+
+      <section>
+          <h3 id="rps_label_4">Date Picker Dialog: Calendar Navigation Buttons</h3>
+          <table aria-labelledby="rps_label_4 rps_label" class="data attributes">
+            <thead>
+              <tr>
+                <th scope="col">Role</th>
+                <th scope="col">Attribute</th>
+                <th scope="col">Element</th>
+                <th scope="col">Usage</th>
+              </tr>
+            </thead>
+            <tbody>
+                <tr data-test-id="calendar-navigation-button-aria-label">
+                    <td></td>
+                    <th scope="row"><code>aria-label=<q><em>String</em></q></code></th>
+                    <td><code>button</code></td>
+                    <td>
+                      Defines the accessible name of the button (e.g. "Next Year").
+                    </td>
+                </tr>
+                <tr data-test-id="calendar-navigation-aria-live">
+                    <td></td>
+                    <th scope="row"><code>aria-live=<q>polite</q></code></th>
+                    <td>
+                      <code>h2</code>
+                    </td>
+                    <td>
+                      <ul>
+                        <li>When the month and/or year changes the content of the <code>h2</code> element is updated.</li>
+                        <li>The use of the <code>polite</code> value means the screen reader will not interrupt other speech to announce the change in month and/or year.</li>
+                      </ul>
+                    </td>
+                  </tr>
+            </tbody>
+          </table>
+        </section>
+
+        <section>
+            <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
+            <table aria-labelledby="rps_label_5 rps_label" class="data attributes">
+              <thead>
+                <tr>
+                  <th scope="col">Role</th>
+                  <th scope="col">Attribute</th>
+                  <th scope="col">Element</th>
+                  <th scope="col">Usage</th>
+                </tr>
+              </thead>
+              <tbody>
+                  <tr data-test-id="grid-role">
+                    <th scope="row"><code>grid</code></th>
+                    <td></td>
+                    <td>
+                      <code>table</code>
+                    </td>
+                    <td>
+                     <ul>
+                        <li>Identifies the <code>table</code> element as a <code>grid</code> widget.</li>
+                        <li>Since the <code>grid</code> role is applied to a <code>table</code> element, the <code>row</code>, <code>colheader</code>, and <code>gridcell</code> roles do not need to be specified because they are implied by <code>tr</code>, <code>th</code>, and <code>td</code> tags.</li>
+                      </ul>
+                    </td>
+                  </tr>
+                  <tr data-test-id="grid-aria-labelledby">
+                    <td></td>
+                    <th scope="row"><code>aira-labelledby=<q>IDREF</q></code></th>
+                    <td><code>table</code></td>
+                    <td>
+                      Defines the accessible name for the <code>grid</code> using the <code>h2</code> that shows the month and year of the dates displayed in the grid.
+                    </td>
+                  </tr>
+                  <tr data-test-id="gridcell-tabindex">
+                    <td></td>
+                    <th scope="row">
+                      <code>tabindex="0"</code>
+                    </th>
+                    <td>
+                      <code>td</code>
+                    </td>
+                    <td>
+                      <ul>
+                        <li>Makes the gridcell focusable and includes it in the dialog <kbd>Tab</kbd> sequence.</li>
+                        <li>Set dynamically by the JavaScript when the element is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
+                        <li>At any given time, only one gridcell within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
+                        <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
+                      </ul>
+                    </td>
+                  </tr>
+                  <!-- The regression test for tabindex=0 tests for tabindex=-1 -->
+                  <tr data-test-id="gridcell-tabindex">
+                    <td></td>
+                    <th scope="row">
+                      <code>tabindex="-1"</code>
+                    </th>
+                    <td>
+                      <code>td</code>
+                    </td>
+                    <td>
+                      <ul>
+                        <li>Makes the gridcell focusable and excludes it from the dialog <kbd>Tab</kbd> sequence.</li>
+                        <li>Changed dynamically to <code>0</code> by the JavaScript when the gridcell is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
+                        <li>At any given time, only one girdcell within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
+                        <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
+                      </ul>
+                    </td>
+                  </tr>
+                  <tr data-test-id="gridcell-aria-selected">
+                    <td></td>
+                    <th scope="row"><code>aria-selected="true"</code></th>
+                    <td><code>td</code></td>
+                    <td>
+                      <ul>
+                        <li>Identifies the gridcell for the currently selected date, i.e., the date value  present in the date textbox.</li>
+                        <li>Only set on the gridcell representing the currently selected date, no other gridcells have <code>aria-selected</code> specified.</li>
+                      </ul>
+                    </td>
+                  </tr>
+              </tbody>
+            </table>
+            <p>
+              <strong>Note:</strong> Since the names of the days of the week in the column headers are abbreviated to two characters, they may be difficult to understand when announced by a screen reader.
+              An alternative column header name can be provided to screen readers by applying the <code>abbr</code> attribute to the <code>th</code> elements.
+              So, each <code>th</code> element includes a <code>abbr</code> attribute containing the full spelling of the name of the day for that column.
+            </p>
+          </section>
+  </section>
+
+  <section>
+    <h2>Javascript and CSS Source Code</h2>
+    <ul>
+      <li>
+        CSS:
+        <a href="css/combobox-datepicker.css" type="text/css">combobox-datepicker.css</a>
+      </li>
+      <li>
+        Javascript:
+        <a href="js/combobox-datepicker.js" type="text/javascript">combobox-datepicker.js</a>
+      </li>
+    </ul>
+  </section>
+
+ <section>
+    <h2 id="sc1_label">HTML Source Code</h2>
+    <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
+    <pre><code id="source1"></code></pre>
+    <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
+    <script>
+      sourceCode.add('source1', 'ex1');
+      sourceCode.make();
+    </script>
+  </section>
+  </main>
+  <nav>
+    <a href="../../#combobox"><code>combobox</code> Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
+  </nav>
+</body>
+</html>

From 1ef3a67dd2b5f32ddde81d6a0acffd1aad281575 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Wed, 6 May 2020 10:17:27 -0500
Subject: [PATCH 17/46] updated documentation on high contrast support

---
 examples/combobox/combobox-datepicker.html   | 2 +-
 examples/dialog-modal/datepicker-dialog.html | 6 +++---
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/examples/combobox/combobox-datepicker.html b/examples/combobox/combobox-datepicker.html
index e56eb82e66..a0160c1210 100644
--- a/examples/combobox/combobox-datepicker.html
+++ b/examples/combobox/combobox-datepicker.html
@@ -245,7 +245,7 @@ <h3>Date Picker Dialog</h3>
         <ul>
           <li>When a button or date receives focus.</li>
           <li>When hovering over a button or date with a pointing device.</li>
-          <li>When a button or date does not have focus or hover the border is removed.</li>
+          <li>When a button does not have focus or hover the border is removed.</li>
         </ul>
       </li>
     </ul>
diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 1a0b377f17..6e7ae72647 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -210,9 +210,9 @@ <h2>Accessibility Features</h2>
       </li>
       <li>High contrast support for the controls in the dialog box using the CSS border property:
         <ul>
-          <li>When a button or date receives focus.</li>
-          <li>When hovering over a button or date with a pointing device.</li>
-          <li>When a button does not have focus or hover the border is removed.</li>
+          <li>When a button or date receives focus a border is added.</li>
+          <li>When hovering over a button or date with a pointing device a border is added.</li>
+          <li>When a button or date does not have focus or hover is does not have a border.</li>
         </ul>
       </li>
     </ul>

From 5c0b5fe25f2129b663fa2e4a127ea4f5557d8734 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Wed, 6 May 2020 10:28:45 -0500
Subject: [PATCH 18/46] updated documentation on high contrast support

---
 examples/dialog-modal/datepicker-dialog.html | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 6e7ae72647..165b4302ed 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -208,14 +208,14 @@ <h2>Accessibility Features</h2>
         When the dialog opens and a date in the calendar grid receives focus, a live region enables screen readers to announce keyboard instructions for navigating the calendar grid.
         The instructions are also visible at the bottom of the dialog box.
       </li>
-      <li>High contrast support for the controls in the dialog box using the CSS border property:
+      <li>High contrast support for focus and hover styling of the controls in the dialog box use the CSS border property:
         <ul>
           <li>When a button or date receives focus a border is added.</li>
           <li>When hovering over a button or date with a pointing device a border is added.</li>
-          <li>When a button or date does not have focus or hover is does not have a border.</li>
+          <li>By default buttons and dates do not have a border, padding is used as a placeholder for the added border for focus and hover styling.</li>
         </ul>
       </li>
-    </ul>
+     </ul>
   </section>
 
   <section>

From e3c7836de0b6c2083210be40f8d3cd1606d9e276 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Fri, 15 May 2020 14:30:04 +0200
Subject: [PATCH 19/46] Fix reference to undefined property ex.allDateButtons

---
 test/tests/dialog-modal_datepicker.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
index bf702eaf9e..d1abea072b 100644
--- a/test/tests/dialog-modal_datepicker.js
+++ b/test/tests/dialog-modal_datepicker.js
@@ -125,7 +125,7 @@ ariaTest('Roving tab index on dates in gridcell', exampleFile, 'gridcell-button-
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
 
   let focusableButtons = await t.context.queryElements(t, ex.currentMonthDateButtons);
-  let allButtons = await t.context.queryElements(t, ex.allDateButtons);
+  let allButtons = await t.context.queryElements(t, ex.allDates);
 
   // test only one element has tabindex="0"
   for (let tabableEl = 0; tabableEl < 30; tabableEl++) {
@@ -158,7 +158,7 @@ ariaTest('aria-selected on selected date', exampleFile, 'gridcell-button-aria-se
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   await assertAttributeValues(t, ex.jan12019Day, 'aria-selected', 'true');
 
-  let selectedButtons = await t.context.queryElements(t, `${ex.allDateButtons}[aria-selected="true"]`);
+  let selectedButtons = await t.context.queryElements(t, `${ex.allDates}[aria-selected="true"]`);
 
   t.is(
     selectedButtons.length,
@@ -170,7 +170,7 @@ ariaTest('aria-selected on selected date', exampleFile, 'gridcell-button-aria-se
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   await assertAttributeValues(t, ex.jan22019Day, 'aria-selected', 'true');
 
-  selectedButtons = await t.context.queryElements(t, `${ex.allDateButtons}[aria-selected="true"]`);
+  selectedButtons = await t.context.queryElements(t, `${ex.allDates}[aria-selected="true"]`);
 
   t.is(
     selectedButtons.length,

From 72c9a839bf17b74e41f260925c8bb59e040398d7 Mon Sep 17 00:00:00 2001
From: Simon Pieters <zcorpan@gmail.com>
Date: Fri, 15 May 2020 15:06:44 +0200
Subject: [PATCH 20/46] Change to queryElements, add missing awaits

---
 test/tests/dialog-modal_dialog.js | 66 ++++++++++++-------------------
 1 file changed, 25 insertions(+), 41 deletions(-)

diff --git a/test/tests/dialog-modal_dialog.js b/test/tests/dialog-modal_dialog.js
index 47eb963e8c..2ea1a3c9f8 100644
--- a/test/tests/dialog-modal_dialog.js
+++ b/test/tests/dialog-modal_dialog.js
@@ -48,12 +48,10 @@ const ex = {
 
 const openDialog1 = async function (t) {
   // Click the button to open the address form dialog
-  await t.context.session
-    .findElement(By.css(ex.dialog1ButtonSelector))
-    .click();
+  await (await t.context.queryElements(t, ex.dialog1ButtonSelector))[0].click();
 
   // Make sure the appropriate dialog is open
-  const dialog = await t.context.session.findElement(By.css('#dialog1'));
+  const dialog = (await t.context.queryElements(t, '#dialog1'))[0];
   assert(
     await dialog.isDisplayed(),
     'dialog1 should have successfullly openned'
@@ -62,17 +60,13 @@ const openDialog1 = async function (t) {
 
 const openDialog2 = async function (t) {
   // Click the button to open the "address form" dialog
-  await t.context.session
-    .findElement(By.css(ex.dialog1ButtonSelector))
-    .click();
+  await (await t.context.queryElements(t, ex.dialog1ButtonSelector))[0].click();
 
   // Click the button to open the "verify form" dialog
-  await t.context.session
-    .findElement(By.css(ex.dialog2FromDialog1ButtonSelector))
-    .click();
+  await (await t.context.queryElements(t, ex.dialog2FromDialog1ButtonSelector))[0].click();
 
   // Make sure the appropriate dialog is open
-  const dialog = await t.context.session.findElement(By.css('#dialog2'));
+  const dialog = (await t.context.queryElements(t, '#dialog2'))[0];
   assert(
     await dialog.isDisplayed(),
     'dialog2 should have successfullly openned'
@@ -81,17 +75,13 @@ const openDialog2 = async function (t) {
 
 const openDialog3 = async function (t) {
   // Click the button to open the "address form" dialog
-  await t.context.session
-    .findElement(By.css(ex.dialog1ButtonSelector))
-    .click();
+  await (await t.context.queryElements(t, ex.dialog1ButtonSelector))[0].click();
 
   // Click the button to open the "add" dialog
-  await t.context.session
-    .findElement(By.css(ex.dialog3FromDialog1ButtonSelector))
-    .click();
+  await (await t.context.queryElements(t, ex.dialog3FromDialog1ButtonSelector))[0].click();
 
   // Make sure the appropriate dialog is open
-  const dialog = await t.context.session.findElement(By.css('#dialog3'));
+  const dialog = (await t.context.queryElements(t, '#dialog3'))[0];
   assert(
     await dialog.isDisplayed(),
     'dialog3 should have successfullly openned'
@@ -100,22 +90,16 @@ const openDialog3 = async function (t) {
 
 const openDialog4 = async function (t) {
   // Click the button to open the "address form" dialog
-  await t.context.session
-    .findElement(By.css(ex.dialog1ButtonSelector))
-    .click();
+  await (await t.context.queryElements(t, ex.dialog1ButtonSelector))[0].click();
 
   // Click the button to open the "verify form" dialog
-  await t.context.session
-    .findElement(By.css(ex.dialog2FromDialog1ButtonSelector))
-    .click();
+  await (await t.context.queryElements(t, ex.dialog2FromDialog1ButtonSelector))[0].click();
 
   // Click the button to open the "accepting an alternative form" dialog
-  await t.context.session
-    .findElement(By.css(ex.dialog4FromDialog2ButtonSelector))
-    .click();
+  await (await t.context.queryElements(t, ex.dialog4FromDialog2ButtonSelector))[0].click();
 
   // Make sure the appropriate dialog is open
-  const dialog = await t.context.session.findElement(By.css('#dialog2'));
+  const dialog = (await t.context.queryElements(t, '#dialog2'))[0];
   assert(
     await dialog.isDisplayed(),
     'dialog4 should have successfullly openned'
@@ -138,7 +122,7 @@ const checkFocus = async function (t, selector) {
 };
 
 const sendTabToSelector = async function (t, selector) {
-  let el = await t.context.session.findElement(By.css(selector));
+  let el = (await t.context.queryElements(t, selector))[0];
   await el.sendKeys(Key.TAB);
 
   // await for focus change before returning
@@ -151,7 +135,7 @@ const sendTabToSelector = async function (t, selector) {
 };
 
 const sendShiftTabToSelector = async function (t, selector) {
-  let el = await t.context.session.findElement(By.css(selector));
+  let el = (await t.context.queryElements(t, selector))[0];
   await el.sendKeys(Key.chord(Key.SHIFT, Key.TAB));
 
   // await for focus change before returning
@@ -164,7 +148,7 @@ const sendShiftTabToSelector = async function (t, selector) {
 };
 
 const sendEscapeTo = async function (t, selector) {
-  const el = await t.context.session.findElement(By.css(selector));
+  const el = (await t.context.queryElements(t, selector))[0];
   await el.sendKeys(Key.ESCAPE);
 };
 
@@ -173,7 +157,7 @@ const sendEscapeTo = async function (t, selector) {
 
 ariaTest('role="dialog" on div element', exampleFile, 'dialog-role', async (t) => {
 
-  
+
   const dialogs = await t.context.queryElements(t, ex.dialogSelector);
 
   t.is(
@@ -207,7 +191,7 @@ ariaTest('"aria-modal" attribute on role="dialog"', exampleFile, 'aria-modal', a
 // Keys
 
 ariaTest('tab changes focus within dialog', exampleFile, 'key-tab', async (t) => {
-  
+
   /* DIALOG 1 */
 
   await openDialog1(t);
@@ -294,7 +278,7 @@ ariaTest('tab changes focus within dialog', exampleFile, 'key-tab', async (t) =>
   );
 
   // Make focus does not change
-  let el = await t.context.session.findElement(By.css(ex.dialog4FocusableEls[0]));
+  let el = (await t.context.queryElements(t, ex.dialog4FocusableEls[0]))[0];
   await el.sendKeys(Key.TAB);
   t.true(
     await checkFocus(t, ex.dialog4FocusableEls[0]),
@@ -304,7 +288,7 @@ ariaTest('tab changes focus within dialog', exampleFile, 'key-tab', async (t) =>
 });
 
 ariaTest('shift tab changes focus within dialog', exampleFile, 'key-shift-tab', async (t) => {
-  
+
   /* DIALOG 1 */
 
   await openDialog1(t);
@@ -408,7 +392,7 @@ ariaTest('shift tab changes focus within dialog', exampleFile, 'key-shift-tab',
   );
 
   // Make focus does not change
-  let el = await t.context.session.findElement(By.css(ex.dialog4FocusableEls[0]));
+  let el = (await t.context.queryElements(t, ex.dialog4FocusableEls[0]))[0];
   await el.sendKeys(Key.chord(Key.SHIFT, Key.TAB));
   t.true(
     await checkFocus(t, ex.dialog4FocusableEls[0]),
@@ -417,14 +401,14 @@ ariaTest('shift tab changes focus within dialog', exampleFile, 'key-shift-tab',
 });
 
 ariaTest('escape closes dialog', exampleFile, 'key-escape', async (t) => {
-  
+
   /* DIALOG 1 */
 
   for (let selector of ex.dialog1FocusableEls) {
     await openDialog1(t);
     await sendEscapeTo(t, selector);
 
-    const modalEl = await t.context.session.findElement(By.css(ex.dialog1Selector));
+    const modalEl = (await t.context.queryElements(t, ex.dialog1Selector))[0];
     t.false(
       await modalEl.isDisplayed(),
       'Modal 1 should not be displayed after sending escape to element: ' + selector
@@ -439,7 +423,7 @@ ariaTest('escape closes dialog', exampleFile, 'key-escape', async (t) => {
     await openDialog2(t);
     await sendEscapeTo(t, selector);
 
-    const modalEl = await t.context.session.findElement(By.css(ex.dialog2Selector));
+    const modalEl = (await t.context.queryElements(t, ex.dialog2Selector))[0];
     t.false(
       await modalEl.isDisplayed(),
       'Modal 2 should not be displayed after sending escape to element: ' + selector
@@ -454,7 +438,7 @@ ariaTest('escape closes dialog', exampleFile, 'key-escape', async (t) => {
     await openDialog3(t);
     await sendEscapeTo(t, selector);
 
-    const modalEl = await t.context.session.findElement(By.css(ex.dialog3Selector));
+    const modalEl = (await t.context.queryElements(t, ex.dialog3Selector))[0];
     t.false(
       await modalEl.isDisplayed(),
       'Modal 3 should not be displayed after sending escape to element: ' + selector
@@ -468,7 +452,7 @@ ariaTest('escape closes dialog', exampleFile, 'key-escape', async (t) => {
   await openDialog4(t);
   await sendEscapeTo(t, ex.dialog4FocusableEls[0]);
 
-  const modalEl = await t.context.session.findElement(By.css(ex.dialog4Selector));
+  const modalEl = (await t.context.queryElements(t, ex.dialog4Selector))[0];
   t.false(
     await modalEl.isDisplayed(),
     'Modal 4 should not be displayed after sending escape to element: ' + ex.dialog4FocusableEls[0]

From f5d679b5223c122adcb06b113f4bd3cbaf082350 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 26 May 2020 14:05:52 -0500
Subject: [PATCH 21/46] removed file that should not have been part of the pull
 request

---
 examples/combobox/combobox-datepicker.html | 848 ---------------------
 1 file changed, 848 deletions(-)
 delete mode 100644 examples/combobox/combobox-datepicker.html

diff --git a/examples/combobox/combobox-datepicker.html b/examples/combobox/combobox-datepicker.html
deleted file mode 100644
index a0160c1210..0000000000
--- a/examples/combobox/combobox-datepicker.html
+++ /dev/null
@@ -1,848 +0,0 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-<meta charset="utf-8" />
-<title>Date Picker Combobox Example | WAI-ARIA Authoring Practices 1.2</title>
-
-<!--  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 type="text/javascript" src="../js/examples.js"></script>
-<script type="text/javascript" src="../js/highlight.pack.js"></script>
-<script type="text/javascript" src="../js/app.js"></script>
-
-
-<link href="css/combobox-datepicker.css" rel="stylesheet">
-<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
-<script src="js/combobox-datepicker.js" type="text/javascript"></script>
-</head>
-<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="https://github.com/w3c/aria-practices/issues/new">Report Issue</a></li>
-      <li><a href="https://github.com/w3c/aria-practices/projects/14">Related Issues</a></li>
-      <li><a href="../../#datepicker">Design Pattern</a></li>
-    </ul>
-  </nav>
-  <main>
-    <h1>Date Picker Combobox Example</h1>
-    <p>
-      <strong>NOTE:</strong> This example page is work in progress.
-      Please provide feedback in
-      <a href="https://github.com/w3c/aria-practices/pull/1017">pull request 1017.</a>
-    </p>
-    <p>
-      The date picker is an example of the <a href="../../#combobox"><code>combobox</code> design pattern</a> that opens a dialog box.
-      The date picker dialog box in this example is opened by moving keyboard focus to the text box and pressing either the <kbd>enter</kbd> key, <kbd>down arrow</kbd> key or <kbd>alt + down arrow</kbd> keys or by clicking on the choose date button.
-      The date picker dialog uses a <code>grid</code> pattern to show and select a date using the cursor keys.  Additional buttons in the dialog box can be used for changing the month and year shown in the grid.
-    </p>
-  <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">
-
-      <div id="myDatepicker"
-           class="combobox-datepicker">
-
-        <label id="id-label-1"
-               for="cb-textbox-1">Date</label>
-
-        <div class="group">
-          <input type="text"
-                placeholder="mm/dd/yyyy"
-                id="cb-textbox-1"
-                aria-autocomplete="none"
-                role="combobox"
-                aria-expanded="false"
-                aria-haspopup="dialog"
-                aria-controls="cb-dialog-1">
-
-          <button type="button"
-              class="arrow"
-              tabindex="-1"
-              aria-haspopup="dialog"
-              aria-label="Date"
-              aria-expanded="false"
-              aria-controls="cb-dialog-1">
-              <span>
-                <svg width="18" height="16" aria-hidden="true" focusable="false">
-                  <polygon points="2,4 16,4 9,14"></polygon>
-                </svg>
-              </span>
-          </button>
-
-        </div>
-
-        <div class="combobox-message" aria-live="polite"></div>
-
-        <div id="cb-dialog-1"
-             class="dialog"
-             role="dialog"
-             aria-modal="true"
-             aria-labelledby="cb-dialog-label">
-
-          <div class="header">
-
-            <button type="button"
-              class="prev-year"
-              aria-label="previous year">
-              <span class="fas fa-angle-double-left fa-lg"></span>
-            </button>
-
-            <button type="button"
-              class="prev-month"
-              aria-label="previous month">
-              <span class="fas fa-angle-left fa-lg"></span>
-            </button>
-
-            <h2 id="cb-dialog-label"
-                class="month-year"
-                aria-live="polite">
-              December 2020
-            </h2>
-
-            <button type="button"
-              class="next-month"
-              aria-label="next month">
-              <span class="fas fa-angle-right fa-lg"></span>
-            </button>
-
-            <button type="button"
-              class="next-year"
-              aria-label="next year">
-              <span class="fas fa-angle-double-right fa-lg"></span>
-            </button>
-
-          </div>
-
-          <table
-            id="myDatepickerGrid"
-            class="dates"
-            role="grid"
-            aria-labelledby="cb-dialog-label">
-            <thead>
-              <tr>
-                <th scope="col" abbr="Sunday">Su</th>
-                <th scope="col" abbr="Monday">Mo</th>
-                <th scope="col" abbr="Tuesday">Tu</th>
-                <th scope="col" abbr="Wednesday">We</th>
-                <th scope="col" abbr="Thursday">Th</th>
-                <th scope="col" abbr="Friday">Fr</th>
-                <th scope="col" abbr="Saturday">Sa</th>
-              </tr>
-            </thead>
-
-            <tbody>
-              <tr>
-                <td class="disabled" tabindex="-1"></td>
-                <td class="disabled" tabindex="-1"></td>
-                <td class="disabled" tabindex="-1"></td>
-                <td class="disabled" tabindex="-1"></td>
-                <td class="disabled" tabindex="-1"></td>
-                <td class="disabled" tabindex="-1"></td>
-                <td tabindex="-1" data-date="2020-02-01">1</td>
-              </tr>
-              <tr>
-                <td tabindex="-1" data-date="2020-02-02">2</td>
-                <td tabindex="-1" data-date="2020-02-03">3</td>
-                <td tabindex="-1" data-date="2020-02-04">4</td>
-                <td tabindex="-1" data-date="2020-02-05">5</td>
-                <td tabindex="-1" data-date="2020-02-06">6</td>
-                <td tabindex="-1" data-date="2020-02-07">7</td>
-                <td tabindex="-1" data-date="2020-02-08">8</td>
-              </tr>
-              <tr>
-                <td tabindex="-1" data-date="2020-02-09">9</td>
-                <td tabindex="-1" data-date="2020-02-10">10</td>
-                <td tabindex="-1" data-date="2020-02-11">11</td>
-                <td tabindex="-1" data-date="2020-02-12">12</td>
-                <td tabindex="-1" data-date="2020-02-13">13</td>
-                <td role="gridcell" aria-selected="true" data-date="2020-02-14">14</td>
-                <td tabindex="-1" data-date="2020-02-15">15</td>
-              </tr>
-              <tr>
-                <td tabindex="-1" data-date="2020-02-16">16</td>
-                <td tabindex="-1" data-date="2020-02-17">17</td>
-                <td tabindex="-1" data-date="2020-02-18">18</td>
-                <td tabindex="-1" data-date="2020-02-19">19</td>
-                <td tabindex="-1" data-date="2020-02-20">20</td>
-                <td tabindex="-1" data-date="2020-02-21">21</td>
-                <td tabindex="-1" data-date="2020-02-22">22</td>
-              </tr>
-              <tr>
-                <td tabindex="-1" data-date="2020-02-23">23</td>
-                <td tabindex="-1" data-date="2020-02-24">24</td>
-                <td tabindex="-1" data-date="2020-02-25">25</td>
-                <td tabindex="-1" data-date="2020-02-26">26</td>
-                <td tabindex="-1" data-date="2020-02-27">27</td>
-                <td tabindex="-1" data-date="2020-02-28">28</td>
-                <td tabindex="-1" data-date="2020-02-29">29</td>
-              </tr>
-              <tr>
-                <td tabindex="-1" data-date="2020-02-30">30</td>
-                <td tabindex="-1" data-date="2020-02-31">31</td>
-                <td class="disabled" tabindex="-1"></td>
-                <td class="disabled" tabindex="-1"></td>
-                <td class="disabled" tabindex="-1"></td>
-                <td class="disabled" tabindex="-1"></td>
-                <td class="disabled" tabindex="-1"></td>
-              </tr>
-            </tbody>
-          </table>
-
-          <div class="dialog-ok-cancel-group">
-            <button class="dialog-button" value="cancel">Cancel</button>
-            <button class="dialog-button" value="ok">OK</button>
-          </div>
-
-          <div class="dialog-message" aria-live="polite"></div>
-
-        </div>
-      </div>
-    </div>
-    <div role="separator" id="ex_end_sep" aria-labelledby="ex_end_sep ex_label" aria-label="End of"></div>
-  </section>
-
-  <section>
-    <h2>Accessibility Features</h2>
-    <p>There are three main featues of the combobox date picker example:</p>
-    <ul>
-      <li>Textbox: Holds the value of the selected date and can open the date picker dialog box.</li>
-      <li>Choose Date Button: Opens the datepicker dialog box.</li>
-      <li>Date Picker Dialog Box: Displays a grid of dates for the user to select from and provides additional buttons to change the month and year of dates shown in the grid.</li>
-    </ul>
-
-    <p>The <code>combobox</code>, <code>textbox</code> and <code>button</code> all have the same accessible name.</p>
-
-
-    <h3>Date Textbox</h3>
-
-    <ul>
-      <li>Contains the date value.</li>
-      <li>Opens and closes the date picker dialog box through keyboard, click and touch events.</li>
-      <li>A live region provides information on how to open the date picker dialog when textbox receives focus (e.g. using <kbd>down arrow</kbd> key).</li>
-      <li>To support people who are sighted in understanding the <kbd>down arrow</kbd> key opens the date picker dialog box, a down arrow icon appears in the <code>textbox</code> when the <code>textbox</code> receives keyboard focus and the down arrow icon is removed when the <code>textbox</code> does not have keyboard focus.</li>
-    </ul>
-
-    <h3>Choose Date Button</h3>
-
-    <ul>
-      <li>Opens and closes the date picker dialog box through click events.</li>
-      <li>Excluded from the <kbd>tab</kbd> sequence of the page (eg. <code>tabindex=-1</code>), since the user can use the <kbd>down arrow</kbd> or <kbd>enter</kbd> key to open the date picker dialog box from the <code>textbox</code>.</li>
-    </ul>
-
-    <h3>Date Picker Dialog</h3>
-
-    <ul>
-      <li>The date picker dialog is a modal dialog box for selecting a date from a grid of dates for a particular month and year.</li>
-      <li>Additional buttons and keyboard commands are used to change month and year.</li>
-      <li>A live region announces changes in the month and year.</li>
-      <li>A live region announces the use of cursor keys when a date in the grid of dates gets focus.  The message is also visible at the bottom of the dialog box to provide the same information to keyboard users.</li>
-      <li>The dialog is opened through keyboard commands in the textbox or by clicking on the choose date button.</li>
-      <li>High contrast support for the controls in the dialog box using the CSS border property:
-        <ul>
-          <li>When a button or date receives focus.</li>
-          <li>When hovering over a button or date with a pointing device.</li>
-          <li>When a button does not have focus or hover the border is removed.</li>
-        </ul>
-      </li>
-    </ul>
-
-    <h3>Mobile Support</h3>
-
-    <ul>
-      <li>One issue with mobile browsers is that the onscreen keyboard is visible when the textbox has focus.</li>
-      <li>Adding the <code>touchstart</code> event allows the user to close the onscreen keyboard when the textbox has focus.</li>
-    </ul>
-
-  </section>
-
-
-  <section>
-    <h2 id="kbd_label">Keyboard Support</h2>
-
-    <section>
-      <h3 id="kbd_label_1">Textbox</h3>
-      <table aria-labelledby="kbd_label_1 kbd_label" class="def">
-        <thead>
-          <tr>
-            <th>Key</th>
-            <th>Function</th>
-          </tr>
-        </thead>
-        <tbody>
-            <tr data-test-id="combobox-down-arrow-enter">
-                <th><kbd>Down Arrow</kbd>, <kbd>ALT + Down Arrow</kbd>, <kbd>Enter</kbd></th>
-                <td>
-                  <ul>
-                  <li>Open the date picker dialog.</li>
-                  <li>
-                    Move focus to selected date in the calendar grid, i.e., the date displayed in the date textbox.
-                    If no date has been selected, places focus on the current date.
-                  </li>
-                </ul>
-              </td>
-            </tr>
-        </tbody>
-      </table>
-    </section>
-
-    <section>
-      <h3 id="kbd_label_2">Choose Date Button</h3>
-      <table aria-labelledby="kbd_label_2 kbd_label" class="def">
-        <thead>
-          <tr>
-            <th>Key</th>
-            <th>Function</th>
-          </tr>
-        </thead>
-        <tbody>
-            <tr data-test-id="button-space-return">
-              <th><kbd>Space</kbd>,<br> <kbd>Return</kbd></th>
-              <td>
-                <ul>
-                  <li>Open the date picker dialog.</li>
-                  <li>
-                    Move focus to selected date in the calendar grid, i.e., the date displayed in the date textbox.
-                    If no date has been selected, places focus on the current date.
-                  </li>
-                </ul>
-                <p>Note:
-                    The button has been excluded from <kbd>Tab</kbd> sequence of the page, since the dialog can be opened from the textbox.
-                </p>
-              </td>
-            </tr>
-        </tbody>
-      </table>
-    </section>
-
-    <section>
-      <h3 id="kbd_label_3">Date Picker Dialog</h3>
-      <table aria-labelledby="kbd_label_3 kbd_label" class="def">
-        <thead>
-          <tr>
-            <th>Key</th>
-            <th>Function</th>
-          </tr>
-        </thead>
-        <tbody>
-            <tr data-test-id="dialog-esc">
-              <th><kbd>ESC</kbd></th>
-              <td>Close the dialog and move focus back to the date textbox.</td>
-            </tr>
-            <tr data-test-id="dialog-tab">
-              <th><kbd>TAB</kbd></th>
-              <td>
-                <ul>
-                  <li>Moves focus to next element in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>Note that, as specified in the <a href="../../#grid">grid design pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
-                  <li>If focus is on the last button (i.e., <q>OK</q>), moves focus to the first button (i.e. <q>Previous Year</q>).</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="dialog-shift-tab">
-              <th><kbd>Shift</kbd> + <br><kbd>TAB</kbd></th>
-              <td>
-                <ul>
-                  <li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>Note that, as specified in the <a href="../../#grid">grid design pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
-                  <li>If focus is on the first button (i.e., <q>Previous Year</q>), moves focus to the last button (i.e. <q>OK</q>).</li>
-                </ul>
-              </td>
-            </tr>
-        </tbody>
-      </table>
-    </section>
-
-    <section>
-      <h3 id="kbd_label_4">Date Picker Dialog: Calendar Buttons</h3>
-      <table aria-labelledby="kbd_label_4 kbd_label" class="def">
-        <thead>
-          <tr>
-            <th>Key</th>
-            <th>Function</th>
-          </tr>
-        </thead>
-        <tbody>
-            <tr data-test-id="month-year-button-space-return">
-              <th><kbd>Space</kbd>,<br> <kbd>Return</kbd></th>
-              <td>
-                Change the month and/or year displayed in the calendar grid.
-              </td>
-            </tr>
-        </tbody>
-      </table>
-    </section>
-
-    <section>
-      <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
-      <table aria-labelledby="kbd_label_5 kbd_label" class="def">
-        <thead>
-          <tr>
-            <th>Key</th>
-            <th>Function</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr data-test-id="grid-space">
-            <th><kbd>Space</kbd></th>
-            <td>
-              <ul>
-                <li>Select the date.</li>
-                <li>Update the value of the <q>Date</q> input with the selected date.</li>
-                <li>Update the accessible name of the <q>Choose Date</q> button to include the selected date.</li>
-              </ul>
-          </td>
-          <tr data-test-id="grid-return">
-            <th><kbd>Enter</kbd></th>
-            <td>
-              <ul>
-                <li>Select the date.</li>
-                <li>Update the value of the <q>Date</q> input with the selected date.</li>
-                <li>Update the accessible name of the <q>Choose Date</q> button to include the selected date.</li>
-                <li>Close the dialog, and move focus to the combobox.</li>
-              </ul>
-          </td>
-          </tr>
-          <tr data-test-id="grid-up-arrow">
-            <th><kbd>Up Arrow</kbd></th>
-            <td>Move the focus to the same day of the previous week.</td>
-          </tr>
-          <tr data-test-id="grid-down-arrow">
-            <th><kbd>Down Arrow</kbd></th>
-            <td>Move the focus to the same day of the next week.</td>
-          </tr>
-          <tr data-test-id="grid-right-arrow">
-            <th><kbd>Right Arrow</kbd></th>
-            <td>Move the focus to the next day.</td>
-          </tr>
-          <tr data-test-id="grid-left-arrow">
-            <th><kbd>Left Arrow</kbd></th>
-            <td>Move the focus to the previous day.</td>
-          </tr>
-          <tr data-test-id="grid-home">
-            <th><kbd>Home</kbd></th>
-            <td>Move the focus to the first day (e.g Sunday) of the current week.</td>
-          </tr>
-          <tr data-test-id="grid-end">
-            <th><kbd>End</kbd></th>
-            <td>Move the focus to the last day (e.g. Saturday) of the current week.</td>
-          </tr>
-          <tr data-test-id="grid-pageup">
-            <th><kbd>PageUp</kbd></th>
-            <td>
-              <ul>
-                <li>Changes the grid of dates to the previous month.</li>
-                <li>Sets focus on the same day of the same week. If that day does not exist, then moves focus to the same day of the previous or next week.</li>
-              </ul>
-            </td>
-          </tr>
-          <tr data-test-id="grid-shift-pageup">
-            <th><kbd>Shift</kbd>+<br> <kbd>PageUp</kbd></th>
-            <td>
-              <ul>
-                <li>Change the grid of dates to the previous year.</li>
-                <li>The focus will be on the same day of that week, if it does not exist, then it will move the focus to the same day of previous or next week</li>
-              </ul>
-            </td>
-          </tr>
-          <tr data-test-id="grid-pagedown">
-            <th><kbd>PageDown</kbd></th>
-            <td>
-              <ul>
-                <li>Change the grid of dates to the next month.</li>
-                <li>The focus will be on the same day of that week, if it does not exist, then it will move the focus to the same day of previous or next week</li>
-              </ul>
-            </td>
-          </tr>
-          <tr data-test-id="grid-shift-pagedown">
-            <th><kbd>Shift</kbd>+<br> <kbd>PageDown</kbd></th>
-            <td>
-              <ul>
-                <li>Change the grid of dates to the next year.</li>
-                <li>The focus will be on the same day of that week, if it does not exist, then it will move the focus to the same day of previous or next week</li>
-              </ul>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
-
-    <section>
-        <h3 id="kbd_label_6">Date Picker Dialog: OK and Cancel Buttons</h3>
-        <table aria-labelledby="kbd_label_6 kbd_label" class="def">
-          <thead>
-            <tr>
-                <th>Key</th>
-                <th>Function</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr data-test-id="okay-cancel-button-space-return">
-              <th> <kbd>Space</kbd>,<br> <kbd>Return</kbd></th>
-              <td>
-                Activates the button:
-                <ul>
-                    <li><q>Cancel</q>: Closes the dialog, moves focus to combobox, does not update date in date textbox.</li>
-                    <li><q>OK</q>: Closes the dialog, moves focus to combobox, updates date in date textbox.</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-    </section>
-  </section>
-
-  <section>
-    <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
-
-    <section>
-      <h3 id="rps_label_combobox">Textbox</h3>
-      <table aria-labelledby="rps_label_combobox rps_label" class="data attributes">
-        <thead>
-          <tr>
-            <th scope="col">Role</th>
-            <th scope="col">Attribute</th>
-            <th scope="col">Element</th>
-            <th scope="col">Usage</th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr data-test-id="textbox-role">
-            <th scope="row"><code>role=<q>combobox</q></code></th>
-            <td></td>
-            <td><code>input</code></td>
-            <td>
-              Identifes the <code>input</code> element as a combobox.
-            </td>
-          </tr>
-          <tr data-test-id="textbox-aria-haspopup">
-            <td></td>
-            <th scope="row"><code>aria-haspopup=<q>dialog</q></code></th>
-            <td><code>input</code></td>
-            <td>
-              Identifies that the combobox opens a dialog box.
-            </td>
-          </tr>
-          <tr data-test-id="textbox-aria-expanded-false">
-            <td></td>
-            <th scope="row"><code>aria-expanded=<q>false</q></code></th>
-            <td><code>input</code></td>
-            <td>
-              <code>aria-expanded=<q>false</q></code> when the date picker dialog box is closed.
-            </td>
-          </tr>
-          <tr data-test-id="textbox-aria-expanded-true">
-            <td></td>
-            <th scope="row"><code>aria-expanded=<q>true</q></code></th>
-            <td><code>input</code></td>
-            <td>
-              <code>aria-expanded=<q>true</q></code> when the date picker dialog box is open.
-            </td>
-          </tr>
-          <tr data-test-id="textbox-aria-autocomplete">
-            <td></td>
-            <th scope="row"><code>aria-autocomplete=<q>none</q></code></th>
-            <td><code>input</code></td>
-            <td>
-              <code>aria-autocomplete=<q>none</q></code> the textbox does not support autocompletion when text is entered.
-            </td>
-          </tr>
-          <tr data-test-id="textbox-aria-controls">
-            <td></td>
-            <th scope="row"><code>aria-controls=<q>IDREF</q></code></th>
-            <td><code>input</code></td>
-            <td>
-              Provides a reference to the screen reader for direct navigation to the dialog box.
-            </td>
-          </tr>
-          <tr data-test-id="textbox-aria-live">
-            <td></td>
-            <th scope="row"><code>aria-live=<q>polite</q></code></th>
-            <td><code>div</code></td>
-            <td>
-              <ul>
-                <li>Indicates the element that displays information about keyboard commands for opening the dialog box should be automatically announced by screen readers.</li>
-                <li>The script slightly delays display of the information so screen readers are more likely to read it after information related to change of focus.</li>
-              </ul>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </section>
-
-    <section>
-        <h3 id="rps_label_2">Choose Date Button</h3>
-        <table aria-labelledby="rps_label_2 rps_label" class="data attributes">
-          <thead>
-            <tr>
-              <th scope="col">Role</th>
-              <th scope="col">Attribute</th>
-              <th scope="col">Element</th>
-              <th scope="col">Usage</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr data-test-id="calendar-button-tabindex">
-              <td></td>
-              <th scope="row"><code>tabindex=<q>-1</q></code></th>
-              <td><code>button</code></td>
-              <td>
-                <ul>
-                  <li>Exclude the button from tab sequence of the page.</li>
-                  <li>The textbox supports opening the dialog through the keyboard.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="calendar-button-aria-label">
-              <td></td>
-              <th scope="row"><code>aria-label="string"</code></th>
-              <td><code>button</code></td>
-              <td>
-                <ul>
-                  <li>The initial value of accessible name is <q>Choose Date</q>.</li>
-                  <li>When users select a date, the accessible name is updated to also include the selected date.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="calendar-button-aria-haspopup">
-              <td></td>
-              <th scope="row"><code>aria-haspopup=<q>dialog</q></code></th>
-              <td><code>button</code></td>
-              <td>
-                Identifies the button opens a dialog box.
-              </td>
-            </tr>
-            <tr data-test-id="calendar-button-aria-expanded-false">
-              <td></td>
-              <th scope="row"><code>aria-expanded=<q>false</q></code></th>
-              <td><code>button</code></td>
-              <td>
-                <code>aria-expanded=<q>false</q></code> when the date picker dialog box is closed.
-              </td>
-            </tr>
-            <tr data-test-id="calendar-button-aria-expanded-true">
-              <td></td>
-              <th scope="row"><code>aria-expanded=<q>true</q></code></th>
-              <td><code>button</code></td>
-              <td>
-                <code>aria-expanded=<q>true</q></code> when the date picker dialog box is open.
-              </td>
-            </tr>
-            <tr data-test-id="calendar-button-aria-controls">
-              <td></td>
-              <th scope="row"><code>aria-controls=<q>IDREF</q></code></th>
-              <td><code>button</code></td>
-              <td>
-                Provides a reference to the screen reader for direct navigation to the dialog box.
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <section>
-          <h3 id="rps_label_3">Date Picker Dialog</h3>
-          <table aria-labelledby="rps_label_3 rps_label" class="data attributes">
-            <thead>
-              <tr>
-                <th scope="col">Role</th>
-                <th scope="col">Attribute</th>
-                <th scope="col">Element</th>
-                <th scope="col">Usage</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr data-test-id="dialog-role">
-                <th scope="row"><code>dialog</code></th>
-                <td></td>
-                <td>
-                  <code>div</code>
-                </td>
-                <td>Identifies the element as a dialog .</td>
-              </tr>
-              <tr data-test-id="dialog-aria-modal">
-                <td></td>
-                <th scope="row"><code>aria-modal=<q>true</q></code></th>
-                <td><code>div</code></td>
-                <td>Indicates the dialog is modal.</td>
-              </tr>
-              <tr data-test-id="dialog-aria-labelledby">
-                <td></td>
-                <th scope="row"><code>aria-labelledby=<q>IDREFS</q></code></th>
-                <td><code>div</code></td>
-                <td>Refers to the heading containing the currently displayed month and year, which defines the accessible name for the dialog.</td>
-              </tr>
-              <tr data-test-id="dialog-aria-live">
-                <td></td>
-                <th scope="row"><code>aria-live=<q>polite</q></code></th>
-                <td><code>div</code></td>
-                <td>
-                  <ul>
-                    <li>Indicates the element that displays information about keyboard commands for navigating the grid should be automatically announced by screen readers.</li>
-                    <li>The script slightly delays display of the information so screen readers are more likely to read it after information related to change of focus.</li>
-                  </ul>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </section>
-
-      <section>
-          <h3 id="rps_label_4">Date Picker Dialog: Calendar Navigation Buttons</h3>
-          <table aria-labelledby="rps_label_4 rps_label" class="data attributes">
-            <thead>
-              <tr>
-                <th scope="col">Role</th>
-                <th scope="col">Attribute</th>
-                <th scope="col">Element</th>
-                <th scope="col">Usage</th>
-              </tr>
-            </thead>
-            <tbody>
-                <tr data-test-id="calendar-navigation-button-aria-label">
-                    <td></td>
-                    <th scope="row"><code>aria-label=<q><em>String</em></q></code></th>
-                    <td><code>button</code></td>
-                    <td>
-                      Defines the accessible name of the button (e.g. "Next Year").
-                    </td>
-                </tr>
-                <tr data-test-id="calendar-navigation-aria-live">
-                    <td></td>
-                    <th scope="row"><code>aria-live=<q>polite</q></code></th>
-                    <td>
-                      <code>h2</code>
-                    </td>
-                    <td>
-                      <ul>
-                        <li>When the month and/or year changes the content of the <code>h2</code> element is updated.</li>
-                        <li>The use of the <code>polite</code> value means the screen reader will not interrupt other speech to announce the change in month and/or year.</li>
-                      </ul>
-                    </td>
-                  </tr>
-            </tbody>
-          </table>
-        </section>
-
-        <section>
-            <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
-            <table aria-labelledby="rps_label_5 rps_label" class="data attributes">
-              <thead>
-                <tr>
-                  <th scope="col">Role</th>
-                  <th scope="col">Attribute</th>
-                  <th scope="col">Element</th>
-                  <th scope="col">Usage</th>
-                </tr>
-              </thead>
-              <tbody>
-                  <tr data-test-id="grid-role">
-                    <th scope="row"><code>grid</code></th>
-                    <td></td>
-                    <td>
-                      <code>table</code>
-                    </td>
-                    <td>
-                     <ul>
-                        <li>Identifies the <code>table</code> element as a <code>grid</code> widget.</li>
-                        <li>Since the <code>grid</code> role is applied to a <code>table</code> element, the <code>row</code>, <code>colheader</code>, and <code>gridcell</code> roles do not need to be specified because they are implied by <code>tr</code>, <code>th</code>, and <code>td</code> tags.</li>
-                      </ul>
-                    </td>
-                  </tr>
-                  <tr data-test-id="grid-aria-labelledby">
-                    <td></td>
-                    <th scope="row"><code>aira-labelledby=<q>IDREF</q></code></th>
-                    <td><code>table</code></td>
-                    <td>
-                      Defines the accessible name for the <code>grid</code> using the <code>h2</code> that shows the month and year of the dates displayed in the grid.
-                    </td>
-                  </tr>
-                  <tr data-test-id="gridcell-tabindex">
-                    <td></td>
-                    <th scope="row">
-                      <code>tabindex="0"</code>
-                    </th>
-                    <td>
-                      <code>td</code>
-                    </td>
-                    <td>
-                      <ul>
-                        <li>Makes the gridcell focusable and includes it in the dialog <kbd>Tab</kbd> sequence.</li>
-                        <li>Set dynamically by the JavaScript when the element is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
-                        <li>At any given time, only one gridcell within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
-                        <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
-                      </ul>
-                    </td>
-                  </tr>
-                  <!-- The regression test for tabindex=0 tests for tabindex=-1 -->
-                  <tr data-test-id="gridcell-tabindex">
-                    <td></td>
-                    <th scope="row">
-                      <code>tabindex="-1"</code>
-                    </th>
-                    <td>
-                      <code>td</code>
-                    </td>
-                    <td>
-                      <ul>
-                        <li>Makes the gridcell focusable and excludes it from the dialog <kbd>Tab</kbd> sequence.</li>
-                        <li>Changed dynamically to <code>0</code> by the JavaScript when the gridcell is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
-                        <li>At any given time, only one girdcell within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
-                        <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
-                      </ul>
-                    </td>
-                  </tr>
-                  <tr data-test-id="gridcell-aria-selected">
-                    <td></td>
-                    <th scope="row"><code>aria-selected="true"</code></th>
-                    <td><code>td</code></td>
-                    <td>
-                      <ul>
-                        <li>Identifies the gridcell for the currently selected date, i.e., the date value  present in the date textbox.</li>
-                        <li>Only set on the gridcell representing the currently selected date, no other gridcells have <code>aria-selected</code> specified.</li>
-                      </ul>
-                    </td>
-                  </tr>
-              </tbody>
-            </table>
-            <p>
-              <strong>Note:</strong> Since the names of the days of the week in the column headers are abbreviated to two characters, they may be difficult to understand when announced by a screen reader.
-              An alternative column header name can be provided to screen readers by applying the <code>abbr</code> attribute to the <code>th</code> elements.
-              So, each <code>th</code> element includes a <code>abbr</code> attribute containing the full spelling of the name of the day for that column.
-            </p>
-          </section>
-  </section>
-
-  <section>
-    <h2>Javascript and CSS Source Code</h2>
-    <ul>
-      <li>
-        CSS:
-        <a href="css/combobox-datepicker.css" type="text/css">combobox-datepicker.css</a>
-      </li>
-      <li>
-        Javascript:
-        <a href="js/combobox-datepicker.js" type="text/javascript">combobox-datepicker.js</a>
-      </li>
-    </ul>
-  </section>
-
- <section>
-    <h2 id="sc1_label">HTML Source Code</h2>
-    <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
-    <pre><code id="source1"></code></pre>
-    <div role="separator" id="sc1_end_sep" aria-labelledby="sc1_end_sep sc1_label" aria-label="End of"></div>
-    <script>
-      sourceCode.add('source1', 'ex1');
-      sourceCode.make();
-    </script>
-  </section>
-  </main>
-  <nav>
-    <a href="../../#combobox"><code>combobox</code> Design Pattern in WAI-ARIA Authoring Practices 1.2</a>
-  </nav>
-</body>
-</html>

From 91256c5da754717bb4ab9f49fc0e86665089b909 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 7 Jul 2020 08:55:50 -0500
Subject: [PATCH 22/46] added description of date format

---
 examples/dialog-modal/datepicker-dialog.html  | 29 ++++++++++---------
 examples/dialog-modal/js/datepicker-dialog.js | 12 ++++----
 2 files changed, 22 insertions(+), 19 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 165b4302ed..2358c5e64e 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -55,15 +55,16 @@ <h2 id="ex_label">Example</h2>
               <input type="text"
                     placeholder="mm/dd/yyyy"
                     id="id-textbox-1"
-                    aria-autocomplete="none">
-
+                    aria-autocomplete="none"
+                    aria-describedby="id-description-1">
             </div>
-
-            <button type="button" class="icon"
-              aria-label="Choose Date"
-              >
+            <span class="desc" id="id-description-1">(date format: mm/dd/yy)</span>
+            <button type="button"
+                    class="icon"
+                    aria-label="Choose Date">
               <span class="fa fa-calendar-alt fa-2x"></span>
             </button>
+
           </div>
 
         </div>
@@ -72,7 +73,7 @@ <h2 id="ex_label">Example</h2>
              class="datepicker-dialog"
              role="dialog"
              aria-modal="true"
-             aria-labelledby="id-dialog-label">
+             aria-label="Choose Date">
 
           <div class="header">
 
@@ -86,7 +87,7 @@ <h2 id="ex_label">Example</h2>
               <span class="fas fa-angle-left fa-lg"></span>
             </button>
 
-            <h2 id="id-dialog-label"
+            <h2 id="id-grid-label"
                   class="month-year"
                   aria-live="polite">
               February 2020
@@ -104,10 +105,9 @@ <h2 id="ex_label">Example</h2>
           </div>
 
          <table
-            id="myDatepickerGrid"
             class="dates"
             role="grid"
-            aria-labelledby="id-dialog-label">
+            aria-labelledby="id-grid-label">
             <thead>
               <tr>
                 <th scope="col" abbr="Sunday">Su</th>
@@ -471,11 +471,14 @@ <h3 id="rps_label_3">Date Picker Dialog</h3>
                 <td><code>div</code></td>
                 <td>Indicates the dialog is modal.</td>
               </tr>
-              <tr data-test-id="dialog-aria-labelledby">
+              <tr data-test-id="dialog-aria-label">
                 <td></td>
-                <th scope="row"><code>aria-labelledby="IDREF"</code></th>
+                <th scope="row"><code>aria-label=<q>string</q></code></th>
                 <td><code>div</code></td>
-                <td>Refers to the heading containing the currently displayed month and year, which defines the accessible name for the dialog.</td>
+                <td>
+                  The accessible name is <q>Choose Date</q>, since activating the button opens the <q>Choose Date</q> dialog and moves focus to the dialog.
+              </td>
+                </td>
               </tr>
               <tr data-test-id="dialog-aria-live">
                 <th></th>
diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index 9b5246ed0d..62861b6d5f 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -50,7 +50,7 @@ MenuButtonDatePicker.prototype.init = function () {
   this.textboxNode.addEventListener('mouseup',   this.handleTextboxMouseUp.bind(this));
 
   this.buttonNode.addEventListener('keydown',   this.handleButtonKeydown.bind(this));
-  this.buttonNode.addEventListener('mouseup',   this.handleButtonMouseUp.bind(this));
+  this.buttonNode.addEventListener('click',   this.handleButtonClick.bind(this));
 
   this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
   this.okButtonNode.addEventListener('keydown', this.handleOkButton.bind(this));
@@ -743,10 +743,10 @@ MenuButtonDatePicker.prototype.handleDayFocus = function () {
 
 MenuButtonDatePicker.prototype.handleButtonKeydown = function (event) {
 
-  if ((event.key === "Enter") ||
-      (event.key == "Down")  ||
-      (event.key == "ArrowDown")  ||
-      (event.key == " ")) {
+  if ((event.key === 'Enter') ||
+      (event.key === 'Down')  ||
+      (event.key === 'ArrowDown')  ||
+      (event.key === ' ')) {
     this.open();
     this.setFocusDay();
 
@@ -756,7 +756,7 @@ MenuButtonDatePicker.prototype.handleButtonKeydown = function (event) {
 
 };
 
-MenuButtonDatePicker.prototype.handleButtonMouseUp = function (event) {
+MenuButtonDatePicker.prototype.handleButtonClick = function (event) {
   if (this.isOpen()) {
     this.close();
   }

From 260482353986de9ab72a6fa846a355ed8c5789c7 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 7 Jul 2020 14:08:55 -0500
Subject: [PATCH 23/46] added description to date format for textbox

---
 .../dialog-modal/css/datepicker-dialog.css    | 23 ++++++++++++++-----
 examples/dialog-modal/datepicker-dialog.html  | 17 +++++++-------
 examples/dialog-modal/js/datepicker-dialog.js | 21 ++++-------------
 test/tests/dialog-modal_datepicker.js         | 10 ++++----
 4 files changed, 35 insertions(+), 36 deletions(-)

diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
index 87bf314c3c..9f0b52ee0f 100644
--- a/examples/dialog-modal/css/datepicker-dialog.css
+++ b/examples/dialog-modal/css/datepicker-dialog.css
@@ -1,10 +1,18 @@
+.sr-only {
+  position: absolute;
+  top: -2000em;
+  left: -3000em;
+}
+
 .datepicker {
   margin-top: 1em;
   position: relative;
 }
 
 .datepicker .group {
-  display: inline-flex;
+  display: inline-block;
+  position: relative;
+  width: 13em;
 }
 
 .datepicker label {
@@ -21,16 +29,19 @@
 }
 
 .datepicker button.icon {
+  position: relative;
+  top: 0.25em;
   margin: 0;
-  margin-left: 10px;
   padding: 4px;
-  margin: 0;
   border: 0px solid #005a9c;
   background-color: white;
   border-radius: 5px;
-  position: relative;
-  left: 5px;
-  top: -6px;
+}
+
+.datepicker .desc {
+  position: absolute;
+  left: 0;
+  top: 2em;
 }
 
 .datepicker .fa-calendar-alt {
diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 2358c5e64e..0249d6aa86 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -51,14 +51,13 @@ <h2 id="ex_label">Example</h2>
           <label for="id-textbox-1">Date</label>
 
           <div class="group">
-            <div class="textbox">
-              <input type="text"
-                    placeholder="mm/dd/yyyy"
-                    id="id-textbox-1"
-                    aria-autocomplete="none"
-                    aria-describedby="id-description-1">
-            </div>
-            <span class="desc" id="id-description-1">(date format: mm/dd/yy)</span>
+            <input type="text"
+                  placeholder="mm/dd/yyyy"
+                  id="id-textbox-1"
+                  aria-autocomplete="none"
+                  size:
+                  aria-describedby="id-description-1">
+            <span class="desc" id="id-description-1">(<span class="sr-only">date format: </span>mm/dd/yyyy)</span>
             <button type="button"
                     class="icon"
                     aria-label="Choose Date">
@@ -145,7 +144,7 @@ <h2 id="ex_label">Example</h2>
                 <td tabindex="-1" data-date="2020-02-11">11</td>
                 <td tabindex="-1" data-date="2020-02-12">12</td>
                 <td tabindex="-1" data-date="2020-02-13">13</td>
-                <td role="gridcell" aria-selected="true" data-date="2020-02-14">14</td>
+                <td tabindex="0" data-date="2020-02-14" aria-selected="true" >14</td>
                 <td tabindex="-1" data-date="2020-02-15">15</td>
               </tr>
               <tr>
diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index 62861b6d5f..7851c4003f 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -47,8 +47,6 @@ var MenuButtonDatePicker = function (cdp) {
 
 MenuButtonDatePicker.prototype.init = function () {
 
-  this.textboxNode.addEventListener('mouseup',   this.handleTextboxMouseUp.bind(this));
-
   this.buttonNode.addEventListener('keydown',   this.handleButtonKeydown.bind(this));
   this.buttonNode.addEventListener('click',   this.handleButtonClick.bind(this));
 
@@ -311,11 +309,10 @@ MenuButtonDatePicker.prototype.updateDate = function (domNode, disable, day, sel
       domNode.setAttribute('tabindex', '0');
     }
   }
-
 };
 
 MenuButtonDatePicker.prototype.updateSelected = function (domNode) {
-  for (i = 0; i < this.days.length; i++) {
+  for (var i = 0; i < this.days.length; i++) {
     var day = this.days[i];
     if (day  === domNode) {
       day.setAttribute('aria-selected', 'true');
@@ -635,6 +632,8 @@ MenuButtonDatePicker.prototype.handlePreviousMonthButton = function (event) {
 MenuButtonDatePicker.prototype.handleDayKeyDown = function (event) {
   var flag = false;
 
+
+  console.log("key: " + event.key);
   switch (event.key) {
 
     case "Esc":
@@ -651,6 +650,7 @@ MenuButtonDatePicker.prototype.handleDayKeyDown = function (event) {
     case "Enter":
       this.setTextboxDate(event.currentTarget);
       this.close();
+      flag = true;
       break;
 
     case "Tab":
@@ -769,19 +769,8 @@ MenuButtonDatePicker.prototype.handleButtonClick = function (event) {
   event.preventDefault();
 };
 
-
-MenuButtonDatePicker.prototype.handleTextboxMouseUp = function (event) {
-  if (this.isOpen()) {
-    this.close();
-    this.textboxNode.focus();
-  }
-
-  event.stopPropagation();
-  event.preventDefault();
-};
 MenuButtonDatePicker.prototype.handleBackgroundMouseUp = function (event) {
-  if (!this.textboxNode.contains(event.target) &&
-      !this.buttonNode.contains(event.target) &&
+  if (!this.buttonNode.contains(event.target) &&
       !this.dialogNode.contains(event.target)) {
 
     if (this.isOpen()) {
diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
index d1abea072b..7bad004ddb 100644
--- a/test/tests/dialog-modal_datepicker.js
+++ b/test/tests/dialog-modal_datepicker.js
@@ -26,7 +26,7 @@ const ex = {
   jan12019Day: '#example [role="dialog"] table.dates td[data-date="2019-01-01"]',
   jan22019Day: '#example [role="dialog"] table.dates td[data-date="2019-01-02"]',
   todayDay: `#example [role="dialog"] table.dates td[data-date="${todayDataDate}"]`,
-  currentlyFocusedDay: '#example [role="dialog"] table.dates td[tabindex=\'0\']',
+  currentlyFocusedDay: '#example [role="dialog"] table.dates td[tabindex="0"]',
   allFocusableElementsInDialog: [
     `#example [role="dialog"] table.dates td[data-date="${todayDataDate}"]`,
     '#example [role="dialog"] button[value="cancel"]',
@@ -96,8 +96,8 @@ ariaTest('aria-modal="true" on modal', exampleFile, 'dialog-aria-modal', async (
     await assertAttributeValues(t, ex.dialogSelector, 'aria-modal', 'true');
 });
 
-ariaTest('aria-labelledby exist on dialog', exampleFile, 'dialog-aria-labelledby', async (t) => {
-    await assertAriaLabelledby(t, ex.dialogSelector);
+ariaTest('aria-label exist on dialog', exampleFile, 'dialog-aria-label', async (t) => {
+    await assertAriaLabelExists(t, ex.dialogSelector);
 });
 
 ariaTest('aria-live="polite" on keyboard support message', exampleFile, 'dialog-aria-live', async (t) => {
@@ -416,13 +416,13 @@ ariaTest('SPACE or RETURN selects date in focus', exampleFile, 'grid-space-retur
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   await t.context.session.findElement(By.css(ex.todayDay)).sendKeys(Key.ARROW_RIGHT);
   await t.context.session.findElement(By.css(ex.currentlyFocusedDay)).sendKeys(' ');
+
   day.setDate(day.getDate() + 1);
   t.is(
     await t.context.session.findElement(By.css(ex.inputSelector)).getAttribute('value'),
     `${day.getMonth() + 1}/${day.getDate()}/${day.getFullYear()}`,
     'SPACE sent to tomorrow\'s date button should select tomorrow'
   );
-
 });
 
 ariaTest('UP ARROW moves date up by week', exampleFile, 'grid-up-arrow', async (t) => {
@@ -497,7 +497,7 @@ ariaTest('LEFT ARROW moves date previous one', exampleFile, 'grid-left-arrow', a
   }
 });
 
-ariaTest('Key HOME sends focus to begining of row', exampleFile, 'grid-home', async (t) => {
+ariaTest('Key HOME sends focus to beginning of row', exampleFile, 'grid-home', async (t) => {
     await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 

From a5d19779b500eae13d5dd1b49b5d3bc755840f52 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 7 Jul 2020 15:36:06 -0500
Subject: [PATCH 24/46] removed click event from textbox

---
 examples/dialog-modal/datepicker-dialog.html | 23 ++++++++++++++++++++
 1 file changed, 23 insertions(+)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 0249d6aa86..192bdca163 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -416,6 +416,29 @@ <h3 id="kbd_label_6">Date Picker Dialog: OK and Cancel Buttons</h3>
   <section>
     <h2 id="rps_label">Role, Property, State, and Tabindex  Attributes</h2>
 
+    <section>
+      <h3 id="rps_label_textbox">Textbox</h3>
+      <table aria-labelledby="rps_label_textbox rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="textbox-aria-describedby">
+            <td></td>
+            <th scope="row"><code>aria-describedby="IDREF"</code></th>
+            <td><code>input</code></td>
+            <td>
+              Identifies the element that provides an accessible description for the combobox, enableing assistive technologies to associate the date format description with the input.
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
 
     <section>
         <h3 id="rps_label_2">Choose Date Button</h3>

From d2fc15c2f4aed43bc5a2a70c0ff57f1b6c74a738 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 7 Jul 2020 16:58:16 -0500
Subject: [PATCH 25/46] fixed HTML linting errors

---
 examples/dialog-modal/datepicker-dialog.html | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 192bdca163..c0d0fc7e90 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -55,7 +55,6 @@ <h2 id="ex_label">Example</h2>
                   placeholder="mm/dd/yyyy"
                   id="id-textbox-1"
                   aria-autocomplete="none"
-                  size:
                   aria-describedby="id-description-1">
             <span class="desc" id="id-description-1">(<span class="sr-only">date format: </span>mm/dd/yyyy)</span>
             <button type="button"
@@ -144,7 +143,7 @@ <h2 id="ex_label">Example</h2>
                 <td tabindex="-1" data-date="2020-02-11">11</td>
                 <td tabindex="-1" data-date="2020-02-12">12</td>
                 <td tabindex="-1" data-date="2020-02-13">13</td>
-                <td tabindex="0" data-date="2020-02-14" aria-selected="true" >14</td>
+                <td tabindex="0"  data-date="2020-02-14" role="gridcell" aria-selected="true">14</td>
                 <td tabindex="-1" data-date="2020-02-15">15</td>
               </tr>
               <tr>
@@ -500,7 +499,6 @@ <h3 id="rps_label_3">Date Picker Dialog</h3>
                 <td>
                   The accessible name is <q>Choose Date</q>, since activating the button opens the <q>Choose Date</q> dialog and moves focus to the dialog.
               </td>
-                </td>
               </tr>
               <tr data-test-id="dialog-aria-live">
                 <th></th>

From d616febddc0624584b242adfcdef051b311615a7 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Wed, 8 Jul 2020 11:38:12 -0500
Subject: [PATCH 26/46] made some code improvements

---
 examples/dialog-modal/js/datepicker-dialog.js | 100 ++++++------------
 1 file changed, 35 insertions(+), 65 deletions(-)

diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index 7851c4003f..f3953b25ce 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -77,7 +77,7 @@ MenuButtonDatePicker.prototype.init = function () {
     for (var j = 0; j < 7; j++) {
       var cell = document.createElement('td');
 
-      cell.setAttribute('tabindex', '-1');
+      cell.tabIndex = -1;
       cell.addEventListener('click', this.handleDayClick.bind(this));
       cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
       cell.addEventListener('focus', this.handleDayFocus.bind(this));
@@ -106,7 +106,7 @@ MenuButtonDatePicker.prototype.isNotSameMonth = function (day1, day2) {
 
 MenuButtonDatePicker.prototype.updateGrid = function () {
 
-  var i, flag;
+  var flag;
   var fd = this.focusDay;
 
   this.monthYearNode.innerHTML = this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
@@ -118,12 +118,12 @@ MenuButtonDatePicker.prototype.updateGrid = function () {
 
   var d = new Date(firstDayOfMonth);
 
-  for (i = 0; i < this.days.length; i++) {
+  for (var i = 0; i < this.days.length; i++) {
     flag = d.getMonth() != fd.getMonth();
     this.updateDate(this.days[i], flag, d, this.isSameDay(d, this.selectedDay));
     d.setDate(d.getDate() + 1);
 
-    // Hide last row if all disabled dates
+    // Hide last row if all dates are disabled (e.g. in next month)
     if (i === 35) {
       if (flag) {
         this.lastRowNode.style.visibility = 'hidden';
@@ -135,6 +135,36 @@ MenuButtonDatePicker.prototype.updateGrid = function () {
   }
 };
 
+MenuButtonDatePicker.prototype.updateDate = function (domNode, disable, day, selected) {
+
+  var d = day.getDate().toString();
+  if (day.getDate() <= 9) {
+    d = '0' + d;
+  }
+
+  var m = day.getMonth() + 1;
+  if (day.getMonth() < 9) {
+    m = '0' + m;
+  }
+
+  domNode.tabIndex = -1;
+  domNode.removeAttribute('aria-selected');
+  domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
+
+  if (disable) {
+    domNode.classList.add('disabled');
+    domNode.innerHTML = '';
+  }
+  else {
+    domNode.classList.remove('disabled');
+    domNode.innerHTML = day.getDate();
+    if (selected) {
+      domNode.setAttribute('aria-selected', 'true');
+      domNode.tabIndex = 0;
+    }
+  }
+};
+
 MenuButtonDatePicker.prototype.setFocusDay = function (flag) {
 
   if (typeof flag !== 'boolean') {
@@ -157,26 +187,14 @@ MenuButtonDatePicker.prototype.setFocusDay = function (flag) {
     }
   }
 
-
   this.days.forEach(checkDay.bind(this));
-
-};
-
-MenuButtonDatePicker.prototype.updateDay = function (day) {
-  var d = this.focusDay;
-  this.focusDay = day;
-  if (this.isNotSameMonth(d, day)) {
-    this.updateGrid();
-    this.setFocusDay();
-  }
 };
 
 MenuButtonDatePicker.prototype.open = function () {
   this.dialogNode.style.display = 'block';
   this.dialogNode.style.zIndex = 2;
 
-  this.textboxNode.setAttribute('aria-expanded', 'true')
-  this.buttonNode.setAttribute('aria-expanded', 'true')
+  this.buttonNode.setAttribute('aria-expanded', 'true');
   this.getDateFromTextbox();
   this.updateGrid();
 };
@@ -193,7 +211,6 @@ MenuButtonDatePicker.prototype.close = function (flag) {
 
   this.setMessage('');
   this.dialogNode.style.display = 'none';
-  this.textboxNode.setAttribute('aria-expanded', 'false')
   this.buttonNode.setAttribute('aria-expanded', 'false')
 
   if (flag) {
@@ -213,7 +230,6 @@ MenuButtonDatePicker.prototype.moveFocusToDay = function (day) {
   this.setFocusDay();
 };
 
-
 MenuButtonDatePicker.prototype.moveToNextYear = function () {
   this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
   this.updateGrid();
@@ -280,49 +296,6 @@ MenuButtonDatePicker.prototype.getDayFromDataDateAttribute = function (domNode)
   var parts = domNode.getAttribute('data-date').split('-');
   return new Date(parts[0], parseInt(parts[1])-1, parts[2]);
 };
-
-MenuButtonDatePicker.prototype.updateDate = function (domNode, disable, day, selected) {
-
-  var d = day.getDate().toString();
-  if (day.getDate() <= 9) {
-    d = '0' + d;
-  }
-
-  var m = day.getMonth() + 1;
-  if (day.getMonth() < 9) {
-    m = '0' + m;
-  }
-
-  domNode.setAttribute('tabindex', '-1');
-  domNode.removeAttribute('aria-selected');
-  domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
-
-  if (disable) {
-    domNode.classList.add('disabled');
-    domNode.innerHTML = '';
-  }
-  else {
-    domNode.classList.remove('disabled');
-    domNode.innerHTML = day.getDate();
-    if (selected) {
-      domNode.setAttribute('aria-selected', 'true');
-      domNode.setAttribute('tabindex', '0');
-    }
-  }
-};
-
-MenuButtonDatePicker.prototype.updateSelected = function (domNode) {
-  for (var i = 0; i < this.days.length; i++) {
-    var day = this.days[i];
-    if (day  === domNode) {
-      day.setAttribute('aria-selected', 'true');
-    }
-    else {
-      day.removeAttribute('aria-selected');
-    }
-  }
-};
-
 // Textbox methods
 
 MenuButtonDatePicker.prototype.setTextboxDate = function (domNode) {
@@ -632,8 +605,6 @@ MenuButtonDatePicker.prototype.handlePreviousMonthButton = function (event) {
 MenuButtonDatePicker.prototype.handleDayKeyDown = function (event) {
   var flag = false;
 
-
-  console.log("key: " + event.key);
   switch (event.key) {
 
     case "Esc":
@@ -642,7 +613,6 @@ MenuButtonDatePicker.prototype.handleDayKeyDown = function (event) {
       break;
 
     case " ":
-      this.updateSelected(event.currentTarget);
       this.setTextboxDate(event.currentTarget);
       flag = true;
       break;

From 2da409055a0f649d9103c9d9bf9ab8b39ec409e2 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Wed, 8 Jul 2020 12:05:24 -0500
Subject: [PATCH 27/46] improved code

---
 examples/combobox/js/combobox-datepicker.js   | 816 ++++++++++++++++++
 examples/dialog-modal/js/datepicker-dialog.js |   8 +-
 2 files changed, 820 insertions(+), 4 deletions(-)
 create mode 100644 examples/combobox/js/combobox-datepicker.js

diff --git a/examples/combobox/js/combobox-datepicker.js b/examples/combobox/js/combobox-datepicker.js
new file mode 100644
index 0000000000..98f0ef466e
--- /dev/null
+++ b/examples/combobox/js/combobox-datepicker.js
@@ -0,0 +1,816 @@
+/*
+*   This content is licensed according to the W3C Software License at
+*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*
+*   File:   ComboboxDatePicker.js
+*/
+
+'use strict';
+
+var ComboboxDatePicker = function (cdp) {
+  this.buttonLabel = 'Date';
+  this.monthLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+  this.messageCursorKeys = 'Cursor keys can navigate dates';
+  this.lastMessage = '';
+
+  this.comboboxNode   = cdp.querySelector('input[type="text"]');
+  this.buttonNode     = cdp.querySelector('.group button');
+  this.dialogNode     = cdp.querySelector('[role="dialog"]');
+  this.messageNode    = this.dialogNode.querySelector('.dialog-message');
+
+  this.monthYearNode = this.dialogNode.querySelector('.month-year');
+
+  this.prevYearNode  = this.dialogNode.querySelector('.prev-year');
+  this.prevMonthNode = this.dialogNode.querySelector('.prev-month');
+  this.nextMonthNode = this.dialogNode.querySelector('.next-month');
+  this.nextYearNode  = this.dialogNode.querySelector('.next-year');
+
+  this.okButtonNode     = this.dialogNode.querySelector('button[value="ok"]');
+  this.cancelButtonNode = this.dialogNode.querySelector('button[value="cancel"]');
+
+  this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
+
+  this.lastRowNode = null;
+
+  this.days = [];
+
+  this.focusDay = new Date();
+  this.selectedDay = new Date(0,0,1);
+
+  this.isMouseDownOnBackground = false;
+
+};
+
+ComboboxDatePicker.prototype.init = function () {
+
+  this.comboboxNode.addEventListener('keydown', this.handleComboboxKeyDown.bind(this));
+  this.comboboxNode.addEventListener('click',   this.handleComboboxClick.bind(this));
+  this.comboboxNode.addEventListener('focus',   this.handleComboboxFocus.bind(this));
+  this.comboboxNode.addEventListener('blur',   this.handleComboboxBlur.bind(this));
+
+  this.buttonNode.addEventListener('keydown',   this.handleButtonKeyDown.bind(this));
+  this.buttonNode.addEventListener('click',   this.handleButtonClick.bind(this));
+
+  this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
+  this.okButtonNode.addEventListener('keydown', this.handleOkButton.bind(this));
+
+  this.cancelButtonNode.addEventListener('click', this.handleCancelButton.bind(this));
+  this.cancelButtonNode.addEventListener('keydown', this.handleCancelButton.bind(this));
+
+  this.prevMonthNode.addEventListener('click', this.handlePreviousMonthButton.bind(this));
+  this.nextMonthNode.addEventListener('click', this.handleNextMonthButton.bind(this));
+  this.prevYearNode.addEventListener('click', this.handlePreviousYearButton.bind(this));
+  this.nextYearNode.addEventListener('click', this.handleNextYearButton.bind(this));
+
+  this.prevMonthNode.addEventListener('keydown', this.handlePreviousMonthButton.bind(this));
+  this.nextMonthNode.addEventListener('keydown', this.handleNextMonthButton.bind(this));
+  this.prevYearNode.addEventListener('keydown', this.handlePreviousYearButton.bind(this));
+  this.nextYearNode.addEventListener('keydown', this.handleNextYearButton.bind(this));
+
+  document.body.addEventListener('mouseup', this.handleBackgroundMouseUp.bind(this), true);
+
+  // Create Grid of Dates
+
+  this.tbodyNode.innerHTML = '';
+  for (var i = 0; i < 6; i++) {
+    var row = this.tbodyNode.insertRow(i);
+    this.lastRowNode = row;
+    for (var j = 0; j < 7; j++) {
+      var cell = document.createElement('td');
+
+      cell.tabIndex = -1;
+      cell.addEventListener('click', this.handleDayClick.bind(this));
+      cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
+      cell.addEventListener('focus', this.handleDayFocus.bind(this));
+
+      cell.textContent = '-1';
+
+      row.appendChild(cell);
+      this.days.push(cell);
+    }
+  }
+
+  this.updateGrid();
+  this.close(false);
+};
+
+ComboboxDatePicker.prototype.isSameDay = function (day1, day2) {
+  return (day1.getFullYear() == day2.getFullYear()) &&
+        (day1.getMonth() == day2.getMonth()) &&
+        (day1.getDate() == day2.getDate());
+};
+
+ComboboxDatePicker.prototype.isNotSameMonth = function (day1, day2) {
+  return (day1.getFullYear() != day2.getFullYear()) ||
+        (day1.getMonth() != day2.getMonth());
+};
+
+ComboboxDatePicker.prototype.updateGrid = function () {
+
+  var i, flag;
+  var fd = this.focusDay;
+
+  this.monthYearNode.textContent = this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
+
+  var firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
+  var dayOfWeek = firstDayOfMonth.getDay();
+
+  firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
+
+  var d = new Date(firstDayOfMonth);
+
+  for (i = 0; i < this.days.length; i++) {
+    flag = d.getMonth() != fd.getMonth();
+    this.updateDate(this.days[i], flag, d, this.isSameDay(d, this.selectedDay));
+    d.setDate(d.getDate() + 1);
+
+    // Hide last row if all disabled dates
+    if (i === 35 && 0) {
+      if (flag) {
+        this.lastRowNode.style.visibility = 'hidden';
+      }
+      else {
+        this.lastRowNode.style.visibility = 'visible';
+      }
+    }
+  }
+};
+
+ComboboxDatePicker.prototype.updateDate = function (domNode, disable, day, selected) {
+
+  var d = day.getDate().toString();
+  if (day.getDate() <= 9) {
+    d = '0' + d;
+  }
+
+  var m = day.getMonth() + 1;
+  if (day.getMonth() < 9) {
+    m = '0' + m;
+  }
+
+  domNode.tabIndex = -1;
+  domNode.removeAttribute('aria-selected');
+  domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
+
+  if (disable) {
+    domNode.classList.add('disabled');
+    domNode.textContent = '';
+  }
+  else {
+    domNode.classList.remove('disabled');
+    domNode.textContent = day.getDate();
+    if (selected) {
+      domNode.setAttribute('aria-selected', 'true');
+      domNode.tabIndex = 0;
+    }
+  }
+
+};
+
+ComboboxDatePicker.prototype.setFocusDay = function (flag) {
+
+  if (typeof flag !== 'boolean') {
+    flag = true;
+  }
+
+  var fd = this.focusDay;
+  var getDayFromDataDateAttribute = this.getDayFromDataDateAttribute;
+
+  function checkDay (domNode) {
+
+    var d = getDayFromDataDateAttribute(domNode);
+
+    domNode.tabIndex = -1;
+    if (this.isSameDay(d, fd)) {
+      domNode.tabIndex = 0;
+      if (flag) {
+        domNode.focus();
+      }
+    }
+  }
+
+
+  this.days.forEach(checkDay.bind(this));
+
+};
+
+ComboboxDatePicker.prototype.open = function () {
+  this.dialogNode.style.display = 'block';
+  this.dialogNode.style.zIndex = 2;
+
+  this.comboboxNode.setAttribute('aria-expanded', 'true');
+  this.buttonNode.classList.add('open');
+  this.getDateFromCombobox();
+  this.updateGrid();
+};
+
+ComboboxDatePicker.prototype.isOpen = function () {
+  return window.getComputedStyle(this.dialogNode).display !== 'none';
+};
+
+ComboboxDatePicker.prototype.close = function (flag) {
+  if (typeof flag !== 'boolean') {
+    // Default is to move focus to combobox
+    flag = true;
+  }
+
+  this.setMessage('');
+  this.dialogNode.style.display = 'none';
+  this.comboboxNode.setAttribute('aria-expanded', 'false')
+  this.buttonNode.classList.remove('open');
+
+  if (flag) {
+    this.comboboxNode.focus();
+  }
+};
+
+ComboboxDatePicker.prototype.handleOkButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+    case 'keydown':
+
+      switch (event.key) {
+        case "Tab":
+          if (!event.shiftKey) {
+            this.prevYearNode.focus();
+            flag = true;
+          }
+          break;
+
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        default:
+          break;
+
+      }
+      break;
+
+    case 'click':
+      this.setComboboxDate();
+      this.close();
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handleCancelButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+    case 'keydown':
+
+      switch (event.key) {
+
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        default:
+          break;
+
+      }
+      break;
+
+    case 'click':
+      this.close();
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handleNextYearButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        case "Enter":
+          this.moveToNextYear();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToNextYear();
+      this.setFocusDay(false);
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handlePreviousYearButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+
+        case "Enter":
+          this.moveToPreviousYear();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+
+        case "Tab":
+          if (event.shiftKey) {
+            this.okButtonNode.focus();
+            flag = true;
+          }
+          break;
+
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        default:
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToPreviousYear();
+      this.setFocusDay(false);
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handleNextMonthButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        case "Enter":
+          this.moveToNextMonth();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToNextMonth();
+      this.setFocusDay(false);
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handlePreviousMonthButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        case "Enter":
+          this.moveToPreviousMonth();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToPreviousMonth();
+      this.setFocusDay(false);
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.moveFocusToDay = function (day) {
+  var d = this.focusDay;
+
+  this.focusDay = day;
+
+  if ((d.getMonth() != this.focusDay.getMonth()) ||
+      (d.getYear() != this.focusDay.getYear())) {
+    this.updateGrid();
+  }
+  this.setFocusDay();
+};
+
+
+ComboboxDatePicker.prototype.moveToNextYear = function () {
+  this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
+  this.updateGrid();
+};
+
+ComboboxDatePicker.prototype.moveToPreviousYear = function () {
+  this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
+  this.updateGrid();
+};
+
+ComboboxDatePicker.prototype.moveToNextMonth = function () {
+  this.focusDay.setMonth(this.focusDay.getMonth() + 1);
+  this.updateGrid();
+};
+
+ComboboxDatePicker.prototype.moveToPreviousMonth = function () {
+  this.focusDay.setMonth(this.focusDay.getMonth() - 1);
+  this.updateGrid();
+};
+
+ComboboxDatePicker.prototype.moveFocusToNextDay = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + 1);
+  this.moveFocusToDay(d);
+};
+
+ComboboxDatePicker.prototype.moveFocusToNextWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + 7);
+  this.moveFocusToDay(d);
+};
+
+ComboboxDatePicker.prototype.moveFocusToPreviousDay = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - 1);
+  this.moveFocusToDay(d);
+};
+
+ComboboxDatePicker.prototype.moveFocusToPreviousWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - 7);
+  this.moveFocusToDay(d);
+};
+
+ComboboxDatePicker.prototype.moveFocusToFirstDayOfWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - d.getDay());
+  this.moveFocusToDay(d);
+};
+
+ComboboxDatePicker.prototype.moveFocusToLastDayOfWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + (6 - d.getDay()));
+  this.moveFocusToDay(d);
+};
+
+// Day methods
+
+ComboboxDatePicker.prototype.isDayDisabled = function (domNode) {
+  return domNode.classList.contains('disabled');
+};
+
+ComboboxDatePicker.prototype.getDayFromDataDateAttribute = function (domNode) {
+  var parts = domNode.getAttribute('data-date').split('-');
+  return new Date(parts[0], parseInt(parts[1])-1, parts[2]);
+};
+
+ComboboxDatePicker.prototype.handleDayKeyDown = function (event) {
+  var flag = false;
+
+  switch (event.key) {
+
+    case "Esc":
+    case "Escape":
+      this.close();
+      break;
+
+    case " ":
+      this.setComboboxDate(event.currentTarget);
+      flag = true;
+      break;
+
+    case "Enter":
+      this.setComboboxDate(event.currentTarget);
+      this.close();
+      break;
+
+    case "Tab":
+      this.cancelButtonNode.focus();
+      if (event.shiftKey) {
+        this.nextYearNode.focus();
+      }
+      this.setMessage('');
+      flag = true;
+      break;
+
+    case "Right":
+    case "ArrowRight":
+      this.moveFocusToNextDay();
+      flag = true;
+      break;
+
+    case "Left":
+    case "ArrowLeft":
+      this.moveFocusToPreviousDay();
+      flag = true;
+      break;
+
+    case "Down":
+    case "ArrowDown":
+      this.moveFocusToNextWeek();
+      flag = true;
+      break;
+
+    case "Up":
+    case "ArrowUp":
+      this.moveFocusToPreviousWeek();
+      flag = true;
+      break;
+
+    case "PageUp":
+      if (event.shiftKey) {
+        this.moveToPreviousYear();
+      }
+      else {
+        this.moveToPreviousMonth();
+      }
+      this.setFocusDay();
+      flag = true;
+      break;
+
+    case "PageDown":
+      if (event.shiftKey) {
+        this.moveToNextYear();
+      }
+      else {
+        this.moveToNextMonth();
+      }
+      this.setFocusDay();
+      flag = true;
+      break;
+
+    case "Home":
+      this.moveFocusToFirstDayOfWeek();
+      flag = true;
+      break;
+
+    case "End":
+      this.moveFocusToLastDayOfWeek();
+      flag = true;
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handleDayClick = function (event) {
+
+  if (!this.isDayDisabled(event.currentTarget)) {
+    this.setComboboxDate(event.currentTarget);
+    this.close();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+
+};
+
+ComboboxDatePicker.prototype.handleDayFocus = function () {
+  this.setMessage(this.messageCursorKeys);
+};
+
+// Combobox methods
+
+ComboboxDatePicker.prototype.setComboboxDate = function (domNode) {
+
+  var d = this.focusDay;
+
+  if (domNode) {
+    d = this.getDayFromDataDateAttribute(domNode);
+  }
+
+  this.comboboxNode.value = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
+
+};
+
+ComboboxDatePicker.prototype.getDateFromCombobox = function () {
+
+  var parts = this.comboboxNode.value.split('/');
+
+  if ((parts.length === 3) &&
+      Number.isInteger(parseInt(parts[0])) &&
+      Number.isInteger(parseInt(parts[1])) &&
+      Number.isInteger(parseInt(parts[2]))) {
+    this.focusDay = new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1]));
+    this.selectedDay = new Date(this.focusDay);
+  }
+  else {
+    // If not a valid date (MM/DD/YY) initialize with todays date
+    this.focusDay = new Date();
+    this.selectedDay = new Date(0,0,1);
+  }
+
+};
+
+ComboboxDatePicker.prototype.setMessage = function (str) {
+
+  function setMessageDelayed () {
+    this.messageNode.textContent = str;
+  }
+
+  if (str !== this.lastMessage) {
+    setTimeout(setMessageDelayed.bind(this), 200);
+    this.lastMessage = str;
+  }
+};
+
+ComboboxDatePicker.prototype.handleComboboxKeyDown = function (event) {
+  var flag = false,
+    char = event.key,
+    altKey   = event.altKey;
+
+  if (event.ctrlKey || event.shiftKey) {
+    return;
+  }
+
+  switch (event.key) {
+
+    case "Down":
+    case "ArrowDown":
+      this.open();
+      this.setFocusDay();
+      flag = true;
+      break;
+
+    case "Esc":
+    case "Escape":
+      if (this.isOpen()) {
+        this.close(false);
+      }
+      else {
+        this.comboboxNode.value = '';
+      }
+      this.option = null;
+      flag = true;
+      break;
+
+    case "Tab":
+      this.close(false);
+      break;
+
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+};
+
+ComboboxDatePicker.prototype.handleComboboxClick = function (event) {
+  if (this.isOpen()) {
+    this.close(false);
+  }
+  else {
+    this.open();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+};
+
+ComboboxDatePicker.prototype.handleComboboxFocus = function (event) {
+  event.currentTarget.parentNode.classList.add('focus');
+};
+
+ComboboxDatePicker.prototype.handleComboboxBlur = function (event) {
+  event.currentTarget.parentNode.classList.remove('focus');
+};
+
+ComboboxDatePicker.prototype.handleButtonKeyDown = function (event) {
+
+  if (event.key === "Enter" || event.key === " ") {
+    this.open();
+    this.setFocusDay();
+
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handleButtonClick = function (event) {
+  if (this.isOpen()) {
+    this.close();
+  }
+  else {
+    this.open();
+    this.setFocusDay();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+};
+
+ComboboxDatePicker.prototype.handleBackgroundMouseUp = function (event) {
+  if (!this.comboboxNode.contains(event.target) &&
+      !this.buttonNode.contains(event.target) &&
+      !this.dialogNode.contains(event.target)) {
+
+    if (this.isOpen()) {
+      this.close(false);
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+};
+
+// Initialize menu button date picker
+
+window.addEventListener('load' , function () {
+
+  var comboboxDatePickers = document.querySelectorAll('.combobox-datepicker');
+
+  comboboxDatePickers.forEach(function (dp) {
+    var datePicker = new ComboboxDatePicker(dp);
+    datePicker.init();
+  });
+
+});
diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index f3953b25ce..708ddd53df 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -82,7 +82,7 @@ MenuButtonDatePicker.prototype.init = function () {
       cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
       cell.addEventListener('focus', this.handleDayFocus.bind(this));
 
-      cell.innerHTML = '-1';
+      cell.textContent = '-1';
 
       row.appendChild(cell);
       this.days.push(cell);
@@ -109,7 +109,7 @@ MenuButtonDatePicker.prototype.updateGrid = function () {
   var flag;
   var fd = this.focusDay;
 
-  this.monthYearNode.innerHTML = this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
+  this.monthYearNode.textContent = this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
 
   var firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
   var dayOfWeek = firstDayOfMonth.getDay();
@@ -153,11 +153,11 @@ MenuButtonDatePicker.prototype.updateDate = function (domNode, disable, day, sel
 
   if (disable) {
     domNode.classList.add('disabled');
-    domNode.innerHTML = '';
+    domNode.textContent = '';
   }
   else {
     domNode.classList.remove('disabled');
-    domNode.innerHTML = day.getDate();
+    domNode.textContent = day.getDate();
     if (selected) {
       domNode.setAttribute('aria-selected', 'true');
       domNode.tabIndex = 0;

From 12ae1d125417a394d9aeba9506cf397b3651d33b Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Wed, 8 Jul 2020 13:40:15 -0500
Subject: [PATCH 28/46] improved code

---
 examples/dialog-modal/js/datepicker-dialog.js | 43 ++++++++-----------
 1 file changed, 19 insertions(+), 24 deletions(-)

diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index 708ddd53df..674bea59b5 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -165,29 +165,36 @@ MenuButtonDatePicker.prototype.updateDate = function (domNode, disable, day, sel
   }
 };
 
+MenuButtonDatePicker.prototype.moveFocusToDay = function (day) {
+  var d = this.focusDay;
+
+  this.focusDay = day;
+
+  if ((d.getMonth() != this.focusDay.getMonth()) ||
+      (d.getYear() != this.focusDay.getYear())) {
+    this.updateGrid();
+  }
+  this.setFocusDay();
+};
+
 MenuButtonDatePicker.prototype.setFocusDay = function (flag) {
 
   if (typeof flag !== 'boolean') {
     flag = true;
   }
 
-  var fd = this.focusDay;
-  var getDayFromDataDateAttribute = this.getDayFromDataDateAttribute;
-
-  function checkDay (domNode) {
-
-    var d = getDayFromDataDateAttribute(domNode);
+  for (var i = 0; i < this.days.length; i++) {
+    var dayNode = this.days[i];
+    var day = this.getDayFromDataDateAttribute(dayNode);
 
-    domNode.setAttribute('tabindex', '-1');
-    if (this.isSameDay(d, fd)) {
-      domNode.setAttribute('tabindex', '0');
+    dayNode.tabIndex = -1;
+    if (this.isSameDay(day, this.focusDay)) {
+      dayNode.tabIndex = 0;
       if (flag) {
-        domNode.focus();
+        dayNode.focus();
       }
     }
   }
-
-  this.days.forEach(checkDay.bind(this));
 };
 
 MenuButtonDatePicker.prototype.open = function () {
@@ -218,18 +225,6 @@ MenuButtonDatePicker.prototype.close = function (flag) {
   }
 };
 
-MenuButtonDatePicker.prototype.moveFocusToDay = function (day) {
-  var d = this.focusDay;
-
-  this.focusDay = day;
-
-  if ((d.getMonth() != this.focusDay.getMonth()) ||
-      (d.getYear() != this.focusDay.getYear())) {
-    this.updateGrid();
-  }
-  this.setFocusDay();
-};
-
 MenuButtonDatePicker.prototype.moveToNextYear = function () {
   this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
   this.updateGrid();

From 2eb3ab7cbccca9f187c7a0b4f39f04de013974ea Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 14 Jul 2020 14:55:59 -0500
Subject: [PATCH 29/46] fixed merge bugs and updated choose date button labels

---
 examples/combobox/js/combobox-datepicker.js   | 830 ++++++++++++++++++
 examples/dialog-modal/js/datepicker-dialog.js |  37 +-
 2 files changed, 854 insertions(+), 13 deletions(-)
 create mode 100644 examples/combobox/js/combobox-datepicker.js

diff --git a/examples/combobox/js/combobox-datepicker.js b/examples/combobox/js/combobox-datepicker.js
new file mode 100644
index 0000000000..ab6cb9fade
--- /dev/null
+++ b/examples/combobox/js/combobox-datepicker.js
@@ -0,0 +1,830 @@
+/*
+*   This content is licensed according to the W3C Software License at
+*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
+*
+*   File:   ComboboxDatePicker.js
+*/
+
+'use strict';
+
+var ComboboxDatePicker = function (cdp) {
+  this.buttonLabel = 'Date';
+  this.monthLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
+
+  this.messageCursorKeys = 'Cursor keys can navigate dates';
+  this.lastMessage = '';
+
+  this.comboboxNode   = cdp.querySelector('input[type="text"]');
+  this.buttonNode     = cdp.querySelector('.group button');
+  this.dialogNode     = cdp.querySelector('[role="dialog"]');
+  this.messageNode    = this.dialogNode.querySelector('.dialog-message');
+
+  this.monthYearNode = this.dialogNode.querySelector('.month-year');
+
+  this.prevYearNode  = this.dialogNode.querySelector('.prev-year');
+  this.prevMonthNode = this.dialogNode.querySelector('.prev-month');
+  this.nextMonthNode = this.dialogNode.querySelector('.next-month');
+  this.nextYearNode  = this.dialogNode.querySelector('.next-year');
+
+  this.okButtonNode     = this.dialogNode.querySelector('button[value="ok"]');
+  this.cancelButtonNode = this.dialogNode.querySelector('button[value="cancel"]');
+
+  this.tbodyNode = this.dialogNode.querySelector('table.dates tbody');
+
+  this.lastRowNode = null;
+
+  this.days = [];
+
+  this.focusDay = new Date();
+  this.selectedDay = new Date(0,0,1);
+
+  this.isMouseDownOnBackground = false;
+
+};
+
+ComboboxDatePicker.prototype.init = function () {
+
+  this.comboboxNode.addEventListener('keydown', this.handleComboboxKeyDown.bind(this));
+  this.comboboxNode.addEventListener('click',   this.handleComboboxClick.bind(this));
+  this.comboboxNode.addEventListener('focus',   this.handleComboboxFocus.bind(this));
+  this.comboboxNode.addEventListener('blur',   this.handleComboboxBlur.bind(this));
+
+  this.buttonNode.addEventListener('keydown',   this.handleButtonKeyDown.bind(this));
+  this.buttonNode.addEventListener('click',   this.handleButtonClick.bind(this));
+
+  this.okButtonNode.addEventListener('click', this.handleOkButton.bind(this));
+  this.okButtonNode.addEventListener('keydown', this.handleOkButton.bind(this));
+
+  this.cancelButtonNode.addEventListener('click', this.handleCancelButton.bind(this));
+  this.cancelButtonNode.addEventListener('keydown', this.handleCancelButton.bind(this));
+
+  this.prevMonthNode.addEventListener('click', this.handlePreviousMonthButton.bind(this));
+  this.nextMonthNode.addEventListener('click', this.handleNextMonthButton.bind(this));
+  this.prevYearNode.addEventListener('click', this.handlePreviousYearButton.bind(this));
+  this.nextYearNode.addEventListener('click', this.handleNextYearButton.bind(this));
+
+  this.prevMonthNode.addEventListener('keydown', this.handlePreviousMonthButton.bind(this));
+  this.nextMonthNode.addEventListener('keydown', this.handleNextMonthButton.bind(this));
+  this.prevYearNode.addEventListener('keydown', this.handlePreviousYearButton.bind(this));
+  this.nextYearNode.addEventListener('keydown', this.handleNextYearButton.bind(this));
+
+  document.body.addEventListener('mouseup', this.handleBackgroundMouseUp.bind(this), true);
+
+  // Create Grid of Dates
+
+  this.tbodyNode.innerHTML = '';
+  for (var i = 0; i < 6; i++) {
+    var row = this.tbodyNode.insertRow(i);
+    this.lastRowNode = row;
+    for (var j = 0; j < 7; j++) {
+      var cell = document.createElement('td');
+
+      cell.setAttribute('tabindex', '-1');
+      cell.addEventListener('click', this.handleDayClick.bind(this));
+      cell.addEventListener('keydown', this.handleDayKeyDown.bind(this));
+      cell.addEventListener('focus', this.handleDayFocus.bind(this));
+
+      cell.innerHTML = '-1';
+
+      row.appendChild(cell);
+      this.days.push(cell);
+    }
+  }
+
+  this.updateGrid();
+  this.close(false);
+};
+
+ComboboxDatePicker.prototype.isSameDay = function (day1, day2) {
+  return (day1.getFullYear() == day2.getFullYear()) &&
+        (day1.getMonth() == day2.getMonth()) &&
+        (day1.getDate() == day2.getDate());
+};
+
+ComboboxDatePicker.prototype.isNotSameMonth = function (day1, day2) {
+  return (day1.getFullYear() != day2.getFullYear()) ||
+        (day1.getMonth() != day2.getMonth());
+};
+
+ComboboxDatePicker.prototype.updateGrid = function () {
+
+  var i, flag;
+  var fd = this.focusDay;
+
+  this.monthYearNode.innerHTML = this.monthLabels[fd.getMonth()] + ' ' + fd.getFullYear();
+
+  var firstDayOfMonth = new Date(fd.getFullYear(), fd.getMonth(), 1);
+  var dayOfWeek = firstDayOfMonth.getDay();
+
+  firstDayOfMonth.setDate(firstDayOfMonth.getDate() - dayOfWeek);
+
+  var d = new Date(firstDayOfMonth);
+
+  for (i = 0; i < this.days.length; i++) {
+    flag = d.getMonth() != fd.getMonth();
+    this.updateDate(this.days[i], flag, d, this.isSameDay(d, this.selectedDay));
+    d.setDate(d.getDate() + 1);
+
+    // Hide last row if all disabled dates
+    if (i === 35) {
+      if (flag) {
+        this.lastRowNode.style.visibility = 'hidden';
+      }
+      else {
+        this.lastRowNode.style.visibility = 'visible';
+      }
+    }
+  }
+};
+
+ComboboxDatePicker.prototype.setFocusDay = function (flag) {
+
+  if (typeof flag !== 'boolean') {
+    flag = true;
+  }
+
+  var fd = this.focusDay;
+  var getDayFromDataDateAttribute = this.getDayFromDataDateAttribute;
+
+  function checkDay (domNode) {
+
+    var d = getDayFromDataDateAttribute(domNode);
+
+    domNode.setAttribute('tabindex', '-1');
+    if (this.isSameDay(d, fd)) {
+      domNode.setAttribute('tabindex', '0');
+      if (flag) {
+        domNode.focus();
+      }
+    }
+  }
+
+
+  this.days.forEach(checkDay.bind(this));
+
+};
+
+ComboboxDatePicker.prototype.open = function () {
+  this.dialogNode.style.display = 'block';
+  this.dialogNode.style.zIndex = 2;
+
+  this.comboboxNode.setAttribute('aria-expanded', 'true');
+  this.buttonNode.classList.add('open');
+  this.getDateFromCombobox();
+  this.updateGrid();
+};
+
+ComboboxDatePicker.prototype.isOpen = function () {
+  return window.getComputedStyle(this.dialogNode).display !== 'none';
+};
+
+ComboboxDatePicker.prototype.close = function (flag) {
+  if (typeof flag !== 'boolean') {
+    // Default is to move focus to combobox
+    flag = true;
+  }
+
+  this.setMessage('');
+  this.dialogNode.style.display = 'none';
+  this.comboboxNode.setAttribute('aria-expanded', 'false')
+  this.buttonNode.classList.remove('open');
+
+  if (flag) {
+    this.comboboxNode.focus();
+  }
+};
+
+ComboboxDatePicker.prototype.handleOkButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+    case 'keydown':
+
+      switch (event.key) {
+        case "Tab":
+          if (!event.shiftKey) {
+            this.prevYearNode.focus();
+            flag = true;
+          }
+          break;
+
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        default:
+          break;
+
+      }
+      break;
+
+    case 'click':
+      this.setComboboxDate();
+      this.close();
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handleCancelButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+    case 'keydown':
+
+      switch (event.key) {
+
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        default:
+          break;
+
+      }
+      break;
+
+    case 'click':
+      this.close();
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handleNextYearButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        case "Enter":
+          this.moveToNextYear();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToNextYear();
+      this.setFocusDay(false);
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handlePreviousYearButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+
+        case "Enter":
+          this.moveToPreviousYear();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+
+        case "Tab":
+          if (event.shiftKey) {
+            this.okButtonNode.focus();
+            flag = true;
+          }
+          break;
+
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        default:
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToPreviousYear();
+      this.setFocusDay(false);
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handleNextMonthButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        case "Enter":
+          this.moveToNextMonth();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToNextMonth();
+      this.setFocusDay(false);
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handlePreviousMonthButton = function (event) {
+  var flag = false;
+
+  switch (event.type) {
+
+    case 'keydown':
+
+      switch (event.key) {
+        case "Esc":
+        case "Escape":
+          this.close();
+          flag = true;
+          break;
+
+        case "Enter":
+          this.moveToPreviousMonth();
+          this.setFocusDay(false);
+          flag = true;
+          break;
+      }
+
+      break;
+
+    case 'click':
+      this.moveToPreviousMonth();
+      this.setFocusDay(false);
+      flag = true;
+      break;
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.moveFocusToDay = function (day) {
+  var d = this.focusDay;
+
+  this.focusDay = day;
+
+  if ((d.getMonth() != this.focusDay.getMonth()) ||
+      (d.getYear() != this.focusDay.getYear())) {
+    this.updateGrid();
+  }
+  this.setFocusDay();
+};
+
+
+ComboboxDatePicker.prototype.moveToNextYear = function () {
+  this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
+  this.updateGrid();
+};
+
+ComboboxDatePicker.prototype.moveToPreviousYear = function () {
+  this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
+  this.updateGrid();
+};
+
+ComboboxDatePicker.prototype.moveToNextMonth = function () {
+  this.focusDay.setMonth(this.focusDay.getMonth() + 1);
+  this.updateGrid();
+};
+
+ComboboxDatePicker.prototype.moveToPreviousMonth = function () {
+  this.focusDay.setMonth(this.focusDay.getMonth() - 1);
+  this.updateGrid();
+};
+
+ComboboxDatePicker.prototype.moveFocusToNextDay = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + 1);
+  this.moveFocusToDay(d);
+};
+
+ComboboxDatePicker.prototype.moveFocusToNextWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + 7);
+  this.moveFocusToDay(d);
+};
+
+ComboboxDatePicker.prototype.moveFocusToPreviousDay = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - 1);
+  this.moveFocusToDay(d);
+};
+
+ComboboxDatePicker.prototype.moveFocusToPreviousWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - 7);
+  this.moveFocusToDay(d);
+};
+
+ComboboxDatePicker.prototype.moveFocusToFirstDayOfWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() - d.getDay());
+  this.moveFocusToDay(d);
+};
+
+ComboboxDatePicker.prototype.moveFocusToLastDayOfWeek = function () {
+  var d = new Date(this.focusDay);
+  d.setDate(d.getDate() + (6 - d.getDay()));
+  this.moveFocusToDay(d);
+};
+
+// Day methods
+
+ComboboxDatePicker.prototype.isDayDisabled = function (domNode) {
+  return domNode.classList.contains('disabled');
+};
+
+ComboboxDatePicker.prototype.getDayFromDataDateAttribute = function (domNode) {
+  var parts = domNode.getAttribute('data-date').split('-');
+  return new Date(parts[0], parseInt(parts[1])-1, parts[2]);
+};
+
+ComboboxDatePicker.prototype.updateDate = function (domNode, disable, day, selected) {
+
+  var d = day.getDate().toString();
+  if (day.getDate() <= 9) {
+    d = '0' + d;
+  }
+
+  var m = day.getMonth() + 1;
+  if (day.getMonth() < 9) {
+    m = '0' + m;
+  }
+
+  domNode.setAttribute('tabindex', '-1');
+  domNode.removeAttribute('aria-selected');
+  domNode.setAttribute('data-date', day.getFullYear() + '-' + m + '-' + d);
+
+  if (disable) {
+    domNode.classList.add('disabled');
+    domNode.innerHTML = '';
+  }
+  else {
+    domNode.classList.remove('disabled');
+    domNode.innerHTML = day.getDate();
+    if (selected) {
+      domNode.setAttribute('aria-selected', 'true');
+      domNode.setAttribute('tabindex', '0');
+    }
+  }
+
+};
+
+ComboboxDatePicker.prototype.updateSelected = function (domNode) {
+  for (var i = 0; i < this.days.length; i++) {
+    var day = this.days[i];
+    if (day  === domNode) {
+      day.setAttribute('aria-selected', 'true');
+    }
+    else {
+      day.removeAttribute('aria-selected');
+    }
+  }
+};
+
+
+ComboboxDatePicker.prototype.handleDayKeyDown = function (event) {
+  var flag = false;
+
+  switch (event.key) {
+
+    case "Esc":
+    case "Escape":
+      this.close();
+      break;
+
+    case " ":
+      this.updateSelected(event.currentTarget);
+      this.setComboboxDate(event.currentTarget);
+      flag = true;
+      break;
+
+    case "Enter":
+      this.setComboboxDate(event.currentTarget);
+      this.close();
+      break;
+
+    case "Tab":
+      this.cancelButtonNode.focus();
+      if (event.shiftKey) {
+        this.nextYearNode.focus();
+      }
+      this.setMessage('');
+      flag = true;
+      break;
+
+    case "Right":
+    case "ArrowRight":
+      this.moveFocusToNextDay();
+      flag = true;
+      break;
+
+    case "Left":
+    case "ArrowLeft":
+      this.moveFocusToPreviousDay();
+      flag = true;
+      break;
+
+    case "Down":
+    case "ArrowDown":
+      this.moveFocusToNextWeek();
+      flag = true;
+      break;
+
+    case "Up":
+    case "ArrowUp":
+      this.moveFocusToPreviousWeek();
+      flag = true;
+      break;
+
+    case "PageUp":
+      if (event.shiftKey) {
+        this.moveToPreviousYear();
+      }
+      else {
+        this.moveToPreviousMonth();
+      }
+      this.setFocusDay();
+      flag = true;
+      break;
+
+    case "PageDown":
+      if (event.shiftKey) {
+        this.moveToNextYear();
+      }
+      else {
+        this.moveToNextMonth();
+      }
+      this.setFocusDay();
+      flag = true;
+      break;
+
+    case "Home":
+      this.moveFocusToFirstDayOfWeek();
+      flag = true;
+      break;
+
+    case "End":
+      this.moveFocusToLastDayOfWeek();
+      flag = true;
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handleDayClick = function (event) {
+
+  if (!this.isDayDisabled(event.currentTarget)) {
+    this.setComboboxDate(event.currentTarget);
+    this.close();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+
+};
+
+ComboboxDatePicker.prototype.handleDayFocus = function () {
+  this.setMessage(this.messageCursorKeys);
+};
+
+// Combobox methods
+
+ComboboxDatePicker.prototype.setComboboxDate = function (domNode) {
+
+  var d = this.focusDay;
+
+  if (domNode) {
+    d = this.getDayFromDataDateAttribute(domNode);
+  }
+
+  this.comboboxNode.value = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
+
+};
+
+ComboboxDatePicker.prototype.getDateFromCombobox = function () {
+
+  var parts = this.comboboxNode.value.split('/');
+
+  if ((parts.length === 3) &&
+      Number.isInteger(parseInt(parts[0])) &&
+      Number.isInteger(parseInt(parts[1])) &&
+      Number.isInteger(parseInt(parts[2]))) {
+    this.focusDay = new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1]));
+    this.selectedDay = new Date(this.focusDay);
+  }
+  else {
+    // If not a valid date (MM/DD/YY) initialize with todays date
+    this.focusDay = new Date();
+    this.selectedDay = new Date(0,0,1);
+  }
+
+};
+
+ComboboxDatePicker.prototype.setMessage = function (str) {
+
+  function setMessageDelayed () {
+    this.messageNode.textContent = str;
+  }
+
+  if (str !== this.lastMessage) {
+    setTimeout(setMessageDelayed.bind(this), 200);
+    this.lastMessage = str;
+  }
+};
+
+ComboboxDatePicker.prototype.handleComboboxKeyDown = function (event) {
+  var flag = false,
+    char = event.key,
+    altKey   = event.altKey;
+
+  if (event.ctrlKey || event.shiftKey) {
+    return;
+  }
+
+  switch (event.key) {
+
+    case "Down":
+    case "ArrowDown":
+      this.open();
+      this.setFocusDay();
+      flag = true;
+      break;
+
+    case "Esc":
+    case "Escape":
+      if (this.isOpen()) {
+        this.close(false);
+      }
+      else {
+        this.comboboxNode.value = '';
+      }
+      this.option = null;
+      flag = true;
+      break;
+
+    case "Tab":
+      this.close(false);
+      break;
+
+
+    default:
+      break;
+  }
+
+  if (flag) {
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+};
+
+ComboboxDatePicker.prototype.handleComboboxClick = function (event) {
+  if (this.isOpen()) {
+    this.close(false);
+  }
+  else {
+    this.open();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+};
+
+ComboboxDatePicker.prototype.handleComboboxFocus = function (event) {
+  event.currentTarget.parentNode.classList.add('focus');
+};
+
+ComboboxDatePicker.prototype.handleComboboxBlur = function (event) {
+  event.currentTarget.parentNode.classList.remove('focus');
+};
+
+ComboboxDatePicker.prototype.handleButtonKeyDown = function (event) {
+
+  if (event.key === "Enter" || event.key === " ") {
+    this.open();
+    this.setFocusDay();
+
+    event.stopPropagation();
+    event.preventDefault();
+  }
+};
+
+ComboboxDatePicker.prototype.handleButtonClick = function (event) {
+  if (this.isOpen()) {
+    this.close();
+  }
+  else {
+    this.open();
+    this.setFocusDay();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+};
+
+ComboboxDatePicker.prototype.handleBackgroundMouseUp = function (event) {
+  if (!this.comboboxNode.contains(event.target) &&
+      !this.buttonNode.contains(event.target) &&
+      !this.dialogNode.contains(event.target)) {
+
+    if (this.isOpen()) {
+      this.close(false);
+      event.stopPropagation();
+      event.preventDefault();
+    }
+  }
+};
+
+// Initialize menu button date picker
+
+window.addEventListener('load' , function () {
+
+  var comboboxDatePickers = document.querySelectorAll('.combobox-datepicker');
+
+  comboboxDatePickers.forEach(function (dp) {
+    var datePicker = new ComboboxDatePicker(dp);
+    datePicker.init();
+  });
+
+});
diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index 674bea59b5..ef5eae9dbf 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -8,7 +8,8 @@
 'use strict';
 
 var MenuButtonDatePicker = function (cdp) {
-  this.buttonLabel = 'Date';
+  this.buttonLabelChoose = 'Choose Date';
+  this.buttonLabelChange = 'Change Date';
   this.dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
   this.monthLabels = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December'];
 
@@ -47,6 +48,8 @@ var MenuButtonDatePicker = function (cdp) {
 
 MenuButtonDatePicker.prototype.init = function () {
 
+  this.textboxNode.addEventListener('blur',   this.setDateForButtonLabel.bind(this));
+
   this.buttonNode.addEventListener('keydown',   this.handleButtonKeydown.bind(this));
   this.buttonNode.addEventListener('click',   this.handleButtonClick.bind(this));
 
@@ -91,6 +94,7 @@ MenuButtonDatePicker.prototype.init = function () {
 
   this.updateGrid();
   this.close();
+  this.setDateForButtonLabel();
 };
 
 MenuButtonDatePicker.prototype.isSameDay = function (day1, day2) {
@@ -302,7 +306,7 @@ MenuButtonDatePicker.prototype.setTextboxDate = function (domNode) {
   }
 
   this.textboxNode.value = (d.getMonth() + 1) + '/' + d.getDate() + '/' + d.getFullYear();
-  this.setDateForButtonLabel(d.getFullYear(), d.getMonth(), d.getDate());
+  this.setDateForButtonLabel();
 
 };
 
@@ -325,20 +329,27 @@ MenuButtonDatePicker.prototype.getDateFromTextbox = function () {
 
 };
 
-MenuButtonDatePicker.prototype.setDateForButtonLabel = function (year, month, day) {
-  if (typeof year !== 'number' || typeof month !== 'number' || typeof day !== 'number') {
-    this.selectedDay = this.focusDay;
+MenuButtonDatePicker.prototype.setDateForButtonLabel = function () {
+
+  var parts = this.textboxNode.value.split('/');
+
+  if ((parts.length === 3) &&
+      Number.isInteger(parseInt(parts[0])) &&
+      Number.isInteger(parseInt(parts[1])) &&
+      Number.isInteger(parseInt(parts[2]))) {
+    var day = new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1]));
+
+    var label = this.buttonLabelChange;
+    label += ', ' + this.dayLabels[day.getDay()];
+    label += ' ' + this.monthLabels[day.getMonth()];
+    label += ' ' + (day.getDate());
+    label += ', ' + day.getFullYear();
+    this.buttonNode.setAttribute('aria-label', label);
   }
   else {
-    this.selectedDay = new Date(year, month, day);
+    // If not a valid date, initialize with "Choose Date"
+    this.buttonNode.setAttribute('aria-label', this.buttonLabelChoose);
   }
-
-  var label = this.buttonLabel;
-  label += ', ' + this.dayLabels[this.selectedDay.getDay()];
-  label += ' ' + this.monthLabels[this.selectedDay.getMonth()];
-  label += ' ' + (this.selectedDay.getDate());
-  label += ', ' + this.selectedDay.getFullYear();
-  this.buttonNode.setAttribute('aria-label', label);
 };
 
 MenuButtonDatePicker.prototype.setMessage = function (str) {

From 69914e07b4996685c2da9f3ed10500fca40d1fe5 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 14 Jul 2020 14:57:33 -0500
Subject: [PATCH 30/46] fixed merge bug

---
 test/tests/dialog-modal_dialog.js | 66 +++++++++++++++++++------------
 1 file changed, 41 insertions(+), 25 deletions(-)

diff --git a/test/tests/dialog-modal_dialog.js b/test/tests/dialog-modal_dialog.js
index cd91b9822a..9887df2025 100644
--- a/test/tests/dialog-modal_dialog.js
+++ b/test/tests/dialog-modal_dialog.js
@@ -48,10 +48,12 @@ const ex = {
 
 const openDialog1 = async function (t) {
   // Click the button to open the address form dialog
-  await (await t.context.queryElements(t, ex.dialog1ButtonSelector))[0].click();
+  await t.context.session
+    .findElement(By.css(ex.dialog1ButtonSelector))
+    .click();
 
   // Make sure the appropriate dialog is open
-  const dialog = (await t.context.queryElements(t, '#dialog1'))[0];
+  const dialog = await t.context.session.findElement(By.css('#dialog1'));
   assert(
     await dialog.isDisplayed(),
     'dialog1 should have successfully opened'
@@ -60,13 +62,17 @@ const openDialog1 = async function (t) {
 
 const openDialog2 = async function (t) {
   // Click the button to open the "address form" dialog
-  await (await t.context.queryElements(t, ex.dialog1ButtonSelector))[0].click();
+  await t.context.session
+    .findElement(By.css(ex.dialog1ButtonSelector))
+    .click();
 
   // Click the button to open the "verify form" dialog
-  await (await t.context.queryElements(t, ex.dialog2FromDialog1ButtonSelector))[0].click();
+  await t.context.session
+    .findElement(By.css(ex.dialog2FromDialog1ButtonSelector))
+    .click();
 
   // Make sure the appropriate dialog is open
-  const dialog = (await t.context.queryElements(t, '#dialog2'))[0];
+  const dialog = await t.context.session.findElement(By.css('#dialog2'));
   assert(
     await dialog.isDisplayed(),
     'dialog2 should have successfully opened'
@@ -75,13 +81,17 @@ const openDialog2 = async function (t) {
 
 const openDialog3 = async function (t) {
   // Click the button to open the "address form" dialog
-  await (await t.context.queryElements(t, ex.dialog1ButtonSelector))[0].click();
+  await t.context.session
+    .findElement(By.css(ex.dialog1ButtonSelector))
+    .click();
 
   // Click the button to open the "add" dialog
-  await (await t.context.queryElements(t, ex.dialog3FromDialog1ButtonSelector))[0].click();
+  await t.context.session
+    .findElement(By.css(ex.dialog3FromDialog1ButtonSelector))
+    .click();
 
   // Make sure the appropriate dialog is open
-  const dialog = (await t.context.queryElements(t, '#dialog3'))[0];
+  const dialog = await t.context.session.findElement(By.css('#dialog3'));
   assert(
     await dialog.isDisplayed(),
     'dialog3 should have successfully opened'
@@ -90,16 +100,22 @@ const openDialog3 = async function (t) {
 
 const openDialog4 = async function (t) {
   // Click the button to open the "address form" dialog
-  await (await t.context.queryElements(t, ex.dialog1ButtonSelector))[0].click();
+  await t.context.session
+    .findElement(By.css(ex.dialog1ButtonSelector))
+    .click();
 
   // Click the button to open the "verify form" dialog
-  await (await t.context.queryElements(t, ex.dialog2FromDialog1ButtonSelector))[0].click();
+  await t.context.session
+    .findElement(By.css(ex.dialog2FromDialog1ButtonSelector))
+    .click();
 
   // Click the button to open the "accepting an alternative form" dialog
-  await (await t.context.queryElements(t, ex.dialog4FromDialog2ButtonSelector))[0].click();
+  await t.context.session
+    .findElement(By.css(ex.dialog4FromDialog2ButtonSelector))
+    .click();
 
   // Make sure the appropriate dialog is open
-  const dialog = (await t.context.queryElements(t, '#dialog2'))[0];
+  const dialog = await t.context.session.findElement(By.css('#dialog2'));
   assert(
     await dialog.isDisplayed(),
     'dialog4 should have successfully opened'
@@ -122,7 +138,7 @@ const checkFocus = async function (t, selector) {
 };
 
 const sendTabToSelector = async function (t, selector) {
-  let el = (await t.context.queryElements(t, selector))[0];
+  let el = await t.context.session.findElement(By.css(selector));
   await el.sendKeys(Key.TAB);
 
   // await for focus change before returning
@@ -135,7 +151,7 @@ const sendTabToSelector = async function (t, selector) {
 };
 
 const sendShiftTabToSelector = async function (t, selector) {
-  let el = (await t.context.queryElements(t, selector))[0];
+  let el = await t.context.session.findElement(By.css(selector));
   await el.sendKeys(Key.chord(Key.SHIFT, Key.TAB));
 
   // await for focus change before returning
@@ -148,7 +164,7 @@ const sendShiftTabToSelector = async function (t, selector) {
 };
 
 const sendEscapeTo = async function (t, selector) {
-  const el = (await t.context.queryElements(t, selector))[0];
+  const el = await t.context.session.findElement(By.css(selector));
   await el.sendKeys(Key.ESCAPE);
 };
 
@@ -157,7 +173,7 @@ const sendEscapeTo = async function (t, selector) {
 
 ariaTest('role="dialog" on div element', exampleFile, 'dialog-role', async (t) => {
 
-
+  
   const dialogs = await t.context.queryElements(t, ex.dialogSelector);
 
   t.is(
@@ -191,7 +207,7 @@ ariaTest('"aria-modal" attribute on role="dialog"', exampleFile, 'aria-modal', a
 // Keys
 
 ariaTest('tab changes focus within dialog', exampleFile, 'key-tab', async (t) => {
-
+  
   /* DIALOG 1 */
 
   await openDialog1(t);
@@ -278,7 +294,7 @@ ariaTest('tab changes focus within dialog', exampleFile, 'key-tab', async (t) =>
   );
 
   // Make focus does not change
-  let el = (await t.context.queryElements(t, ex.dialog4FocusableEls[0]))[0];
+  let el = await t.context.session.findElement(By.css(ex.dialog4FocusableEls[0]));
   await el.sendKeys(Key.TAB);
   t.true(
     await checkFocus(t, ex.dialog4FocusableEls[0]),
@@ -288,7 +304,7 @@ ariaTest('tab changes focus within dialog', exampleFile, 'key-tab', async (t) =>
 });
 
 ariaTest('shift tab changes focus within dialog', exampleFile, 'key-shift-tab', async (t) => {
-
+  
   /* DIALOG 1 */
 
   await openDialog1(t);
@@ -392,7 +408,7 @@ ariaTest('shift tab changes focus within dialog', exampleFile, 'key-shift-tab',
   );
 
   // Make focus does not change
-  let el = (await t.context.queryElements(t, ex.dialog4FocusableEls[0]))[0];
+  let el = await t.context.session.findElement(By.css(ex.dialog4FocusableEls[0]));
   await el.sendKeys(Key.chord(Key.SHIFT, Key.TAB));
   t.true(
     await checkFocus(t, ex.dialog4FocusableEls[0]),
@@ -401,14 +417,14 @@ ariaTest('shift tab changes focus within dialog', exampleFile, 'key-shift-tab',
 });
 
 ariaTest('escape closes dialog', exampleFile, 'key-escape', async (t) => {
-
+  
   /* DIALOG 1 */
 
   for (let selector of ex.dialog1FocusableEls) {
     await openDialog1(t);
     await sendEscapeTo(t, selector);
 
-    const modalEl = (await t.context.queryElements(t, ex.dialog1Selector))[0];
+    const modalEl = await t.context.session.findElement(By.css(ex.dialog1Selector));
     t.false(
       await modalEl.isDisplayed(),
       'Modal 1 should not be displayed after sending escape to element: ' + selector
@@ -423,7 +439,7 @@ ariaTest('escape closes dialog', exampleFile, 'key-escape', async (t) => {
     await openDialog2(t);
     await sendEscapeTo(t, selector);
 
-    const modalEl = (await t.context.queryElements(t, ex.dialog2Selector))[0];
+    const modalEl = await t.context.session.findElement(By.css(ex.dialog2Selector));
     t.false(
       await modalEl.isDisplayed(),
       'Modal 2 should not be displayed after sending escape to element: ' + selector
@@ -438,7 +454,7 @@ ariaTest('escape closes dialog', exampleFile, 'key-escape', async (t) => {
     await openDialog3(t);
     await sendEscapeTo(t, selector);
 
-    const modalEl = (await t.context.queryElements(t, ex.dialog3Selector))[0];
+    const modalEl = await t.context.session.findElement(By.css(ex.dialog3Selector));
     t.false(
       await modalEl.isDisplayed(),
       'Modal 3 should not be displayed after sending escape to element: ' + selector
@@ -452,7 +468,7 @@ ariaTest('escape closes dialog', exampleFile, 'key-escape', async (t) => {
   await openDialog4(t);
   await sendEscapeTo(t, ex.dialog4FocusableEls[0]);
 
-  const modalEl = (await t.context.queryElements(t, ex.dialog4Selector))[0];
+  const modalEl = await t.context.session.findElement(By.css(ex.dialog4Selector));
   t.false(
     await modalEl.isDisplayed(),
     'Modal 4 should not be displayed after sending escape to element: ' + ex.dialog4FocusableEls[0]

From cfba542c572c16a275bbd379daf24c9319ee30a0 Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 14 Jul 2020 15:05:18 -0500
Subject: [PATCH 31/46] removed aria-exapnded from JS code

---
 examples/dialog-modal/js/datepicker-dialog.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index ef5eae9dbf..71eca90423 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -205,7 +205,6 @@ MenuButtonDatePicker.prototype.open = function () {
   this.dialogNode.style.display = 'block';
   this.dialogNode.style.zIndex = 2;
 
-  this.buttonNode.setAttribute('aria-expanded', 'true');
   this.getDateFromTextbox();
   this.updateGrid();
 };
@@ -222,7 +221,6 @@ MenuButtonDatePicker.prototype.close = function (flag) {
 
   this.setMessage('');
   this.dialogNode.style.display = 'none';
-  this.buttonNode.setAttribute('aria-expanded', 'false')
 
   if (flag) {
     this.buttonNode.focus();

From 149b6db17018765c2f7b1334af18c214ce658e69 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Thu, 16 Jul 2020 21:04:17 -0700
Subject: [PATCH 32/46] Editorial revisions to accessibility section

---
 examples/dialog-modal/datepicker-dialog.html | 25 +++++++++++---------
 1 file changed, 14 insertions(+), 11 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index f4bafe2e71..8a74da4581 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -8,11 +8,11 @@
 <link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css">
 <link rel="stylesheet" href="../css/core.css">
 <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.1.0/css/all.css" integrity="sha384-lKuwvrZot6UHsBSfcMvOkWwlCMgc0TaWr+30HWe3a4ltaBwTZhyTEggF5tJv8tbt" crossorigin="anonymous">
-
 <script src="../js/examples.js" type="text/javascript"></script>
 <script src="../js/highlight.pack.js"></script>
 <script src="../js/app.js"></script>
 
+<!--  js and css specific to this example -->
 <link href="css/datepicker-dialog.css" rel="stylesheet">
 <script src="js/datepicker-dialog.js"></script>
 </head>
@@ -197,24 +197,27 @@ <h2 id="ex_label">Example</h2>
   <section>
     <h2>Accessibility Features</h2>
     <ul>
+      <li>The description of the date format is associated with the text input via <code>aria-describedby</code>, making it available to assistive technologies as an accessible description.</li>
       <li>
-        When a date is chosen, the accessible name of the <q>Choose Date</q> button is updated to include the selected date.
-        So, when the dialog closes and focus returns to the <q>Choose Date</q> button, screen reader users hear confirmation of the selected date in the button name.
+        After a date is chosen, the accessible name of the &quot;Choose Date&quot; button is changed to &quot;Change Date, DATE_STRING&quot; where DATE_STRING is the selected date.
+        So, when the dialog closes and focus returns to the button, screen reader users hear confirmation of the selected date.
       </li>
-      <li>When the month or year of the calendar grid changes as users navigate the calendar or activate the buttons for next or previous month or year, a live region enables screen readers to announce the new month and year.</li>
-      <li>The calendar grid provides hotkeys for changing the year and month as well as support for normal grid navigation keys.</li>
+      <li>In the dialog, shortcut keys are assigned to the additional buttons for changing the month and year displayed in the calendar.</li>
+      <li>The calendar heading displaying the month and year is marked up as a live region so screen reader users get feedback from the buttons and keyboard commands that change the month and year.</li>
+      <li>Keyboard help is displayed at the bottom of the dialog. A live region is used to announce it to screen reader users when focus moves into the calendar grid.</li>
       <li>
-        When the dialog opens and a date in the calendar grid receives focus, a live region enables screen readers to announce keyboard instructions for navigating the calendar grid.
-        The instructions are also visible at the bottom of the dialog box.
+        To facilitate compact visual design in the calendar, the day names in the column headers are abbreviated to two characters.
+        However, this makes it more difficult for screen reader users to understand the day names.
+        So, full day names are provided to assistive technologies in the HTML <code>abbr</code> attribute on the column headers, enabling screen readers to announce the full names when users navigate the grid.
       </li>
       <li>High contrast support for focus and hover styling of the controls in the dialog box use the CSS border property:
         <ul>
-          <li>When a button or date receives focus a border is added.</li>
-          <li>When hovering over a button or date with a pointing device a border is added.</li>
-          <li>By default buttons and dates do not have a border, padding is used as a placeholder for the added border for focus and hover styling.</li>
+          <li>When a button or date cell receives focus a border is added.</li>
+          <li>When hovering over a button or date cell with a pointing device a border is added.</li>
+          <li>By default buttons and date cells do not have a border, padding is used as a placeholder for the added border for focus and hover styling.</li>
         </ul>
       </li>
-     </ul>
+    </ul>
   </section>
 
   <section>

From 2932da88a86e478e63ca40514bd8c088f438521e Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Thu, 16 Jul 2020 21:12:03 -0700
Subject: [PATCH 33/46] Remove non-semantic use of q tags in kb section

---
 examples/dialog-modal/datepicker-dialog.html | 16 ++++++++--------
 1 file changed, 8 insertions(+), 8 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 8a74da4581..872f3df9e0 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -261,7 +261,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
         <tbody>
             <tr data-test-id="dialog-esc">
               <th><kbd>ESC</kbd></th>
-              <td>Closes the dialog and returns focus to the <q>Choose Date</q> button.</td>
+              <td>Closes the dialog and returns focus to the &quot;Choose Date&quot; button.</td>
             </tr>
             <tr data-test-id="dialog-tab">
               <th><kbd>Tab</kbd></th>
@@ -269,7 +269,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
                 <ul>
                   <li>Moves focus to next element in the dialog <kbd>Tab</kbd> sequence.</li>
                   <li>Note that, as specified in the <a href="../../#grid">grid design pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
-                  <li>If focus is on the last button (i.e., <q>OK</q>), moves focus to the first button (i.e. <q>Previous Year</q>).</li>
+                  <li>If focus is on the last button (i.e., &quot;OK&quot;), moves focus to the first button (i.e. &quot;Previous Year&quot;).</li>
                 </ul>
               </td>
             </tr>
@@ -279,7 +279,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
                 <ul>
                   <li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>
                   <li>Note that, as specified in the <a href="../../#grid">grid design pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
-                  <li>If focus is on the first button (i.e., <q>Previous Year</q>), moves focus to the last button (i.e. <q>OK</q>).</li>
+                  <li>If focus is on the first button (i.e., &quot;Previous Year&quot;), moves focus to the last button (i.e. &quot;OK&quot;).</li>
                 </ul>
               </td>
             </tr>
@@ -321,9 +321,9 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
             <th><kbd>Space</kbd>,<br><kbd>Enter</kbd></th>
             <td>
               <ul>
-                <li>Select the date, close the dialog, and move focus to the <q>Choose Date</q> button.</li>
-                <li>Update the value of the <q>Date</q> input with the selected date.</li>
-                <li>Update the accessible name of the <q>Choose Date</q> button to include the selected date.</li>
+                <li>Select the date, close the dialog, and move focus to the &quot;Choose Date&quot; button.</li>
+                <li>Update the value of the &quot;Date&quot; input with the selected date.</li>
+                <li>Update the accessible name of the &quot;Choose Date&quot; button to include the selected date.</li>
               </ul>
           </td>
           </tr>
@@ -406,8 +406,8 @@ <h3 id="kbd_label_6">Date Picker Dialog: OK and Cancel Buttons</h3>
               <td>
                 Activates the button:
                 <ul>
-                    <li><q>Cancel</q>: Closes the dialog, moves focus to <q>Choose Date</q> button, does not update date in date input.</li>
-                    <li><q>OK</q>: Closes the dialog, moves focus to <q>Choose Date</q> button, updates date in date input.</li>
+                    <li>&quot;Cancel&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, does not update date in date input.</li>
+                    <li>&quot;OK&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, updates date in date input.</li>
                 </ul>
               </td>
             </tr>

From 163144fea832d5939e34d2a64a3bc0b4da88706b Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Thu, 16 Jul 2020 21:14:21 -0700
Subject: [PATCH 34/46] Remove non-semantic use of q tags in states and props
 section

---
 examples/dialog-modal/datepicker-dialog.html | 10 +++++-----
 1 file changed, 5 insertions(+), 5 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 872f3df9e0..8a313f7281 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -461,7 +461,7 @@ <h3 id="rps_label_2">Choose Date Button</h3>
               <td><code>button</code></td>
               <td>
                 <ul>
-                  <li>The initial value of accessible name is <q>Choose Date</q>.</li>
+                  <li>The initial value of accessible name is &quot;Choose Date&quot;.</li>
                   <li>When users select a date, the accessible name is updated to also include the selected date.</li>
                 </ul>
               </td>
@@ -498,10 +498,10 @@ <h3 id="rps_label_3">Date Picker Dialog</h3>
               </tr>
               <tr data-test-id="dialog-aria-label">
                 <td></td>
-                <th scope="row"><code>aria-label=<q>string</q></code></th>
+                <th scope="row"><code>aria-label=&quot;string&quot;</code></th>
                 <td><code>div</code></td>
                 <td>
-                  The accessible name is <q>Choose Date</q>, since activating the button opens the <q>Choose Date</q> dialog and moves focus to the dialog.
+                  The accessible name is &quot;Choose Date&quot;, since activating the button opens the &quot;Choose Date&quot; dialog and moves focus to the dialog.
               </td>
               </tr>
               <tr data-test-id="dialog-aria-live">
@@ -535,7 +535,7 @@ <h3 id="rps_label_4">Date Picker Dialog: Calendar Navigation Buttons</h3>
                     <td></td>
                     <th scope="row"><code>aria-label="String"</code></th>
                     <td><code>button</code></td>
-                    <td>Defines the accessible name of the button (e.g. <q>Next Year</q>).</td>
+                    <td>Defines the accessible name of the button (e.g. &quot;Next Year&quot;).</td>
                 </tr>
                 <tr data-test-id="change-date-aria-live">
                     <th></th>
@@ -581,7 +581,7 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
             </tr>
             <tr data-test-id="grid-aria-labelledby">
               <td></td>
-              <th scope="row"><code>aria-labelledby=<q>IDREF</q></code></th>
+              <th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
               <td><code>table</code></td>
               <td>Defines the accessible name for the <code>grid</code> using the <code>h2</code> that shows the month and year of the dates displayed in the grid.
               </td>

From 93f31905364f34934e5c530c1e0b1385c3e74bad Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Thu, 16 Jul 2020 21:25:05 -0700
Subject: [PATCH 35/46] Include updating button name in description of OK
 button

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

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 8a313f7281..ecf186a19d 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -406,8 +406,8 @@ <h3 id="kbd_label_6">Date Picker Dialog: OK and Cancel Buttons</h3>
               <td>
                 Activates the button:
                 <ul>
-                    <li>&quot;Cancel&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, does not update date in date input.</li>
-                    <li>&quot;OK&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, updates date in date input.</li>
+                  <li>&quot;Cancel&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, does not update date in date input.</li>
+                  <li>&quot;OK&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, updates date in date input, updates accessible name of the &quot;Choose Date&quot; button to include the selected date.</li>
                 </ul>
               </td>
             </tr>

From b42446e42c80e209eae1c4f0a1a3d565a794b007 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Thu, 16 Jul 2020 21:28:09 -0700
Subject: [PATCH 36/46] change combobox to textbox in description of
 aria-describedby on textbox

---
 examples/dialog-modal/datepicker-dialog.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index ecf186a19d..427499bc6e 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -436,7 +436,7 @@ <h3 id="rps_label_textbox">Textbox</h3>
             <th scope="row"><code>aria-describedby="IDREF"</code></th>
             <td><code>input</code></td>
             <td>
-              Identifies the element that provides an accessible description for the combobox, enableing assistive technologies to associate the date format description with the input.
+              Identifies the element that provides an accessible description for the textbox, enableing assistive technologies to associate the date format description with the input.
             </td>
           </tr>
         </tbody>

From e14ba39b026c36953ebba74edda22b30ba6b6d6d Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Thu, 16 Jul 2020 21:32:41 -0700
Subject: [PATCH 37/46] Revise description of choose date button name change

---
 examples/dialog-modal/datepicker-dialog.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 427499bc6e..f7483a0dc1 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -462,7 +462,7 @@ <h3 id="rps_label_2">Choose Date Button</h3>
               <td>
                 <ul>
                   <li>The initial value of accessible name is &quot;Choose Date&quot;.</li>
-                  <li>When users select a date, the accessible name is updated to also include the selected date.</li>
+                  <li>When users select a date, the accessible name is changed to &quot;Change Date, DATE_STRING&quot; where DATE_STRING is the selected date.</li>
                 </ul>
               </td>
             </tr>

From a18cc262028d9137b79f4588d8474acc25bf7a80 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Thu, 16 Jul 2020 21:41:59 -0700
Subject: [PATCH 38/46] add missing comma in dialog table

---
 examples/dialog-modal/datepicker-dialog.html | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index f7483a0dc1..3a11f0cec6 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -498,7 +498,7 @@ <h3 id="rps_label_3">Date Picker Dialog</h3>
               </tr>
               <tr data-test-id="dialog-aria-label">
                 <td></td>
-                <th scope="row"><code>aria-label=&quot;string&quot;</code></th>
+                <th scope="row"><code>aria-label="string"</code></th>
                 <td><code>div</code></td>
                 <td>
                   The accessible name is &quot;Choose Date&quot;, since activating the button opens the &quot;Choose Date&quot; dialog and moves focus to the dialog.

From 18649b07f08ffa0b8944ad21a8a941e6b26b2f8a Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Thu, 16 Jul 2020 21:49:09 -0700
Subject: [PATCH 39/46] Move h2 live region description to dialog states and
 props table

---
 examples/dialog-modal/datepicker-dialog.html | 28 ++++++++++----------
 1 file changed, 14 insertions(+), 14 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 3a11f0cec6..8e005070ae 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -504,6 +504,19 @@ <h3 id="rps_label_3">Date Picker Dialog</h3>
                   The accessible name is &quot;Choose Date&quot;, since activating the button opens the &quot;Choose Date&quot; dialog and moves focus to the dialog.
               </td>
               </tr>
+              <tr data-test-id="change-date-aria-live">
+                <th></th>
+                <th scope="row"><code>aria-live="polite"</code></th>
+                <td>
+                  <code>h2</code>
+                </td>
+                <td>
+                  <ul>
+                    <li>When the month and/or year changes the content of the <code>h2</code> element is updated.</li>
+                    <li>Indicates the <code>h2</code> should be automatically announced by screen readers.</li>
+                  </ul>
+                </td>
+              </tr>
               <tr data-test-id="dialog-aria-live">
                 <th></th>
                 <th scope="row"><code>aria-live="polite"</code></th>
@@ -511,7 +524,7 @@ <h3 id="rps_label_3">Date Picker Dialog</h3>
                 <td>
                   <ul>
                     <li>Indicates the element that displays information about keyboard commands for navigating the grid should be automatically announced by screen readers.</li>
-                    <li>The script slightly delays display of the information so screen readers are more likely to read it after information related to change of focus.</li>
+                    <li>The script slightly delays display of the information, so screen readers are more likely to read it after information related to change of focus.</li>
                   </ul>
                 </td>
               </tr>
@@ -537,19 +550,6 @@ <h3 id="rps_label_4">Date Picker Dialog: Calendar Navigation Buttons</h3>
                     <td><code>button</code></td>
                     <td>Defines the accessible name of the button (e.g. &quot;Next Year&quot;).</td>
                 </tr>
-                <tr data-test-id="change-date-aria-live">
-                    <th></th>
-                    <th scope="row"><code>aria-live="polite"</code></th>
-                    <td>
-                      <code>h2</code>
-                    </td>
-                    <td>
-                      <ul>
-                        <li>When the month and/or year changes the content of the <code>h2</code> element is updated.</li>
-                        <li>Indicates the <code>h2</code> should be automatically announced by screen readers.</li>
-                      </ul>
-                    </td>
-                  </tr>
             </tbody>
           </table>
         </section>

From f54ec1076d2d3114d55ea8232cc98096059723bd Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Thu, 16 Jul 2020 23:28:02 -0700
Subject: [PATCH 40/46] Minor editorial revisions

---
 examples/dialog-modal/datepicker-dialog.html | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 8e005070ae..cfad103177 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -501,7 +501,7 @@ <h3 id="rps_label_3">Date Picker Dialog</h3>
                 <th scope="row"><code>aria-label="string"</code></th>
                 <td><code>div</code></td>
                 <td>
-                  The accessible name is &quot;Choose Date&quot;, since activating the button opens the &quot;Choose Date&quot; dialog and moves focus to the dialog.
+                  Defines the accessible name for the dialog.
               </td>
               </tr>
               <tr data-test-id="change-date-aria-live">
@@ -575,7 +575,7 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
               <td>
                 <ul>
                   <li>Identifies the <code>table</code> element as a <code>grid</code> widget.</li>
-                  <li>Since the <code>grid</code> role is applied to a <code>table</code> element, the <code>row</code>, <code>colheader</code>, and <code>gridcell</code> roles do not need to be specified because they are implied by <code>tr</code>, <code>th</code>, and <code>td</code> tags.</li>
+                  <li>Since the <code>grid</code> role is applied to a <code>table</code> element, the <code>row</code>, <code>columnheader</code>, and <code>gridcell</code> roles do not need to be specified because they are implied by <code>tr</code>, <code>th</code>, and <code>td</code> tags.</li>
                 </ul>
               </td>
             </tr>
@@ -583,8 +583,7 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
               <td></td>
               <th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
               <td><code>table</code></td>
-              <td>Defines the accessible name for the <code>grid</code> using the <code>h2</code> that shows the month and year of the dates displayed in the grid.
-              </td>
+              <td>Identifies the element that provides the accessible name for the <code>grid</code>.</td>
             </tr>
             <tr data-test-id="gridcell-button-tabindex">
               <td></td>

From 42cc23036fca07908b3c4b5a08ceb2b01038af3d Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Thu, 16 Jul 2020 23:34:16 -0700
Subject: [PATCH 41/46] Grid states and props table: change button to td or
 gridcell as appropriate.

---
 examples/dialog-modal/datepicker-dialog.html | 20 ++++++++++----------
 1 file changed, 10 insertions(+), 10 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index cfad103177..b17b29722b 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -591,13 +591,13 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
                 <code>tabindex="0"</code>
               </th>
               <td>
-                <code>button</code>
+                <code>td</code>
               </td>
               <td>
                 <ul>
-                  <li>Makes the button focusable and includes it in the dialog <kbd>Tab</kbd> sequence.</li>
+                  <li>Makes the cell focusable and includes it in the dialog <kbd>Tab</kbd> sequence.</li>
                   <li>Set dynamically by the JavaScript when the element is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>At any given time, only one button within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
+                  <li>At any given time, only one <code>gridcell</code> within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
                   <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
                 </ul>
               </td>
@@ -608,13 +608,13 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
                 <code>tabindex="-1"</code>
               </th>
               <td>
-                <code>button</code>
+                <code>td</code>
               </td>
               <td>
                 <ul>
-                  <li>Makes the button focusable and excludes it from the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>Changed dynamically to <code>0</code> by the JavaScript when the button is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>At any given time, only one button within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
+                  <li>Makes the cell focusable and excludes it from the dialog <kbd>Tab</kbd> sequence.</li>
+                  <li>Changed dynamically to <code>0</code> by the JavaScript when the cell is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
+                  <li>At any given time, only one <code>gridcell</code> within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
                   <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
                 </ul>
               </td>
@@ -622,11 +622,11 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
             <tr data-test-id="gridcell-button-aria-selected">
               <td></td>
               <th scope="row"><code>aria-selected="true"</code></th>
-              <td><code>button</code></td>
+              <td><code>td</code></td>
               <td>
                 <ul>
-                  <li>Identifies the button for the currently selected date, i.e., the date value  present in the date input.</li>
-                  <li>Only set on the button representing the currently selected date, no other buttons have <code>aria-selected</code> specified.</li>
+                  <li>Identifies the cell containing the currently selected date, i.e., the date value  present in the date input.</li>
+                  <li>Only set on the cell containing the currently selected date; no other cells have <code>aria-selected</code> specified.</li>
                 </ul>
               </td>
             </tr>

From a710bb10a04e907b3fa05a953af0658347ecddc3 Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Fri, 17 Jul 2020 00:09:57 -0700
Subject: [PATCH 42/46] white space changes

---
 examples/dialog-modal/datepicker-dialog.html | 84 ++++++++++----------
 1 file changed, 42 insertions(+), 42 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index b17b29722b..3bead57899 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -233,18 +233,18 @@ <h3 id="kbd_label_2">Choose Date Button</h3>
           </tr>
         </thead>
         <tbody>
-            <tr data-test-id="button-space-return-down-arrow">
-                <th><kbd>Space</kbd>,<br><kbd>Enter</kbd>,<br><kbd>Down Arrow</kbd></th>
-                <td>
-                  <ul>
-                    <li>Open the date picker dialog.</li>
-                    <li>
-                      Move focus to selected date, i.e., the date displayed in the date input text field.
-                      If no date has been selected, places focus on the current date.
-                    </li>
-                </ul>
-              </td>
-            </tr>
+          <tr data-test-id="button-space-return-down-arrow">
+            <th><kbd>Space</kbd>,<br><kbd>Enter</kbd>,<br><kbd>Down Arrow</kbd></th>
+            <td>
+              <ul>
+                <li>Open the date picker dialog.</li>
+                <li>
+                  Move focus to selected date, i.e., the date displayed in the date input text field.
+                  If no date has been selected, places focus on the current date.
+                </li>
+              </ul>
+            </td>
+          </tr>
         </tbody>
       </table>
     </section>
@@ -259,30 +259,30 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
           </tr>
         </thead>
         <tbody>
-            <tr data-test-id="dialog-esc">
-              <th><kbd>ESC</kbd></th>
-              <td>Closes the dialog and returns focus to the &quot;Choose Date&quot; button.</td>
-            </tr>
-            <tr data-test-id="dialog-tab">
-              <th><kbd>Tab</kbd></th>
-              <td>
-                <ul>
-                  <li>Moves focus to next element in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>Note that, as specified in the <a href="../../#grid">grid design pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
-                  <li>If focus is on the last button (i.e., &quot;OK&quot;), moves focus to the first button (i.e. &quot;Previous Year&quot;).</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="dialog-shift-tab">
-              <th><kbd>Shift + Tab</kbd></th>
-              <td>
-                <ul>
-                  <li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>Note that, as specified in the <a href="../../#grid">grid design pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
-                  <li>If focus is on the first button (i.e., &quot;Previous Year&quot;), moves focus to the last button (i.e. &quot;OK&quot;).</li>
-                </ul>
-              </td>
-            </tr>
+          <tr data-test-id="dialog-esc">
+            <th><kbd>ESC</kbd></th>
+            <td>Closes the dialog and returns focus to the &quot;Choose Date&quot; button.</td>
+          </tr>
+          <tr data-test-id="dialog-tab">
+            <th><kbd>Tab</kbd></th>
+            <td>
+              <ul>
+                <li>Moves focus to next element in the dialog <kbd>Tab</kbd> sequence.</li>
+                <li>Note that, as specified in the <a href="../../#grid">grid design pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
+                <li>If focus is on the last button (i.e., &quot;OK&quot;), moves focus to the first button (i.e. &quot;Previous Year&quot;).</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="dialog-shift-tab">
+            <th><kbd>Shift + Tab</kbd></th>
+            <td>
+              <ul>
+                <li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>
+                <li>Note that, as specified in the <a href="../../#grid">grid design pattern</a>, only one button in the calendar grid is in the <kbd>Tab</kbd> sequence.</li>
+                <li>If focus is on the first button (i.e., &quot;Previous Year&quot;), moves focus to the last button (i.e. &quot;OK&quot;).</li>
+              </ul>
+            </td>
+          </tr>
         </tbody>
       </table>
     </section>
@@ -297,12 +297,12 @@ <h3 id="kbd_label_4">Date Picker Dialog: Month/Year Buttons</h3>
           </tr>
         </thead>
         <tbody>
-            <tr data-test-id="month-year-button-space-return">
-              <th><kbd>Space</kbd>,<br><kbd>Enter</kbd></th>
-              <td>
-                Change the month and/or year displayed in the calendar grid.
-              </td>
-            </tr>
+          <tr data-test-id="month-year-button-space-return">
+            <th><kbd>Space</kbd>,<br><kbd>Enter</kbd></th>
+            <td>
+              Change the month and/or year displayed in the calendar grid.
+            </td>
+          </tr>
         </tbody>
       </table>
     </section>

From d950184f2333372624e511f97ffec79a761318dc Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Fri, 17 Jul 2020 09:29:24 -0500
Subject: [PATCH 43/46] removed autocomplete from textbox and down arrow from
 opening dialog

---
 examples/dialog-modal/datepicker-dialog.html  |  5 +-
 examples/dialog-modal/js/datepicker-dialog.js | 84 +++++++++----------
 test/tests/dialog-modal_datepicker.js         | 15 +---
 3 files changed, 45 insertions(+), 59 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 3bead57899..537fe7f565 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -55,7 +55,6 @@ <h2 id="ex_label">Example</h2>
             <input type="text"
                   placeholder="mm/dd/yyyy"
                   id="id-textbox-1"
-                  aria-autocomplete="none"
                   aria-describedby="id-description-1">
             <span class="desc" id="id-description-1">(<span class="sr-only">date format: </span>mm/dd/yyyy)</span>
             <button type="button"
@@ -233,8 +232,8 @@ <h3 id="kbd_label_2">Choose Date Button</h3>
           </tr>
         </thead>
         <tbody>
-          <tr data-test-id="button-space-return-down-arrow">
-            <th><kbd>Space</kbd>,<br><kbd>Enter</kbd>,<br><kbd>Down Arrow</kbd></th>
+          <tr data-test-id="button-space-return">
+            <th><kbd>Space</kbd>,<br><kbd>Enter</kbd></th>
             <td>
               <ul>
                 <li>Open the date picker dialog.</li>
diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index 71eca90423..61b49da536 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -2,12 +2,12 @@
 *   This content is licensed according to the W3C Software License at
 *   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
 *
-*   File:   MenuButtonDatePicker.js
+*   File:   DatePickerDialog.js
 */
 
 'use strict';
 
-var MenuButtonDatePicker = function (cdp) {
+var DatePickerDialog = function (cdp) {
   this.buttonLabelChoose = 'Choose Date';
   this.buttonLabelChange = 'Change Date';
   this.dayLabels = ['Sunday', 'Monday', 'Tuesday', 'Wednesday', 'Thursday', 'Friday', 'Saturday'];
@@ -46,7 +46,7 @@ var MenuButtonDatePicker = function (cdp) {
 
 };
 
-MenuButtonDatePicker.prototype.init = function () {
+DatePickerDialog.prototype.init = function () {
 
   this.textboxNode.addEventListener('blur',   this.setDateForButtonLabel.bind(this));
 
@@ -97,18 +97,18 @@ MenuButtonDatePicker.prototype.init = function () {
   this.setDateForButtonLabel();
 };
 
-MenuButtonDatePicker.prototype.isSameDay = function (day1, day2) {
+DatePickerDialog.prototype.isSameDay = function (day1, day2) {
   return (day1.getFullYear() == day2.getFullYear()) &&
         (day1.getMonth() == day2.getMonth()) &&
         (day1.getDate() == day2.getDate());
 };
 
-MenuButtonDatePicker.prototype.isNotSameMonth = function (day1, day2) {
+DatePickerDialog.prototype.isNotSameMonth = function (day1, day2) {
   return (day1.getFullYear() != day2.getFullYear()) ||
         (day1.getMonth() != day2.getMonth());
 };
 
-MenuButtonDatePicker.prototype.updateGrid = function () {
+DatePickerDialog.prototype.updateGrid = function () {
 
   var flag;
   var fd = this.focusDay;
@@ -139,7 +139,7 @@ MenuButtonDatePicker.prototype.updateGrid = function () {
   }
 };
 
-MenuButtonDatePicker.prototype.updateDate = function (domNode, disable, day, selected) {
+DatePickerDialog.prototype.updateDate = function (domNode, disable, day, selected) {
 
   var d = day.getDate().toString();
   if (day.getDate() <= 9) {
@@ -169,7 +169,7 @@ MenuButtonDatePicker.prototype.updateDate = function (domNode, disable, day, sel
   }
 };
 
-MenuButtonDatePicker.prototype.moveFocusToDay = function (day) {
+DatePickerDialog.prototype.moveFocusToDay = function (day) {
   var d = this.focusDay;
 
   this.focusDay = day;
@@ -181,7 +181,7 @@ MenuButtonDatePicker.prototype.moveFocusToDay = function (day) {
   this.setFocusDay();
 };
 
-MenuButtonDatePicker.prototype.setFocusDay = function (flag) {
+DatePickerDialog.prototype.setFocusDay = function (flag) {
 
   if (typeof flag !== 'boolean') {
     flag = true;
@@ -201,7 +201,7 @@ MenuButtonDatePicker.prototype.setFocusDay = function (flag) {
   }
 };
 
-MenuButtonDatePicker.prototype.open = function () {
+DatePickerDialog.prototype.open = function () {
   this.dialogNode.style.display = 'block';
   this.dialogNode.style.zIndex = 2;
 
@@ -209,11 +209,11 @@ MenuButtonDatePicker.prototype.open = function () {
   this.updateGrid();
 };
 
-MenuButtonDatePicker.prototype.isOpen = function () {
+DatePickerDialog.prototype.isOpen = function () {
   return window.getComputedStyle(this.dialogNode).display !== 'none';
 };
 
-MenuButtonDatePicker.prototype.close = function (flag) {
+DatePickerDialog.prototype.close = function (flag) {
   if (typeof flag !== 'boolean') {
     // Default is to move focus to combobox
     flag = true;
@@ -227,57 +227,57 @@ MenuButtonDatePicker.prototype.close = function (flag) {
   }
 };
 
-MenuButtonDatePicker.prototype.moveToNextYear = function () {
+DatePickerDialog.prototype.moveToNextYear = function () {
   this.focusDay.setFullYear(this.focusDay.getFullYear() + 1);
   this.updateGrid();
 };
 
-MenuButtonDatePicker.prototype.moveToPreviousYear = function () {
+DatePickerDialog.prototype.moveToPreviousYear = function () {
   this.focusDay.setFullYear(this.focusDay.getFullYear() - 1);
   this.updateGrid();
 };
 
-MenuButtonDatePicker.prototype.moveToNextMonth = function () {
+DatePickerDialog.prototype.moveToNextMonth = function () {
   this.focusDay.setMonth(this.focusDay.getMonth() + 1);
   this.updateGrid();
 };
 
-MenuButtonDatePicker.prototype.moveToPreviousMonth = function () {
+DatePickerDialog.prototype.moveToPreviousMonth = function () {
   this.focusDay.setMonth(this.focusDay.getMonth() - 1);
   this.updateGrid();
 };
 
-MenuButtonDatePicker.prototype.moveFocusToNextDay = function () {
+DatePickerDialog.prototype.moveFocusToNextDay = function () {
   var d = new Date(this.focusDay);
   d.setDate(d.getDate() + 1);
   this.moveFocusToDay(d);
 };
 
-MenuButtonDatePicker.prototype.moveFocusToNextWeek = function () {
+DatePickerDialog.prototype.moveFocusToNextWeek = function () {
   var d = new Date(this.focusDay);
   d.setDate(d.getDate() + 7);
   this.moveFocusToDay(d);
 };
 
-MenuButtonDatePicker.prototype.moveFocusToPreviousDay = function () {
+DatePickerDialog.prototype.moveFocusToPreviousDay = function () {
   var d = new Date(this.focusDay);
   d.setDate(d.getDate() - 1);
   this.moveFocusToDay(d);
 };
 
-MenuButtonDatePicker.prototype.moveFocusToPreviousWeek = function () {
+DatePickerDialog.prototype.moveFocusToPreviousWeek = function () {
   var d = new Date(this.focusDay);
   d.setDate(d.getDate() - 7);
   this.moveFocusToDay(d);
 };
 
-MenuButtonDatePicker.prototype.moveFocusToFirstDayOfWeek = function () {
+DatePickerDialog.prototype.moveFocusToFirstDayOfWeek = function () {
   var d = new Date(this.focusDay);
   d.setDate(d.getDate() - d.getDay());
   this.moveFocusToDay(d);
 };
 
-MenuButtonDatePicker.prototype.moveFocusToLastDayOfWeek = function () {
+DatePickerDialog.prototype.moveFocusToLastDayOfWeek = function () {
   var d = new Date(this.focusDay);
   d.setDate(d.getDate() + (6 - d.getDay()));
   this.moveFocusToDay(d);
@@ -285,17 +285,17 @@ MenuButtonDatePicker.prototype.moveFocusToLastDayOfWeek = function () {
 
 // Day methods
 
-MenuButtonDatePicker.prototype.isDayDisabled = function (domNode) {
+DatePickerDialog.prototype.isDayDisabled = function (domNode) {
   return domNode.classList.contains('disabled');
 };
 
-MenuButtonDatePicker.prototype.getDayFromDataDateAttribute = function (domNode) {
+DatePickerDialog.prototype.getDayFromDataDateAttribute = function (domNode) {
   var parts = domNode.getAttribute('data-date').split('-');
   return new Date(parts[0], parseInt(parts[1])-1, parts[2]);
 };
 // Textbox methods
 
-MenuButtonDatePicker.prototype.setTextboxDate = function (domNode) {
+DatePickerDialog.prototype.setTextboxDate = function (domNode) {
 
   var d = this.focusDay;
 
@@ -308,7 +308,7 @@ MenuButtonDatePicker.prototype.setTextboxDate = function (domNode) {
 
 };
 
-MenuButtonDatePicker.prototype.getDateFromTextbox = function () {
+DatePickerDialog.prototype.getDateFromTextbox = function () {
 
   var parts = this.textboxNode.value.split('/');
 
@@ -327,7 +327,7 @@ MenuButtonDatePicker.prototype.getDateFromTextbox = function () {
 
 };
 
-MenuButtonDatePicker.prototype.setDateForButtonLabel = function () {
+DatePickerDialog.prototype.setDateForButtonLabel = function () {
 
   var parts = this.textboxNode.value.split('/');
 
@@ -350,7 +350,7 @@ MenuButtonDatePicker.prototype.setDateForButtonLabel = function () {
   }
 };
 
-MenuButtonDatePicker.prototype.setMessage = function (str) {
+DatePickerDialog.prototype.setMessage = function (str) {
 
   function setMessageDelayed () {
     this.messageNode.textContent = str;
@@ -365,7 +365,7 @@ MenuButtonDatePicker.prototype.setMessage = function (str) {
 // Event handlers
 
 
-MenuButtonDatePicker.prototype.handleOkButton = function (event) {
+DatePickerDialog.prototype.handleOkButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -407,7 +407,7 @@ MenuButtonDatePicker.prototype.handleOkButton = function (event) {
   }
 };
 
-MenuButtonDatePicker.prototype.handleCancelButton = function (event) {
+DatePickerDialog.prototype.handleCancelButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -442,7 +442,7 @@ MenuButtonDatePicker.prototype.handleCancelButton = function (event) {
   }
 };
 
-MenuButtonDatePicker.prototype.handleNextYearButton = function (event) {
+DatePickerDialog.prototype.handleNextYearButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -480,7 +480,7 @@ MenuButtonDatePicker.prototype.handleNextYearButton = function (event) {
   }
 };
 
-MenuButtonDatePicker.prototype.handlePreviousYearButton = function (event) {
+DatePickerDialog.prototype.handlePreviousYearButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -529,7 +529,7 @@ MenuButtonDatePicker.prototype.handlePreviousYearButton = function (event) {
   }
 };
 
-MenuButtonDatePicker.prototype.handleNextMonthButton = function (event) {
+DatePickerDialog.prototype.handleNextMonthButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -567,7 +567,7 @@ MenuButtonDatePicker.prototype.handleNextMonthButton = function (event) {
   }
 };
 
-MenuButtonDatePicker.prototype.handlePreviousMonthButton = function (event) {
+DatePickerDialog.prototype.handlePreviousMonthButton = function (event) {
   var flag = false;
 
   switch (event.type) {
@@ -606,7 +606,7 @@ MenuButtonDatePicker.prototype.handlePreviousMonthButton = function (event) {
   }
 };
 
-MenuButtonDatePicker.prototype.handleDayKeyDown = function (event) {
+DatePickerDialog.prototype.handleDayKeyDown = function (event) {
   var flag = false;
 
   switch (event.key) {
@@ -699,7 +699,7 @@ MenuButtonDatePicker.prototype.handleDayKeyDown = function (event) {
   }
 };
 
-MenuButtonDatePicker.prototype.handleDayClick = function (event) {
+DatePickerDialog.prototype.handleDayClick = function (event) {
 
   if (!this.isDayDisabled(event.currentTarget)) {
     this.setTextboxDate(event.currentTarget);
@@ -711,15 +711,13 @@ MenuButtonDatePicker.prototype.handleDayClick = function (event) {
 
 };
 
-MenuButtonDatePicker.prototype.handleDayFocus = function () {
+DatePickerDialog.prototype.handleDayFocus = function () {
   this.setMessage(this.messageCursorKeys);
 };
 
-MenuButtonDatePicker.prototype.handleButtonKeydown = function (event) {
+DatePickerDialog.prototype.handleButtonKeydown = function (event) {
 
   if ((event.key === 'Enter') ||
-      (event.key === 'Down')  ||
-      (event.key === 'ArrowDown')  ||
       (event.key === ' ')) {
     this.open();
     this.setFocusDay();
@@ -730,7 +728,7 @@ MenuButtonDatePicker.prototype.handleButtonKeydown = function (event) {
 
 };
 
-MenuButtonDatePicker.prototype.handleButtonClick = function (event) {
+DatePickerDialog.prototype.handleButtonClick = function (event) {
   if (this.isOpen()) {
     this.close();
   }
@@ -743,7 +741,7 @@ MenuButtonDatePicker.prototype.handleButtonClick = function (event) {
   event.preventDefault();
 };
 
-MenuButtonDatePicker.prototype.handleBackgroundMouseUp = function (event) {
+DatePickerDialog.prototype.handleBackgroundMouseUp = function (event) {
   if (!this.buttonNode.contains(event.target) &&
       !this.dialogNode.contains(event.target)) {
 
@@ -762,7 +760,7 @@ window.addEventListener('load' , function () {
   var datePickers = document.querySelectorAll('.datepicker');
 
   datePickers.forEach(function (dp) {
-    var datePicker = new MenuButtonDatePicker(dp);
+    new DatePickerDialog(dp);
   });
 
 });
diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
index 946088c07f..2e7c5d709c 100644
--- a/test/tests/dialog-modal_datepicker.js
+++ b/test/tests/dialog-modal_datepicker.js
@@ -183,7 +183,7 @@ ariaTest('aria-selected on selected date', exampleFile, 'gridcell-button-aria-se
 
 // Keyboard
 
-ariaTest('ENTER to open datepicker', exampleFile, 'button-space-return-down-arrow', async (t) => {
+ariaTest('ENTER to open datepicker', exampleFile, 'button-space-return', async (t) => {
   let chooseDateButton = await t.context.session.findElement(By.css(ex.buttonSelector));
   chooseDateButton.sendKeys(Key.ENTER);
 
@@ -194,18 +194,7 @@ ariaTest('ENTER to open datepicker', exampleFile, 'button-space-return-down-arro
   );
 });
 
-ariaTest('DOWN ARROW to open datepicker', exampleFile, 'button-space-return-down-arrow', async (t) => {
-  let chooseDateButton = await t.context.session.findElement(By.css(ex.buttonSelector));
-  chooseDateButton.sendKeys(Key.ARROW_DOWN);
-
-  t.not(
-    await t.context.session.findElement(By.css(ex.dialogSelector)).getCssValue('display'),
-    'none',
-    'After sending DOWN ARROW to the "choose date" button, the calendar dialog should open'
-  );
-});
-
-ariaTest('SPACE to open datepicker', exampleFile, 'button-space-return-down-arrow', async (t) => {
+ariaTest('SPACE to open datepicker', exampleFile, 'button-space-return', async (t) => {
   let chooseDateButton = await t.context.session.findElement(By.css(ex.buttonSelector));
   chooseDateButton.sendKeys(' ');
 

From 53e5058978ad0aeb0f4271860738e88b2c40960f Mon Sep 17 00:00:00 2001
From: Matt King <a11yThinker@gmail.com>
Date: Fri, 17 Jul 2020 08:15:55 -0700
Subject: [PATCH 44/46] Fix whitespace

---
 examples/dialog-modal/datepicker-dialog.html | 388 +++++++++----------
 1 file changed, 194 insertions(+), 194 deletions(-)

diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 537fe7f565..b72902e1ad 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -391,27 +391,27 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
     </section>
 
     <section>
-        <h3 id="kbd_label_6">Date Picker Dialog: OK and Cancel Buttons</h3>
-        <table aria-labelledby="kbd_label_6 kbd_label" class="def">
-          <thead>
-            <tr>
-                <th>Key</th>
-                <th>Function</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr data-test-id="okay-cancel-button-space-return">
-              <th> <kbd>Space</kbd>,<br><kbd>Enter</kbd></th>
-              <td>
-                Activates the button:
-                <ul>
-                  <li>&quot;Cancel&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, does not update date in date input.</li>
-                  <li>&quot;OK&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, updates date in date input, updates accessible name of the &quot;Choose Date&quot; button to include the selected date.</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-        </table>
+      <h3 id="kbd_label_6">Date Picker Dialog: OK and Cancel Buttons</h3>
+      <table aria-labelledby="kbd_label_6 kbd_label" class="def">
+        <thead>
+          <tr>
+            <th>Key</th>
+            <th>Function</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="okay-cancel-button-space-return">
+            <th> <kbd>Space</kbd>,<br><kbd>Enter</kbd></th>
+            <td>
+              Activates the button:
+              <ul>
+                <li>&quot;Cancel&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, does not update date in date input.</li>
+                <li>&quot;OK&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, updates date in date input, updates accessible name of the &quot;Choose Date&quot; button to include the selected date.</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
     </section>
   </section>
 
@@ -443,115 +443,115 @@ <h3 id="rps_label_textbox">Textbox</h3>
     </section>
 
     <section>
-        <h3 id="rps_label_2">Choose Date Button</h3>
-        <table aria-labelledby="rps_label_2 rps_label" class="data attributes">
-          <thead>
-            <tr>
-              <th scope="col">Role</th>
-              <th scope="col">Attribute</th>
-              <th scope="col">Element</th>
-              <th scope="col">Usage</th>
-            </tr>
-          </thead>
-          <tbody>
-            <tr data-test-id="calendar-button-aria-label">
-              <td></td>
-              <th scope="row"><code>aria-label="String"</code></th>
-              <td><code>button</code></td>
-              <td>
-                <ul>
-                  <li>The initial value of accessible name is &quot;Choose Date&quot;.</li>
-                  <li>When users select a date, the accessible name is changed to &quot;Change Date, DATE_STRING&quot; where DATE_STRING is the selected date.</li>
-                </ul>
-              </td>
-            </tr>
-          </tbody>
-        </table>
-      </section>
-
-      <section>
-          <h3 id="rps_label_3">Date Picker Dialog</h3>
-          <table aria-labelledby="rps_label_3 rps_label" class="data attributes">
-            <thead>
-              <tr>
-                <th scope="col">Role</th>
-                <th scope="col">Attribute</th>
-                <th scope="col">Element</th>
-                <th scope="col">Usage</th>
-              </tr>
-            </thead>
-            <tbody>
-              <tr data-test-id="dialog-role">
-                <th scope="row"><code>dialog</code></th>
-                <td></td>
-                <td>
-                  <code>div</code>
-                </td>
-                <td>Identifies the element as a dialog .</td>
-              </tr>
-              <tr data-test-id="dialog-aria-modal">
-                <td></td>
-                <th scope="row"><code>aria-modal="true"</code></th>
-                <td><code>div</code></td>
-                <td>Indicates the dialog is modal.</td>
-              </tr>
-              <tr data-test-id="dialog-aria-label">
-                <td></td>
-                <th scope="row"><code>aria-label="string"</code></th>
-                <td><code>div</code></td>
-                <td>
-                  Defines the accessible name for the dialog.
-              </td>
-              </tr>
-              <tr data-test-id="change-date-aria-live">
-                <th></th>
-                <th scope="row"><code>aria-live="polite"</code></th>
-                <td>
-                  <code>h2</code>
-                </td>
-                <td>
-                  <ul>
-                    <li>When the month and/or year changes the content of the <code>h2</code> element is updated.</li>
-                    <li>Indicates the <code>h2</code> should be automatically announced by screen readers.</li>
-                  </ul>
-                </td>
-              </tr>
-              <tr data-test-id="dialog-aria-live">
-                <th></th>
-                <th scope="row"><code>aria-live="polite"</code></th>
-                <td><code>div</code></td>
-                <td>
-                  <ul>
-                    <li>Indicates the element that displays information about keyboard commands for navigating the grid should be automatically announced by screen readers.</li>
-                    <li>The script slightly delays display of the information, so screen readers are more likely to read it after information related to change of focus.</li>
-                  </ul>
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </section>
+      <h3 id="rps_label_2">Choose Date Button</h3>
+      <table aria-labelledby="rps_label_2 rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="calendar-button-aria-label">
+            <td></td>
+            <th scope="row"><code>aria-label="String"</code></th>
+            <td><code>button</code></td>
+            <td>
+              <ul>
+                <li>The initial value of accessible name is &quot;Choose Date&quot;.</li>
+                <li>When users select a date, the accessible name is changed to &quot;Change Date, DATE_STRING&quot; where DATE_STRING is the selected date.</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
 
-      <section>
-          <h3 id="rps_label_4">Date Picker Dialog: Calendar Navigation Buttons</h3>
-          <table aria-labelledby="rps_label_4 rps_label" class="data attributes">
-            <thead>
-              <tr>
-                <th scope="col">Role</th>
-                <th scope="col">Attribute</th>
-                <th scope="col">Element</th>
-                <th scope="col">Usage</th>
-              </tr>
-            </thead>
-            <tbody>
-                <tr data-test-id="change-date-button-aria-label">
-                    <td></td>
-                    <th scope="row"><code>aria-label="String"</code></th>
-                    <td><code>button</code></td>
-                    <td>Defines the accessible name of the button (e.g. &quot;Next Year&quot;).</td>
-                </tr>
-            </tbody>
-          </table>
-        </section>
+    <section>
+      <h3 id="rps_label_3">Date Picker Dialog</h3>
+      <table aria-labelledby="rps_label_3 rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="dialog-role">
+            <th scope="row"><code>dialog</code></th>
+            <td></td>
+            <td>
+              <code>div</code>
+            </td>
+            <td>Identifies the element as a dialog .</td>
+          </tr>
+          <tr data-test-id="dialog-aria-modal">
+            <td></td>
+            <th scope="row"><code>aria-modal="true"</code></th>
+            <td><code>div</code></td>
+            <td>Indicates the dialog is modal.</td>
+          </tr>
+          <tr data-test-id="dialog-aria-label">
+            <td></td>
+            <th scope="row"><code>aria-label="string"</code></th>
+            <td><code>div</code></td>
+            <td>
+              Defines the accessible name for the dialog.
+          </td>
+          </tr>
+          <tr data-test-id="change-date-aria-live">
+            <th></th>
+            <th scope="row"><code>aria-live="polite"</code></th>
+            <td>
+              <code>h2</code>
+            </td>
+            <td>
+              <ul>
+                <li>When the month and/or year changes the content of the <code>h2</code> element is updated.</li>
+                <li>Indicates the <code>h2</code> should be automatically announced by screen readers.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="dialog-aria-live">
+            <th></th>
+            <th scope="row"><code>aria-live="polite"</code></th>
+            <td><code>div</code></td>
+            <td>
+              <ul>
+                <li>Indicates the element that displays information about keyboard commands for navigating the grid should be automatically announced by screen readers.</li>
+                <li>The script slightly delays display of the information, so screen readers are more likely to read it after information related to change of focus.</li>
+              </ul>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
+
+    <section>
+      <h3 id="rps_label_4">Date Picker Dialog: Calendar Navigation Buttons</h3>
+      <table aria-labelledby="rps_label_4 rps_label" class="data attributes">
+        <thead>
+          <tr>
+            <th scope="col">Role</th>
+            <th scope="col">Attribute</th>
+            <th scope="col">Element</th>
+            <th scope="col">Usage</th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr data-test-id="change-date-button-aria-label">
+            <td></td>
+            <th scope="row"><code>aria-label="String"</code></th>
+            <td><code>button</code></td>
+            <td>Defines the accessible name of the button (e.g. &quot;Next Year&quot;).</td>
+          </tr>
+        </tbody>
+      </table>
+    </section>
 
     <section>
       <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
@@ -565,70 +565,70 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
           </tr>
         </thead>
         <tbody>
-            <tr data-test-id="grid-role">
-              <th scope="row"><code>grid</code></th>
-              <td></td>
-              <td>
-                <code>table</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Identifies the <code>table</code> element as a <code>grid</code> widget.</li>
-                  <li>Since the <code>grid</code> role is applied to a <code>table</code> element, the <code>row</code>, <code>columnheader</code>, and <code>gridcell</code> roles do not need to be specified because they are implied by <code>tr</code>, <code>th</code>, and <code>td</code> tags.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="grid-aria-labelledby">
-              <td></td>
-              <th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
-              <td><code>table</code></td>
-              <td>Identifies the element that provides the accessible name for the <code>grid</code>.</td>
-            </tr>
-            <tr data-test-id="gridcell-button-tabindex">
-              <td></td>
-              <th scope="row">
-                <code>tabindex="0"</code>
-              </th>
-              <td>
-                <code>td</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Makes the cell focusable and includes it in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>Set dynamically by the JavaScript when the element is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>At any given time, only one <code>gridcell</code> within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="gridcell-button-tabindex">
-              <td></td>
-              <th scope="row">
-                <code>tabindex="-1"</code>
-              </th>
-              <td>
-                <code>td</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Makes the cell focusable and excludes it from the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>Changed dynamically to <code>0</code> by the JavaScript when the cell is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>At any given time, only one <code>gridcell</code> within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
-                  <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
-                </ul>
-              </td>
-            </tr>
-            <tr data-test-id="gridcell-button-aria-selected">
-              <td></td>
-              <th scope="row"><code>aria-selected="true"</code></th>
-              <td><code>td</code></td>
-              <td>
-                <ul>
-                  <li>Identifies the cell containing the currently selected date, i.e., the date value  present in the date input.</li>
-                  <li>Only set on the cell containing the currently selected date; no other cells have <code>aria-selected</code> specified.</li>
-                </ul>
-              </td>
-            </tr>
+          <tr data-test-id="grid-role">
+            <th scope="row"><code>grid</code></th>
+            <td></td>
+            <td>
+              <code>table</code>
+            </td>
+            <td>
+              <ul>
+                <li>Identifies the <code>table</code> element as a <code>grid</code> widget.</li>
+                <li>Since the <code>grid</code> role is applied to a <code>table</code> element, the <code>row</code>, <code>columnheader</code>, and <code>gridcell</code> roles do not need to be specified because they are implied by <code>tr</code>, <code>th</code>, and <code>td</code> tags.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="grid-aria-labelledby">
+            <td></td>
+            <th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
+            <td><code>table</code></td>
+            <td>Identifies the element that provides the accessible name for the <code>grid</code>.</td>
+          </tr>
+          <tr data-test-id="gridcell-button-tabindex">
+            <td></td>
+            <th scope="row">
+              <code>tabindex="0"</code>
+            </th>
+            <td>
+              <code>td</code>
+            </td>
+            <td>
+              <ul>
+                <li>Makes the cell focusable and includes it in the dialog <kbd>Tab</kbd> sequence.</li>
+                <li>Set dynamically by the JavaScript when the element is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
+                <li>At any given time, only one <code>gridcell</code> within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
+                <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="gridcell-button-tabindex">
+            <td></td>
+            <th scope="row">
+              <code>tabindex="-1"</code>
+            </th>
+            <td>
+              <code>td</code>
+            </td>
+            <td>
+              <ul>
+                <li>Makes the cell focusable and excludes it from the dialog <kbd>Tab</kbd> sequence.</li>
+                <li>Changed dynamically to <code>0</code> by the JavaScript when the cell is to be included in the dialog <kbd>Tab</kbd> sequence.</li>
+                <li>At any given time, only one <code>gridcell</code> within the grid is in the dialog <kbd>Tab</kbd> sequence.</li>
+                <li>This approach to managing focus is described in the section on <a href="../../#kbd_roving_tabindex">roving tabindex</a>.</li>
+              </ul>
+            </td>
+          </tr>
+          <tr data-test-id="gridcell-button-aria-selected">
+            <td></td>
+            <th scope="row"><code>aria-selected="true"</code></th>
+            <td><code>td</code></td>
+            <td>
+              <ul>
+                <li>Identifies the cell containing the currently selected date, i.e., the date value  present in the date input.</li>
+                <li>Only set on the cell containing the currently selected date; no other cells have <code>aria-selected</code> specified.</li>
+              </ul>
+            </td>
+          </tr>
         </tbody>
       </table>
       <p>
@@ -653,7 +653,7 @@ <h2>Javascript and CSS Source Code</h2>
     </ul>
   </section>
 
- <section>
+  <section>
     <h2 id="sc1_label">HTML Source Code</h2>
     <div role="separator" id="sc1_start_sep" aria-labelledby="sc1_start_sep sc1_label" aria-label="Start of"></div>
     <pre><code id="source1"></code></pre>

From 7ba2095b80f1c4e793c033a24d99d5866d1d48cd Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 21 Jul 2020 13:24:22 -0500
Subject: [PATCH 45/46] focus now does not go to button onload

---
 examples/dialog-modal/js/datepicker-dialog.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index 61b49da536..1195ca74a8 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -93,7 +93,7 @@ DatePickerDialog.prototype.init = function () {
   }
 
   this.updateGrid();
-  this.close();
+  this.close(false);
   this.setDateForButtonLabel();
 };
 

From d1237b1ad12e7778ff4391453db05f8edb87acad Mon Sep 17 00:00:00 2001
From: Jon Gunderson <jongund@illinois.edu>
Date: Tue, 21 Jul 2020 14:49:57 -0500
Subject: [PATCH 46/46] added feature for two digit year to default to 20xx

---
 examples/dialog-modal/js/datepicker-dialog.js | 14 ++++++++++----
 1 file changed, 10 insertions(+), 4 deletions(-)

diff --git a/examples/dialog-modal/js/datepicker-dialog.js b/examples/dialog-modal/js/datepicker-dialog.js
index 1195ca74a8..707db01a3d 100644
--- a/examples/dialog-modal/js/datepicker-dialog.js
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -311,12 +311,18 @@ DatePickerDialog.prototype.setTextboxDate = function (domNode) {
 DatePickerDialog.prototype.getDateFromTextbox = function () {
 
   var parts = this.textboxNode.value.split('/');
+  var month = parseInt(parts[0]);
+  var day = parseInt(parts[1]);
+  var year = parseInt(parts[2]);
 
   if ((parts.length === 3) &&
-      Number.isInteger(parseInt(parts[0])) &&
-      Number.isInteger(parseInt(parts[1])) &&
-      Number.isInteger(parseInt(parts[2]))) {
-    this.focusDay = new Date(parseInt(parts[2]), parseInt(parts[0]) - 1, parseInt(parts[1]));
+      Number.isInteger(month) &&
+      Number.isInteger(day) &&
+      Number.isInteger(year)) {
+      if (year < 100) {
+        year = 2000 + year;
+      }
+    this.focusDay = new Date(year, month-1, day);
     this.selectedDay = new Date(this.focusDay);
   }
   else {