diff --git a/packages/react/src/components/DatePicker/DatePicker.js b/packages/react/src/components/DatePicker/DatePicker.js index 55a05476f28f..a2721ae000dc 100644 --- a/packages/react/src/components/DatePicker/DatePicker.js +++ b/packages/react/src/components/DatePicker/DatePicker.js @@ -329,6 +329,7 @@ export default class DatePicker extends Component { onValueUpdate: onHook, }); this.addKeyboardEvents(this.cal); + this.addRoleAttributeToDialog(); } } } @@ -386,6 +387,22 @@ export default class DatePicker extends Component { } }; + /** + * Flatpickr's calendar dialog is not rendered in a landmark causing an + * error with IBM Equal Access Accessibility Checker so we add an aria + * role to the container div. + */ + addRoleAttributeToDialog = () => { + if (this.inputField) { + this.cal.calendarContainer.setAttribute('role', 'region'); + // IBM EAAC requires an aria-label on a role='region' + this.cal.calendarContainer.setAttribute( + 'aria-label', + 'calendar-container' + ); + } + }; + addKeyboardEvents = (cal) => { if (this.inputField) { this.inputField.addEventListener('keydown', (e) => {