diff --git a/CHANGELOG.md b/CHANGELOG.md index 1bd58def..29ea761e 100644 --- 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 index a3e1fc95..6cd68691 100644 --- 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 index 4f18d92d..73c1aa82 100644 --- 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 index 692a8e25..9dc2d196 100644 --- 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" > 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" /> `;