From 02bbeb1bc2bd91343fc30b9fea3098d962338b55 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?N=C3=A9stor=20Mar=C3=ADn=20Siruela?=
 <nmarinsiruela@gmail.com>
Date: Fri, 12 Feb 2021 16:38:53 +0000
Subject: [PATCH] feat: add ARIA roles to month view (#1863)

Co-authored-by: Nmarinsiruela <nestor@insendi.com>
---
 src/DateContentRow.js | 3 ++-
 src/DateHeader.js     | 2 +-
 src/Header.js         | 6 +++++-
 src/Month.js          | 9 +++++++--
 4 files changed, 15 insertions(+), 5 deletions(-)

diff --git a/src/DateContentRow.js b/src/DateContentRow.js
index d00333086..b0e23651c 100644
--- a/src/DateContentRow.js
+++ b/src/DateContentRow.js
@@ -153,7 +153,7 @@ class DateContentRow extends React.Component {
     }
 
     return (
-      <div className={className}>
+      <div className={className} role="rowgroup">
         <BackgroundCells
           date={date}
           getNow={getNow}
@@ -175,6 +175,7 @@ class DateContentRow extends React.Component {
             'rbc-row-content',
             showAllEvents && 'rbc-row-content-scrollable'
           )}
+          role="row"
         >
           {renderHeader && (
             <div className="rbc-row " ref={this.createHeadingRef}>
diff --git a/src/DateHeader.js b/src/DateHeader.js
index dd2b88d35..13aba6c63 100644
--- a/src/DateHeader.js
+++ b/src/DateHeader.js
@@ -7,7 +7,7 @@ const DateHeader = ({ label, drilldownView, onDrillDown }) => {
   }
 
   return (
-    <a href="#" onClick={onDrillDown}>
+    <a href="#" onClick={onDrillDown} role="cell">
       {label}
     </a>
   )
diff --git a/src/Header.js b/src/Header.js
index 52ce4b364..9c0eed6e5 100644
--- a/src/Header.js
+++ b/src/Header.js
@@ -2,7 +2,11 @@ import PropTypes from 'prop-types'
 import React from 'react'
 
 const Header = ({ label }) => {
-  return <span>{label}</span>
+  return (
+    <span role="columnheader" aria-sort="none">
+      {label}
+    </span>
+  )
 }
 
 Header.propTypes = {
diff --git a/src/Month.js b/src/Month.js
index 70cc667c2..bdbb691c0 100644
--- a/src/Month.js
+++ b/src/Month.js
@@ -80,8 +80,12 @@ class MonthView extends React.Component {
     this._weekCount = weeks.length
 
     return (
-      <div className={clsx('rbc-month-view', className)}>
-        <div className="rbc-row rbc-month-header">
+      <div
+        className={clsx('rbc-month-view', className)}
+        role="table"
+        aria-label="Month View"
+      >
+        <div className="rbc-row rbc-month-header" role="row">
           {this.renderHeaders(weeks[0])}
         </div>
         {weeks.map(this.renderWeek)}
@@ -160,6 +164,7 @@ class MonthView extends React.Component {
           isOffRange && 'rbc-off-range',
           isCurrent && 'rbc-current'
         )}
+        role="cell"
       >
         <DateHeaderComponent
           label={label}