Exclude toolbar buttons from default focus navigation flow

springload · Dec 2, 2017 · f627456 · f627456
1 parent df6756b
commit f627456
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 9 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -11,6 +11,8 @@
 
 ### Changed
 
+* Exclude toolbar buttons from default focus navigation flow.
+
 ### Removed
 
 * Remove Save and Cancel buttons from image block, thanks to [@allcaps](https://github.com/allcaps) ([#102](https://github.com/springload/draftail/pull/102))

diff --git a/lib/components/ToolbarButton.js b/lib/components/ToolbarButton.js
@@ -50,6 +50,7 @@ class ToolbarButton extends Component {
                 type="button"
                 aria-label={title || null}
                 data-balloon={title && showTooltipOnHover ? true : null}
+                tabIndex={-1}
                 onMouseDown={this.onMouseDown}
                 onMouseLeave={this.onMouseLeave}
             >

diff --git a/lib/components/ToolbarButton.scss b/lib/components/ToolbarButton.scss
@@ -10,23 +10,16 @@
     font-weight: 600;
     cursor: pointer;
 
-    &:hover,
-    &:focus {
+    &:hover {
         color: inherit;
         background-color: rgba(0, 0, 0, 0.05);
     }
 
-    &:focus {
-        border: 1px solid $color-editor-chrome-active;
-        outline: 0;
-    }
-
     &--active {
         background-color: rgba(0, 0, 0, 0.1);
         border: 1px solid rgba(0, 0, 0, 0.2);
 
-        &:hover,
-        &:focus {
+        &:hover {
             background-color: rgba(0, 0, 0, 0.1);
         }
     }

diff --git a/lib/components/__snapshots__/ToolbarButton.test.js.snap b/lib/components/__snapshots__/ToolbarButton.test.js.snap
@@ -8,6 +8,7 @@ exports[`ToolbarButton #active 1`] = `
   name={null}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
+  tabIndex={-1}
   type="button"
 />
 `;
@@ -20,6 +21,7 @@ exports[`ToolbarButton #icon 1`] = `
   name={null}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
+  tabIndex={-1}
   type="button"
 >
   <Icon
@@ -38,6 +40,7 @@ exports[`ToolbarButton #label 1`] = `
   name={null}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
+  tabIndex={-1}
   type="button"
 >
   Test label
@@ -52,6 +55,7 @@ exports[`ToolbarButton #name 1`] = `
   name="TEST"
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
+  tabIndex={-1}
   type="button"
 />
 `;
@@ -64,6 +68,7 @@ exports[`ToolbarButton #title 1`] = `
   name={null}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
+  tabIndex={-1}
   type="button"
 />
 `;
@@ -76,6 +81,7 @@ exports[`ToolbarButton empty 1`] = `
   name={null}
   onMouseDown={[Function]}
   onMouseLeave={[Function]}
+  tabIndex={-1}
   type="button"
 />
 `;