What does this PR do?

This PR adds a box around the daysoftheweek as well as styledweekscontainer

Since styledweekscontainer contains the role rowgroup when using the role rowgroup this needs to be wrapped within either a role grid table treegrid previously we had the role grid on the styledCalendar however with the role grid this can not contain more than one tabbable element so we needed to move it down after the previous and next buttons.

Where should the reviewer start?

calendar.js

What testing has been done on this PR?

locally

How should this be manually tested?

storybook in calendar for accessibility

Do Jest tests follow these best practices?

• screen is used for querying.
• The correct query is used. (Refer to this list of queries)
• asFragment() is used for snapshot testing.

Any background context you want to provide?

Calendar has the following accessibility error: 'Ensure elements with an ARIA role that require parent roles are contained by them'
An element in Calendar has role="row" and doesn't have the correct parent role.

What are the relevant issues?

closes #7424

Screenshots (if appropriate)

Do the grommet docs need to be updated?

no

Should this PR be mentioned in the release notes?

no

Is this change backwards compatible or is it a breaking change?

backwards compatible