react-day-picker 8.1.3 → 8.1.4

package/dist/components/Button/Button.d.ts

@@ -4,4 +4,4 @@ export declare type ButtonProps = React.HTMLProps<HTMLButtonElement>;
 /**
  * Render a button HTML element applying the reset class name.
  */
-export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "multiple" | "default" | "className" | "style" | "disabled" | "hidden" | "selected" | "dir" | "onSelect" | "required" | "min" | "max" | "start" | "color" | "content" | "size" | "wrap" | "open" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "children" | "value" | "id" | "aria-label" | "onChange" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "controls" | "coords" | "crossOrigin" | "dateTime" | "defer" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "maxLength" | "media" | "mediaGroup" | "method" | "minLength" | "muted" | "name" | "nonce" | "noValidate" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "shape" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "step" | "target" | "type" | "useMap" | "width" | "wmode" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLButtonElement>>;
+export declare const Button: React.ForwardRefExoticComponent<Pick<ButtonProps, "children" | "aria-label" | "onChange" | "value" | "className" | "style" | "cite" | "data" | "form" | "label" | "slot" | "span" | "summary" | "title" | "pattern" | "dir" | "accept" | "acceptCharset" | "action" | "allowFullScreen" | "allowTransparency" | "alt" | "as" | "async" | "autoComplete" | "autoFocus" | "autoPlay" | "capture" | "cellPadding" | "cellSpacing" | "charSet" | "challenge" | "checked" | "classID" | "cols" | "colSpan" | "content" | "controls" | "coords" | "crossOrigin" | "dateTime" | "default" | "defer" | "disabled" | "download" | "encType" | "formAction" | "formEncType" | "formMethod" | "formNoValidate" | "formTarget" | "frameBorder" | "headers" | "height" | "high" | "href" | "hrefLang" | "htmlFor" | "httpEquiv" | "integrity" | "keyParams" | "keyType" | "kind" | "list" | "loop" | "low" | "manifest" | "marginHeight" | "marginWidth" | "max" | "maxLength" | "media" | "mediaGroup" | "method" | "min" | "minLength" | "multiple" | "muted" | "name" | "nonce" | "noValidate" | "open" | "optimum" | "placeholder" | "playsInline" | "poster" | "preload" | "readOnly" | "rel" | "required" | "reversed" | "rows" | "rowSpan" | "sandbox" | "scope" | "scoped" | "scrolling" | "seamless" | "selected" | "shape" | "size" | "sizes" | "src" | "srcDoc" | "srcLang" | "srcSet" | "start" | "step" | "target" | "type" | "useMap" | "width" | "wmode" | "wrap" | "defaultChecked" | "defaultValue" | "suppressContentEditableWarning" | "suppressHydrationWarning" | "accessKey" | "contentEditable" | "contextMenu" | "draggable" | "hidden" | "id" | "lang" | "spellCheck" | "tabIndex" | "translate" | "radioGroup" | "role" | "about" | "datatype" | "inlist" | "prefix" | "property" | "resource" | "typeof" | "vocab" | "autoCapitalize" | "autoCorrect" | "autoSave" | "color" | "itemProp" | "itemScope" | "itemType" | "itemID" | "itemRef" | "results" | "security" | "unselectable" | "inputMode" | "is" | "aria-activedescendant" | "aria-atomic" | "aria-autocomplete" | "aria-busy" | "aria-checked" | "aria-colcount" | "aria-colindex" | "aria-colspan" | "aria-controls" | "aria-current" | "aria-describedby" | "aria-details" | "aria-disabled" | "aria-dropeffect" | "aria-errormessage" | "aria-expanded" | "aria-flowto" | "aria-grabbed" | "aria-haspopup" | "aria-hidden" | "aria-invalid" | "aria-keyshortcuts" | "aria-labelledby" | "aria-level" | "aria-live" | "aria-modal" | "aria-multiline" | "aria-multiselectable" | "aria-orientation" | "aria-owns" | "aria-placeholder" | "aria-posinset" | "aria-pressed" | "aria-readonly" | "aria-relevant" | "aria-required" | "aria-roledescription" | "aria-rowcount" | "aria-rowindex" | "aria-rowspan" | "aria-selected" | "aria-setsize" | "aria-sort" | "aria-valuemax" | "aria-valuemin" | "aria-valuenow" | "aria-valuetext" | "dangerouslySetInnerHTML" | "onCopy" | "onCopyCapture" | "onCut" | "onCutCapture" | "onPaste" | "onPasteCapture" | "onCompositionEnd" | "onCompositionEndCapture" | "onCompositionStart" | "onCompositionStartCapture" | "onCompositionUpdate" | "onCompositionUpdateCapture" | "onFocus" | "onFocusCapture" | "onBlur" | "onBlurCapture" | "onChangeCapture" | "onBeforeInput" | "onBeforeInputCapture" | "onInput" | "onInputCapture" | "onReset" | "onResetCapture" | "onSubmit" | "onSubmitCapture" | "onInvalid" | "onInvalidCapture" | "onLoad" | "onLoadCapture" | "onError" | "onErrorCapture" | "onKeyDown" | "onKeyDownCapture" | "onKeyPress" | "onKeyPressCapture" | "onKeyUp" | "onKeyUpCapture" | "onAbort" | "onAbortCapture" | "onCanPlay" | "onCanPlayCapture" | "onCanPlayThrough" | "onCanPlayThroughCapture" | "onDurationChange" | "onDurationChangeCapture" | "onEmptied" | "onEmptiedCapture" | "onEncrypted" | "onEncryptedCapture" | "onEnded" | "onEndedCapture" | "onLoadedData" | "onLoadedDataCapture" | "onLoadedMetadata" | "onLoadedMetadataCapture" | "onLoadStart" | "onLoadStartCapture" | "onPause" | "onPauseCapture" | "onPlay" | "onPlayCapture" | "onPlaying" | "onPlayingCapture" | "onProgress" | "onProgressCapture" | "onRateChange" | "onRateChangeCapture" | "onSeeked" | "onSeekedCapture" | "onSeeking" | "onSeekingCapture" | "onStalled" | "onStalledCapture" | "onSuspend" | "onSuspendCapture" | "onTimeUpdate" | "onTimeUpdateCapture" | "onVolumeChange" | "onVolumeChangeCapture" | "onWaiting" | "onWaitingCapture" | "onAuxClick" | "onAuxClickCapture" | "onClick" | "onClickCapture" | "onContextMenu" | "onContextMenuCapture" | "onDoubleClick" | "onDoubleClickCapture" | "onDrag" | "onDragCapture" | "onDragEnd" | "onDragEndCapture" | "onDragEnter" | "onDragEnterCapture" | "onDragExit" | "onDragExitCapture" | "onDragLeave" | "onDragLeaveCapture" | "onDragOver" | "onDragOverCapture" | "onDragStart" | "onDragStartCapture" | "onDrop" | "onDropCapture" | "onMouseDown" | "onMouseDownCapture" | "onMouseEnter" | "onMouseLeave" | "onMouseMove" | "onMouseMoveCapture" | "onMouseOut" | "onMouseOutCapture" | "onMouseOver" | "onMouseOverCapture" | "onMouseUp" | "onMouseUpCapture" | "onSelect" | "onSelectCapture" | "onTouchCancel" | "onTouchCancelCapture" | "onTouchEnd" | "onTouchEndCapture" | "onTouchMove" | "onTouchMoveCapture" | "onTouchStart" | "onTouchStartCapture" | "onPointerDown" | "onPointerDownCapture" | "onPointerMove" | "onPointerMoveCapture" | "onPointerUp" | "onPointerUpCapture" | "onPointerCancel" | "onPointerCancelCapture" | "onPointerEnter" | "onPointerEnterCapture" | "onPointerLeave" | "onPointerLeaveCapture" | "onPointerOver" | "onPointerOverCapture" | "onPointerOut" | "onPointerOutCapture" | "onGotPointerCapture" | "onGotPointerCaptureCapture" | "onLostPointerCapture" | "onLostPointerCaptureCapture" | "onScroll" | "onScrollCapture" | "onWheel" | "onWheelCapture" | "onAnimationStart" | "onAnimationStartCapture" | "onAnimationEnd" | "onAnimationEndCapture" | "onAnimationIteration" | "onAnimationIterationCapture" | "onTransitionEnd" | "onTransitionEndCapture" | "key"> & React.RefAttributes<HTMLButtonElement>>;

package/dist/style.css

@@ -5,7 +5,7 @@
   --rdp-accent-color-dark: #3003e1;
   --rdp-background-color-dark: #180270;
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
-  --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75); /* Outline border for focused _and_ selected elements */
+  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
 
   margin: 1em;
 }
@@ -38,7 +38,6 @@
   padding: 0;
   cursor: default;
   color: inherit;
-  outline: none;
   background: none;
   font: inherit;
 
@@ -46,6 +45,11 @@
   -webkit-appearance: none;
 }
 
+.rdp-button_reset:focus-visible {
+  /* Make sure to reset outline only when :focus-visible is supported */
+  outline: none;
+}
+
 .rdp-button {
   border: 2px solid transparent;
 }
@@ -58,11 +62,11 @@
   cursor: pointer;
 }
 
-.rdp-button:focus:not([disabled]),
+.rdp-button:focus-visible:not([disabled]),
 .rdp-button:active:not([disabled]) {
   color: inherit;
-  border: var(--rdp-outline);
   background-color: var(--rdp-background-color);
+  border: var(--rdp-outline);
 }
 
 .rdp-button:hover:not([disabled]) {
@@ -196,9 +200,12 @@
 
 .rdp-dropdown:focus:not([disabled]) + .rdp-caption_label,
 .rdp-dropdown:active:not([disabled]) + .rdp-caption_label {
+  background-color: var(--rdp-background-color);
+}
+
+.rdp-dropdown:focus-visible:not([disabled]) {
   border: var(--rdp-outline);
   border-radius: 6px;
-  background-color: var(--rdp-background-color);
 }
 
 .rdp-dropdown_icon {
@@ -273,7 +280,9 @@
 }
 
 .rdp-day_selected:focus:not([disabled]) {
-  border: var(--rdp-outline-selected);
+  /* Since the background is the same use again the outline */
+  outline: var(--rdp-outline);
+  outline-offset: 2px;
 }
 
 .rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {

package/dist/style.module.css

@@ -5,7 +5,7 @@
   --rdp-accent-color-dark: #3003e1;
   --rdp-background-color-dark: #180270;
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
-  --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75); /* Outline border for focused _and_ selected elements */
+  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
 
   margin: 1em;
 }
@@ -38,7 +38,6 @@
   padding: 0;
   cursor: default;
   color: inherit;
-  outline: none;
   background: none;
   font: inherit;
 
@@ -46,6 +45,11 @@
   -webkit-appearance: none;
 }
 
+.button_reset:focus-visible {
+  /* Make sure to reset outline only when :focus-visible is supported */
+  outline: none;
+}
+
 .button {
   border: 2px solid transparent;
 }
@@ -58,11 +62,11 @@
   cursor: pointer;
 }
 
-.button:focus:not([disabled]),
+.button:focus-visible:not([disabled]),
 .button:active:not([disabled]) {
   color: inherit;
-  border: var(--rdp-outline);
   background-color: var(--rdp-background-color);
+  border: var(--rdp-outline);
 }
 
 .button:hover:not([disabled]) {
@@ -196,9 +200,12 @@
 
 .dropdown:focus:not([disabled]) + .caption_label,
 .dropdown:active:not([disabled]) + .caption_label {
+  background-color: var(--rdp-background-color);
+}
+
+.dropdown:focus-visible:not([disabled]) {
   border: var(--rdp-outline);
   border-radius: 6px;
-  background-color: var(--rdp-background-color);
 }
 
 .dropdown_icon {
@@ -273,7 +280,9 @@
 }
 
 .day_selected:focus:not([disabled]) {
-  border: var(--rdp-outline-selected);
+  /* Since the background is the same use again the outline */
+  outline: var(--rdp-outline);
+  outline-offset: 2px;
 }
 
 .rdp:not([dir='rtl']) .day_range_start:not(.day_range_end) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-day-picker",
-  "version": "8.1.3",
+  "version": "8.1.4",
   "description": "Customizable Date Picker for React",
   "author": "Giampaolo Bellavite <io@gpbl.dev>",
   "homepage": "http://react-day-picker.js.org",

package/src/components/Day/Day.test.tsx

@@ -54,8 +54,9 @@ describe('when a selection mode is set', () => {
   beforeEach(() => {
     setup(props, dayPickerProps);
   });
-  test('should render a button', () => {
+  test('should render a button named "day"', () => {
     expect(container.firstChild?.nodeName).toBe('BUTTON');
+    expect(container.firstChild).toHaveAttribute('name', 'day');
   });
 });
 

package/src/components/Day/Day.tsx

@@ -26,5 +26,5 @@ export function Day(props: DayProps): JSX.Element {
   if (!dayRender.isButton) {
     return <div {...dayRender.divProps} />;
   }
-  return <Button ref={buttonRef} {...dayRender.buttonProps} />;
+  return <Button name="day" ref={buttonRef} {...dayRender.buttonProps} />;
 }

package/src/components/Dropdown/Dropdown.test.tsx

@@ -19,6 +19,7 @@ function setup(props: DropdownProps, dayPickerProps?: DayPickerProps) {
 }
 
 const props: Required<DropdownProps> = {
+  name: 'dropdown',
   'aria-label': 'foo',
   onChange: jest.fn(),
   caption: 'Some caption',

package/src/components/Dropdown/Dropdown.tsx

@@ -5,6 +5,7 @@ import { useDayPicker } from 'contexts/DayPicker';
 
 /** The props for the {@link Dropdown} component. */
 export interface DropdownProps {
+  name?: string;
   caption?: React.ReactNode;
   children?: React.SelectHTMLAttributes<HTMLSelectElement>['children'];
   className?: string;
@@ -30,6 +31,7 @@ export function Dropdown(props: DropdownProps): JSX.Element {
         {props['aria-label']}
       </span>
       <select
+        name={props.name}
         aria-label={props['aria-label']}
         className={dayPicker.classNames.dropdown}
         style={dayPicker.styles.dropdown}

package/src/components/MonthsDropdown/MonthsDropdown.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { differenceInMonths } from 'date-fns';
+import { addMonths, differenceInMonths } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render';
@@ -30,6 +30,16 @@ const props: MonthsDropdownProps = {
   onChange: jest.fn()
 };
 
+describe('when fromDate and toDate are passed in', () => {
+  beforeEach(() => {
+    setup(props, { fromDate: new Date(), toDate: addMonths(new Date(), 1) });
+  });
+  test('should render the dropdown element', () => {
+    expect(root).toMatchSnapshot();
+    expect(select).toHaveAttribute('name', 'months');
+  });
+});
+
 describe('when "fromDate" is not set', () => {
   beforeEach(() => {
     setup(props, { fromDate: undefined });

package/src/components/MonthsDropdown/MonthsDropdown.tsx

@@ -58,6 +58,7 @@ export function MonthsDropdown(props: MonthsDropdownProps): JSX.Element {
 
   return (
     <DropdownComponent
+      name="months"
       aria-label={labelMonthDropdown()}
       className={classNames.dropdown_month}
       style={styles.dropdown_month}

package/src/components/MonthsDropdown/__snapshots__/MonthsDropdown.test.tsx.snap

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when fromDate and toDate are passed in should render the dropdown element 1`] = `
+<div
+  class="rdp-dropdown_month"
+>
+  <span
+    class="rdp-vhidden"
+  >
+    Month: 
+  </span>
+  <select
+    aria-label="Month: "
+    class="rdp-dropdown"
+    name="months"
+  >
+    <option
+      value="0"
+    >
+      January
+    </option>
+    <option
+      value="1"
+    >
+      February
+    </option>
+  </select>
+  <div
+    aria-hidden="true"
+    class="rdp-caption_label"
+  >
+    January
+    <svg
+      class="rdp-dropdown_icon"
+      data-testid="iconDropdown"
+      height="8px"
+      viewBox="0 0 120 120"
+      width="8px"
+    >
+      <path
+        d="M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z"
+        fill="currentColor"
+        fill-rule="nonzero"
+      />
+    </svg>
+  </div>
+</div>
+`;

package/src/components/Navigation/Navigation.test.tsx

@@ -56,6 +56,12 @@ describe('when rendered', () => {
     const icons = root.getElementsByTagName('svg');
     expect(icons[1]).toHaveTextContent('IconRight');
   });
+  test('the previous button should be named "previous-month"', () => {
+    expect(getPrevButton()).toHaveAttribute('name', 'previous-month');
+  });
+  test('the next button should be named "next-month"', () => {
+    expect(getNextButton()).toHaveAttribute('name', 'next-month');
+  });
   beforeEach(() => {
     userEvent.click(getPrevButton());
   });

package/src/components/Navigation/Navigation.tsx

@@ -57,6 +57,7 @@ export function Navigation(props: NavigationProps): JSX.Element {
     <div className={classNames.nav} style={styles.nav}>
       {!props.hidePrevious && (
         <Button
+          name="previous-month"
           aria-label={previousLabel}
           className={previousClassName}
           style={styles.nav_button_previous}
@@ -78,6 +79,7 @@ export function Navigation(props: NavigationProps): JSX.Element {
       )}
       {!props.hideNext && (
         <Button
+          name="next-month"
           aria-label={nextLabel}
           className={nextClassName}
           style={styles.nav_button_next}

package/src/components/WeekNumber/WeekNumber.test.tsx

@@ -27,12 +27,19 @@ describe('without "onWeekNumberClick" prop', () => {
 
 describe('with "onWeekNumberClick" prop', () => {
   const dayPickerProps: DayPickerProps = { onWeekNumberClick: jest.fn() };
-  const { container } = setup(props, dayPickerProps);
+  let container: HTMLElement;
+  beforeEach(() => {
+    container = setup(props, dayPickerProps).container;
+  });
   test('it should return a button element', () => {
+    expect(screen.getByRole('button')).toBeInTheDocument();
+    expect(container.firstChild).toHaveAttribute('name', 'week-number');
     expect(container.firstChild).toMatchSnapshot();
   });
   describe('when the button element is clicked', () => {
-    userEvent.click(screen.getByRole('button'));
+    beforeEach(async () => {
+      await userEvent.click(screen.getByRole('button'));
+    });
     test('should call onWeekNumberClick', () => {
       expect(dayPickerProps.onWeekNumberClick).toHaveBeenCalledWith(
         props.number,

package/src/components/WeekNumber/WeekNumber.tsx

@@ -47,6 +47,7 @@ export function WeekNumber(props: WeekNumberProps): JSX.Element {
 
   return (
     <Button
+      name="week-number"
       aria-label={label}
       className={classNames.weeknumber}
       style={styles.weeknumber}

package/src/components/WeekNumber/__snapshots__/WeekNumber.test.tsx.snap

@@ -1,6 +1,15 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`with "onWeekNumberClick" prop it should return a button element 1`] = `null`;
+exports[`with "onWeekNumberClick" prop it should return a button element 1`] = `
+<button
+  aria-label="Week n. 10"
+  class="rdp-button_reset rdp-button rdp-weeknumber"
+  name="week-number"
+  type="button"
+>
+  10
+</button>
+`;
 
 exports[`without "onWeekNumberClick" prop it should return a span element 1`] = `
 <span

package/src/components/YearsDropdown/YearsDropdown.test.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 
 import { screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { differenceInYears } from 'date-fns';
+import { addMonths, differenceInYears } from 'date-fns';
 import { DayPickerProps } from 'DayPicker';
 
 import { customRender } from 'test/render';
@@ -30,6 +30,16 @@ const props: YearsDropdownProps = {
   onChange: jest.fn()
 };
 
+describe('when fromDate and toDate are passed in', () => {
+  beforeEach(() => {
+    setup(props, { fromDate: new Date(), toDate: addMonths(new Date(), 1) });
+  });
+  test('should render the dropdown element', () => {
+    expect(root).toMatchSnapshot();
+    expect(select).toHaveAttribute('name', 'years');
+  });
+});
+
 describe('when "fromDate" is not set', () => {
   beforeEach(() => {
     setup(props, { fromDate: undefined });

package/src/components/YearsDropdown/YearsDropdown.tsx

@@ -59,6 +59,7 @@ export function YearsDropdown(props: YearsDropdownProps): JSX.Element {
 
   return (
     <DropdownComponent
+      name="years"
       aria-label={labelYearDropdown()}
       className={classNames.dropdown_year}
       style={styles.dropdown_year}

package/src/components/YearsDropdown/__snapshots__/YearsDropdown.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`when fromDate and toDate are passed in should render the dropdown element 1`] = `
+<div
+  class="rdp-dropdown_year"
+>
+  <span
+    class="rdp-vhidden"
+  >
+    Year: 
+  </span>
+  <select
+    aria-label="Year: "
+    class="rdp-dropdown"
+    name="years"
+  >
+    <option
+      value="2021"
+    >
+      2021
+    </option>
+  </select>
+  <div
+    aria-hidden="true"
+    class="rdp-caption_label"
+  >
+    2021
+    <svg
+      class="rdp-dropdown_icon"
+      data-testid="iconDropdown"
+      height="8px"
+      viewBox="0 0 120 120"
+      width="8px"
+    >
+      <path
+        d="M4.22182541,48.2218254 C8.44222828,44.0014225 15.2388494,43.9273804 19.5496459,47.9996989 L19.7781746,48.2218254 L60,88.443 L100.221825,48.2218254 C104.442228,44.0014225 111.238849,43.9273804 115.549646,47.9996989 L115.778175,48.2218254 C119.998577,52.4422283 120.07262,59.2388494 116.000301,63.5496459 L115.778175,63.7781746 L67.7781746,111.778175 C63.5577717,115.998577 56.7611506,116.07262 52.4503541,112.000301 L52.2218254,111.778175 L4.22182541,63.7781746 C-0.0739418023,59.4824074 -0.0739418023,52.5175926 4.22182541,48.2218254 Z"
+        fill="currentColor"
+        fill-rule="nonzero"
+      />
+    </svg>
+  </div>
+</div>
+`;

package/src/hooks/useInput/useInput.ts

@@ -158,8 +158,8 @@ export function useInput(options: UseInputOptions = {}): UseInputValue {
     onMonthChange: handleMonthChange,
     selected: selectedDay,
     locale,
-    fromDate: options?.fromDate,
-    toDate: options?.toDate,
+    fromDate,
+    toDate,
     today
   };
 

package/src/style.css

@@ -5,7 +5,7 @@
   --rdp-accent-color-dark: #3003e1;
   --rdp-background-color-dark: #180270;
   --rdp-outline: 2px solid var(--rdp-accent-color); /* Outline border for focused elements */
-  --rdp-outline-selected: 2px solid rgba(0, 0, 0, 0.75); /* Outline border for focused _and_ selected elements */
+  --rdp-outline-selected: 3px solid var(--rdp-accent-color); /* Outline border for focused _and_ selected elements */
 
   margin: 1em;
 }
@@ -38,7 +38,6 @@
   padding: 0;
   cursor: default;
   color: inherit;
-  outline: none;
   background: none;
   font: inherit;
 
@@ -46,6 +45,11 @@
   -webkit-appearance: none;
 }
 
+.rdp-button_reset:focus-visible {
+  /* Make sure to reset outline only when :focus-visible is supported */
+  outline: none;
+}
+
 .rdp-button {
   border: 2px solid transparent;
 }
@@ -58,11 +62,11 @@
   cursor: pointer;
 }
 
-.rdp-button:focus:not([disabled]),
+.rdp-button:focus-visible:not([disabled]),
 .rdp-button:active:not([disabled]) {
   color: inherit;
-  border: var(--rdp-outline);
   background-color: var(--rdp-background-color);
+  border: var(--rdp-outline);
 }
 
 .rdp-button:hover:not([disabled]) {
@@ -196,9 +200,12 @@
 
 .rdp-dropdown:focus:not([disabled]) + .rdp-caption_label,
 .rdp-dropdown:active:not([disabled]) + .rdp-caption_label {
+  background-color: var(--rdp-background-color);
+}
+
+.rdp-dropdown:focus-visible:not([disabled]) {
   border: var(--rdp-outline);
   border-radius: 6px;
-  background-color: var(--rdp-background-color);
 }
 
 .rdp-dropdown_icon {
@@ -273,7 +280,9 @@
 }
 
 .rdp-day_selected:focus:not([disabled]) {
-  border: var(--rdp-outline-selected);
+  /* Since the background is the same use again the outline */
+  outline: var(--rdp-outline);
+  outline-offset: 2px;
 }
 
 .rdp:not([dir='rtl']) .rdp-day_range_start:not(.rdp-day_range_end) {