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.

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

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
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
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