diff --git a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
index 8396295625..aed5f205e5 100644
--- a/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
+++ b/scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
@@ -23699,29 +23699,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-down"
+                        />
+                      </span>
                       diff.expandLastBottomByLines
-                    </span>
+                    </button>
                      
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-down"
+                        />
+                      </span>
                       diff.expandLastBottomComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -23845,18 +23853,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-up"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-up"
+                        />
+                      </span>
                       diff.expandComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -24047,18 +24059,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-down"
+                        />
+                      </span>
                       diff.expandComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -24072,18 +24088,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-up"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-up"
+                        />
+                      </span>
                       diff.expandComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -24671,29 +24691,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-down"
+                        />
+                      </span>
                       diff.expandLastBottomByLines
-                    </span>
+                    </button>
                      
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-down"
+                        />
+                      </span>
                       diff.expandLastBottomComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -24817,29 +24845,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-up"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-up"
+                        />
+                      </span>
                       diff.expandByLines
-                    </span>
+                    </button>
                      
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-up"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-up"
+                        />
+                      </span>
                       diff.expandComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -25214,29 +25250,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-down"
+                        />
+                      </span>
                       diff.expandLastBottomByLines
-                    </span>
+                    </button>
                      
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-down"
+                        />
+                      </span>
                       diff.expandLastBottomComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -25360,29 +25404,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-up"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-up"
+                        />
+                      </span>
                       diff.expandByLines
-                    </span>
+                    </button>
                      
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-up"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-up"
+                        />
+                      </span>
                       diff.expandComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -25757,29 +25809,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-down"
+                        />
+                      </span>
                       diff.expandLastBottomByLines
-                    </span>
+                    </button>
                      
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-down"
+                        />
+                      </span>
                       diff.expandLastBottomComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -25903,18 +25963,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-up"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-up"
+                        />
+                      </span>
                       diff.expandComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -26422,29 +26486,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-down"
+                        />
+                      </span>
                       diff.expandByLines
-                    </span>
+                    </button>
                      
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-down"
+                        />
+                      </span>
                       diff.expandComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -26458,29 +26530,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-up"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-up"
+                        />
+                      </span>
                       diff.expandByLines
-                    </span>
+                    </button>
                      
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-up"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-up"
+                        />
+                      </span>
                       diff.expandComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -26694,18 +26774,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-down"
+                        />
+                      </span>
                       diff.expandComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -26719,18 +26803,22 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-up"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-up"
+                        />
+                      </span>
                       diff.expandComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -26990,29 +27078,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-down"
+                        />
+                      </span>
                       diff.expandLastBottomByLines
-                    </span>
+                    </button>
                      
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-down"
+                        />
+                      </span>
                       diff.expandLastBottomComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -27573,29 +27669,37 @@ exports[`Storyshots Repositories/Diff Changing Content 1`] = `
                   colSpan={3}
                 >
                   <div
-                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                    className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                   >
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-down"
+                        />
+                      </span>
                       diff.expandLastBottomByLines
-                    </span>
+                    </button>
                      
-                    <span
-                      className="is-clickable"
+                    <button
+                      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                       onClick={[Function]}
                     >
-                      <i
-                        className="fa fa-angle-double-down"
-                      />
-                       
+                      <span
+                        aria-hidden="true"
+                        className="icon"
+                      >
+                        <i
+                          className="fas fa-fw fa-angle-double-down"
+                        />
+                      </span>
                       diff.expandLastBottomComplete
-                    </span>
+                    </button>
                   </div>
                 </td>
               </tr>
@@ -31178,29 +31282,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -31324,18 +31436,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -31526,18 +31642,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -31551,18 +31671,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -32150,29 +32274,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -32296,29 +32428,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-up"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -32693,29 +32833,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -32839,29 +32987,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-up"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -33236,29 +33392,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -33382,18 +33546,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -33901,29 +34069,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -33937,29 +34113,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-up"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -34173,18 +34357,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -34198,18 +34386,22 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -34469,29 +34661,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -35052,29 +35252,37 @@ exports[`Storyshots Repositories/Diff Expandable 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -35696,29 +35904,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -35842,18 +36058,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -36044,18 +36264,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -36069,18 +36293,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -36668,29 +36896,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -36814,29 +37050,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-up"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -37211,29 +37455,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -37357,29 +37609,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-up"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -37754,29 +38014,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -37900,18 +38168,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -38419,29 +38691,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -38455,29 +38735,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-up"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -38691,18 +38979,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -38716,18 +39008,22 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -38987,29 +39283,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -39570,29 +39874,37 @@ exports[`Storyshots Repositories/Diff External state management 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -63714,18 +64026,22 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting (Markdown) 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -63939,29 +64255,37 @@ exports[`Storyshots Repositories/Diff SyntaxHighlighting (Markdown) 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -72679,29 +73003,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -72825,18 +73157,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -73027,18 +73363,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -73052,18 +73392,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -73651,29 +73995,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -73797,29 +74149,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-up"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -74194,29 +74554,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -74340,29 +74708,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-up"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -74737,29 +75113,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -74883,18 +75267,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -75402,29 +75790,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -75438,29 +75834,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-up"
+                      />
+                    </span>
                     diff.expandByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -75674,18 +76078,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -75699,18 +76107,22 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-up"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-up"
+                      />
+                    </span>
                     diff.expandComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -75970,29 +76382,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
@@ -76553,29 +76973,37 @@ exports[`Storyshots Repositories/Diff WithLinkToFile 1`] = `
                 colSpan={3}
               >
                 <div
-                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 fZfcvP is-size-7 pl-5"
+                  className="HunkExpandDivider__HunkDivider-sc-1f1gat0-0 iXjkKp is-size-7 pl-5"
                 >
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-down"
+                      />
+                    </span>
                     diff.expandLastBottomByLines
-                  </span>
+                  </button>
                    
-                  <span
-                    className="is-clickable"
+                  <button
+                    className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
                     onClick={[Function]}
                   >
-                    <i
-                      className="fa fa-angle-double-down"
-                    />
-                     
+                    <span
+                      aria-hidden="true"
+                      className="icon"
+                    >
+                      <i
+                        className="fas fa-fw fa-angle-double-down"
+                      />
+                    </span>
                     diff.expandLastBottomComplete
-                  </span>
+                  </button>
                 </div>
               </td>
             </tr>
diff --git a/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx b/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx
index 212f7d06d1..eda7e2ec8f 100644
--- a/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx
+++ b/scm-ui/ui-components/src/repos/HunkExpandDivider.tsx
@@ -21,6 +21,9 @@ import styled from "styled-components";
 
 const HunkDivider = styled.div`
   background: #98d8f3;
+  @media screen and (max-width: 768px) {
+    padding-left: 0px !important;
+  } ;
 `;
 
 const HunkExpandDivider: FC = ({ children }) => {
diff --git a/scm-ui/ui-components/src/repos/HunkExpandLink.tsx b/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
index 9270723fed..1d0849d445 100644
--- a/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
+++ b/scm-ui/ui-components/src/repos/HunkExpandLink.tsx
@@ -16,7 +16,7 @@
 
 import React, { FC, useState } from "react";
 import { useTranslation } from "react-i18next";
-import classNames from "classnames";
+import { Icon } from "@scm-manager/ui-core";
 
 type Props = {
   icon: string;
@@ -37,9 +37,13 @@ const HunkExpandLink: FC<Props> = ({ icon, text, onClick }) => {
   };
 
   return (
-    <span className="is-clickable" onClick={onClickWithLoadingMarker}>
-      <i className={classNames("fa", icon)} /> {loading ? t("diff.expanding") : text}
-    </span>
+    <button
+      className="hunk-expander is-clickable diff-decoration-content has-background-transparent is-borderless pr-2"
+      onClick={onClickWithLoadingMarker}
+    >
+      <Icon>{icon}</Icon>
+      {loading ? t("diff.expanding") : text}
+    </button>
   );
 };
 
diff --git a/scm-ui/ui-components/src/repos/diff/HunkFooter.tsx b/scm-ui/ui-components/src/repos/diff/HunkFooter.tsx
index 83196165d8..2c8de2d7d6 100644
--- a/scm-ui/ui-components/src/repos/diff/HunkFooter.tsx
+++ b/scm-ui/ui-components/src/repos/diff/HunkFooter.tsx
@@ -37,7 +37,7 @@ const HunkFooter: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
       return (
         <HunkExpandDivider>
           <HunkExpandLink
-            icon={"fa-angle-double-down"}
+            icon={"angle-double-down"}
             onClick={expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
             text={t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
           />
@@ -47,12 +47,12 @@ const HunkFooter: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
       return (
         <HunkExpandDivider>
           <HunkExpandLink
-            icon={"fa-angle-down"}
+            icon={"angle-down"}
             onClick={expandBottom(expandableHunk, 10)}
             text={t("diff.expandByLines", { count: 10 })}
           />{" "}
           <HunkExpandLink
-            icon={"fa-angle-double-down"}
+            icon={"angle-double-down"}
             onClick={expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
             text={t("diff.expandComplete", { count: expandableHunk.maxExpandBottomRange })}
           />
diff --git a/scm-ui/ui-components/src/repos/diff/HunkHeader.tsx b/scm-ui/ui-components/src/repos/diff/HunkHeader.tsx
index 35dc665815..38b4e1da91 100644
--- a/scm-ui/ui-components/src/repos/diff/HunkHeader.tsx
+++ b/scm-ui/ui-components/src/repos/diff/HunkHeader.tsx
@@ -37,10 +37,9 @@ const HunkHeader: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
       return (
         <HunkExpandDivider>
           <HunkExpandLink
-            icon={"fa-angle-double-up"}
+            icon={"angle-double-up"}
             onClick={expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
-            text={t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })
-            }
+            text={t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
           />
         </HunkExpandDivider>
       );
@@ -48,12 +47,12 @@ const HunkHeader: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansionFail
       return (
         <HunkExpandDivider>
           <HunkExpandLink
-            icon={"fa-angle-up"}
+            icon={"angle-up"}
             onClick={expandHead(expandableHunk, 10)}
             text={t("diff.expandByLines", { count: 10 })}
           />{" "}
           <HunkExpandLink
-            icon={"fa-angle-double-up"}
+            icon={"angle-double-up"}
             onClick={expandHead(expandableHunk, expandableHunk.maxExpandHeadRange)}
             text={t("diff.expandComplete", { count: expandableHunk.maxExpandHeadRange })}
           />
diff --git a/scm-ui/ui-components/src/repos/diff/LastHunkFooter.tsx b/scm-ui/ui-components/src/repos/diff/LastHunkFooter.tsx
index e814cd8ca7..4a705702da 100644
--- a/scm-ui/ui-components/src/repos/diff/LastHunkFooter.tsx
+++ b/scm-ui/ui-components/src/repos/diff/LastHunkFooter.tsx
@@ -36,12 +36,12 @@ const LastHunkFooter: FC<Props> = ({ expandableHunk, diffExpanded, diffExpansion
     return (
       <HunkExpandDivider>
         <HunkExpandLink
-          icon={"fa-angle-down"}
+          icon={"angle-down"}
           onClick={expandBottom(expandableHunk, 10)}
           text={t("diff.expandLastBottomByLines", { count: 10 })}
         />{" "}
         <HunkExpandLink
-          icon={"fa-angle-double-down"}
+          icon={"angle-double-down"}
           onClick={expandBottom(expandableHunk, expandableHunk.maxExpandBottomRange)}
           text={t("diff.expandLastBottomComplete")}
         />
diff --git a/scm-ui/ui-styles/src/components/_main.scss b/scm-ui/ui-styles/src/components/_main.scss
index 655ec8fe97..7c2712c03c 100644
--- a/scm-ui/ui-styles/src/components/_main.scss
+++ b/scm-ui/ui-styles/src/components/_main.scss
@@ -1100,3 +1100,10 @@ form .field:not(.is-grouped) {
   position: absolute;
   text-align: center;
 }
+
+// Hunk expander basic mobile styles
+.hunk-expander {
+  @media screen and (max-width: 768px) {
+    padding-bottom: 0.25rem;
+  }
+}
diff --git a/scm-ui/ui-styles/src/highcontrast.scss b/scm-ui/ui-styles/src/highcontrast.scss
index d5f2cbe1c8..38623e9cda 100644
--- a/scm-ui/ui-styles/src/highcontrast.scss
+++ b/scm-ui/ui-styles/src/highcontrast.scss
@@ -294,6 +294,13 @@ td button:not(.is-default) {
   color: $scheme-main;
 }
 
+.hunk-expander{
+  &:hover, :focus-visible {
+    color: #98d8f3;
+    background-color: #050514
+  }
+}
+
 /* transport meaning with more than color */
 td:nth-child(2).diff-gutter-delete:before {
   content: "-";