chore(tests): add keyboard interactivity test for button

CONTRIBUTING.md

@@ -330,6 +330,6 @@ The process for revoking someone's maintainer status is a discussion limited to
 - Do not merge commits blindly. If you do not fully understand a pull request, ask existing maintainers to take a look
 - Do not merge if the build is failing. Wait until tests are green to merge.
 
-[1]: http://contributor-covenant.org/version/1/4/code_of_conduct.md
+[1]: http://contributor-covenant.org/version/1/4/code-of-conduct.md
 [2]: mailto:[email protected]
 [3]: https://github.com/angular/angular.js/blob/master/DEVELOPERS.md#type

packages/react-integration/cypress/integration/button.spec.ts

@@ -206,4 +206,20 @@ describe('Button Demo Test', () => {
       );
     });
   });
+
+  it('Verify that tabbing with keyboard sends focus to the correct elements', () => {
+    cy.get('#tabstop-test').focus();
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    cy.tab()
+      .tab()
+      .tab()
+      .tab();
+    cy.focused().should('have.attr', 'id', 'tabstop-test-04');
+
+    // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+    // @ts-ignore
+    cy.tab({ shift: true }).tab({ shift: true });
+    cy.focused().should('have.attr', 'id', 'tabstop-test-02');
+  });
 });

packages/react-integration/cypress/support/index.js

@@ -12,6 +12,7 @@
 // You can read more here:
 // https://on.cypress.io/configuration
 // ***********************************************************
+import 'cypress-plugin-tab';
 
 // Import commands.js using ES2015 syntax:
 import './commands';

packages/react-integration/demo-app-ts/src/components/demos/ButtonDemo/ButtonDemo.tsx

@@ -192,6 +192,21 @@ export class ButtonDemo extends React.Component<ButtonProps, ButtonDemoState> {
         <Button isDisabled {...this.spanLink} id="span-link-btn-2">
           Disabled span wrapping link
         </Button>
+        <hr className="pf-u-m-md" />
+        <div id="tabstop-test" tabIndex={0}>
+          <Button className="pf-u-m-sm" id="tabstop-test-01">
+            First tab stop
+          </Button>
+          <Button className="pf-u-m-sm" id="tabstop-test-02">
+            Second tab stop
+          </Button>
+          <Button className="pf-u-m-sm" id="tabstop-test-03">
+            Third tab stop
+          </Button>
+          <Button className="pf-u-m-sm" id="tabstop-test-04">
+            Fourth tab stop
+          </Button>
+        </div>
       </div>
     );
   }

packages/react-integration/package.json

@@ -29,6 +29,7 @@
   "devDependencies": {
     "@cypress/webpack-preprocessor": "^5.4.5",
     "cypress": "^5.2.0",
+    "cypress-plugin-tab": "^1.0.5",
     "jasmine-xml2html-converter": "^0.0.2",
     "junit-merge": "^2.0.0",
     "ts-loader": "^8.0.4",

yarn.lock

@@ -4373,6 +4373,14 @@ ajv@^6.12.3, ajv@^6.12.4:
     json-schema-traverse "^0.4.1"
     uri-js "^4.2.2"
 
+ally.js@^1.4.1:
+  version "1.4.1"
+  resolved "https://registry.yarnpkg.com/ally.js/-/ally.js-1.4.1.tgz#9fb7e6ba58efac4ee9131cb29aa9ee3b540bcf1e"
+  integrity sha1-n7fmuljvrE7pExyymqnuO1QLzx4=
+  dependencies:
+    css.escape "^1.5.0"
+    platform "1.3.3"
+
 amdefine@>=0.0.4:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/amdefine/-/amdefine-1.0.1.tgz#4a5282ac164729e93619bcfd3ad151f817ce91f5"
@@ -7552,6 +7560,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/css-what/-/css-what-2.1.3.tgz#a6d7604573365fe74686c3f311c56513d88285f2"
   integrity sha512-a+EPoD+uZiNfh+5fxw2nO9QwFa6nJe2Or35fGY6Ipw1R3R4AGz1d1TEZrCegvw2YTmZ0jXirGYlzxxpYSHwpEg==
 
+css.escape@^1.5.0:
+  version "1.5.1"
+  resolved "https://registry.yarnpkg.com/css.escape/-/css.escape-1.5.1.tgz#42e27d4fa04ae32f931a4b4d4191fa9cddee97cb"
+  integrity sha1-QuJ9T6BK4y+TGktNQZH6nN3ul8s=
+
 css@^2.2.3:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
@@ -7620,6 +7633,13 @@ cyclist@^1.0.1:
   resolved "https://registry.yarnpkg.com/cyclist/-/cyclist-1.0.1.tgz#596e9698fd0c80e12038c2b82d6eb1b35b6224d9"
   integrity sha1-WW6WmP0MgOEgOMK4LW6xs1tiJNk=
 
+cypress-plugin-tab@^1.0.5:
+  version "1.0.5"
+  resolved "https://registry.yarnpkg.com/cypress-plugin-tab/-/cypress-plugin-tab-1.0.5.tgz#a40714148104004bb05ed62b1bf46bb544f8eb4a"
+  integrity sha512-QtTJcifOVwwbeMP3hsOzQOKf3EqKsLyjtg9ZAGlYDntrCRXrsQhe4ZQGIthRMRLKpnP6/tTk6G0gJ2sZUfRliQ==
+  dependencies:
+    ally.js "^1.4.1"
+
 cypress@^5.2.0:
   version "5.2.0"
   resolved "https://registry.yarnpkg.com/cypress/-/cypress-5.2.0.tgz#6902efd90703242a2539f0623c6e1118aff01f95"
@@ -16503,7 +16523,6 @@ pend@~1.2.0:
 performance-now@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
-  integrity sha1-Ywn04OX6kT7BxpMHrjZLSzd8nns=
 
 phin@^2.9.1:
   version "2.9.3"
@@ -16598,6 +16617,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/pkginfo/-/pkginfo-0.4.1.tgz#b5418ef0439de5425fc4995042dced14fb2a84ff"
   integrity sha1-tUGO8EOd5UJfxJlQQtztFPsqhP8=
 
+[email protected]:
+  version "1.3.3"
+  resolved "https://registry.yarnpkg.com/platform/-/platform-1.3.3.tgz#646c77011899870b6a0903e75e997e8e51da7461"
+  integrity sha1-ZGx3ARiZhwtqCQPnXpl+jlHadGE=
+
 please-upgrade-node@^3.2.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/please-upgrade-node/-/please-upgrade-node-3.2.0.tgz#aeddd3f994c933e4ad98b99d9a556efa0e2fe942"