Enhancing accessibility: implementing proper table semantics

[ingoncalves]

Before you start - checklist

• I followed instructions in documentation written for my React-Calendar version
• I have checked if this bug is not already reported

Description

The current implementation of the calendar component resembles a table visually, but it lacks proper table semantics, rendering it inaccessible for users who rely on assistive technology such as screen readers. To ensure equal accessibility for all users and improve the component's usability, it should be updated with appropriate table semantics.

Steps to reproduce

1. Access the web application with the calendar component.
2. Use a screen reader or accessibility tool for testing.
3. Try to interact with the calendar using the screen reader (through keyboard navigation).
4. Note the difficulty in understanding its content and structure.

Expected behavior

The calendar component should have proper table semantics, following the accessibility guidelines, so that assistive technology can accurately interpret its content and navigation. By implementing table semantics, users with disabilities will be able to interact with the calendar seamlessly and understand its structure and data.

Actual behavior

The calendar component appears as a table, but it is essentially a series of buttons without proper table markup. This makes it difficult for screen readers to interpret and convey the calendar's content, leading to a suboptimal user experience for people with visual impairments or other disabilities.

Additional information

Proposed Solution:

To address this issue, the calendar component should be refactored to use proper table markup, such as <table>, <thead>, <tbody>, <tr>, and <td>. Each cell of the table should represent a specific date or time period within the calendar. Alternatively, table semantics can be added with WAI-ARIA roles instead. (E.g., role="table", role="cell", etc.)

This enhancement will significantly improve the accessibility of our calendar component, making it a more inclusive and valuable feature for all users.

Environment

• React-Calendar version: 4.6.0
• React version: 17.0.2

[wojtekmaj]

Hey, thanks for this. This enhancement would be indeed very welcome. If anyone wants to look into this, it would be appreciated a lot.

[github-actions]

This issue is stale because it has been open 90 days with no activity. Remove stale label or comment or this issue will be closed in 14 days.

[github-actions]

This issue was closed because it has been stalled for 14 days with no activity.

[tskarhed]

@wojtekmaj Hi, I just looked into this. Since the HTML needs some updating, I don't think that it is easy to remain backwards compatible with the class names. Is this something you are willing to accept? I can open a PR, which contains some significant changes (also some aspects of react-calendar which I have not thought of or figured out how to handle). If not, I could open a more lightweight one that adds pressed/selected state and makes the dates list items (not quite desired). I think there are some great UX benefits to make the calendar a table, and navigate using arrow keys.