Accessibility: Navigation options within react-datepicker not adequately relayed to screen reader

[Ibabalola]

Describe the bug Navigation options within the <div class="react-datepicker__portal"> […] </div> are not adequately relayed to screen reader users. The modal itself is written with <div> elements and lacks the accessible attributes to relay important information to screen reader users. In addition, the dates are written within a list box, which is not an appropriate role for a date selection region.

To Reproduce Steps to reproduce the behavior:

1. Open the react date picker via modal or custominput <button />

Expected behavior The structure of content within the date region should be adequately relayed to screen reader users, when this information is not present, it can be difficult to understand and navigate the content.

In this instance, we suggest following the W3 APG date picker dialog example.

Add the accessible attributes needed to relay important information to screen reader users.

For example:

<div class="table-wrap"><table class="dates" role="grid" aria-labelledby="id-grid-label">
      <thead>
        <tr>
          <th scope="col" abbr="Sunday">Su</th>
          <th scope="col" abbr="Monday">Mo</th>
          <th scope="col" abbr="Tuesday">Tu</th>
          <th scope="col" abbr="Wednesday">We</th>
          <th scope="col" abbr="Thursday">Th</th>
          <th scope="col" abbr="Friday">Fr</th>
          <th scope="col" abbr="Saturday">Sa</th>
        </tr>
      </thead>

      <tbody>
        <tr>
          <td class="disabled" tabindex="-1"></td>
          <td class="disabled" tabindex="-1"></td>
          <td class="disabled" tabindex="-1"></td>
          <td class="disabled" tabindex="-1"></td>
          <td class="disabled" tabindex="-1"></td>
          <td class="disabled" tabindex="-1"></td>
          <td tabindex="-1" data-date="2020-02-01">1</td>
        </tr>
        <tr>
          <td tabindex="-1" data-date="2020-02-02">2</td>
          <td tabindex="-1" data-date="2020-02-03">3</td>
          <td tabindex="-1" data-date="2020-02-04">4</td>
          <td tabindex="-1" data-date="2020-02-05">5</td>
          <td tabindex="-1" data-date="2020-02-06">6</td>
          <td tabindex="-1" data-date="2020-02-07">7</td>
          <td tabindex="-1" data-date="2020-02-08">8</td>
        </tr>
        <tr>
          <td tabindex="-1" data-date="2020-02-09">9</td>
          <td tabindex="-1" data-date="2020-02-10">10</td>
          <td tabindex="-1" data-date="2020-02-11">11</td>
          <td tabindex="-1" data-date="2020-02-12">12</td>
          <td tabindex="-1" data-date="2020-02-13">13</td>
          <td tabindex="0" data-date="2020-02-14" role="gridcell" aria-selected="true">14</td>
          <td tabindex="-1" data-date="2020-02-15">15</td>
        </tr>
        <tr>
          <td tabindex="-1" data-date="2020-02-16">16</td>
          <td tabindex="-1" data-date="2020-02-17">17</td>
          <td tabindex="-1" data-date="2020-02-18">18</td>
          <td tabindex="-1" data-date="2020-02-19">19</td>
          <td tabindex="-1" data-date="2020-02-20">20</td>
          <td tabindex="-1" data-date="2020-02-21">21</td>
          <td tabindex="-1" data-date="2020-02-22">22</td>
        </tr>
        <tr>
          <td tabindex="-1" data-date="2020-02-23">23</td>
          <td tabindex="-1" data-date="2020-02-24">24</td>
          <td tabindex="-1" data-date="2020-02-25">25</td>
          <td tabindex="-1" data-date="2020-02-26">26</td>
          <td tabindex="-1" data-date="2020-02-27">27</td>
          <td tabindex="-1" data-date="2020-02-28">28</td>
          <td tabindex="-1" data-date="2020-02-29">29</td>
        </tr>
        <tr>
          <td tabindex="-1" data-date="2020-02-30">30</td>
          <td tabindex="-1" data-date="2020-02-31">31</td>
          <td class="disabled" tabindex="-1"></td>
          <td class="disabled" tabindex="-1"></td>
          <td class="disabled" tabindex="-1"></td>
          <td class="disabled" tabindex="-1"></td>
          <td class="disabled" tabindex="-1"></td>
        </tr>
      </tbody>
    </table></div>

Screenshots

<div class="react-datepicker__month" aria-label="Month May, 2024" role="listbox"></div>

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Smartphone (please complete the following information):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]

Additional context Add any other context about the problem here.