changed: use aria-disabled instead of disabled (#1451)

packages/react-day-picker/src/components/Navigation/Navigation.test.tsx

@@ -108,11 +108,11 @@ describe('when the previous month is undefined', () => {
   beforeEach(() => {
     setup({ ...props, previousMonth: undefined }, dayPickerProps);
   });
-  test('the previous button should be disabled', () => {
-    expect(getPrevButton()).toBeDisabled();
+  test('the previous button should be aria-disabled', () => {
+    expect(getPrevButton()).toHaveAttribute('aria-disabled', 'true');
   });
-  test('the next button should be enabled', () => {
-    expect(getNextButton()).toBeEnabled();
+  test('the next button should not be aria-disabled', () => {
+    expect(getNextButton()).not.toHaveAttribute('aria-disabled', 'true');
   });
 });
 
@@ -121,9 +121,9 @@ describe('when the next month is undefined', () => {
     setup({ ...props, nextMonth: undefined }, dayPickerProps);
   });
   test('the previous button should be enabled', () => {
-    expect(getPrevButton()).toBeEnabled();
+    expect(getPrevButton()).not.toHaveAttribute('aria-disabled', 'true');
   });
   test('the next button should be disabled', () => {
-    expect(getNextButton()).toBeDisabled();
+    expect(getNextButton()).toHaveAttribute('aria-disabled', 'true');
   });
 });

packages/react-day-picker/src/components/Navigation/Navigation.tsx

@@ -60,7 +60,7 @@ export function Navigation(props: NavigationProps): JSX.Element {
           aria-label={previousLabel}
           className={previousClassName}
           style={styles.nav_button_previous}
-          disabled={!props.previousMonth}
+          aria-disabled={!props.previousMonth}
           onClick={props.onPreviousClick}
         >
           {dir === 'rtl' ? (
@@ -81,7 +81,7 @@ export function Navigation(props: NavigationProps): JSX.Element {
           aria-label={nextLabel}
           className={nextClassName}
           style={styles.nav_button_next}
-          disabled={!props.nextMonth}
+          aria-disabled={!props.nextMonth}
           onClick={props.onNextClick}
         >
           {dir === 'rtl' ? (

packages/react-day-picker/src/hooks/useDayRender/useDayRender.test.tsx

@@ -286,7 +286,7 @@ describe('when the day is disabled', () => {
     setup(date, date, dayPickerProps);
   });
   test('the button should be disabled', () => {
-    expect(result.current.buttonProps.disabled).toBe(true);
+    expect(result.current.buttonProps['aria-disabled']).toBe(true);
   });
 });
 

packages/react-day-picker/src/hooks/useDayRender/useDayRender.tsx

@@ -27,7 +27,7 @@ export type DayRender = {
   activeModifiers: ActiveModifiers;
   /** The props to apply to the button element (when `isButton` is true). */
   buttonProps: StyledComponent &
-    Pick<ButtonProps, 'disabled' | 'aria-pressed' | 'tabIndex'> &
+    Pick<ButtonProps, 'aria-disabled' | 'aria-pressed' | 'tabIndex'> &
     DayEventHandlers;
   /** The props to apply to the div element (when `isButton` is false). */
   divProps: StyledComponent;
@@ -104,7 +104,7 @@ export function useDayRender(
   );
   const buttonProps = {
     ...divProps,
-    disabled: activeModifiers.disabled,
+    ['aria-disabled']: activeModifiers.disabled,
     ['aria-pressed']: activeModifiers.selected,
     tabIndex: isFocusTarget ? 0 : -1,
     ...eventHandlers

packages/react-day-picker/src/style.css

@@ -55,22 +55,23 @@
   border: 2px solid transparent;
 }
 
-.rdp-button[disabled] {
+.rdp-button[aria-disabled='true'] {
   opacity: 0.25;
+  pointer-events: none;
 }
 
-.rdp-button:not([disabled]) {
+.rdp-button:not([aria-disabled='true']) {
   cursor: pointer;
 }
 
-.rdp-button:focus:not([disabled]),
-.rdp-button:active:not([disabled]) {
+.rdp-button:focus,
+.rdp-button:active {
   color: inherit;
   border: var(--rdp-outline);
   background-color: var(--rdp-background-color);
 }
 
-.rdp-button:hover:not([disabled]) {
+.rdp-button:hover:not([aria-disabled='true']) {
   background-color: var(--rdp-background-color);
 }
 
@@ -269,15 +270,15 @@
   font-weight: bold;
 }
 
-.rdp-day_selected:not([disabled]),
-.rdp-day_selected:focus:not([disabled]),
-.rdp-day_selected:active:not([disabled]),
-.rdp-day_selected:hover:not([disabled]) {
+.rdp-day_selected:not([aria-disabled='true']),
+.rdp-day_selected:focus:not([aria-disabled='true']),
+.rdp-day_selected:active:not([aria-disabled='true']),
+.rdp-day_selected:hover:not([aria-disabled='true']) {
   color: white;
   background-color: var(--rdp-accent-color);
 }
 
-.rdp-day_selected:focus:not([disabled]) {
+.rdp-day_selected:focus:not([aria-disabled='true']) {
   border: var(--rdp-outline-selected);
 }
 

packages/react-day-picker/test/po.ts

@@ -24,7 +24,9 @@ export function getAllEnabledDays() {
     .getElementsByTagName('tbody')[0]
     .getElementsByTagName('button');
 
-  return Array.from(buttons).filter((button) => !button.disabled);
+  return Array.from(buttons).filter(
+    (button) => !button.getAttribute('aria-disabled')
+  );
 }
 
 export function getDayButtons(day: Date) {

website/test-integration/examples/from-to-month.test.tsx

@@ -16,11 +16,11 @@ beforeEach(() => {
 });
 
 test('the previous month button should be disabled', () => {
-  expect(getPrevButton()).toBeDisabled();
+  expect(getPrevButton()).toHaveAttribute('aria-disabled', 'true');
 });
 
 test('the next month button should not be disabled', () => {
-  expect(getNextButton()).not.toBeDisabled();
+  expect(getNextButton()).not.toHaveAttribute('aria-disabled', 'true');
 });
 
 describe('when navigating to the last month', () => {
@@ -32,10 +32,10 @@ describe('when navigating to the last month', () => {
   });
 
   test('the previous month button should not be disabled', () => {
-    expect(getPrevButton()).not.toBeDisabled();
+    expect(getPrevButton()).not.toHaveAttribute('aria-disabled', 'true');
   });
 
   test('the next month button should be disabled', () => {
-    expect(getNextButton()).toBeDisabled();
+    expect(getNextButton()).toHaveAttribute('aria-disabled', 'true');
   });
 });

website/test-integration/examples/from-to-year.test.tsx

@@ -19,11 +19,11 @@ beforeEach(() => {
 });
 
 test('the previous month button should be disabled', () => {
-  expect(getPrevButton()).toBeDisabled();
+  expect(getPrevButton()).toHaveAttribute('aria-disabled', 'true');
 });
 
 test('the next month button should not be disabled', () => {
-  expect(getNextButton()).not.toBeDisabled();
+  expect(getNextButton()).not.toHaveAttribute('aria-disabled', 'true');
 });
 
 describe('when navigating to the last month', () => {
@@ -35,10 +35,10 @@ describe('when navigating to the last month', () => {
   });
 
   test('the previous month button should not be disabled', () => {
-    expect(getPrevButton()).not.toBeDisabled();
+    expect(getPrevButton()).not.toHaveAttribute('aria-disabled', 'true');
   });
 
   test('the next month button should be disabled', () => {
-    expect(getNextButton()).toBeDisabled();
+    expect(getNextButton()).toHaveAttribute('aria-disabled', 'true');
   });
 });

website/test-integration/examples/modifiers-disabled.test.tsx

@@ -1,9 +1,10 @@
 import React from 'react';
-import { getDayButton } from 'react-day-picker/test/po';
-import { freezeBeforeAll } from 'react-day-picker/test/utils';
 
 import { render } from '@testing-library/react';
 
+import { getDayButton } from 'react-day-picker/test/po';
+import { freezeBeforeAll } from 'react-day-picker/test/utils';
+
 import Example from '@examples/modifiers-disabled';
 
 const days = [
@@ -18,6 +19,6 @@ beforeEach(() => {
   render(<Example />);
 });
 
-test.each(days)('the day %s should be disabled', (day) => {
-  expect(getDayButton(day)).toBeDisabled();
+test.each(days)('the day %s should be aria-disabled', (day) => {
+  expect(getDayButton(day)).toHaveAttribute('aria-disabled', 'true');
 });