feat: adding tabbable events (jquense#987)

* Adding tabbable events * Adding button reset & Chrome's default outline for all browsers * Scoping button reset to .rbc-event * Moving reset to event.less
additio · Sep 14, 2018 · 6a94e72 · 6a94e72
1 parent 1d62c43
commit 6a94e72
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 3 deletions.
diff --git a/src/EventCell.js b/src/EventCell.js
@@ -70,7 +70,7 @@ class EventCell extends React.Component {
 
     return (
       <EventWrapper {...this.props} type="date">
-        <div
+        <button
           {...props}
           style={{ ...userProps.style, ...style }}
           className={cn('rbc-event', className, userProps.className, {
@@ -83,7 +83,7 @@ class EventCell extends React.Component {
           onDoubleClick={e => onDoubleClick && onDoubleClick(event, e)}
         >
           {typeof children === 'function' ? children(content) : content}
-        </div>
+        </button>
       </EventWrapper>
     )
   }

diff --git a/src/less/event.less b/src/less/event.less
@@ -1,11 +1,16 @@
 @import './variables.less';
 
 .rbc-event {
+  border: none;
+  box-shadow: none;
+  margin: 0;
   padding: @event-padding;
   background-color: @event-bg;
   border-radius: @event-border-radius;
   color: @event-color;
   cursor: pointer;
+  width: 100%;
+  text-align: left;
 
   .rbc-slot-selecting & {
     cursor: inherit;
@@ -15,6 +20,10 @@
   &.rbc-selected {
     background-color: darken(@event-bg, 10%);
   }
+
+  &:focus {
+    outline: 5px auto @event-outline;
+  }
 }
 
 .rbc-event-label {
@@ -44,4 +53,3 @@
   border-bottom-left-radius: 0;
   border-bottom-right-radius: 0;
 }
-
diff --git a/src/less/variables.less b/src/less/variables.less
@@ -16,6 +16,7 @@
 
 @event-bg: #3174ad;
 @event-border: darken(#3174ad, 10%);
+@event-outline: #3b99fc;
 @event-color: #fff;
 @event-border-radius: 5px;
 @event-padding: 2px 5px;