diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
new file mode 100644
index 000000000..9f0b52ee0
--- /dev/null
+++ b/examples/dialog-modal/css/datepicker-dialog.css
@@ -0,0 +1,248 @@
+.sr-only {
+  position: absolute;
+  top: -2000em;
+  left: -3000em;
+}
+
+.datepicker {
+  margin-top: 1em;
+  position: relative;
+}
+
+.datepicker .group {
+  display: inline-block;
+  position: relative;
+  width: 13em;
+}
+
+.datepicker label {
+  display: block;
+}
+
+.datepicker input {
+  padding: 0;
+  margin: 0;
+  height: 1.5em;
+  background-color: white;
+  color: black;
+  border: 1px solid gray;
+}
+
+.datepicker button.icon {
+  position: relative;
+  top: 0.25em;
+  margin: 0;
+  padding: 4px;
+  border: 0px solid #005a9c;
+  background-color: white;
+  border-radius: 5px;
+}
+
+.datepicker .desc {
+  position: absolute;
+  left: 0;
+  top: 2em;
+}
+
+.datepicker .fa-calendar-alt {
+    color: hsl(216, 89%, 51%);
+}
+
+.datepicker button.icon:focus {
+  outline: none;
+  padding: 2px;
+  border-width: 2px;
+  background-color: #DEF;
+}
+
+.datepicker input:focus {
+  background-color: #DEF;
+  outline: 2px solid #005a9c;
+  outline-offset: 1px;
+}
+
+.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 .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;
+  margin-bottom: 1em;
+  margin-right: 1em;
+}
+
+.datepicker-dialog .dialog-ok-cancel-group button {
+  padding: 6px;
+  margin-left: 1em;
+  width: 5em;
+  background-color: hsl(216, 80%, 92%);
+  font-size: 0.85em;
+  color: black;
+  outline: none;
+  border-radius: 5px;
+}
+
+.datepicker-dialog .dialog-button:focus {
+  padding: 4px;
+  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%);
+}
+
+.datepicker-dialog .month-year {
+  display: inline-block;
+  width: 12em;
+  text-align: center;
+}
+
+.datepicker-dialog table.dates {
+  padding-left: 1em;
+  padding-right: 1em;
+  padding-top: 1em;
+}
+
+.datepicker-dialog table.dates th,
+.datepicker-dialog table.dates td {
+  text-align: center;
+}
+
+.datepicker-dialog table.dates tr {
+  border: 1px solid black;
+}
+
+.datepicker-dialog table.dates td {
+  padding: 3px;
+  margin: 0;
+  line-height: inherit;
+  height: 40px;
+  width: 40px;
+  border-radius: 5px;
+  font-size: 15px;
+  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;
+  background-color: hsl(216, 80%, 92%);
+}
+
+.datepicker-dialog table.dates td:focus {
+  padding: 1px;
+  border: 2px solid rgb(100, 100, 100);
+  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);
+}
+
+.datepicker-dialog table.dates td[aria-selected]:focus {
+  padding: 1px;
+  border: 2px solid rgb(100, 100, 100);
+}
+
+.datepicker-dialog table.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 cb367e06c..000000000
--- 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 4ea5abf43..b72902e1a 100644
--- a/examples/dialog-modal/datepicker-dialog.html
+++ b/examples/dialog-modal/datepicker-dialog.html
@@ -8,15 +8,13 @@
 <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>
 
-<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>
+<!--  js and css specific to this example -->
+<link href="css/datepicker-dialog.css" rel="stylesheet">
+<script src="js/datepicker-dialog.js"></script>
 </head>
 <body>
   <nav aria-label="Related Links" class="feedback">
@@ -53,59 +51,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-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">
+              <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">
+             aria-label="Choose Date">
 
           <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"
+            <h2 id="id-grid-label"
+                  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
-            id="myDatepickerGrid"
+         <table
             class="dates"
             role="grid"
-            aria-labelledby="id-dialog-label">
+            aria-labelledby="id-grid-label">
             <thead>
               <tr>
                 <th scope="col" abbr="Sunday">Su</th>
@@ -120,70 +120,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 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>
-                <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>
@@ -195,15 +196,25 @@ <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 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>
   </section>
@@ -221,18 +232,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></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">
+            <th><kbd>Space</kbd>,<br><kbd>Enter</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>
@@ -247,30 +258,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 <q>Choose Date</q> 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., <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 + 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>
+          <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>
@@ -285,12 +296,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>
@@ -309,9 +320,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>
@@ -380,142 +391,167 @@ <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><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>
-                </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>
 
   <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 textbox, 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>
-        <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 <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>
-          </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-labelledby">
-                <td></td>
-                <th scope="row"><code>aria-labelledby="IDREF"</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">
-                <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. <q>Next Year</q>).</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>
+    <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>
@@ -529,71 +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>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>aria-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-button-tabindex">
-              <td></td>
-              <th scope="row">
-                <code>tabindex="0"</code>
-              </th>
-              <td>
-                <code>button</code>
-              </td>
-              <td>
-                <ul>
-                  <li>Makes the button 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>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>button</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>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>button</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>
-                </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>
@@ -609,20 +644,16 @@ <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.js" type="text/javascript">datepicker-dialog.js</a>
       </li>
     </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>
diff --git a/examples/dialog-modal/js/calendar-button.js b/examples/dialog-modal/js/calendar-button.js
deleted file mode 100644
index 62fe32575..000000000
--- a/examples/dialog-modal/js/calendar-button.js
+++ /dev/null
@@ -1,112 +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
-*/
-
-'use strict';
-
-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 3b1ba71dd..000000000
--- a/examples/dialog-modal/js/datepicker-day.js
+++ /dev/null
@@ -1,176 +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
-*/
-
-'use strict';
-
-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 000000000..707db01a3
--- /dev/null
+++ b/examples/dialog-modal/js/datepicker-dialog.js
@@ -0,0 +1,772 @@
+/*
+*   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
+*/
+
+'use strict';
+
+var DatePickerDialog = function (cdp) {
+  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'];
+
+  this.messageCursorKeys = 'Cursor keys can navigate dates';
+  this.lastMessage = '';
+
+  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');
+
+  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.textboxNode.addEventListener('blur',   this.setDateForButtonLabel.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);
+  this.setDateForButtonLabel();
+};
+
+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 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 (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 dates are disabled (e.g. in next month)
+    if (i === 35) {
+      if (flag) {
+        this.lastRowNode.style.visibility = 'hidden';
+      }
+      else {
+        this.lastRowNode.style.visibility = 'visible';
+      }
+    }
+  }
+};
+
+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.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;
+    }
+  }
+};
+
+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.setFocusDay = function (flag) {
+
+  if (typeof flag !== 'boolean') {
+    flag = true;
+  }
+
+  for (var i = 0; i < this.days.length; i++) {
+    var dayNode = this.days[i];
+    var day = this.getDayFromDataDateAttribute(dayNode);
+
+    dayNode.tabIndex = -1;
+    if (this.isSameDay(day, this.focusDay)) {
+      dayNode.tabIndex = 0;
+      if (flag) {
+        dayNode.focus();
+      }
+    }
+  }
+};
+
+DatePickerDialog.prototype.open = function () {
+  this.dialogNode.style.display = 'block';
+  this.dialogNode.style.zIndex = 2;
+
+  this.getDateFromTextbox();
+  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';
+
+  if (flag) {
+    this.buttonNode.focus();
+  }
+};
+
+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]);
+};
+// Textbox methods
+
+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();
+
+};
+
+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(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 {
+    // 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 () {
+
+  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 {
+    // If not a valid date, initialize with "Choose Date"
+    this.buttonNode.setAttribute('aria-label', this.buttonLabelChoose);
+  }
+};
+
+DatePickerDialog.prototype.setMessage = function (str) {
+
+  function setMessageDelayed () {
+    this.messageNode.textContent = str;
+  }
+
+  if (str !== this.lastMessage) {
+    setTimeout(setMessageDelayed.bind(this), 200);
+    this.lastMessage = str;
+  }
+};
+
+// Event handlers
+
+
+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.setTextboxDate();
+      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.handleDayKeyDown = function (event) {
+  var flag = false;
+
+  switch (event.key) {
+
+    case "Esc":
+    case "Escape":
+      this.close();
+      break;
+
+    case " ":
+      this.setTextboxDate(event.currentTarget);
+      flag = true;
+      break;
+
+    case "Enter":
+      this.setTextboxDate(event.currentTarget);
+      this.close();
+      flag = true;
+      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.setTextboxDate(event.currentTarget);
+    this.close();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+
+};
+
+DatePickerDialog.prototype.handleDayFocus = function () {
+  this.setMessage(this.messageCursorKeys);
+};
+
+DatePickerDialog.prototype.handleButtonKeydown = function (event) {
+
+  if ((event.key === 'Enter') ||
+      (event.key === ' ')) {
+    this.open();
+    this.setFocusDay();
+
+    event.stopPropagation();
+    event.preventDefault();
+  }
+
+};
+
+DatePickerDialog.prototype.handleButtonClick = function (event) {
+  if (this.isOpen()) {
+    this.close();
+  }
+  else {
+    this.open();
+    this.setFocusDay();
+  }
+
+  event.stopPropagation();
+  event.preventDefault();
+};
+
+DatePickerDialog.prototype.handleBackgroundMouseUp = function (event) {
+  if (!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) {
+    new DatePickerDialog(dp);
+  });
+
+});
diff --git a/examples/dialog-modal/js/datepicker.js b/examples/dialog-modal/js/datepicker.js
deleted file mode 100644
index c53806ac9..000000000
--- 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
-*/
-
-'use strict';
-
-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;
-  }
-};
diff --git a/test/tests/dialog-modal_datepicker.js b/test/tests/dialog-modal_datepicker.js
index 372d81693..2e7c5d709 100644
--- a/test/tests/dialog-modal_datepicker.js
+++ b/test/tests/dialog-modal_datepicker.js
@@ -17,30 +17,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)',
+  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"] button[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.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"]'
 };
@@ -97,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) => {
@@ -126,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 tabbableEl = 0; tabbableEl < 30; tabbableEl++) {
@@ -151,15 +150,15 @@ ariaTest('Roving tab index on dates in gridcell', exampleFile, 'gridcell-button-
 });
 
 ariaTest('aria-selected on selected date', exampleFile, 'gridcell-button-aria-selected', async (t) => {
-  
+
   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.queryElements(t, `${ex.allDateButtons}[aria-selected="true"]`);
+  let selectedButtons = await t.context.queryElements(t, `${ex.allDates}[aria-selected="true"]`);
 
   t.is(
     selectedButtons.length,
@@ -167,11 +166,11 @@ 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.queryElements(t, `${ex.allDateButtons}[aria-selected="true"]`);
+  selectedButtons = await t.context.queryElements(t, `${ex.allDates}[aria-selected="true"]`);
 
   t.is(
     selectedButtons.length,
@@ -184,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);
 
@@ -195,9 +194,9 @@ ariaTest('ENTER to open datepicker', exampleFile, 'button-space-return-down-arro
   );
 });
 
-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(Key.SPACE);
+  chooseDateButton.sendKeys(' ');
 
   t.not(
     await t.context.session.findElement(By.css(ex.dialogSelector)).getCssValue('display'),
@@ -207,12 +206,12 @@ ariaTest('SPACE to open datepicker', exampleFile, 'button-space-return-down-arro
 });
 
 ariaTest('Sending key ESC when focus is in dialog closes dialog', exampleFile, 'dialog-esc', async (t) => {
-  
+
   let chooseDateButton = await t.context.session.findElement(By.css(ex.buttonSelector));
 
   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);
 
@@ -231,7 +230,7 @@ ariaTest('Sending key ESC when focus is in dialog closes dialog', exampleFile, '
 });
 
 ariaTest('Tab should go through all tabbable items, then loop', exampleFile, 'dialog-tab', async (t) => {
-  
+
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
 
   for (let itemSelector of ex.allFocusableElementsInDialog) {
@@ -250,7 +249,6 @@ ariaTest('Tab should go through all tabbable items, then loop', exampleFile, 'di
 });
 
 ariaTest('Shift+tab should send focus backwards through dialog, then loop', exampleFile, 'dialog-shift-tab', async (t) => {
-  
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
 
   await t.context.session.findElement(By.css(ex.allFocusableElementsInDialog[0]))
@@ -269,7 +267,7 @@ ariaTest('Shift+tab should send focus backwards through dialog, then loop', exam
 });
 
 ariaTest('ENTER to buttons change calendar and date in focus', exampleFile, 'month-year-button-space-return', async (t) => {
-  
+
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   // By default, focus will be on todays date.
   let day = new Date();
@@ -279,7 +277,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(
@@ -292,7 +290,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(
@@ -305,7 +303,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(
@@ -319,7 +317,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(
@@ -330,7 +328,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) => {
-  
+
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   // By default, focus will be on todays date.
   let day = new Date();
@@ -340,7 +338,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(
@@ -353,7 +351,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(
@@ -366,7 +364,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(
@@ -380,7 +378,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(
@@ -391,12 +389,12 @@ 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) => {
-  
+
   // 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.todayButton)).sendKeys(Key.ENTER);
+  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'),
     `${day.getMonth() + 1}/${day.getDate()}/${day.getFullYear()}`,
@@ -404,29 +402,29 @@ 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(' ');
+
   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) => {
-  
+
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 
   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]
     );
@@ -434,17 +432,17 @@ ariaTest('UP ARROW moves date up by week', exampleFile, 'grid-up-arrow', async (
 });
 
 ariaTest('DOWN ARROW moves date down by week', exampleFile, 'grid-down-arrow', async (t) => {
-  
+
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 
   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]
     );
@@ -452,17 +450,17 @@ ariaTest('DOWN ARROW moves date down by week', exampleFile, 'grid-down-arrow', a
 });
 
 ariaTest('RIGHT ARROW moves date greater by one', exampleFile, 'grid-right-arrow', async (t) => {
-  
+
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 
   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]
     );
@@ -470,17 +468,17 @@ ariaTest('RIGHT ARROW moves date greater by one', exampleFile, 'grid-right-arrow
 });
 
 ariaTest('LEFT ARROW moves date previous one', exampleFile, 'grid-left-arrow', async (t) => {
-  
+
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   let day = new Date();
 
   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]
     );
@@ -491,17 +489,17 @@ ariaTest('Key HOME sends focus to beginning of row', exampleFile, 'grid-home', a
     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]
   );
@@ -511,18 +509,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]
   );
@@ -532,18 +530,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]
   );
@@ -553,18 +551,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]
   );
@@ -574,18 +572,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]
   );
@@ -595,18 +593,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]
   );
@@ -614,7 +612,7 @@ ariaTest('Sending SHIFT+PAGE DOWN moves focus back by year', exampleFile, 'grid-
 
 ariaTest('ENTER on cancel button does not select date', exampleFile, 'okay-cancel-button-space-return', async (t) => {
 
-  
+
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   await t.context.session.findElement(By.css(ex.cancelButton)).sendKeys(Key.ENTER);
   t.is(
@@ -630,7 +628,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'),
@@ -646,7 +644,7 @@ ariaTest('ENTER on cancel button does not select date', exampleFile, 'okay-cance
 
 ariaTest('SPACE on cancel button does not select date', exampleFile, 'okay-cancel-button-space-return', async (t) => {
 
-  
+
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
   await t.context.session.findElement(By.css(ex.cancelButton)).sendKeys(Key.SPACE);
   t.is(
@@ -662,7 +660,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'),
@@ -678,7 +676,7 @@ ariaTest('SPACE on cancel button does not select date', exampleFile, 'okay-cance
 
 ariaTest('ENTER on ok button does selects date', exampleFile, 'okay-cancel-button-space-return', async (t) => {
 
-  
+
   let day = new Date();
 
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
@@ -696,7 +694,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'),
@@ -712,7 +710,7 @@ ariaTest('ENTER on ok button does selects date', exampleFile, 'okay-cancel-butto
 
 ariaTest('SPACE on ok button does selects date', exampleFile, 'okay-cancel-button-space-return', async (t) => {
 
-  
+
   let day = new Date();
 
   await t.context.session.findElement(By.css(ex.buttonSelector)).click();
@@ -730,7 +728,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'),