a11y: fix wrong role for day button

[Kosai106]

Context

Fixes #1688 by changing the button role to the correct button role rather than gridcell.

Also adds aria-hidden="true" on the hidden gridcell div.

Analysis

See GitHub issue: #1688

Solution

See "Context" section.

[gpbl]

Hey thanks a lot for your contribution. Before changing the role, I'd like to add more accessibility tests - so please have patience before we merge this.

BTW, do you know some best practice to test the screen readers?

[Kosai106]

@gpbl No worries - Sadly I don't know of a way to automate screen reader tests.
We use axe-playwright to do automated accessibility tests, which I suppose could help you too.

[gpbl]

OK @Kosai106 I could add the aXe tests for website. Now that the role is button, I need to fix the other test failures :)

[GeorgeTaveras1231]

I believe this will break accessibility in some ways because button elements are not supposed to be children of grid > rowgroup. I would recommend testing any changes with a screen reader.

I've found that the structure that makes the most sense is to add a div with the role of gridcell and the button inside the gridcell. Additionally, using the aria-pressed attribute for the button when it is selected (since aria-selected is not valid attribute for button elements, and simply having aria-selected in the gridcell did not work in VoiceOver. [as in, it didn't announce that the day was selected]). Adding aria-pressed changes the buttons to toggle buttons, which seems appropriate since a date is either selected or not selected.

So

<table role="grid">
<!-- OMITTED HEAD -->
    <tbody role="rowgroup">
      <tr>
        <td role="presentation">
          <div role="gridcell">
            <button name="day" aria-label="April 1st, 2022" aria-pressed="false"  tabindex="0" type="button">1</button>
           </div>
        </td>
        <!-- !! SELECTED STATE -->
        <td role="presentation">
          <div role="gridcell" aria-selected="true">
            <button name="day" aria-label="April 1st, 2022" aria-pressed="true"  tabindex="0" type="button">1</button>
           </div>
        </td>
      </tr>
   </tbody>
</table>

[GeorgeTaveras1231]

You can possibly consider removing the div and changing role="presentation" to role="gridcell" in the td element. But please test in a screen reader.

[gpbl]

@GeorgeTaveras1231 thanks for your feedback here. Screen readers do read better the calendar when overriding roles, but the aXe test that doesn't like that.

I believe the correct HTML is to render a grid with grid cells being clickable, focusable, and "aria-selected". However, for some old design choices, we have now a button instead of a grid cell. Not easy to change the underlying HTML without introducing breaking changes.

[GeorgeTaveras1231]

@gpbl 🤔 I have doubts about this approach. From my research it seems gridcell elements are grouping elements (except when the content is editable [think spreadsheet, for example]). In which case, clicking on the cells is just used to focus on the cell to allow the user to type. The way in which the DayPicker works, each Day behaves as a toggle button. Clicking on it, toggles the selected/unselected state. A gridcell by itself wont be able to communicate the sort of interactions each Day supports, as well as a toggle button can.

I also looked at the ARIA role hierarchy to support this point, where you can see interactive elements generally stem from the abstract widget role. There you'll see the button role, whereas the gridcell role inherits from section, which is a structure role, and is mainly for grouping content.

Resources:

• interactive gridcell'
• ARIA role hierarchy

[GeorgeTaveras1231]

Additionally you can consider making each day a checkbox or radio depending on the mode (single -> radio; multiple -> checkbox) 💡