fix(date-range): date range axe issue

[mihai-albu-sage]

fixes: #7116

Proposed behaviour

When the DateRange component is used an accessibility violation is reported by the Axe Dev Tool scan, more precisely: All page content should be contained by landmarks

In order to solve this the role='region' has been used to group the elements from the DatePicker along with the possibility to add either aria-label or aria-labelledby in order to describe the purpose or content for the region.

Current behaviour

The DatePicker component is used an accessibility violation is reported by the Axe Dev Tool scan, more precisely: All page content should be contained by landmarks as it can be seen in the screenshot below:

Checklist

• Commits follow our style guide
• Related issues linked in commit messages if required
• Screenshots are included in the PR if useful
• All themes are supported if required
• Unit tests added or updated if required
• Playwright automation tests added or updated if required
• Storybook added or updated if required
• Translations added or updated (including creating or amending translation keys table in storybook) if required
• Typescript d.ts file added or updated if required
• Related docs have been updated if required

QA

• Tested in provided StackBlitz sandbox/Storybook
• Add new Playwright test coverage if required
• Carbon implementation matches Design System/designs
• UI Tests GitHub check reviewed if required

Additional context

Testing instructions

1. Open: https://carbon.sage.com/iframe.html?globals=&args=&id=date-range--default-story&viewMode=story in a new tab
2. Run an Axe Dev Tools full page scan , making sure the DatePicker is opened while the scan is running.