Visitar URL original
USWDS- Date Picker: Improve screen reader keyboard navigation by mahoneycm · Pull Request #5374 · uswds/uswds · GitHub
Skip to content

USWDS- Date Picker: Improve screen reader keyboard navigation #5374

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

Merged
thisisdano merged 15 commits into from
Oct 30, 2023
Merged

USWDS- Date Picker: Improve screen reader keyboard navigation #5374

Changes from all commits
Commits
Show all changes
15 commits
Select commit Hold shift + click to select a range
b6f4ffd
Update table rolls
mahoneycm Jul 12, 2023
60643e0
Comment out grid role from table
mahoneycm Jul 17, 2023
5a4f4bb
Try role application
mahoneycm Jul 17, 2023
4b3564d
Set wrapper div to role='application'
mahoneycm Jul 25, 2023
568be81
Revert table role to dialog
mahoneycm Jul 26, 2023
348200a
Revert table role to dialog
mahoneycm Jul 26, 2023
47493cd
Set table role back to application; add aria-label
mahoneycm Jul 26, 2023
a510f42
Test moving aria-label to table
mahoneycm Jul 28, 2023
7d18e84
Remove aria-modal and label
mahoneycm Jul 28, 2023
d6b978d
Change table wrapper role to presentation
mahoneycm Jul 28, 2023
3d2618a
Revert table wrapper to role application
mahoneycm Jul 31, 2023
bbeb493
Restore presentation roles to year and month calendars
mahoneycm Jul 31, 2023
dc16e4f
Merge branch 'develop' of github.com:uswds/uswds into cm-date-picker-…
mahoneycm Jul 31, 2023
e926de8
Merge branch 'develop' of github.com:uswds/uswds into cm-date-picker-…
mahoneycm Aug 28, 2023
5af2fda
Remove 'click to' language from date picker
mahoneycm Sep 14, 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
10 changes: 4 additions & 6 deletions packages/usa-date-picker/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -884,7 +884,7 @@ const enhanceDatePicker = (el) => {
"beforeend",
Sanitizer.escapeHTML`
<button type="button" class="${DATE_PICKER_BUTTON_CLASS}" aria-haspopup="true" aria-label="Toggle calendar"></button>
<div class="${DATE_PICKER_CALENDAR_CLASS}" role="dialog" aria-modal="true" hidden></div>
<div class="${DATE_PICKER_CALENDAR_CLASS}" role="application" hidden></div>
<div class="usa-sr-only ${DATE_PICKER_STATUS_CLASS}" role="status" aria-live="polite"></div>`
);

Expand Down Expand Up @@ -1089,11 +1089,11 @@ const renderCalendar = (el, _dateToDisplay) => {
<div class="${CALENDAR_CELL_CLASS} ${CALENDAR_MONTH_LABEL_CLASS}">
<button
type="button"
class="${CALENDAR_MONTH_SELECTION_CLASS}" aria-label="${monthLabel}. Click to select month"
class="${CALENDAR_MONTH_SELECTION_CLASS}" aria-label="${monthLabel}. Select month"
>${monthLabel}</button>
<button
type="button"
class="${CALENDAR_YEAR_SELECTION_CLASS}" aria-label="${focusedYear}. Click to select year"
class="${CALENDAR_YEAR_SELECTION_CLASS}" aria-label="${focusedYear}. Select year"
>${focusedYear}</button>
</div>
<div class="${CALENDAR_CELL_CLASS} ${CALENDAR_CELL_CENTER_ITEMS_CLASS}">
Expand All @@ -1118,7 +1118,6 @@ const renderCalendar = (el, _dateToDisplay) => {

const table = document.createElement("table");
table.setAttribute("class", CALENDAR_TABLE_CLASS);
table.setAttribute("role", "presentation");

const tableHead = document.createElement("thead");
table.insertAdjacentElement("beforeend", tableHead);
Expand All @@ -1138,7 +1137,7 @@ const renderCalendar = (el, _dateToDisplay) => {
Object.keys(daysOfWeek).forEach((key) => {
const th = document.createElement("th");
th.setAttribute("class", CALENDAR_DAY_OF_WEEK_CLASS);
th.setAttribute("scope", "presentation");
th.setAttribute("scope", "col");
th.setAttribute("aria-label", key);
th.textContent = daysOfWeek[key];
tableHeadRow.insertAdjacentElement("beforeend", th);
Expand Down Expand Up @@ -1501,7 +1500,6 @@ const displayYearSelection = (el, yearToDisplay) => {

// create table parent
const yearsTableParent = document.createElement("table");
yearsTableParent.setAttribute("role", "presentation");
yearsTableParent.setAttribute("class", CALENDAR_TABLE_CLASS);

// create table body and table row
Expand Down