Skip to content

Commit

Permalink
Datepicker Modal Dialog: Fixed next/prev month bug and improve adhere…
Browse files Browse the repository at this point in the history 
…nce with APG code style guide (pull #2643)

This PR complements PR #2618 to provide the remaining changes to resolve issue #2581.

This PR changes behavior of commands for next and previous month and year In the date picker dialog when the currently focused date does not exist in the previous or next month or year. With these changes, if the same day number does not exist in the newly displayed month, the last day of the newly displayed month receives focus.

In addition to the above enhancement, this PR also includes the following changes:
* Updates coding practices to use `class` constructor and pointer events
* Updates documentation of page up and page down commands
* Updates regression tests for page up and page down commands

---------

Co-authored-by: Matt King <a11yThinker@gmail.com>
  • Loading branch information
@jongund @mcking65
jongund and mcking65 authored Jun 6, 2023
1 parent ca63ddf commit 32c7ef2
Show file tree
Hide file tree
Showing 4 changed files with 894 additions and 808 deletions.
7 changes: 7 additions & 0 deletions content/patterns/dialog-modal/examples/css/datepicker-dialog.css
View file
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
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

0 comments on commit 32c7ef2

Please sign in to comment.