[BpkCalendar] Accessibility roles

[gert-janvercauteren]

BpkCalendar

Add the appropriate 'roles' to different components to make the calendar more accessible and easier to navigate for people using screen readers

You can play test the screen reader and keyboard interaction in the preview

• Enabled grid navigation (Screen reader will announce that)
• Removed aria-hidden of disabled date cells, it would mess up the grid structure.

Remember to include the following changes:

• Ensure the PR title includes the name of the component you are changing so it's clear in the release notes for consumers of the changes in the version e.g [KOA-123][BpkButton] Updating the colour
• README.md (If you have created a new component)
• Component README.md
• Tests
• Accessibility tests
  • The following checks were performed:
    • Ability to navigate using a keyboard only
    • Zoom functionality (Deque University explanation):
      • The page SHOULD be functional AND readable when only the text is magnified to 200% of its initial size
      • Pages must reflow as zoom increases up to 400% so that content continues to be presented in only one column i.e. Content MUST NOT require scrolling in two directions (both vertically and horizontally)
    • Ability to navigate using a screen reader only
• Storybook examples created/updated
• For breaking changes or deprecating components/properties, migration guides added to the description of the PR. If the guide has large changes, consider creating a new Markdown page inside the component's docs folder and link it here

[github-actions]

Visit https://backpack.github.io/storybook-prs/3699 to see this build running in a browser.

[github-actions]

Visit https://backpack.github.io/storybook-prs/3699 to see this build running in a browser.

[github-actions]

Visit https://backpack.github.io/storybook-prs/3699 to see this build running in a browser.

[github-actions]

	Warnings
⚠️	Package source files (e.g. packages/package-name/src/Component.tsx) were updated, but type files weren't. Have you checked that no types have changed?

Browser support

If this is a visual change, make sure you've tested it in multiple browsers.

Generated by 🚫 dangerJS against bd74da2

[github-actions]

Visit https://backpack.github.io/storybook-prs/3699 to see this build running in a browser.

[anambl]

I think this might be causing the blocked dates in the scrollable calendar to be read by the screen reader which doesn't seem to be happening on the main branch 🤔

[olliecurtis]

Agree with this point, currently the calendar wouldn't allow a AT user to go to dates that are in the past and make them inaccessible so with this removal this now allows them to select previous dates

[olliecurtis]

I guess are we happy with users being able to get to that date and with it mentioning 'dimmed' this is ok?

[anambl]

Had a chat with Gert about this - it's not possible to keep this with the role of grid as it completely messes it up. Adding grid though brings a lot of benefits though like navigating up and down so even though you can now navigate through the blocked dates, it will be at most 30 days blocked, but you can just move down through the calendar so it's quick

[gert-janvercauteren]

Yes, I purposefully unblocked the dimmed dates as otherwise, Grid navigation wouldn't work correctly :(