diff --git a/examples/dialog-modal/css/datepicker-dialog.css b/examples/dialog-modal/css/datepicker-dialog.css
new file mode 100644
index 0000000000..9f0b52ee0f
--- /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 cb367e06c7..0000000000
--- a/examples/dialog-modal/css/datepicker.css
+++ /dev/null
@@ -1,198 +0,0 @@
-.datepicker {
-  margin-top: 1em;
-  position: relative;
-}
-
-.datepicker button.icon {
-  padding: 4px;
-  margin: 0;
-  border: transparent 2px solid;
-  border-radius: 5px;
-  text-align: left;
-  background-color: white;
-  position: relative;
-  left: -4px;
-  top: 3px;
-}
-
-.datepicker button.icon:focus {
-  outline: none;
-  border-color: hsl(216, 80%, 51%);
-}
-
-.datepicker span.arrow {
-  margin: 0;
-  padding: 0;
-  display: none;
-  background: transparent;
-}
-
-.datepicker input {
-  margin: 0;
-  width: 20%;
-}
-
-.datepicker .datepickerDialog {
-  position: absolute;
-  width: 45%;
-  clear: both;
-  display: none;
-  border: 3px solid hsl(216, 80%, 51%);
-  margin-top: 1em;
-  border-radius: 5px;
-  padding: 0;
-  background-color: #fff;
-}
-
-.datepicker .header {
-  cursor: default;
-  background-color: hsl(216, 80%, 51%);
-  padding: 7px;
-  font-weight: bold;
-  text-transform: uppercase;
-  color: white;
-  display: flex;
-  justify-content: space-around;
-}
-
-.datepicker .header h2 {
-  margin: 0;
-  padding: 0;
-  display: inline-block;
-  font-size: 1em;
-  color: white;
-  text-transform: none;
-  font-weight: bold;
-}
-
-.datepicker .header button {
-  border-style: none;
-  background: transparent;
-}
-
-.datepicker .datepickerDialog button::-moz-focus-inner {
-  border: 0;
-}
-
-.datepicker .prevYear,
-.datepicker .prevMonth,
-.datepicker .nextMonth,
-.datepicker .nextYear {
-  padding: 4px;
-  width: 24px;
-  height: 24px;
-  color: white;
-}
-
-.datepicker .prevYear:focus,
-.datepicker .prevMonth:focus,
-.datepicker .nextMonth:focus,
-.datepicker .nextYear:focus {
-  padding: 2px;
-  border: 2px solid white;
-  border-radius: 4px;
-  outline: 0;
-}
-
-.datepicker .dialogButtonGroup {
-  text-align: right;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  margin-right: 1em;
-}
-
-.datepicker .dialogButton {
-  padding: 5px;
-  margin-left: 1em;
-  width: 5em;
-  background-color: hsl(216, 80%, 92%);
-  font-size: 0.85em;
-  color: black;
-  outline: none;
-  border: 1px solid hsl(216, 80%, 92%);
-  border-radius: 5px;
-}
-
-.datepicker .dialogButton:focus {
-  padding: 4px;
-  border: 2px solid black;
-}
-
-.datepicker .fa-calendar-alt {
-  color: hsl(216, 89%, 51%);
-}
-
-.datepicker .monthYear {
-  display: inline-block;
-  width: 12em;
-  text-align: center;
-}
-
-.datepicker table.dates {
-  width: 100%;
-  padding-left: 1em;
-  padding-right: 1em;
-  padding-top: 1em;
-}
-
-.datepicker table.dates th,
-.datepicker table.dates td {
-  text-align: center;
-}
-
-.datepicker .dateRow {
-  border: 1px solid black;
-}
-
-.datepicker .dateCell {
-  outline: 0;
-  border: 0;
-  padding: 0;
-  margin: 0;
-  height: 40px;
-  width: 40px;
-}
-
-.datepicker .dateButton {
-  padding: 0;
-  margin: 0;
-  line-height: inherit;
-  height: 100%;
-  width: 100%;
-  border: 1px solid #eee;
-  border-radius: 5px;
-  font-size: 15px;
-  background: #eee;
-}
-
-.datepicker .dateButton:focus,
-.datepicker .dateButton:hover {
-  padding: 0;
-  background-color: hsl(216, 80%, 92%);
-}
-
-.datepicker .dateButton:focus {
-  border-width: 2px;
-  border-color: rgb(100, 100, 100);
-  outline: 0;
-}
-
-.datepicker .dateButton[aria-selected] {
-  border-color: rgb(100, 100, 100);
-}
-
-.datepicker .dateButton[tabindex="0"] {
-  background-color: hsl(216, 80%, 92%);
-}
-
-.datepicker .disabled {
-  visibility: hidden;
-}
-
-.datepicker .message {
-  padding-top: 0.25em;
-  padding-left: 1em;
-  height: 1.75em;
-  background: hsl(216, 80%, 51%);
-  color: white;
-}
diff --git a/examples/dialog-modal/datepicker-dialog.html b/examples/dialog-modal/datepicker-dialog.html
index 4ea5abf432..b72902e1ad 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 62fe325754..0000000000
--- 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 3b1ba71ddc..0000000000
--- 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 0000000000..707db01a3d
--- /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 c53806ac91..0000000000
--- a/examples/dialog-modal/js/datepicker.js
+++ /dev/null
@@ -1,579 +0,0 @@
-/*
-*   This content is licensed according to the W3C Software License at
-*   https://www.w3.org/Consortium/Legal/2015/copyright-software-and-document
-*
-*   File:   datepicker.js
-*/
-
-'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/index.html b/index.html
index c23d1ba4bc..2a8dad4342 100644
--- a/index.html
+++ b/index.html
@@ -150,16 +150,16 @@
       "aliasOf": "WAI-ARIA-1.1"
     }
   },
-  "publishDate": "2020-07-19",
-  "publishISODate": "2020-07-19T00:00:00.000Z",
-  "generatedSubtitle": "Editor's Draft 19 July 2020"
+  "publishDate": "2020-07-24",
+  "publishISODate": "2020-07-24T00:00:00.000Z",
+  "generatedSubtitle": "Editor's Draft 24 July 2020"
 }</script><link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/W3C-ED"></head>
 <body class="h-entry informative"><div class="head">
     <a class="logo" href="https://www.w3.org/"><img alt="W3C" width="72" height="48" src="https://www.w3.org/StyleSheets/TR/2016/logos/W3C"></a> <h1 id="title" class="title">WAI-ARIA Authoring Practices 1.2</h1>
     
     <h2>
       W3C Editor's Draft
-      <time class="dt-published" datetime="2020-07-19">19 July 2020</time>
+      <time class="dt-published" datetime="2020-07-24">24 July 2020</time>
     </h2>
     <dl>
       <dt>This version:</dt><dd>
@@ -7292,7 +7292,7 @@ <h3 id="c-4-enabling-funders"><bdi class="secno">C.4 </bdi>Enabling funders<a cl
 
 
   </section>
-<script type="text/javascript">(function(){window['__CF$cv$params']={r:'5b5329d2bdeee740',m:'0076a08d90b41121558f9ab30f83cb6aa5ce9bc5-1595148296-1800-Abash48U+rKT9xrLsaO3lsBypbrLHj8kMfcTN8Of861ElmwXO46FBEWk5xIB097XTbuUa3XxQRXn9pmZOreojDrCA9Gi4Bbw/6u/645fGqcyEU4/kAr5Vr5PVMVOYTJI51NpAuUxxn5Y6fbqtzrWPUrQdvLCTSM4o2/T52RxAFQn6TOzHvHImYWAtC46T0QedqDxRqzh1fv9SnZGhSBqhVw=',s:[0x6d9f600210,0x33dcd49716],}})();</script>
+<script type="text/javascript">(function(){window['__CF$cv$params']={r:'5b8146240826e740',m:'f188ea6abe9ea8ea2cec906b9e4889074959f44a-1595631801-1800-AUkG5hU34qwv8JpprTaBXHIIknp4jEbvO2GD18TEMX3Tk/UO51xZg5i6KB0Sg4A+AfduOh2Uomkl2jq+SnrUqHv/pQhC29AtieHM+CSOvkc8tw3QTLIG/lT6hK+MyaHG6JP2s37WSgCDcO1TyWZzQqusqvmZxzu7dzMr5Mp0aCQqK6Sp+n7E+xRmu4W/vm6T+o1rzSxudi/IujB6aEA82GE=',s:[0x2e241782ee,0xb1001f8025],}})();</script>
 
 <section id="references" class="appendix"><h2 id="d-references"><bdi class="secno">D. </bdi>References<a class="self-link" aria-label="§" href="#references"></a></h2><section id="informative-references">
       <h3 id="d-1-informative-references"><bdi class="secno">D.1 </bdi>