From 97b5327e1ecffa2c6ef48fb8c870e4e94f3c4a8d Mon Sep 17 00:00:00 2001
From: moklick <info@moritzklack.com>
Date: Tue, 18 Jan 2022 15:49:18 +0100
Subject: [PATCH] refactor(controls): add titles for buttons

---
 src/additional-components/Controls/index.tsx | 28 +++++++++++++++++---
 1 file changed, 24 insertions(+), 4 deletions(-)

diff --git a/src/additional-components/Controls/index.tsx b/src/additional-components/Controls/index.tsx
index e12a88fb..1068d02a 100644
--- a/src/additional-components/Controls/index.tsx
+++ b/src/additional-components/Controls/index.tsx
@@ -90,21 +90,41 @@ const Controls: FC<ControlProps> = ({
     <div className={mapClasses} style={style}>
       {showZoom && (
         <>
-          <ControlButton onClick={onZoomInHandler} className="react-flow__controls-zoomin">
+          <ControlButton
+            onClick={onZoomInHandler}
+            className="react-flow__controls-zoomin"
+            title="zoom in"
+            aria-label="zoom in"
+          >
             <PlusIcon />
           </ControlButton>
-          <ControlButton onClick={onZoomOutHandler} className="react-flow__controls-zoomout">
+          <ControlButton
+            onClick={onZoomOutHandler}
+            className="react-flow__controls-zoomout"
+            title="zoom out"
+            aria-label="zoom out"
+          >
             <MinusIcon />
           </ControlButton>
         </>
       )}
       {showFitView && (
-        <ControlButton className="react-flow__controls-fitview" onClick={onFitViewHandler}>
+        <ControlButton
+          className="react-flow__controls-fitview"
+          onClick={onFitViewHandler}
+          title="fit view"
+          aria-label="fit view"
+        >
           <FitviewIcon />
         </ControlButton>
       )}
       {showInteractive && (
-        <ControlButton className="react-flow__controls-interactive" onClick={onInteractiveChangeHandler}>
+        <ControlButton
+          className="react-flow__controls-interactive"
+          onClick={onInteractiveChangeHandler}
+          title="toggle interactivity"
+          aria-label="toggle interactivity"
+        >
           {isInteractive ? <UnlockIcon /> : <LockIcon />}
         </ControlButton>
       )}