From ce5a7cf1a64bcd88dcfae4c314ad30c582155ed0 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 17 Nov 2022 10:39:40 -0500
Subject: [PATCH 1/6] chore(CalendarMonth): provided explicit guidance for
 labeling an inline calendar month

---
 .../components/CalendarMonth/examples/CalendarMonth.md   | 4 ++++
 .../CalendarMonth/examples/CalendarMonthDateRange.tsx    | 9 +++++++--
 .../examples/CalendarMonthSelectableDate.tsx             | 7 ++++---
 3 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
index 993a87a1501..b56ee9d3a17 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
@@ -7,6 +7,10 @@ propComponents: ['CalendarMonth', 'CalendarFormat']
 
 ## Examples
 
+When used inline and not contained within a date picker, it's wise to wrap the calendar month component in an HTML 
+`article` element and label it with a heading using an appropriate heading level. This ensures that the calendar month is 
+semantically scoped and accessibly labeled.
+
 ### Selectable date
 
 ```ts file="./CalendarMonthSelectableDate.tsx"
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
index 1afd9cdbbc9..546f0729607 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
@@ -1,10 +1,15 @@
 import React from 'react';
-import { CalendarMonth } from '@patternfly/react-core';
+import { CalendarMonth, Title } from '@patternfly/react-core';
 
 export const CalendarMonthDateRange: React.FunctionComponent = () => {
   const startDate = new Date(2020, 10, 11);
   const endDate = new Date(2020, 10, 24);
   const disablePreStartDates = (date: Date) => date >= startDate;
 
-  return <CalendarMonth validators={[disablePreStartDates]} date={endDate} rangeStart={startDate} />;
+  return (
+    <article>
+      <Title headingLevel="h4">Calendar month displaying a range</Title>
+      <CalendarMonth validators={[disablePreStartDates]} date={endDate} rangeStart={startDate} />;
+    </article>
+  );
 };
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
index d61f03d889c..c6e21c138a8 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CalendarMonth } from '@patternfly/react-core';
+import { CalendarMonth, Title } from '@patternfly/react-core';
 
 export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   const [date, setDate] = React.useState(new Date(2020, 10, 24));
@@ -10,9 +10,10 @@ export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   };
 
   return (
-    <React.Fragment>
+    <article>
+      <Title headingLevel="h4">Select your favorite date</Title>
       <pre>Selected date: {date.toString()}</pre>
       <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} />
-    </React.Fragment>
+    </article>
   );
 };

From c94e47a53e770ac100251977b65c3973b93d3a27 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 17 Nov 2022 14:45:34 -0500
Subject: [PATCH 2/6] update per PR comments

---
 .../src/components/CalendarMonth/examples/CalendarMonth.md  | 2 +-
 .../CalendarMonth/examples/CalendarMonthDateRange.tsx       | 6 ++++--
 .../CalendarMonth/examples/CalendarMonthSelectableDate.tsx  | 6 ++++--
 3 files changed, 9 insertions(+), 5 deletions(-)

diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
index b56ee9d3a17..89221dab901 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
@@ -7,7 +7,7 @@ propComponents: ['CalendarMonth', 'CalendarFormat']
 
 ## Examples
 
-When used inline and not contained within a date picker, it's wise to wrap the calendar month component in an HTML 
+When used inline and not contained within a [date picker](/components/date-picker), it's wise to wrap the calendar month component in an HTML 
 `article` element and label it with a heading using an appropriate heading level. This ensures that the calendar month is 
 semantically scoped and accessibly labeled.
 
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
index 546f0729607..782a7920afd 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
@@ -7,8 +7,10 @@ export const CalendarMonthDateRange: React.FunctionComponent = () => {
   const disablePreStartDates = (date: Date) => date >= startDate;
 
   return (
-    <article>
-      <Title headingLevel="h4">Calendar month displaying a range</Title>
+    <article aria-labelledby="display-range">
+      <Title id="display-range" headingLevel="h4">
+        Calendar month displaying a range
+      </Title>
       <CalendarMonth validators={[disablePreStartDates]} date={endDate} rangeStart={startDate} />;
     </article>
   );
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
index c6e21c138a8..4a14ca70b64 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
@@ -10,8 +10,10 @@ export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   };
 
   return (
-    <article>
-      <Title headingLevel="h4">Select your favorite date</Title>
+    <article aria-labelledby="favorite-date">
+      <Title headingLevel="h4" id="favorite-date">
+        Select your favorite date
+      </Title>
       <pre>Selected date: {date.toString()}</pre>
       <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} />
     </article>

From c791246724ea3f9fe2eded5db6410afdfdeba0b8 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Mon, 5 Dec 2022 16:41:28 -0500
Subject: [PATCH 3/6] move inline accommodations into an inlineProps prop

---
 .../CalendarMonth/CalendarMonth.tsx           |  27 +-
 .../__tests__/CalendarMonth.test.tsx          |   8 +
 .../__snapshots__/CalendarMonth.test.tsx.snap | 706 ++++++++++++++++++
 .../CalendarMonth/examples/CalendarMonth.md   |   6 +-
 .../examples/CalendarMonthDateRange.tsx       |  20 +-
 .../examples/CalendarMonthSelectableDate.tsx  |  17 +-
 6 files changed, 768 insertions(+), 16 deletions(-)
 create mode 100644 packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap

diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
index de0e55165c9..5c8ef9400c4 100644
--- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
+++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -20,6 +20,15 @@ export enum Weekday {
   Saturday
 }
 
+export interface InlineCalendarProps {
+  /** Component wrapping the calendar month when used inline. Recommended to be 'article'. */
+  wrapperComponent?: keyof JSX.IntrinsicElements;
+  /** Title of the calendar rendered above the inline calendar month. Recommended to be a 'title' component. */
+  title?: React.ReactNode;
+  /** Id of the accessible label of the calendar month. Recommended to map to the title. */
+  ariaLabeledby?: string;
+}
+
 /** Additional properties that extend from and can be passed to the main component. These
  * properties allow customizing the calendar formatting and aria-labels.
  */
@@ -49,6 +58,8 @@ export interface CalendarFormat {
   weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday;
   /** Accessible label for the year input. */
   yearInputAriaLabel?: string;
+  /** */
+  inlineProps?: InlineCalendarProps;
 }
 
 export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
@@ -133,6 +144,7 @@ export const CalendarMonth = ({
   yearInputAriaLabel = 'Select year',
   cellAriaLabel,
   isDateFocused = false,
+  inlineProps,
   ...props
 }: CalendarProps) => {
   const longMonths = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11].map(monthNum => new Date(1990, monthNum)).map(monthFormat);
@@ -232,7 +244,8 @@ export const CalendarMonth = ({
   const isHoveredDateValid = isValidated(hoveredDate);
   const monthFormatted = monthFormat(focusedDate);
   const yearFormatted = yearFormat(focusedDate);
-  return (
+
+  const calendarToRender = (
     <div className={css(styles.calendarMonth, className)} {...props}>
       <div className={styles.calendarMonthHeader}>
         <div className={css(styles.calendarMonthHeaderNavControl, styles.modifiers.prevMonth)}>
@@ -386,4 +399,16 @@ export const CalendarMonth = ({
       </table>
     </div>
   );
+
+  if (inlineProps !== undefined) {
+    const Component = (inlineProps.wrapperComponent ? inlineProps.wrapperComponent : 'article') as any;
+    return (
+      <Component {...(inlineProps.ariaLabeledby && { 'aria-labeledby': inlineProps.ariaLabeledby })}>
+        {inlineProps.title}
+        {calendarToRender}
+      </Component>
+    );
+  }
+  return calendarToRender;
 };
+CalendarMonth.displayName = 'CalendarMonth';
diff --git a/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx b/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx
index a5d5214408e..3597f975878 100644
--- a/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx
+++ b/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx
@@ -55,3 +55,11 @@ test('Next year dates have correct year in aria label', () => {
   const nextYearDate = screen.getByRole('button', { name: '1 January 2025' });
   expect(nextYearDate).toBeVisible();
 });
+
+test('InlineProps render correct wrapper component and attributes', () => {
+  const { asFragment } = render(
+    <CalendarMonth inlineProps={{wrapperComponent: 'article', title: <div id="hi">Title</div>, ariaLabeledby: "hi"}} />
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});
diff --git a/packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap b/packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap
new file mode 100644
index 00000000000..711e42cdded
--- /dev/null
+++ b/packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap
@@ -0,0 +1,706 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`InlineProps render correct wrapper component and attributes 1`] = `
+<DocumentFragment>
+  <article
+    aria-labeledby="hi"
+  >
+    <div
+      id="hi"
+    >
+      Title
+    </div>
+    <div
+      class="pf-c-calendar-month"
+    >
+      <div
+        class="pf-c-calendar-month__header"
+      >
+        <div
+          class="pf-c-calendar-month__header-nav-control pf-m-prev-month"
+        >
+          <button
+            aria-disabled="false"
+            aria-label="Previous month"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-13"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
+              />
+            </svg>
+          </button>
+        </div>
+        <div
+          class="pf-c-input-group"
+        >
+          <div
+            class="pf-c-calendar-month__header-month"
+          >
+            <span
+              hidden=""
+              id="hidden-month-span-1670276129719weupr3792fk"
+            >
+              Month
+            </span>
+            <div
+              class="pf-c-select"
+              data-ouia-component-id="OUIA-Generated-Select-single-7"
+              data-ouia-component-type="PF4/Select"
+              data-ouia-safe="true"
+              style="width: 140px;"
+            >
+              <button
+                aria-expanded="false"
+                aria-haspopup="listbox"
+                aria-label="Options menu"
+                aria-labelledby="hidden-month-span-1670276129719weupr3792fk pf-select-toggle-id-13"
+                class="pf-c-select__toggle"
+                id="pf-select-toggle-id-13"
+                type="button"
+              >
+                <div
+                  class="pf-c-select__toggle-wrapper"
+                >
+                  <span
+                    class="pf-c-select__toggle-text"
+                  >
+                    December
+                  </span>
+                </div>
+                <span
+                  class="pf-c-select__toggle-arrow"
+                >
+                  <svg
+                    aria-hidden="true"
+                    fill="currentColor"
+                    height="1em"
+                    role="img"
+                    style="vertical-align: -0.125em;"
+                    viewBox="0 0 320 512"
+                    width="1em"
+                  >
+                    <path
+                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+                    />
+                  </svg>
+                </span>
+              </button>
+            </div>
+          </div>
+          <div
+            class="pf-c-calendar-month__header-year"
+          >
+            <input
+              aria-invalid="false"
+              aria-label="Select year"
+              class="pf-c-form-control"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-7"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              type="number"
+              value="2022"
+            />
+          </div>
+        </div>
+        <div
+          class="pf-c-calendar-month__header-nav-control pf-m-next-month"
+        >
+          <button
+            aria-disabled="false"
+            aria-label="Next month"
+            class="pf-c-button pf-m-plain"
+            data-ouia-component-id="OUIA-Generated-Button-plain-14"
+            data-ouia-component-type="PF4/Button"
+            data-ouia-safe="true"
+            type="button"
+          >
+            <svg
+              aria-hidden="true"
+              fill="currentColor"
+              height="1em"
+              role="img"
+              style="vertical-align: -0.125em;"
+              viewBox="0 0 256 512"
+              width="1em"
+            >
+              <path
+                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+              />
+            </svg>
+          </button>
+        </div>
+      </div>
+      <table
+        class="pf-c-calendar-month__calendar"
+      >
+        <thead
+          class="pf-c-calendar-month__days"
+        >
+          <tr>
+            <th
+              class="pf-c-calendar-month__day"
+              scope="col"
+            >
+              <span
+                class="pf-screen-reader"
+              >
+                Sunday
+              </span>
+              <span
+                aria-hidden="true"
+              >
+                S
+              </span>
+            </th>
+            <th
+              class="pf-c-calendar-month__day"
+              scope="col"
+            >
+              <span
+                class="pf-screen-reader"
+              >
+                Monday
+              </span>
+              <span
+                aria-hidden="true"
+              >
+                M
+              </span>
+            </th>
+            <th
+              class="pf-c-calendar-month__day"
+              scope="col"
+            >
+              <span
+                class="pf-screen-reader"
+              >
+                Tuesday
+              </span>
+              <span
+                aria-hidden="true"
+              >
+                T
+              </span>
+            </th>
+            <th
+              class="pf-c-calendar-month__day"
+              scope="col"
+            >
+              <span
+                class="pf-screen-reader"
+              >
+                Wednesday
+              </span>
+              <span
+                aria-hidden="true"
+              >
+                W
+              </span>
+            </th>
+            <th
+              class="pf-c-calendar-month__day"
+              scope="col"
+            >
+              <span
+                class="pf-screen-reader"
+              >
+                Thursday
+              </span>
+              <span
+                aria-hidden="true"
+              >
+                T
+              </span>
+            </th>
+            <th
+              class="pf-c-calendar-month__day"
+              scope="col"
+            >
+              <span
+                class="pf-screen-reader"
+              >
+                Friday
+              </span>
+              <span
+                aria-hidden="true"
+              >
+                F
+              </span>
+            </th>
+            <th
+              class="pf-c-calendar-month__day"
+              scope="col"
+            >
+              <span
+                class="pf-screen-reader"
+              >
+                Saturday
+              </span>
+              <span
+                aria-hidden="true"
+              >
+                S
+              </span>
+            </th>
+          </tr>
+        </thead>
+        <tbody>
+          <tr
+            class="pf-c-calendar-month__dates-row"
+          >
+            <td
+              class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
+            >
+              <button
+                aria-label="27 November 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                27
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
+            >
+              <button
+                aria-label="28 November 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                28
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
+            >
+              <button
+                aria-label="29 November 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                29
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
+            >
+              <button
+                aria-label="30 November 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                30
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="1 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                1
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="2 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                2
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="3 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                3
+              </button>
+            </td>
+          </tr>
+          <tr
+            class="pf-c-calendar-month__dates-row"
+          >
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="4 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                4
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell pf-m-current"
+            >
+              <button
+                aria-label="5 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="0"
+                type="button"
+              >
+                5
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="6 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                6
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="7 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                7
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="8 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                8
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="9 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                9
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="10 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                10
+              </button>
+            </td>
+          </tr>
+          <tr
+            class="pf-c-calendar-month__dates-row"
+          >
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="11 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                11
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="12 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                12
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="13 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                13
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="14 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                14
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="15 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                15
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="16 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                16
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="17 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                17
+              </button>
+            </td>
+          </tr>
+          <tr
+            class="pf-c-calendar-month__dates-row"
+          >
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="18 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                18
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="19 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                19
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="20 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                20
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="21 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                21
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="22 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                22
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="23 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                23
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="24 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                24
+              </button>
+            </td>
+          </tr>
+          <tr
+            class="pf-c-calendar-month__dates-row"
+          >
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="25 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                25
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="26 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                26
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="27 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                27
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="28 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                28
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="29 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                29
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="30 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                30
+              </button>
+            </td>
+            <td
+              class="pf-c-calendar-month__dates-cell"
+            >
+              <button
+                aria-label="31 December 2022"
+                class="pf-c-calendar-month__date"
+                tabindex="-1"
+                type="button"
+              >
+                31
+              </button>
+            </td>
+          </tr>
+        </tbody>
+      </table>
+    </div>
+  </article>
+</DocumentFragment>
+`;
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
index 89221dab901..ff1470b9c32 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
@@ -2,15 +2,11 @@
 id: Calendar month
 section: components
 cssPrefix: pf-c-calendar-month
-propComponents: ['CalendarMonth', 'CalendarFormat']
+propComponents: ['CalendarMonth', 'CalendarFormat', 'InlineCalendarProps']
 ---
 
 ## Examples
 
-When used inline and not contained within a [date picker](/components/date-picker), it's wise to wrap the calendar month component in an HTML 
-`article` element and label it with a heading using an appropriate heading level. This ensures that the calendar month is 
-semantically scoped and accessibly labeled.
-
 ### Selectable date
 
 ```ts file="./CalendarMonthSelectableDate.tsx"
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
index 782a7920afd..5a65158ee70 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
@@ -1,17 +1,27 @@
 import React from 'react';
-import { CalendarMonth, Title } from '@patternfly/react-core';
+import { CalendarMonth, Title, InlineCalendarProps } from '@patternfly/react-core';
 
 export const CalendarMonthDateRange: React.FunctionComponent = () => {
   const startDate = new Date(2020, 10, 11);
   const endDate = new Date(2020, 10, 24);
   const disablePreStartDates = (date: Date) => date >= startDate;
 
-  return (
-    <article aria-labelledby="display-range">
+  const inlineProps: InlineCalendarProps = {
+    wrapperComponent: 'article',
+    title: (
       <Title id="display-range" headingLevel="h4">
         Calendar month displaying a range
       </Title>
-      <CalendarMonth validators={[disablePreStartDates]} date={endDate} rangeStart={startDate} />;
-    </article>
+    ),
+    ariaLabeledby: 'display-range'
+  };
+
+  return (
+    <CalendarMonth
+      validators={[disablePreStartDates]}
+      date={endDate}
+      rangeStart={startDate}
+      inlineProps={inlineProps}
+    />
   );
 };
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
index 4a14ca70b64..d21d4e99a7c 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CalendarMonth, Title } from '@patternfly/react-core';
+import { CalendarMonth, Title, InlineCalendarProps } from '@patternfly/react-core';
 
 export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   const [date, setDate] = React.useState(new Date(2020, 10, 24));
@@ -9,13 +9,20 @@ export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
     console.log(`updated month: ${newDate.getMonth()}, updated year: ${newDate.getFullYear()}`);
   };
 
-  return (
-    <article aria-labelledby="favorite-date">
+  const inlineProps: InlineCalendarProps = {
+    wrapperComponent: 'article',
+    title: (
       <Title headingLevel="h4" id="favorite-date">
         Select your favorite date
       </Title>
+    ),
+    ariaLabeledby: 'favorite-date'
+  };
+
+  return (
+    <>
+      <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} inlineProps={inlineProps} />
       <pre>Selected date: {date.toString()}</pre>
-      <CalendarMonth date={date} onChange={setDate} onMonthChange={onMonthChange} />
-    </article>
+    </>
   );
 };

From e888f1cb3c6b43f7e31622ae3744e5744520572d Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Tue, 6 Dec 2022 15:48:00 -0500
Subject: [PATCH 4/6] fix typo and address PR comments

---
 .../src/components/CalendarMonth/CalendarMonth.tsx | 14 +++++++-------
 .../CalendarMonth/__tests__/CalendarMonth.test.tsx |  2 +-
 .../CalendarMonth/examples/CalendarMonth.md        |  2 +-
 .../examples/CalendarMonthDateRange.tsx            |  8 ++++----
 .../examples/CalendarMonthSelectableDate.tsx       |  8 ++++----
 5 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
index 5c8ef9400c4..fcba0a5a351 100644
--- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
+++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -20,13 +20,13 @@ export enum Weekday {
   Saturday
 }
 
-export interface InlineCalendarProps {
+export interface CalendarMonthInlineProps {
   /** Component wrapping the calendar month when used inline. Recommended to be 'article'. */
-  wrapperComponent?: keyof JSX.IntrinsicElements;
+  component?: keyof JSX.IntrinsicElements;
   /** Title of the calendar rendered above the inline calendar month. Recommended to be a 'title' component. */
   title?: React.ReactNode;
   /** Id of the accessible label of the calendar month. Recommended to map to the title. */
-  ariaLabeledby?: string;
+  ariaLabelledby?: string;
 }
 
 /** Additional properties that extend from and can be passed to the main component. These
@@ -58,8 +58,8 @@ export interface CalendarFormat {
   weekStart?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | Weekday;
   /** Accessible label for the year input. */
   yearInputAriaLabel?: string;
-  /** */
-  inlineProps?: InlineCalendarProps;
+  /** Props used to ensure accessibility when displaying the calendar month inline. */
+  inlineProps?: CalendarMonthInlineProps;
 }
 
 export interface CalendarProps extends CalendarFormat, Omit<React.HTMLProps<HTMLDivElement>, 'onChange'> {
@@ -401,9 +401,9 @@ export const CalendarMonth = ({
   );
 
   if (inlineProps !== undefined) {
-    const Component = (inlineProps.wrapperComponent ? inlineProps.wrapperComponent : 'article') as any;
+    const Component = (inlineProps.component ? inlineProps.component : 'article') as any;
     return (
-      <Component {...(inlineProps.ariaLabeledby && { 'aria-labeledby': inlineProps.ariaLabeledby })}>
+      <Component {...(inlineProps.ariaLabelledby && { 'aria-labeledby': inlineProps.ariaLabelledby })}>
         {inlineProps.title}
         {calendarToRender}
       </Component>
diff --git a/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx b/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx
index 3597f975878..72ed79c3607 100644
--- a/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx
+++ b/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx
@@ -58,7 +58,7 @@ test('Next year dates have correct year in aria label', () => {
 
 test('InlineProps render correct wrapper component and attributes', () => {
   const { asFragment } = render(
-    <CalendarMonth inlineProps={{wrapperComponent: 'article', title: <div id="hi">Title</div>, ariaLabeledby: "hi"}} />
+    <CalendarMonth inlineProps={{wrapperComponent: 'article', title: <div id="hi">Title</div>, ariaLabelledby: "hi"}} />
   );
 
   expect(asFragment()).toMatchSnapshot();
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
index ff1470b9c32..0c3b27f6938 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonth.md
@@ -2,7 +2,7 @@
 id: Calendar month
 section: components
 cssPrefix: pf-c-calendar-month
-propComponents: ['CalendarMonth', 'CalendarFormat', 'InlineCalendarProps']
+propComponents: ['CalendarMonth', 'CalendarFormat', 'CalendarMonthInlineProps']
 ---
 
 ## Examples
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
index 5a65158ee70..1bdfd79ea46 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthDateRange.tsx
@@ -1,19 +1,19 @@
 import React from 'react';
-import { CalendarMonth, Title, InlineCalendarProps } from '@patternfly/react-core';
+import { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/react-core';
 
 export const CalendarMonthDateRange: React.FunctionComponent = () => {
   const startDate = new Date(2020, 10, 11);
   const endDate = new Date(2020, 10, 24);
   const disablePreStartDates = (date: Date) => date >= startDate;
 
-  const inlineProps: InlineCalendarProps = {
-    wrapperComponent: 'article',
+  const inlineProps: CalendarMonthInlineProps = {
+    component: 'article',
     title: (
       <Title id="display-range" headingLevel="h4">
         Calendar month displaying a range
       </Title>
     ),
-    ariaLabeledby: 'display-range'
+    ariaLabelledby: 'display-range'
   };
 
   return (
diff --git a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
index d21d4e99a7c..f9fe55fd318 100644
--- a/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
+++ b/packages/react-core/src/components/CalendarMonth/examples/CalendarMonthSelectableDate.tsx
@@ -1,5 +1,5 @@
 import React from 'react';
-import { CalendarMonth, Title, InlineCalendarProps } from '@patternfly/react-core';
+import { CalendarMonth, Title, CalendarMonthInlineProps } from '@patternfly/react-core';
 
 export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
   const [date, setDate] = React.useState(new Date(2020, 10, 24));
@@ -9,14 +9,14 @@ export const CalendarMonthSelectableDate: React.FunctionComponent = () => {
     console.log(`updated month: ${newDate.getMonth()}, updated year: ${newDate.getFullYear()}`);
   };
 
-  const inlineProps: InlineCalendarProps = {
-    wrapperComponent: 'article',
+  const inlineProps: CalendarMonthInlineProps = {
+    component: 'article',
     title: (
       <Title headingLevel="h4" id="favorite-date">
         Select your favorite date
       </Title>
     ),
-    ariaLabeledby: 'favorite-date'
+    ariaLabelledby: 'favorite-date'
   };
 
   return (

From ffb9203d7b9deb5fec08283761a8d9062a796d54 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Tue, 6 Dec 2022 16:59:00 -0500
Subject: [PATCH 5/6] fix test failures

---
 .../src/components/CalendarMonth/CalendarMonth.tsx |  2 +-
 .../__snapshots__/CalendarMonth.test.tsx.snap      | 14 +++++++-------
 2 files changed, 8 insertions(+), 8 deletions(-)

diff --git a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
index fcba0a5a351..996a2f88d12 100644
--- a/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
+++ b/packages/react-core/src/components/CalendarMonth/CalendarMonth.tsx
@@ -403,7 +403,7 @@ export const CalendarMonth = ({
   if (inlineProps !== undefined) {
     const Component = (inlineProps.component ? inlineProps.component : 'article') as any;
     return (
-      <Component {...(inlineProps.ariaLabelledby && { 'aria-labeledby': inlineProps.ariaLabelledby })}>
+      <Component {...(inlineProps.ariaLabelledby && { 'aria-labelledby': inlineProps.ariaLabelledby })}>
         {inlineProps.title}
         {calendarToRender}
       </Component>
diff --git a/packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap b/packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap
index 711e42cdded..cc841fde860 100644
--- a/packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap
+++ b/packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`InlineProps render correct wrapper component and attributes 1`] = `
 <DocumentFragment>
   <article
-    aria-labeledby="hi"
+    aria-labelledby="hi"
   >
     <div
       id="hi"
@@ -51,7 +51,7 @@ exports[`InlineProps render correct wrapper component and attributes 1`] = `
           >
             <span
               hidden=""
-              id="hidden-month-span-1670276129719weupr3792fk"
+              id="hidden-month-span-1670363927190h7dymtjmhtj"
             >
               Month
             </span>
@@ -66,7 +66,7 @@ exports[`InlineProps render correct wrapper component and attributes 1`] = `
                 aria-expanded="false"
                 aria-haspopup="listbox"
                 aria-label="Options menu"
-                aria-labelledby="hidden-month-span-1670276129719weupr3792fk pf-select-toggle-id-13"
+                aria-labelledby="hidden-month-span-1670363927190h7dymtjmhtj pf-select-toggle-id-13"
                 class="pf-c-select__toggle"
                 id="pf-select-toggle-id-13"
                 type="button"
@@ -362,24 +362,24 @@ exports[`InlineProps render correct wrapper component and attributes 1`] = `
               </button>
             </td>
             <td
-              class="pf-c-calendar-month__dates-cell pf-m-current"
+              class="pf-c-calendar-month__dates-cell"
             >
               <button
                 aria-label="5 December 2022"
                 class="pf-c-calendar-month__date"
-                tabindex="0"
+                tabindex="-1"
                 type="button"
               >
                 5
               </button>
             </td>
             <td
-              class="pf-c-calendar-month__dates-cell"
+              class="pf-c-calendar-month__dates-cell pf-m-current"
             >
               <button
                 aria-label="6 December 2022"
                 class="pf-c-calendar-month__date"
-                tabindex="-1"
+                tabindex="0"
                 type="button"
               >
                 6

From 6267c7576cb41c39931a1150c0ee784267c0b527 Mon Sep 17 00:00:00 2001
From: nicolethoen <nthoen@redhat.com>
Date: Thu, 8 Dec 2022 16:25:36 -0500
Subject: [PATCH 6/6] fix tests and snapshots

---
 .../__tests__/CalendarMonth.test.tsx          |   9 +-
 .../__snapshots__/CalendarMonth.test.tsx.snap | 706 ------------------
 2 files changed, 5 insertions(+), 710 deletions(-)
 delete mode 100644 packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap

diff --git a/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx b/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx
index 72ed79c3607..4b70968618e 100644
--- a/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx
+++ b/packages/react-core/src/components/CalendarMonth/__tests__/CalendarMonth.test.tsx
@@ -57,9 +57,10 @@ test('Next year dates have correct year in aria label', () => {
 });
 
 test('InlineProps render correct wrapper component and attributes', () => {
-  const { asFragment } = render(
-    <CalendarMonth inlineProps={{wrapperComponent: 'article', title: <div id="hi">Title</div>, ariaLabelledby: "hi"}} />
-  );
+  render(<CalendarMonth inlineProps={{component: 'article', title: <div id="hi">Title</div>, ariaLabelledby: "hi"}} />);
 
-  expect(asFragment()).toMatchSnapshot();
+  const article = screen.getByRole('article');
+  expect(article).toHaveAttribute('aria-labelledby', 'hi');
+  const title = screen.getByText('Title');
+  expect(title).toBeVisible();
 });
diff --git a/packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap b/packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap
deleted file mode 100644
index cc841fde860..00000000000
--- a/packages/react-core/src/components/CalendarMonth/__tests__/__snapshots__/CalendarMonth.test.tsx.snap
+++ /dev/null
@@ -1,706 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`InlineProps render correct wrapper component and attributes 1`] = `
-<DocumentFragment>
-  <article
-    aria-labelledby="hi"
-  >
-    <div
-      id="hi"
-    >
-      Title
-    </div>
-    <div
-      class="pf-c-calendar-month"
-    >
-      <div
-        class="pf-c-calendar-month__header"
-      >
-        <div
-          class="pf-c-calendar-month__header-nav-control pf-m-prev-month"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Previous month"
-            class="pf-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-13"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 256 512"
-              width="1em"
-            >
-              <path
-                d="M31.7 239l136-136c9.4-9.4 24.6-9.4 33.9 0l22.6 22.6c9.4 9.4 9.4 24.6 0 33.9L127.9 256l96.4 96.4c9.4 9.4 9.4 24.6 0 33.9L201.7 409c-9.4 9.4-24.6 9.4-33.9 0l-136-136c-9.5-9.4-9.5-24.6-.1-34z"
-              />
-            </svg>
-          </button>
-        </div>
-        <div
-          class="pf-c-input-group"
-        >
-          <div
-            class="pf-c-calendar-month__header-month"
-          >
-            <span
-              hidden=""
-              id="hidden-month-span-1670363927190h7dymtjmhtj"
-            >
-              Month
-            </span>
-            <div
-              class="pf-c-select"
-              data-ouia-component-id="OUIA-Generated-Select-single-7"
-              data-ouia-component-type="PF4/Select"
-              data-ouia-safe="true"
-              style="width: 140px;"
-            >
-              <button
-                aria-expanded="false"
-                aria-haspopup="listbox"
-                aria-label="Options menu"
-                aria-labelledby="hidden-month-span-1670363927190h7dymtjmhtj pf-select-toggle-id-13"
-                class="pf-c-select__toggle"
-                id="pf-select-toggle-id-13"
-                type="button"
-              >
-                <div
-                  class="pf-c-select__toggle-wrapper"
-                >
-                  <span
-                    class="pf-c-select__toggle-text"
-                  >
-                    December
-                  </span>
-                </div>
-                <span
-                  class="pf-c-select__toggle-arrow"
-                >
-                  <svg
-                    aria-hidden="true"
-                    fill="currentColor"
-                    height="1em"
-                    role="img"
-                    style="vertical-align: -0.125em;"
-                    viewBox="0 0 320 512"
-                    width="1em"
-                  >
-                    <path
-                      d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-                    />
-                  </svg>
-                </span>
-              </button>
-            </div>
-          </div>
-          <div
-            class="pf-c-calendar-month__header-year"
-          >
-            <input
-              aria-invalid="false"
-              aria-label="Select year"
-              class="pf-c-form-control"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-7"
-              data-ouia-component-type="PF4/TextInput"
-              data-ouia-safe="true"
-              type="number"
-              value="2022"
-            />
-          </div>
-        </div>
-        <div
-          class="pf-c-calendar-month__header-nav-control pf-m-next-month"
-        >
-          <button
-            aria-disabled="false"
-            aria-label="Next month"
-            class="pf-c-button pf-m-plain"
-            data-ouia-component-id="OUIA-Generated-Button-plain-14"
-            data-ouia-component-type="PF4/Button"
-            data-ouia-safe="true"
-            type="button"
-          >
-            <svg
-              aria-hidden="true"
-              fill="currentColor"
-              height="1em"
-              role="img"
-              style="vertical-align: -0.125em;"
-              viewBox="0 0 256 512"
-              width="1em"
-            >
-              <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
-              />
-            </svg>
-          </button>
-        </div>
-      </div>
-      <table
-        class="pf-c-calendar-month__calendar"
-      >
-        <thead
-          class="pf-c-calendar-month__days"
-        >
-          <tr>
-            <th
-              class="pf-c-calendar-month__day"
-              scope="col"
-            >
-              <span
-                class="pf-screen-reader"
-              >
-                Sunday
-              </span>
-              <span
-                aria-hidden="true"
-              >
-                S
-              </span>
-            </th>
-            <th
-              class="pf-c-calendar-month__day"
-              scope="col"
-            >
-              <span
-                class="pf-screen-reader"
-              >
-                Monday
-              </span>
-              <span
-                aria-hidden="true"
-              >
-                M
-              </span>
-            </th>
-            <th
-              class="pf-c-calendar-month__day"
-              scope="col"
-            >
-              <span
-                class="pf-screen-reader"
-              >
-                Tuesday
-              </span>
-              <span
-                aria-hidden="true"
-              >
-                T
-              </span>
-            </th>
-            <th
-              class="pf-c-calendar-month__day"
-              scope="col"
-            >
-              <span
-                class="pf-screen-reader"
-              >
-                Wednesday
-              </span>
-              <span
-                aria-hidden="true"
-              >
-                W
-              </span>
-            </th>
-            <th
-              class="pf-c-calendar-month__day"
-              scope="col"
-            >
-              <span
-                class="pf-screen-reader"
-              >
-                Thursday
-              </span>
-              <span
-                aria-hidden="true"
-              >
-                T
-              </span>
-            </th>
-            <th
-              class="pf-c-calendar-month__day"
-              scope="col"
-            >
-              <span
-                class="pf-screen-reader"
-              >
-                Friday
-              </span>
-              <span
-                aria-hidden="true"
-              >
-                F
-              </span>
-            </th>
-            <th
-              class="pf-c-calendar-month__day"
-              scope="col"
-            >
-              <span
-                class="pf-screen-reader"
-              >
-                Saturday
-              </span>
-              <span
-                aria-hidden="true"
-              >
-                S
-              </span>
-            </th>
-          </tr>
-        </thead>
-        <tbody>
-          <tr
-            class="pf-c-calendar-month__dates-row"
-          >
-            <td
-              class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
-            >
-              <button
-                aria-label="27 November 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                27
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
-            >
-              <button
-                aria-label="28 November 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                28
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
-            >
-              <button
-                aria-label="29 November 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                29
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell pf-m-adjacent-month"
-            >
-              <button
-                aria-label="30 November 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                30
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="1 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                1
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="2 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                2
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="3 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                3
-              </button>
-            </td>
-          </tr>
-          <tr
-            class="pf-c-calendar-month__dates-row"
-          >
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="4 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                4
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="5 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                5
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell pf-m-current"
-            >
-              <button
-                aria-label="6 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="0"
-                type="button"
-              >
-                6
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="7 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                7
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="8 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                8
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="9 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                9
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="10 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                10
-              </button>
-            </td>
-          </tr>
-          <tr
-            class="pf-c-calendar-month__dates-row"
-          >
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="11 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                11
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="12 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                12
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="13 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                13
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="14 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                14
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="15 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                15
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="16 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                16
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="17 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                17
-              </button>
-            </td>
-          </tr>
-          <tr
-            class="pf-c-calendar-month__dates-row"
-          >
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="18 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                18
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="19 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                19
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="20 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                20
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="21 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                21
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="22 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                22
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="23 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                23
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="24 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                24
-              </button>
-            </td>
-          </tr>
-          <tr
-            class="pf-c-calendar-month__dates-row"
-          >
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="25 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                25
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="26 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                26
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="27 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                27
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="28 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                28
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="29 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                29
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="30 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                30
-              </button>
-            </td>
-            <td
-              class="pf-c-calendar-month__dates-cell"
-            >
-              <button
-                aria-label="31 December 2022"
-                class="pf-c-calendar-month__date"
-                tabindex="-1"
-                type="button"
-              >
-                31
-              </button>
-            </td>
-          </tr>
-        </tbody>
-      </table>
-    </div>
-  </article>
-</DocumentFragment>
-`;