Visitar URL original
USWDS - Date Picker: Updated toggleCalendar function to account for aria-disabled attribute + readonly by CTGM-Bixal · Pull Request #6013 · uswds/uswds · GitHub
Skip to content

USWDS - Date Picker: Updated toggleCalendar function to account for aria-disabled attribute + readonly #6013

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 7 commits into from
Oct 3, 2024
Merged

USWDS - Date Picker: Updated toggleCalendar function to account for aria-disabled attribute + readonly #6013

Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
156defc
updated toggleCalendar funciton to account for aria-disabled attribute
CTGM-Bixal Aug 7, 2024
9c39671
updated date picker to account for readonly when using aria-disabled
CTGM-Bixal Aug 14, 2024
172c512
updated ariaDisabled and toggleCalendar functions
CTGM-Bixal Aug 20, 2024
14f5cb1
updated readonly and aria-diabled code
CTGM-Bixal Aug 26, 2024
18e578c
updated ariaDisbaled and enable functions for consistency
CTGM-Bixal Aug 26, 2024
2d93884
Merge branch 'develop' of https://github.com/uswds/uswds into rc-prev…
CTGM-Bixal Aug 27, 2024
f3f441c
ran prettier for circle-uswds check
CTGM-Bixal Aug 27, 2024
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
11 changes: 8 additions & 3 deletions packages/usa-date-picker/src/index.js
View file
Open in desktop
Comment thread
CTGM-Bixal marked this conversation as resolved.
Resolved
Comment thread
CTGM-Bixal marked this conversation as resolved.
Resolved
Comment thread
CTGM-Bixal marked this conversation as resolved.
Resolved
Original file line number Diff line number Diff line change
Expand Up @@ -714,15 +714,16 @@ const disable = (el) => {
};

/**
* Check for aria-disabled on initialization
* Add the readonly attribute to input element and the aria-disabled attribute to the toggle calendar button and external input elements.
*
* @param {HTMLElement} el An element within the date picker component
* @param {HTMLElement} el - The date picker element
*/
const ariaDisable = (el) => {
Comment thread
CTGM-Bixal marked this conversation as resolved.
Resolved
const { externalInputEl, toggleBtnEl } = getDatePickerContext(el);

toggleBtnEl.setAttribute("aria-disabled", true);
externalInputEl.setAttribute("aria-disabled", true);
externalInputEl.setAttribute("readonly", "");
};

/**
Expand All @@ -734,7 +735,11 @@ const enable = (el) => {
const { externalInputEl, toggleBtnEl } = getDatePickerContext(el);

toggleBtnEl.disabled = false;
toggleBtnEl.removeAttribute("aria-disabled");

externalInputEl.disabled = false;
externalInputEl.removeAttribute("aria-disabled");
externalInputEl.removeAttribute("readonly");
};

// #region Validation
Expand Down Expand Up @@ -1295,7 +1300,7 @@ const selectDate = (calendarDateEl) => {
* @param {HTMLButtonElement} el An element within the date picker component
*/
const toggleCalendar = (el) => {
if (el.disabled) return;
if (el.disabled || el.hasAttribute("aria-disabled")) return;
const { calendarEl, inputDate, minDate, maxDate, defaultDate } =
getDatePickerContext(el);

Expand Down