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

Jump to bottom

Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide #2643

Merged
merged 13 commits into from
Jun 6, 2023
Merged

Datepicker Modal Dialog: Fixed next/prev month bug and improve adherence with APG code style guide #2643

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
9d524d5
update cosding practices
jongund Mar 13, 2023
1fce2f2
fixed next/prev month date selection
jongund Mar 13, 2023
ecaa5d9
update CSS to override template styling
jongund Mar 14, 2023
6d0d9ee
updated page up and page down documentation
jongund Mar 14, 2023
4221c76
update regression test for page up key
jongund Mar 14, 2023
311e718
updated regression tests for shift+pagup, pagdown and shift+pagedown
jongund Mar 14, 2023
e3b87e5
Merge remote-tracking branch 'origin/main' into bugfix/datepicker-dialog
mcking65 Apr 4, 2023
41f2149
Merge remote-tracking branch 'origin/main' into bugfix/datepicker-dialog
mcking65 Apr 4, 2023
85eec92
Minor editorial revisions to page up and page down documentation
mcking65 Apr 4, 2023
f488d03
Change IDREF to ID_Reference per issue 1258
mcking65 Apr 4, 2023
46bc0b3
replace " with quot char
mcking65 Apr 4, 2023
92a03d2
updated regression tests
jongund May 16, 2023
e544616
fixed date
jongund May 16, 2023
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
7 changes: 7 additions & 0 deletions content/patterns/dialog-modal/examples/css/datepicker-dialog.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,6 +91,7 @@
color: white;
text-transform: none;
font-weight: bold;
border: none;
}

.datepicker-dialog button {
Expand Down Expand Up @@ -177,11 +178,16 @@
padding-left: 1em;
padding-right: 1em;
padding-top: 1em;
border: none;
border-collapse: separate;
}

.datepicker-dialog table.dates th,
.datepicker-dialog table.dates td {
text-align: center;
background: white;
color: black;
border: none;
}

.datepicker-dialog table.dates tr {
Expand Down Expand Up @@ -210,6 +216,7 @@
.datepicker-dialog table.dates td:hover {
padding: 0;
background-color: hsl(216deg 80% 92%);
color: black;
}

.datepicker-dialog table.dates td:focus {
Expand Down
48 changes: 24 additions & 24 deletions content/patterns/dialog-modal/examples/datepicker-dialog.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ <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>
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.
After a date is chosen, the accessible name of the "Choose Date" button is changed to "Change Date, DATE_STRING" 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>In the dialog, shortcut keys are assigned to the additional buttons for changing the month and year displayed in the calendar.</li>
Expand Down Expand Up @@ -238,15 +238,15 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
<tbody>
<tr data-test-id="dialog-esc">
<th><kbd>ESC</kbd></th>
<td>Closes the dialog and returns focus to the &quot;Choose Date&quot; button.</td>
<td>Closes the dialog and returns focus to the "Choose Date" 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-pattern.html">Grid 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>
<li>If focus is on the last button (i.e., "OK"), moves focus to the first button (i.e. "Previous Year").</li>
</ul>
</td>
</tr>
Expand All @@ -256,7 +256,7 @@ <h3 id="kbd_label_3">Date Picker Dialog</h3>
<ul>
<li>Moves focus to previous element in the dialog <kbd>Tab</kbd> sequence.</li>
<li>Note that, as specified in the <a href="../../grid/grid-pattern.html">Grid 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>
<li>If focus is on the first button (i.e., "Previous Year"), moves focus to the last button (i.e. "OK").</li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -296,9 +296,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 &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>
<li>Select the date, close the dialog, and move focus to the "Choose Date" button.</li>
<li>Update the value of the "Date" input with the selected date.</li>
<li>Update the accessible name of the "Choose Date" button to include the selected date.</li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -332,8 +332,8 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
<ul>
<li>Changes the grid of dates to the previous month.</li>
<li>
Sets focus on the same day of the same week.
If that day does not exist, then moves focus to the same day of the previous or next week.
Moves focus to the day of the month that has the same number.
If that day does not exist, moves focus to the last day of the month.
</li>
</ul>
</td>
Expand All @@ -342,10 +342,10 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
<th><kbd>Shift + Page Up</kbd></th>
<td>
<ul>
<li>Changes the grid of dates to the previous Year.</li>
<li>Changes the grid of dates to the same month in the previous year.</li>
<li>
Sets focus on the same day of the same week.
If that day does not exist, then moves focus to the same day of the previous or next week.
Moves focus to the day of the month that has the same number.
If that day does not exist, moves focus to the last day of the month.
</li>
</ul>
</td>
Expand All @@ -356,8 +356,8 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
<ul>
<li>Changes the grid of dates to the next month.</li>
<li>
Sets focus on the same day of the same week.
If that day does not exist, then moves focus to the same day of the previous or next week.
Moves focus to the day of the month that has the same number.
If that day does not exist, moves focus to the last day of the month.
</li>
</ul>
</td>
Expand All @@ -366,10 +366,10 @@ <h3 id="kbd_label_5">Date Picker Dialog: Date Grid</h3>
<th><kbd>Shift + Page Down</kbd></th>
<td>
<ul>
<li>Changes the grid of dates to the next Year.</li>
<li>Changes the grid of dates to the same month in the next year.</li>
<li>
Sets focus on the same day of the same week.
If that day does not exist, then moves focus to the same day of the previous or next week.
Moves focus to the day of the month that has the same number.
If that day does not exist, moves focus to the last day of the month.
</li>
</ul>
</td>
Expand All @@ -393,8 +393,8 @@ <h3 id="kbd_label_6">Date Picker Dialog: OK and Cancel Buttons</h3>
<td>
Activates the button:
<ul>
<li>&quot;Cancel&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, does not update date in date input.</li>
<li>&quot;OK&quot;: Closes the dialog, moves focus to &quot;Choose Date&quot; button, updates date in date input, updates accessible name of the &quot;Choose Date&quot; button to include the selected date.</li>
<li>"Cancel": Closes the dialog, moves focus to "Choose Date" button, does not update date in date input.</li>
<li>"OK": Closes the dialog, moves focus to "Choose Date" button, updates date in date input, updates accessible name of the "Choose Date" button to include the selected date.</li>
</ul>
</td>
</tr>
Expand All @@ -420,7 +420,7 @@ <h3 id="rps_label_textbox">Textbox</h3>
<tbody>
<tr data-test-id="textbox-aria-describedby">
<td></td>
<th scope="row"><code>aria-describedby="IDREF"</code></th>
<th scope="row"><code>aria-describedby="ID_REFERENCE"</code></th>
<td><code>input</code></td>
<td>Identifies the element that provides an accessible description for the textbox, enabling assistive technologies to associate the date format description with the input.</td>
</tr>
Expand All @@ -446,8 +446,8 @@ <h3 id="rps_label_2">Choose Date Button</h3>
<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>
<li>The initial value of accessible name is "Choose Date".</li>
<li>When users select a date, the accessible name is changed to "Change Date, DATE_STRING" where DATE_STRING is the selected date.</li>
</ul>
</td>
</tr>
Expand Down Expand Up @@ -531,7 +531,7 @@ <h3 id="rps_label_4">Date Picker Dialog: Calendar Navigation Buttons</h3>
<td></td>
<th scope="row"><code>aria-label="String"</code></th>
<td><code>button</code></td>
<td>Defines the accessible name of the button (e.g. &quot;Next Year&quot;).</td>
<td>Defines the accessible name of the button (e.g. "Next Year").</td>
</tr>
</tbody>
</table>
Expand Down Expand Up @@ -564,7 +564,7 @@ <h3 id="rps_label_5">Date Picker Dialog: Date Grid</h3>
</tr>
<tr data-test-id="grid-aria-labelledby">
<td></td>
<th scope="row"><code>aria-labelledby=&quot;IDREF&quot;</code></th>
<th scope="row"><code>aria-labelledby="ID_REFERENCE"</code></th>
<td><code>table</code></td>
<td>Identifies the element that provides the accessible name for the <code>grid</code>.</td>
</tr>
Expand Down
Loading