fix(Datepicker): add aria role to Flatpickr dialog (#7465)

Co-authored-by: Josh Black <[email protected]>
Co-authored-by: kodiakhq[bot] <49736102+kodiakhq[bot]@users.noreply.github.com>

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) => {