storybook axe a11y

[lesterchoi-okta]

Description

updates to package @okta/odyssey-storybook

• add "test" script to /packages/odyssey-storybook/package.json
• run a11y checks on each story using axe-playwright in .storybook/test-runner.js
• install @storybook/addon-interactions, @storybook/testing-library, @storybook/jest
• add example interaction tests (play functions) to check integration removed/disabled due to failing interactions which will cause project-level "test" script to fail blocking CI(?)
• configure test-runner skipFailures=true temporarily until a11y issues are resolved
• FIXME missing prop renderInput in DatePicker.stories.tsx causes playwright to crash with "Browser closed" error

With skipFailures=false in test-runner...
running yarn test from the project root will fail which will (probably) cause CI to fail.

lerna notice cli v6.6.2
lerna info Executing command in 6 packages: "yarn run test"
lerna info run Ran npm script 'test' in '@okta/odyssey-stylelint' in 3.3s:

lerna info run Ran npm script 'test' in '@okta/eslint-plugin-odyssey' in 3.4s:

lerna info run Ran npm script 'test' in '@okta/babel-plugin-fully-specified' in 4.5s:

lerna info run Ran npm script 'test' in '@okta/odyssey-react-mui' in 7.5s:

lerna info run Ran npm script 'test' in '@okta/odyssey-react-labs' in 3.2s:

lerna ERR! yarn run test exited 1 in '@okta/odyssey-storybook'
lerna ERR! yarn run test stderr:
FAIL browser: chromium src/components/odyssey-mui/TextField/TextField.stories.tsx (6.835 s)
  ● Console

    console.log
      ┌─────────┬────────────────────┬───────────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬───────┐
      │ (index) │         id         │  impact   │                                                                   description                                                                    │ nodes │
      ├─────────┼────────────────────┼───────────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼───────┤
      │    0    │ 'label-title-only' │ 'serious' │ 'Ensures that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes' │   1   │
      └─────────┴────────────────────┴───────────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴───────┘

      at DefaultTerminalReporter.<anonymous> (../../node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:31:25)

    console.log
      ┌─────────┬───────────────┬────────────┐
      │ (index) │    target     │ violations │
      ├─────────┼───────────────┼────────────┤
      │    0    │ '["#jmc39r"]' │   '[0]'    │
      └─────────┴───────────────┴────────────┘

      at DefaultTerminalReporter.<anonymous> (../../node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:43:29)

    console.log
      ┌─────────┬────────────────────┬───────────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬───────┐
      │ (index) │         id         │  impact   │                                                                   description                                                                    │ nodes │
      ├─────────┼────────────────────┼───────────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼───────┤
      │    0    │ 'label-title-only' │ 'serious' │ 'Ensures that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes' │   1   │
      └─────────┴────────────────────┴───────────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴───────┘

      at DefaultTerminalReporter.<anonymous> (../../node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:31:25)

    console.log
      ┌─────────┬───────────────┬────────────┐
      │ (index) │    target     │ violations │
      ├─────────┼───────────────┼────────────┤
      │    0    │ '["#u6lb9y"]' │   '[0]'    │
      └─────────┴───────────────┴────────────┘

      at DefaultTerminalReporter.<anonymous> (../../node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:43:29)

...


Test Suites: 11 failed, 18 passed, 29 total
Tests:       19 failed, 138 passed, 157 total
Snapshots:   0 total
Time:        27.237 s
Ran all test suites.
lerna ERR! yarn run test exited 1 in '@okta/odyssey-storybook'

With skipFailures=true in test-runner...
running yarn test from the project root will succeed but also suppress useful warnings about a11y.

lerna notice cli v6.6.2
lerna info Executing command in 6 packages: "yarn run test"
lerna info run Ran npm script 'test' in '@okta/odyssey-stylelint' in 3.7s:

lerna info run Ran npm script 'test' in '@okta/eslint-plugin-odyssey' in 3.8s:

lerna info run Ran npm script 'test' in '@okta/babel-plugin-fully-specified' in 5.2s:

lerna info run Ran npm script 'test' in '@okta/odyssey-react-mui' in 8.0s:

lerna info run Ran npm script 'test' in '@okta/odyssey-react-labs' in 3.0s:

lerna info run Ran npm script 'test' in '@okta/odyssey-storybook' in 32.5s:

lerna success run Ran npm script 'test' in 6 packages in 43.4s:
lerna success - @okta/babel-plugin-fully-specified
lerna success - @okta/eslint-plugin-odyssey
lerna success - @okta/odyssey-react-labs
lerna success - @okta/odyssey-react-mui
lerna success - @okta/odyssey-storybook
lerna success - @okta/odyssey-stylelint

The best way to see the a11y issues is to run yarn workspace @okta/odyssey-storybook test with skipFailures=true

 PASS   browser: chromium  src/components/odyssey-mui/TextField/TextField.stories.tsx (6.239 s)
  ● Console

    console.log
      ┌─────────┬────────────────────┬───────────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬───────┐
      │ (index) │         id         │  impact   │                                                                   description                                                                    │ nodes │
      ├─────────┼────────────────────┼───────────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼───────┤
      │    0    │ 'label-title-only' │ 'serious' │ 'Ensures that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes' │   1   │
      └─────────┴────────────────────┴───────────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴───────┘

      at DefaultTerminalReporter.<anonymous> (../../node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:31:25)

    console.log
      ┌─────────┬───────────────┬────────────┐
      │ (index) │    target     │ violations │
      ├─────────┼───────────────┼────────────┤
      │    0    │ '["#xn52s7"]' │   '[0]'    │
      └─────────┴───────────────┴────────────┘

      at DefaultTerminalReporter.<anonymous> (../../node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:43:29)

    console.warn
      {
        name: 'a11y violation summary',
        message: '1 accessibility violation was detected'
      }

      at testResultDependsOnViolations (../../node_modules/axe-playwright/dist/utils.js:20:21)
      at ../../node_modules/axe-playwright/dist/index.js:129:51
      at fulfilled (../../node_modules/axe-playwright/dist/index.js:28:58)

    console.log
      ┌─────────┬────────────────────┬───────────┬──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┬───────┐
      │ (index) │         id         │  impact   │                                                                   description                                                                    │ nodes │
      ├─────────┼────────────────────┼───────────┼──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┼───────┤
      │    0    │ 'label-title-only' │ 'serious' │ 'Ensures that every form element has a visible label and is not solely labeled using hidden labels, or the title or aria-describedby attributes' │   1   │
      └─────────┴────────────────────┴───────────┴──────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────────┴───────┘

      at DefaultTerminalReporter.<anonymous> (../../node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:31:25)

    console.log
      ┌─────────┬───────────────┬────────────┐
      │ (index) │    target     │ violations │
      ├─────────┼───────────────┼────────────┤
      │    0    │ '["#vdfomp"]' │   '[0]'    │
      └─────────┴───────────────┴────────────┘

      at DefaultTerminalReporter.<anonymous> (../../node_modules/axe-playwright/dist/reporter/defaultTerminalReporter.js:43:29)

    console.warn
      {
        name: 'a11y violation summary',
        message: '1 accessibility violation was detected'
      }

      at testResultDependsOnViolations (../../node_modules/axe-playwright/dist/utils.js:20:21)
      at ../../node_modules/axe-playwright/dist/index.js:129:51
      at fulfilled (../../node_modules/axe-playwright/dist/index.js:28:58)

...

Test Suites: 29 passed, 29 total
Tests:       157 passed, 157 total
Snapshots:   0 total
Time:        26.529 s
Ran all test suites.