Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Date Picker Dialog Example: Improve high contrast support and refactor javascript #1362

Merged
merged 52 commits into from
Jul 24, 2020
Merged

Date Picker Dialog Example: Improve high contrast support and refactor javascript #1362

Show file tree
Hide file tree
Changes from 9 commits
Commits
Show all changes
52 commits
Select commit Hold shift + click to select a range
10a8f12
updated datepicker dialog example
jongund Mar 30, 2020
7d704c5
updated datepicker dialog box example
jongund Mar 30, 2020
27eed2c
updated date picker menu button
jongund Mar 31, 2020
7ade8e9
updated menu button datepicker dialog example
jongund Mar 31, 2020
8ba65a0
fixed references to source code
jongund Mar 31, 2020
0506bbe
fixed references to source code
jongund Mar 31, 2020
447fb56
fixed extra > in keyboard definition
jongund Mar 31, 2020
0660a5a
updated tests to identify failing tests due to Issue 1358
jongund Mar 31, 2020
709bf0f
updated test with SPACE key
jongund Apr 1, 2020
bf35a0b
fixed failing tests for datepicker dialog example
jongund Apr 3, 2020
01e8047
updated focus and aria-selected styling for high contrast support
jongund Apr 3, 2020
93253f5
updated focus styling to use solid borders
jongund Apr 22, 2020
bdbb108
improved high contrast support
jongund May 5, 2020
98ac01f
improved higher contrast support
jongund May 5, 2020
78f2b2a
updated regression test, but it has two failures now
jongund May 6, 2020
4d43300
updated high contrast documentation
jongund May 6, 2020
582e51d
updated documentation on high contrast support
jongund May 6, 2020
1ef3a67
updated documentation on high contrast support
jongund May 6, 2020
5c0b5fe
updated documentation on high contrast support
jongund May 6, 2020
e3c7836
Fix reference to undefined property ex.allDateButtons
zcorpan May 15, 2020
72c9a83
Change to queryElements, add missing awaits
zcorpan May 15, 2020
f5d679b
removed file that should not have been part of the pull request
jongund May 26, 2020
9c3263f
merged master and added use strict
jongund Jul 6, 2020
91256c5
added description of date format
jongund Jul 7, 2020
2604823
added description to date format for textbox
jongund Jul 7, 2020
a5d1977
removed click event from textbox
jongund Jul 7, 2020
d2fc15c
fixed HTML linting errors
jongund Jul 7, 2020
d616feb
made some code improvements
jongund Jul 8, 2020
2da4090
improved code
jongund Jul 8, 2020
12ae1d1
improved code
jongund Jul 8, 2020
ef6f479
merged master
jongund Jul 14, 2020
2eb3ab7
fixed merge bugs and updated choose date button labels
jongund Jul 14, 2020
69914e0
fixed merge bug
jongund Jul 14, 2020
cfba542
removed aria-exapnded from JS code
jongund Jul 14, 2020
7595e3c
Merge branch 'master' into issue1360-update-datepicker-dialog-example
mcking65 Jul 17, 2020
149b6db
Editorial revisions to accessibility section
mcking65 Jul 17, 2020
2932da8
Remove non-semantic use of q tags in kb section
mcking65 Jul 17, 2020
163144f
Remove non-semantic use of q tags in states and props section
mcking65 Jul 17, 2020
93f3190
Include updating button name in description of OK button
mcking65 Jul 17, 2020
b42446e
change combobox to textbox in description of aria-describedby on textbox
mcking65 Jul 17, 2020
e14ba39
Revise description of choose date button name change
mcking65 Jul 17, 2020
a18cc26
add missing comma in dialog table
mcking65 Jul 17, 2020
18649b0
Move h2 live region description to dialog states and props table
mcking65 Jul 17, 2020
f54ec10
Minor editorial revisions
mcking65 Jul 17, 2020
42cc230
Grid states and props table: change button to td or gridcell as appro…
mcking65 Jul 17, 2020
a710bb1
white space changes
mcking65 Jul 17, 2020
d950184
removed autocomplete from textbox and down arrow from opening dialog
jongund Jul 17, 2020
53e5058
Fix whitespace
mcking65 Jul 17, 2020
174702d
Merge branch 'master' into issue1360-update-datepicker-dialog-example
mcking65 Jul 17, 2020
dfc7bd3
Merge branch 'master' into issue1360-update-datepicker-dialog-example
jongund Jul 21, 2020
7ba2095
focus now does not go to button onload
jongund Jul 21, 2020
d1237b1
added feature for two digit year to default to 20xx
jongund Jul 21, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
134 changes: 71 additions & 63 deletions examples/dialog-modal/css/datepicker.css → ...es/dialog-modal/css/datepicker-dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,48 +3,65 @@
position: relative;
}

.datepicker .group {
display: inline-flex;
}

.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 {
padding: 4px;
margin: 0;
border: transparent 2px solid;
border-radius: 5px;
text-align: left;
margin-left: 10px;
padding: 3px;
margin: 0;
border: 0px solid #005a9c;
background-color: white;
border-radius: 5px;
position: relative;
left: -4px;
top: 3px;
left: 5px;
top: -4px;
}

.datepicker button.icon:focus {
outline: none;
border-color: hsl(216, 80%, 51%);
.datepicker .fa-calendar-alt {
color: hsl(216, 89%, 51%);
}

.datepicker span.arrow {
margin: 0;
padding: 0;
display: none;
background: transparent;
.datepicker button.icon:focus {
outline: none;
padding: 1px;
border-width: 2px;
background-color: #DEF;
}

.datepicker input {
margin: 0;
width: 20%;
.datepicker input:focus {
background-color: #DEF;
outline: 2px solid #005a9c;
outline-offset: 1px;
}

.datepicker .datepickerDialog {
.datepicker-dialog {
position: absolute;
width: 45%;
width: 320px;
clear: both;
display: none;
border: 3px solid hsl(216, 80%, 51%);
margin-top: 1em;
border-radius: 5px;
padding: 0;
background-color: #fff;
}

.datepicker .header {
.datepicker-dialog .header {
cursor: default;
background-color: hsl(216, 80%, 51%);
padding: 7px;
Expand All @@ -55,7 +72,7 @@
justify-content: space-around;
}

.datepicker .header h2 {
.datepicker-dialog h2 {
margin: 0;
padding: 0;
display: inline-block;
Expand All @@ -65,43 +82,47 @@
font-weight: bold;
}

.datepicker .header button {
.datepicker-dialog button {
border-style: none;
background: transparent;
}

.datepicker .datepickerDialog button::-moz-focus-inner {
.datepicker-dialog button::-moz-focus-inner {
border: 0;
}

.datepicker .prevYear,
.datepicker .prevMonth,
.datepicker .nextMonth,
.datepicker .nextYear {
.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 .prevYear:focus,
.datepicker .prevMonth:focus,
.datepicker .nextMonth:focus,
.datepicker .nextYear:focus {
.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 .dialogButtonGroup {
.datepicker-dialog .dialog-ok-cancel-group {
text-align: right;
margin-top: 1em;
margin-bottom: 1em;
margin-right: 1em;
}

.datepicker .dialogButton {
.datepicker-dialog .dialog-ok-cancel-group button {
padding: 5px;
margin-left: 1em;
width: 5em;
Expand All @@ -113,83 +134,70 @@
border-radius: 5px;
}

.datepicker .dialogButton:focus {
.datepicker-dialog .dialog-button:focus {
padding: 4px;
border: 2px solid black;
}

.datepicker .fa-calendar-alt {
.datepicker-dialog .fa-calendar-alt {
color: hsl(216, 89%, 51%);
}

.datepicker .monthYear {
.datepicker-dialog .month-year {
display: inline-block;
width: 12em;
text-align: center;
}

.datepicker table.dates {
width: 100%;
.datepicker-dialog table.dates {
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
}

.datepicker table.dates th,
.datepicker table.dates td {
.datepicker-dialog table.dates th,
.datepicker-dialog table.dates td {
text-align: center;
}

.datepicker .dateRow {
.datepicker-dialog table.dates tr {
border: 1px solid black;
}

.datepicker .dateCell {
outline: 0;
border: 0;
padding: 0;
.datepicker-dialog table.dates td {
padding: 1px;
margin: 0;
line-height: inherit;
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 {
.datepicker-dialog table.dates td:focus,
.datepicker-dialog table.dates td:hover {
padding: 0;
background-color: hsl(216, 80%, 92%);
}

.datepicker .dateButton:focus {
.datepicker-dialog table.dates td:focus {
border-width: 2px;
border-color: rgb(100, 100, 100);
outline: 0;
}

.datepicker .dateButton[aria-selected] {
.datepicker-dialog table.dates td[aria-selected] {
border-color: rgb(100, 100, 100);
}

.datepicker .dateButton[tabindex="0"] {
.datepicker-dialog table.dates td[tabindex="0"] {
background-color: hsl(216, 80%, 92%);
}

.datepicker .disabled {
visibility: hidden;
}

.datepicker .message {
.datepicker-dialog .dialog-message {
padding-top: 0.25em;
padding-left: 1em;
height: 1.75em;
Expand Down
Loading