From 23133e549f8646b03ecf01b82a746e2cb74c3a30 Mon Sep 17 00:00:00 2001
From: Pam Bortnick <pambortnick@c02z73balvdq.lan>
Date: Tue, 27 Oct 2020 10:46:34 -0400
Subject: [PATCH 1/4] add style, active style, and onclick props

---
 src/index.js | 15 +++++++++++++--
 1 file changed, 13 insertions(+), 2 deletions(-)

diff --git a/src/index.js b/src/index.js
index 08a19bd..dcfd172 100644
--- a/src/index.js
+++ b/src/index.js
@@ -11,12 +11,18 @@ class ReactCarouselDots extends React.Component {
     margin: PropTypes.number,
     visible: PropTypes.number,
     className: PropTypes.string,
+    onClick: PropTypes.func,
+    style: PropTypes.object,
+    activeStyle: PropTypes.object,
   }
   static defaultProps = {
     size: 16,
     margin: 1,
     visible: 5,
     className: '',
+    onClick: null,
+    style: null,
+    activeStyle: null,
   }
   constructor(props) {
     super(props);
@@ -177,12 +183,16 @@ class ReactCarouselDots extends React.Component {
     return newBigDots;
   }
 
-  getDotStyle = () => {
+  getDotStyle = (isActive) => {
     let style = {
       height: this.props.size,
       width: this.props.size,
       marginRight: this.props.margin,
       marginLeft: this.props.margin,
+      ...this.props.style,
+      ...(isActive && {
+        ...this.props.activeStyle
+      }),
     };
     if (this.state.direction === 'forwards') {
       if (this.props.active < (this.props.visible - 2)) {
@@ -272,8 +282,9 @@ class ReactCarouselDots extends React.Component {
       dots.push((
         <div
           key={i}
-          style={this.getDotStyle()}
+          style={this.getDotStyle(this.props.active === i)}
           className="dot-holder"
+          onClick={() => this.props.onClick(i)}
         >
           <div
             key={`${i}-inner`}

From 6ad8d1937a60bbf8564ce206a9010bc2a7ae4d7a Mon Sep 17 00:00:00 2001
From: Pam Bortnick <pambortnick@c02z73balvdq.lan>
Date: Tue, 27 Oct 2020 10:49:35 -0400
Subject: [PATCH 2/4] move styles

---
 src/index.js | 16 +++++++++-------
 1 file changed, 9 insertions(+), 7 deletions(-)

diff --git a/src/index.js b/src/index.js
index dcfd172..bfff403 100644
--- a/src/index.js
+++ b/src/index.js
@@ -12,7 +12,7 @@ class ReactCarouselDots extends React.Component {
     visible: PropTypes.number,
     className: PropTypes.string,
     onClick: PropTypes.func,
-    style: PropTypes.object,
+    dotStyle: PropTypes.object,
     activeStyle: PropTypes.object,
   }
   static defaultProps = {
@@ -21,7 +21,7 @@ class ReactCarouselDots extends React.Component {
     visible: 5,
     className: '',
     onClick: null,
-    style: null,
+    dotStyle: null,
     activeStyle: null,
   }
   constructor(props) {
@@ -189,10 +189,6 @@ class ReactCarouselDots extends React.Component {
       width: this.props.size,
       marginRight: this.props.margin,
       marginLeft: this.props.margin,
-      ...this.props.style,
-      ...(isActive && {
-        ...this.props.activeStyle
-      }),
     };
     if (this.state.direction === 'forwards') {
       if (this.props.active < (this.props.visible - 2)) {
@@ -282,7 +278,7 @@ class ReactCarouselDots extends React.Component {
       dots.push((
         <div
           key={i}
-          style={this.getDotStyle(this.props.active === i)}
+          style={this.getDotStyle()}
           className="dot-holder"
           onClick={() => this.props.onClick(i)}
         >
@@ -291,6 +287,12 @@ class ReactCarouselDots extends React.Component {
             className={`react-carousel-dots-dot
                       ${this.getDotClassName(i)}
                       ${this.props.active === i ? 'active' : ''}`}
+            style={{
+              ...this.props.dotStyle,
+              ...(this.props.active === i && {
+                ...this.props.activeStyle
+              }),
+            }}
           />
         </div>
       ));

From 94bf0ec05ef14798282c6e7cdb6300c5feb87dae Mon Sep 17 00:00:00 2001
From: Pam Bortnick <pambortnick@c02z73balvdq.lan>
Date: Tue, 27 Oct 2020 10:50:16 -0400
Subject: [PATCH 3/4] remove arg

---
 src/index.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/index.js b/src/index.js
index bfff403..433cefb 100644
--- a/src/index.js
+++ b/src/index.js
@@ -183,7 +183,7 @@ class ReactCarouselDots extends React.Component {
     return newBigDots;
   }
 
-  getDotStyle = (isActive) => {
+  getDotStyle = () => {
     let style = {
       height: this.props.size,
       width: this.props.size,

From 07affa3472e9be86404dc5203a26aa73a7640a73 Mon Sep 17 00:00:00 2001
From: Pam Bortnick <pambortnick@c02z73balvdq.lan>
Date: Tue, 27 Oct 2020 14:52:51 -0400
Subject: [PATCH 4/4] accessibility

---
 src/index.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/index.js b/src/index.js
index 433cefb..efc1ca4 100644
--- a/src/index.js
+++ b/src/index.js
@@ -281,6 +281,9 @@ class ReactCarouselDots extends React.Component {
           style={this.getDotStyle()}
           className="dot-holder"
           onClick={() => this.props.onClick(i)}
+          className="dot-holder"
+          onKeyPress={() => this.props.onClick(i)}
+          tabIndex={0}
         >
           <div
             key={`${i}-inner`}