Date Picker Dialog Example: Improve high contrast support and refacto…

…r javascript (pull #1362) Resolves #1360 with the following changes: * Updates Javascript to use a single object. * Fixes space key issues in grid. * Improves high contrast support. Co-authored-by: Simon Pieters <zcorpan@gmail.com> Co-authored-by: Matt King <a11yThinker@Gmail.com>
w3c · Jul 24, 2020 · 733ceab · 733ceab
1 parent bb967a6
commit 733ceab
Show file tree

Hide file tree

Showing 8 changed files with 1,470 additions and 1,486 deletions.
diff --git a/examples/dialog-modal/css/datepicker-dialog.css 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;
+}