diff --git a/src/calendar.tsx b/src/calendar.tsx index 9b00b22ef..ae3e6f0b6 100644 --- a/src/calendar.tsx +++ b/src/calendar.tsx @@ -1154,6 +1154,7 @@ export default class Calendar extends Component { })} showTime={this.props.showTimeSelect || this.props.showTimeInput} showTimeSelectOnly={this.props.showTimeSelectOnly} + inline={this.props.inline} > {this.renderAriaLiveRegion()} {this.renderPreviousButton()} diff --git a/src/calendar_container.tsx b/src/calendar_container.tsx index 8ab32f2d7..d05c11293 100644 --- a/src/calendar_container.tsx +++ b/src/calendar_container.tsx @@ -4,6 +4,7 @@ export interface CalendarContainerProps extends React.PropsWithChildren> { showTimeSelectOnly?: boolean; showTime?: boolean; + inline?: boolean; } const CalendarContainer: React.FC = function ({ @@ -11,6 +12,7 @@ const CalendarContainer: React.FC = function ({ showTime = false, className, children, + inline, }: CalendarContainerProps) { const ariaLabel = showTimeSelectOnly ? "Choose Time" @@ -19,9 +21,9 @@ const CalendarContainer: React.FC = function ({ return (
{children}
diff --git a/src/test/calendar_test.test.tsx b/src/test/calendar_test.test.tsx index 7cd3f9db1..30541d70a 100644 --- a/src/test/calendar_test.test.tsx +++ b/src/test/calendar_test.test.tsx @@ -2679,7 +2679,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( { expect(dialog?.getAttribute("aria-label")).toBe("Choose Date"); }); + it("should render Calendar in inline mode without dialog accessibility props", () => { + const { container } = render( + {}} + 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(