Calendar month

Accessibility

To implement an accessible PatternFly calendar month component:

• Ensure the contents of the calendar month can be navigated to and interacted with via keyboard and other assistive technologies such as a screen reader
• Ensure the currently selected date cell has the aria-current="date" attribute
• Ensure the contents of the calendar month is announced to assistive technologies correctly. For example, the month dropdown should indicate the currently selected month, and the date cells should indicate the currently selected and focused cell.
• If the calendar month is displayed inline rather than within a popover, provide a visible title that labels the calendar month

Testing

At a minimum, a calendar month should meet the following criteria:

• Standard keyboard navigation can be used to navigate between the contents of a calendar month or other focusable elements.Tab navigates to the next calendar month content or focusable element, and Shift + Tab navigates to the previous calendar month content or focusable element.
• Standard keyboard interaction can be used to interact with the calendar month header content.Enter and Space should be able to activate the "previous month" and "next month" buttons, open the month dropdown, and select a month dropdown item. Escape and Tab should close the month dropdown if it is open.
• Standard keyboard interaction can be used to interact with the calendar month date cells.Arrow keys should navigate between each individual date cell. Enter and Space should select a date cell.
• The currently selected date cell has the aria-current="date" attribute.
• The calendar month has a visible title labeling it if it's displayed inline.

React customization

The following React props have been provided for more fine-tuned control over accessibility.

Inline props

If the calendar month is intended to be displayed inline - rather than inside of a popover as seen in our date picker component - the inlineProps prop object should be passed in with the following:

• component: provides a wrapper for the calendar month. Typically this should be "article".
• title: renders a visible title above the calendar month. An id attribute should be passed into the title so that its value can be passed to the ariaLabelledby of the inlineProps object.
• ariaLabelledby: provides an accessible name for the calendar month. If a title is passed into the inlineProps object, the title's id should be passed into this prop.

For example:

const inlineProps = {
  component: "article",
  title: (
    <Title id="example-title">Choose a date</Title>
  ),
  ariaLabelledby: "example-title
}
<CalendarMonth inlineProps={inlineProps} />

HTML/CSS customization

The following HTML attributes and PatternFly classes can be used for more fine-tuned control over accessibility.