[Accessibility] "Collapse panes" buttons should be accessible

Enter/Space collapses/expands panes
Buttons are reachable with the keyboard
Buttons have hover/focus styling

src/components/App.css

@@ -2,6 +2,16 @@
   box-sizing: border-box;
 }
 
+button {
+  background: transparent;
+  outline: none;
+  border: none;
+}
+
+button:hover,button:focus {
+  background-color: var(--theme-toolbar-background-hover);
+}
+
 .debugger {
   display: flex;
   flex: 1;

src/components/shared/Button/PaneToggle.css

@@ -1,13 +1,13 @@
 .toggle-button-start,
 .toggle-button-end {
-  transform: translate(0, 2px);
+  transform: translate(0, 0px);
   transition: transform 0.25s ease-in-out;
-  padding: 5px 2px;
+  padding: 5px 5px;
 }
 
 .toggle-button-start.vertical,
 .toggle-button-end.vertical {
-  padding: 4px 2px;
+  padding: 2.5px 2.5px;
 }
 
 .toggle-button-start svg,
@@ -22,12 +22,12 @@
 }
 
 .toggle-button-end {
-  margin-inline-end: 5px;
+  margin-inline-end: 0px;
   margin-inline-start: auto;
 }
 
 .toggle-button-start {
-  margin-inline-start: 5px;
+  margin-inline-start: 0px;
 }
 
 html:not([dir="rtl"]) .toggle-button-end svg,

src/components/shared/Button/PaneToggle.js

@@ -30,7 +30,7 @@ class PaneToggleButton extends Component {
       : L10N.getStr("collapsePanes");
 
     return (
-      <div
+      <button
         className={classnames(`toggle-button-${position}`, {
           collapsed,
           vertical: horizontal != null ? !horizontal : false
@@ -39,7 +39,7 @@ class PaneToggleButton extends Component {
         title={title}
       >
         <Svg name="togglePanes" />
-      </div>
+      </button>
     );
   }
 }