Use tooltip instead of title and added aria label to DiffButton

scm-ui/ui-components/src/repos/Diff.stories.tsx

@@ -10,10 +10,16 @@ import { DiffEventContext, File } from "./DiffTypes";
 import Toast from "../toast/Toast";
 import { getPath } from "./diffs";
 import DiffButton from "./DiffButton";
+import styled from "styled-components";
 
 const diffFiles = parser.parse(simpleDiff);
 
+const Container = styled.div`
+  padding: 2rem 6rem;
+`;
+
 storiesOf("Diff", module)
+  .addDecorator(storyFn => <Container>{storyFn()}</Container>)
   .add("Default", () => <Diff diff={diffFiles} />)
   .add("Side-By-Side", () => <Diff diff={diffFiles} sideBySide={true} />)
   .add("Collapsed", () => <Diff diff={diffFiles} defaultCollapse={true} />)
@@ -21,7 +27,11 @@ storiesOf("Diff", module)
     <Diff
       diff={diffFiles}
       fileControlFactory={() => (
-        <DiffButton title="Die!" icon="skull-crossbones" onClick={() => alert("Arrrgggghhhh ...")} />
+        <DiffButton
+          tooltip="A skull and crossbones or death's head is a symbol consisting of a human skull and two long bones crossed together under or behind the skull. The design originates in the Late Middle Ages as a symbol of death and especially as a memento mori on tombstones."
+          icon="skull-crossbones"
+          onClick={() => alert("Arrrgggghhhh ...")}
+        />
       )}
     />
   ))

scm-ui/ui-components/src/repos/DiffButton.tsx

@@ -1,5 +1,6 @@
 import React, { FC, MouseEvent } from "react";
 import styled from "styled-components";
+import Tooltip from "../Tooltip";
 
 const Button = styled.a`
   width: 50px;
@@ -11,20 +12,22 @@ const Button = styled.a`
 
 type Props = {
   icon: string;
-  title: string;
+  tooltip: string;
   onClick: () => void;
 };
 
-const DiffButton: FC<Props> = ({ icon, title, onClick }) => {
+const DiffButton: FC<Props> = ({ icon, tooltip, onClick }) => {
   const handleClick = (e: MouseEvent) => {
     e.preventDefault();
     onClick();
   };
 
   return (
-    <Button title={title} className="button" onClick={handleClick}>
-      <i className={`fas fa-${icon}`} />
-    </Button>
+    <Tooltip message={tooltip} location="top">
+      <Button aria-label={tooltip} className="button" onClick={handleClick}>
+        <i className={`fas fa-${icon}`} />
+      </Button>
+    </Tooltip>
   );
 };
 

scm-ui/ui-components/src/repos/DiffFile.tsx

@@ -253,7 +253,7 @@ class DiffFile extends React.Component<Props, State> {
           <ButtonGroup>
             <DiffButton
               icon={sideBySide ? "align-left" : "columns"}
-              title={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
+              tooltip={t(sideBySide ? "diff.combined" : "diff.sideBySide")}
               onClick={this.toggleSideBySide}
             />
             {fileControls}