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 index 115e917e3ec..9354c078c35 100644 --- 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() + console.log(view.find('button').debug()) + expect(view.find('button').props().tabIndex).toBe(0) +}) \ No newline at end of file diff --git a/packages/patternfly-4/react-core/src/components/Button/Button.tsx b/packages/patternfly-4/react-core/src/components/Button/Button.tsx index 9af794411fe..675c8a089eb 100644 --- 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 { '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 = ({ @@ -64,6 +66,7 @@ const Button: React.FunctionComponent = ({ 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 = ({ 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',