set tabIndex=-1 on disabled buttons (#2672)

palantir · Jul 11, 2018 · ccf2cf3 · ccf2cf3 · blueprint-bot · Jul 11, 2018
1 parent 3f910a8
commit ccf2cf3
Show file tree

Hide file tree

Showing 3 changed files with 4 additions and 3 deletions.
diff --git a/packages/core/src/components/button/abstractButton.tsx b/packages/core/src/components/button/abstractButton.tsx
@@ -89,7 +89,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
     public abstract render(): JSX.Element;
 
     protected getCommonButtonProps() {
-        const { alignText, fill, large, loading, minimal, small } = this.props;
+        const { alignText, fill, large, loading, minimal, small, tabIndex } = this.props;
         const disabled = this.props.disabled || loading;
 
         const className = classNames(
@@ -115,6 +115,7 @@ export abstract class AbstractButton<H extends React.HTMLAttributes<any>> extend
             onKeyDown: this.handleKeyDown,
             onKeyUp: this.handleKeyUp,
             ref: this.refHandlers.button,
+            tabIndex: disabled ? -1 : tabIndex,
         };
     }
 

diff --git a/packages/core/src/components/button/button.md b/packages/core/src/components/button/button.md
@@ -57,7 +57,7 @@ Use the `@ns-button` class to access button styles. You should implement buttons
 * Add the attribute `tabindex="0"` to make `<a>` tags focusable. `<button>` elements are
   focusable by default.
 * For buttons implemented with `<a>` tags, add `tabindex="-1"` to disabled buttons to prevent the
-  user from focusing them by pressing <kbd>tab</kbd> on the keyboard.
+  user from focusing them by pressing <kbd>tab</kbd> on the keyboard. (This does not happen in the example below.)
 * Note that `<a>` tags do not respond to the `:disabled` attribute; use `.@ns-disabled` instead.
 
 @css button
diff --git a/packages/core/src/components/button/buttons.tsx b/packages/core/src/components/button/buttons.tsx
@@ -39,7 +39,7 @@ export class AnchorButton extends AbstractButton<React.AnchorHTMLAttributes<HTML
                 {...removeNonHTMLProps(this.props)}
                 {...commonProps}
                 href={commonProps.disabled ? undefined : href}
-                tabIndex={commonProps.disabled ? undefined : tabIndex}
+                tabIndex={commonProps.disabled ? -1 : tabIndex}
             >
                 {this.renderChildren()}
             </a>