[a11y]: Content is not within a landmark element (flatpicker drop down component)

[jackpronske]

Package

@carbon/react

Browser

Chrome

Operating System

MacOS

Package version

1.50.0

React version

1.50.0

Automated testing tool and ruleset

IBM Equal Accessibility Assessment Tool - Latest Version

Assistive technology

No response

Description

Accessibility checks are showing that the dropdown element used within the Carbon Datepicker (flatpicker) component is not within a landmark element. After much investigation and debugging, I'm finding that this particular dropdown html element is loading OUTSIDE of the main element of the entire page. Below are two screenshots:

• Cloud Messaging UI html code, showing that the flatpicker is loading outside of the main element.

• Screenshot of https://stackblitz.com/edit/github-y8a1g6-gxjtjv?file=src%2FApp.jsx , a Stackblitz showing the isolated component also loading outside of main element.

---

I have found that manually moving this dropdown's html element to inside the main content, then running the accessibility check will have it pass. I could potentially run a script that changes this everytime the page loads, but it seems that this is an unintended bug caused by the calendar component.

WCAG 2.1 Violation

No response

Reproduction/example

https://stackblitz.com/edit/github-y8a1g6-gxjtjv?file=src%2FApp.jsx

Steps to reproduce

1. Open react page with Carbon Calendar Component (flatpicker, range)
2. click on calendar, opening drop down
3. Open elements in dev tools, see that the dropdown html element is outside the main html element 3.5) run a11y check (should produce error on messaging ui page)

Code of Conduct

• [X] I agree to follow this project's Code of Conduct
• [X] I checked the current issues for duplicate problems

[tw15egan]

@jackpronske you can use appendTo to attach it to a specific DOM node. I just changed the HTML to use main instead of a div for the wrapper, and targeted the root ID.

[jackpronske]

This fix totally worked for temporary means! Thanks @tw15egan

[andreancardona]

@jackpronske Hey Jack I'm closing this issue - the above solution by TJ is actually how we anticipate folks to navigate Flatpicker. In the sense that it is up to the user to attach it to their specified DOM node.