[BUG] Accessibility: Role not inside the required context

[rickdoesburg]

Describe the bug

1. The row with days of the week: <div class="vc-week" data-vc="week" role="row" aria-label="Days of the week"> has the role="row". This role is only allowed inside another role (table, grid or treegrid).
2. The dates themself (1,2,3,4, etc) have a role="gridcell". This role is only allowed inside a row, which in his turn is only allowed in a role="grid".
3. Adding on issue 2, the role="grid" is present, but the required children with role="row" are missing.

Steps to reproduce
Please list the exact steps to reproduce the issue:

1. 3.0.3
2. Setup a regular calendar, nothing special.
3. n/a

Expected behavior
The correct role placement on the div elements.

<div class="vc-wrapper" data-vc="wrapper">
  <!-- Aria label added -->
  <div class="vc-content" data-vc="content" role="table" aria-label="Calendar">
    
    <!-- Days of the week as columnheaders, rol=row and columnheader -->
    <div class="vc-week" data-vc="week" role="row" aria-label="Days of the week">
      <div role="columnheader" class="vc-week__day" aria-label="Monday" data-vc-week-day="1">Ma</div>
      <div role="columnheader" class="vc-week__day" aria-label="Tuesday" data-vc-week-day="2">Di</div>
      <!--- ... -->
    </div>

    <!-- Dates -->
    <div class="vc-dates" data-vc="dates" role="rowgroup" aria-live="assertive" aria-label="Datums in the current month">
<!-- One row per week --->
      <div role="row" class="vc-week-row">
        <button class="vc-date__btn" type="button" role="gridcell" aria-label="September 1, 2025" data-vc-date-btn="">1</button>
        <button class="vc-date__btn" type="button" role="gridcell" aria-label="September 2, 2025" data-vc-date-btn="">2</button>
        <button class="vc-date__btn" type="button" role="gridcell" aria-label="September 3, 2025" data-vc-date-btn="">3</button>
        <button class="vc-date__btn" type="button" role="gridcell" aria-label="September 4, 2025" data-vc-date-btn="">4</button>
        <button class="vc-date__btn" type="button" role="gridcell" aria-label="September 5, 2025" data-vc-date-btn="">5</button>
        <button class="vc-date__btn" type="button" role="gridcell" aria-label="September 6, 2025" data-vc-date-btn="">6</button>
        <button class="vc-date__btn" type="button" role="gridcell" aria-label="September 7, 2025" data-vc-date-btn="">7</button>
      </div>
      <!-- ... -->

    </div>
  </div>
</div>

CodeSandbox example (REQUIRED)
The example link perfectly shows the issue:

Example link: https://codesandbox.io/p/sandbox/eloquent-dubinsky-cfthqk

Additional context
SiteImprove notified me of this issue.

[PaulKiddle]

This is also causing accessibility issues for me -- macOS VoiceOver in Safari cannot navigate to or announce the date buttons because of this missing role.

Perhaps fixable by wrapping the week cells in a div with role=row and display:contents

[rickdoesburg]

@PaulKiddle Thanks for the addition. Adding display: contents might be a smart move. However there seem to be some unresolved browser implementation issues so this requires some testing if the children don't lose their semantics

[PaulKiddle]

@rickdoesburg display: contents does seem to cancel out role=row on older versions of Safari, but given that's the browser currently having issues I think it's worth doing as a short-term fix at least - from what I can tell it's not going to break anything that isn't already broken.

[rickdoesburg]

@PaulKiddle I've created a PR in which I fixed both this and your other bug. Check it out if you have a chance..#388