feat: add aria-selected attribute for all entities

README.md

@@ -472,6 +472,7 @@ export interface DPPropGetter extends Record<string, unknown> {
   tabIndex: number;
   disabled?: boolean;
   'aria-disabled'?: boolean;
+  'aria-selected'?: boolean;
   onClick?(evt: MouseEvent<HTMLElement>): void;
 }
 ```

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@rehookify/datepicker",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "description": "The ultimate tool to create a date, range and time picker in your React applications.",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.mjs",
@@ -70,7 +70,7 @@
     "@babel/preset-typescript": "^7.18.6",
     "@jest/globals": "^29.3.1",
     "@playwright/test": "^1.28.1",
-    "@rollup/plugin-commonjs": "^24.0.1",
+    "@rollup/plugin-commonjs": "^25.0.0",
     "@rollup/plugin-node-resolve": "^15.0.1",
     "@rollup/plugin-terser": "^0.4.0",
     "@testing-library/jest-dom": "^5.16.5",

src/__test__/create-prop-getters.test.ts

@@ -18,12 +18,14 @@ describe('createPropGetter', () => {
       onClick,
       disabled,
       'aria-disabled': ariaDisabled,
-    } = createPropGetter(true, jest.fn(), {});
+      'aria-selected': ariaSelected,
+    } = createPropGetter(true, jest.fn(), {}, true);
 
     expect(role).toBe('button');
     expect(tabIndex).toBe(0);
     expect(onClick).toBeFalsy();
     expect(disabled).toBe(true);
     expect(ariaDisabled).toBe(true);
+    expect(ariaSelected).toBe(true);
   });
 });

src/types/prop-getters.ts

@@ -14,5 +14,6 @@ export interface DPPropGetter extends Record<string, unknown> {
   tabIndex: number;
   disabled?: boolean;
   'aria-disabled'?: boolean;
+  'aria-selected'?: boolean;
   onClick?(evt: MouseEvent<HTMLElement>): void;
 }

src/use-days.ts

@@ -80,6 +80,7 @@ export const useDaysPropGetters: DPUseDaysPropGetters = ({
               },
             }),
         },
+        selected,
       ),
     [
       mode,

src/use-months.ts

@@ -45,13 +45,14 @@ export const useMonthsPropGetters: DPUseMonthsPropGetters = ({
 
   const monthButton = useCallback(
     (
-      { $date, disabled }: DPMonth,
+      { $date, disabled, selected }: DPMonth,
       { onClick, disabled: disabledProps, ...rest }: DPPropsGetterConfig = {},
     ) =>
       createPropGetter(
         !!disabledProps || disabled,
         (evt) => callAll(onClick, skipFirst(callSetOffset))(evt, $date),
         rest,
+        selected,
       ),
     [callSetOffset],
   );

src/use-time.ts

@@ -45,6 +45,7 @@ export const useTimePropGetter: DPUseTimePropGetter = ({
           )(evt, $date);
         },
         rest,
+        selected,
       ),
     [selectedDates, onDatesChange, dispatch, focusDate],
   );

src/use-years.ts

@@ -45,13 +45,14 @@ export const useYearsPropGetters: DPUseYearsPropGetters = ({
 
   const yearButton = useCallback(
     (
-      { $date, disabled }: DPYear,
+      { $date, disabled, selected }: DPYear,
       { onClick, disabled: disabledProps, ...rest }: DPPropsGetterConfig = {},
     ) =>
       createPropGetter(
         !!disabledProps || disabled,
         (evt) => callAll(onClick, skipFirst(callSetOffset))(evt, $date),
         rest,
+        selected,
       ),
     [callSetOffset],
   );

src/utils/create-prop-getter.ts

@@ -6,6 +6,7 @@ export const createPropGetter = (
   isDisabled: boolean,
   action: (evt: MouseEvent<HTMLElement>) => void,
   props: DPPropsGetterConfig = {},
+  selected = false,
 ): DPPropGetter => ({
   role: 'button',
   tabIndex: 0,
@@ -19,5 +20,6 @@ export const createPropGetter = (
           action(evt);
         },
       }),
+  ...(selected ? { 'aria-selected': true } : {}),
   ...props,
 });