Changed zoom button element from <a> to <button>

src/chart.tsx

@@ -308,14 +308,19 @@ export class Chart extends React.PureComponent<ChartProps, {}> {
   render() {
     return (
       <div id="svgContainer">
-        <div className="zoom">
+        {this.props.enableZoom ? (
-          <a className="zoom-in" onClick={() => this.zoom(ZOOM_FACTOR)}>
+          <div className="zoom">
-            +
+            <button className="zoom-in" onClick={() => this.zoom(ZOOM_FACTOR)}>
-          </a>
+              +
-          <a className="zoom-out" onClick={() => this.zoom(1 / ZOOM_FACTOR)}>
+            </button>
-            −
+            <button
-          </a>
+              className="zoom-out"
-        </div>
+              onClick={() => this.zoom(1 / ZOOM_FACTOR)}
+            >
+              −
+            </button>
+          </div>
+        ) : null}
         <svg id="chartSvg">
           <g id="chart" />
         </svg>

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;
 }