From 73dceaaae06e3b8fde7c59b4dd07ea37aaaa6ff8 Mon Sep 17 00:00:00 2001
From: Przemek Wiech <pwiech@gmail.com>
Date: Mon, 16 Mar 2020 18:40:40 +0100
Subject: [PATCH] Changed zoom button element from <a> to <button>

---
 src/chart.tsx | 21 +++++++++++++--------
 src/index.css | 14 +++++++++++---
 2 files changed, 24 insertions(+), 11 deletions(-)

diff --git a/src/chart.tsx b/src/chart.tsx
index 23f6421..2041896 100644
--- a/src/chart.tsx
+++ b/src/chart.tsx
@@ -308,14 +308,19 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
   render() {
     return (
       <div id="svgContainer">
-        <div className="zoom">
-          <a className="zoom-in" onClick={() => this.zoom(ZOOM_FACTOR)}>
-            +
-          </a>
-          <a className="zoom-out" onClick={() => this.zoom(1 / ZOOM_FACTOR)}>
-            −
-          </a>
-        </div>
+        {this.props.enableZoom ? (
+          <div className="zoom">
+            <button className="zoom-in" onClick={() => this.zoom(ZOOM_FACTOR)}>
+              +
+            </button>
+            <button
+              className="zoom-out"
+              onClick={() => this.zoom(1 / ZOOM_FACTOR)}
+            >
+              −
+            </button>
+          </div>
+        ) : null}
         <svg id="chartSvg">
           <g id="chart" />
         </svg>
diff --git a/src/index.css b/src/index.css
index d8042d2..0ba58cd 100644
--- a/src/index.css
+++ b/src/index.css
@@ -76,7 +76,7 @@ div.ui.card.intro {
   z-index: 10;
 }
 
-.zoom a {
+.zoom button {
   font-family: monospace;
   font-weight: bold;
   font-size: 20px;
@@ -90,20 +90,28 @@ div.ui.card.intro {
   line-height: 26px;
   box-sizing: content-box;
   cursor: pointer;
+  padding: 0px;
 }
 
-.zoom a:hover {
+.zoom button:hover {
   background-color: #eee;
-  color: black;
+}
+
+.zoom button:focus {
+  outline: 0px;
 }
 
 .zoom-in {
   border-top-left-radius: 4px;
   border-top-right-radius: 4px;
+  border-top: 0px;
   border-bottom: 1px solid #ccc;
+  border-left: 0px;
+  border-right: 0px;
 }
 
 .zoom-out {
+  border: 0px;
   border-bottom-left-radius: 4px;
   border-bottom-right-radius: 4px;
 }