fix(button): support setting tab index unless not button and disabled

Signed-off-by: Boaz Shuster <boaz.shuster.github@gmail.com>
patternfly · Oct 30, 2019 · b2de0a8 · b2de0a8
1 parent 269a6f0
commit b2de0a8
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 1 deletion.
diff --git a/packages/patternfly-4/react-core/src/components/Button/Button.test.tsx b/packages/patternfly-4/react-core/src/components/Button/Button.test.tsx
@@ -78,3 +78,9 @@ test('aria-disabled is set to true and tabIndex to -1 if component is not a butt
   );
   expect(view).toMatchSnapshot();
 });
+
+test('setting tab index through props', () => {
+  const view = mount(<Button tabIndex={0} >TabIndex -1 Button</Button>)
+  console.log(view.find('button').debug())
+  expect(view.find('button').props().tabIndex).toBe(0)
+})
diff --git a/packages/patternfly-4/react-core/src/components/Button/Button.tsx b/packages/patternfly-4/react-core/src/components/Button/Button.tsx
@@ -46,6 +46,8 @@ export interface ButtonProps extends React.HTMLProps<HTMLButtonElement> {
   'aria-label'?: string;
   /** Icon for the button if variant is a link */
   icon?: React.ReactNode | null;
+  /** Set button tab index unless component is not a button and is disabled */
+  tabIndex?: number;
 }
 
 const Button: React.FunctionComponent<ButtonProps & InjectedOuiaProps> = ({
@@ -64,6 +66,7 @@ const Button: React.FunctionComponent<ButtonProps & InjectedOuiaProps> = ({
   icon = null,
   ouiaContext = null,
   ouiaId = null,
+  tabIndex = null as number,
   ...props
 }: ButtonProps & InjectedOuiaProps) => {
   const Component = component as any;
@@ -85,7 +88,7 @@ const Button: React.FunctionComponent<ButtonProps & InjectedOuiaProps> = ({
         className
       )}
       disabled={isButtonElement ? isDisabled : null}
-      tabIndex={isDisabled && !isButtonElement ? -1 : null}
+      tabIndex={isDisabled && !isButtonElement ? -1 : tabIndex}
       type={isButtonElement ? type : null}
       {...(ouiaContext.isOuia && {
         'data-ouia-component-type': 'Button',