Merge pull request #4549 from qburst/issue-4518/fix/aria-accessibilit…

…y-calendar

Fix #4518: 🔨 Add accessibility props like role and aria-modal to the Calendar popup

src/calendar_container.jsx

@@ -2,7 +2,11 @@ import PropTypes from "prop-types";
 import React from "react";
 
 export default function CalendarContainer({ className, children }) {
-  return <div className={className}>{children}</div>;
+  return (
+    <div className={className} role="dialog" aria-modal="true">
+      {children}
+    </div>
+  );
 }
 
 CalendarContainer.propTypes = {

test/calendar_test.test.js

@@ -8,6 +8,7 @@ import Month from "../src/month";
 import Day from "../src/day";
 import ReactDOM from "react-dom";
 import TestUtils from "react-dom/test-utils";
+import { render } from "@testing-library/react";
 import YearDropdown from "../src/year_dropdown";
 import MonthDropdown from "../src/month_dropdown";
 import MonthYearDropdown from "../src/month_year_dropdown";
@@ -1799,4 +1800,15 @@ describe("Calendar", () => {
       );
     });
   });
+
+  describe("calendar container", () => {
+    it("should work", () => {
+      const { container } = render(<Calendar dateFormat={dateFormat} />);
+
+      const dialog = container.querySelector(".react-datepicker");
+      expect(dialog).not.toBeNull();
+      expect(dialog.getAttribute("role")).toBe("dialog");
+      expect(dialog.getAttribute("aria-modal")).toBe("true");
+    });
+  });
 });