Description

The current date picker behaviors could be improved for a better experience and match accessibility requirements.

On the toggle toggleCalendar() function, we check if the input has a disabled attribute. If so, it returns early and prevents the calendar from opening. If we add a check for the aria-disabled attribute, we can prevent users from selecting a date while allowing the button to remain discoverable, which is required for accessibility.

This would make it easier for users to follow recommended disabled guidance by alleviating the responsibility of the user to prevent the click behaviors.

Using "aria-disabled=true" instead of "disabled" indicates the presence of a disabled element. Use JavaScript to programmatically disable the element to prevent clicks.

Related code

const toggleCalendar = (el) => {
-  if (el.disabled) return;
+  if (el.disabled || el.hasAttribute("aria-disabled")) return;

Additional information

Notes from CS/UX sync (🔒)