Merge pull request #6008 from ilchenkoArtem/fix-inline-container-attrs

fix: Add inline mode support to `CalendarComponent` component with correct accessibility attrs

Author: martijnrusschen

src/calendar.tsx

@@ -1169,6 +1169,7 @@ export default class Calendar extends Component<CalendarProps, CalendarState> {
             })}
             showTime={this.props.showTimeSelect || this.props.showTimeInput}
             showTimeSelectOnly={this.props.showTimeSelectOnly}
+            inline={this.props.inline}
           >
             {this.renderAriaLiveRegion()}
             {this.renderPreviousButton()}

src/calendar_container.tsx

@@ -4,13 +4,15 @@ export interface CalendarContainerProps
   extends React.PropsWithChildren<HTMLAttributes<HTMLDivElement>> {
   showTimeSelectOnly?: boolean;
   showTime?: boolean;
+  inline?: boolean;
 }
 
 const CalendarContainer: React.FC<CalendarContainerProps> = function ({
   showTimeSelectOnly = false,
   showTime = false,
   className,
   children,
+  inline,
 }: CalendarContainerProps) {
   const ariaLabel = showTimeSelectOnly
     ? "Choose Time"
@@ -19,9 +21,9 @@ const CalendarContainer: React.FC<CalendarContainerProps> = function ({
   return (
     <div
       className={className}
-      role="dialog"
       aria-label={ariaLabel}
-      aria-modal="true"
+      role={inline ? undefined : "dialog"}
+      aria-modal={inline ? undefined : "true"}
     >
       {children}
     </div>

src/test/calendar_test.test.tsx

@@ -2731,7 +2731,7 @@ describe("Calendar", () => {
   });
 
   describe("calendar container", () => {
-    it("should render Calendar with accessibility props", () => {
+    it("should render Calendar in popover mode with dialog accessibility props", () => {
       const { container } = render(
         <Calendar
           dateFormat={dateFormat}
@@ -2748,6 +2748,24 @@ describe("Calendar", () => {
       expect(dialog?.getAttribute("aria-label")).toBe("Choose Date");
     });
 
+    it("should render Calendar in inline mode without dialog accessibility props", () => {
+      const { container } = render(
+        <Calendar
+          dateFormat={dateFormat}
+          onClickOutside={() => {}}
+          onSelect={() => {}}
+          dropdownMode="scroll"
+          inline
+        />,
+      );
+
+      const dialog = container.querySelector(".react-datepicker");
+      expect(dialog).not.toBeNull();
+      expect(dialog?.getAttribute("role")).toBeNull();
+      expect(dialog?.getAttribute("aria-modal")).toBeNull();
+      expect(dialog?.getAttribute("aria-label")).toBe("Choose Date");
+    });
+
     it("should display corresponding aria-label for Calendar with showTimeSelect", () => {
       const { container } = render(
         <Calendar