feat: add ARIA roles to month view (jquense#1863)

Co-authored-by: Nmarinsiruela <[email protected]>
additio · Feb 12, 2021 · 02bbeb1 · 02bbeb1
1 parent e797ab3
commit 02bbeb1
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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}