Flex/Grid/View: add support for landmark role and labelling

[majornista]

🙋 Feature Request

Flex, Grid, and View are popularly used as generic containers for controlling layout.

For accessibility, it would be helpful if:

1. one could add a WAI-ARIA landmark role
2. the element could be rendered using an HTML5 landmark elementType
3. when using a landmark role or HTML5 elementType, the element should support labeling using aria-label or aria-labelledby.

🤔 Expected Behavior

Support optional role prop restricted to the following WAI-ARIA landmark roles:

• banner
• complementary
• contentinfo
• form
• main
• navigation
• region
• search

Also, so that flex can be use within components that expect particular children, like a list or a table:

• presentation
• none

Support optional elementType prop restricted to the following HTML5 landmark tags:

• aside
• footer
• form
• header
• main
• nav
• section

When either role or elementType is used, support labeling of the rendered element using aria-label or aria-labelledby.

😯 Current Behavior

Flex, Grid, and View do not support role, aria-label, or aria-labelledby, and are only rendered using the div element. In order to add a landmark, one would have to either wrap the component or its children in a landmark element, setting display: contents to avoid breaking layouts, but this changes the DOM structure, and could break fragile tests. During remediation, it is oftentimes simpler to add WAI-ARIA roles than to change the DOM structure.

💁 Possible Solution

🔦 Context

💻 Examples

🧢 Your Company/Team

Adobe/Accessibility

🎁 Tracking Ticket (optional)