react-day-picker 8.0.4 → 8.0.5

package/dist/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);
 }
 

package/dist/style.module.css

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "8.0.4",
+  "version": "8.0.5",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "http://react-day-picker.js.org",
@@ -33,11 +33,11 @@
     "tsconfig.json"
   ],
   "dependencies": {
-    "@reach/auto-id": "^0.16.0"
+    "@reach/auto-id": "0.16.0"
   },
   "devDependencies": {
     "@rollup/plugin-alias": "^3.1.9",
-    "@rollup/plugin-commonjs": "^21.0.3",
+    "@rollup/plugin-commonjs": "^21.1.0",
     "@rollup/plugin-typescript": "^8.3.1",
     "@testing-library/jest-dom": "^5.16.4",
     "@testing-library/react": "^12.1.4",

package/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');
   });
 });

package/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' ? (

package/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);
   });
 });
 

package/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

package/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);
 }