Accessible collapse pane buttons (firefox-devtools#4128)

khal0988 · Oct 13, 2017 · ba3a559 · ba3a559
1 parent 1c4372b
commit ba3a559
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 7 deletions.
diff --git a/src/components/App.css b/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;

diff --git a/src/components/shared/Button/PaneToggle.css b/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,

diff --git a/src/components/shared/Button/PaneToggle.js b/src/components/shared/Button/PaneToggle.js
@@ -29,7 +29,7 @@ class PaneToggleButton extends Component {
       : L10N.getStr("collapsePanes");
 
     return (
-      <div
+      <button
         className={classnames(`toggle-button-${position}`, {
           collapsed,
           vertical: horizontal != null ? !horizontal : false
@@ -38,7 +38,7 @@ class PaneToggleButton extends Component {
         title={title}
       >
         <Svg name="togglePanes" />
-      </div>
+      </button>
     );
   }
 }