Fix Accessibility and Test for Accessibility Issues

.github/workflows/codespell.yml

@@ -0,0 +1,15 @@
+# GitHub Action to automate the identification of common misspellings in text files.
+# https://github.com/codespell-project/actions-codespell
+# https://github.com/codespell-project/codespell
+name: codespell
+on: pull_request
+jobs:
+  codespell:
+    name: Check for spelling errors
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: codespell-project/actions-codespell@master
+        with:
+          check_filenames: true
+          skip: ./.git,yarn.lock,*__mocks__/*

.github/workflows/node-ci.yml

@@ -0,0 +1,48 @@
+name: Node.js CI
+
+on:
+  push:
+    branches:
+      - master
+      - alpha
+      - beta
+      - next
+      - next-major
+      # This is an attempt to match semantic-release's branch pattern using
+      # GitHub Actions' regex-like matching
+      # See https://semantic-release.gitbook.io/semantic-release/v/beta/usage/configuration#branches
+      # See https://docs.github.com/en/free-pro-team@latest/actions/reference/workflow-syntax-for-github-actions#filter-pattern-cheat-sheet
+      - "[0-9]+.[0-9]+.x"
+      - "[0-9]+.x.x"
+      - "[0-9]+.x"
+  pull_request:
+
+jobs:
+  test-build-release:
+    runs-on: ubuntu-latest
+
+    steps:
+      - uses: actions/checkout@v2
+      - name: Use Node.js 12.x
+        uses: actions/setup-node@v1
+        with:
+          node-version: 12.x
+      - name: Install npm packages using cache
+        uses: bahmutov/npm-install@v1
+      - name: Lint code
+        run: yarn lint:js
+      - name: Lint styles
+        run: yarn lint:styles
+      - name: Type check
+        run: yarn typescript
+      - name: Run tests
+        run: yarn unit
+      - name: Run a11y tests
+        run: yarn a11y-test
+
+      # at this point, the build is successful
+      - name: Semantic Release
+        env:
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          NPM_TOKEN: ${{ secrets.NPM_TOKEN }}
+        run: yarn semantic-release

.gitignore

@@ -1,6 +1,8 @@
 *.log
 .DS_Store
 .jest-*
+esm
 lib
 node_modules
 .idea
+storybook-static/

.releaserc

@@ -1,6 +1,12 @@
 {
-  "repositoryUrl": "https://github.com/opentripplanner/otp-ui.git",
-
   "fail": [],
+  "plugins": [
+    "@semantic-release/commit-analyzer",
+    "@semantic-release/github",
+    "@semantic-release/npm",
+    "@semantic-release/git",
+    "@semantic-release/release-notes-generator"
+  ],
+  "repositoryUrl": "https://github.com/opentripplanner/otp-ui.git",
   "success": []
 }

.storybook/main.js

@@ -0,0 +1,29 @@
+const path = require("path");
+
+module.exports = {
+  "addons": [
+    "@storybook/addon-a11y",
+    "@storybook/addon-actions",
+    "@storybook/addon-docs",
+    "@storybook/addon-essentials",
+    "@storybook/addon-knobs",
+    "@storybook/addon-links",
+    {
+      name: '@storybook/addon-storysource',
+      options: {
+        rule: {
+          // test: [/\.stories\.jsx?$/], This is default
+          include: [path.resolve(__dirname, './src')],
+        },
+        loaderOptions: {
+          prettierConfig: { printWidth: 80, singleQuote: false },
+        }
+      }
+    },
+    "@storybook/addon-viewport"
+  ],
+  "stories": [
+    "../packages/**/*.story.mdx",
+    "../packages/**/*.story.@(js|jsx|ts|tsx)"
+  ]
+}

.storybook/manager.js

@@ -0,0 +1,10 @@
+import { addons } from '@storybook/addons';
+
+addons.setConfig({
+  sidebar: {
+    // This prevents showing "roots" or headings for certain stories that have
+    // nested hierarchies.
+    // See https://storybook.js.org/docs/react/writing-stories/naming-components-and-hierarchy#roots
+    showRoots: false
+  }
+})

.storybook/preview.js

@@ -0,0 +1,31 @@
+
+export const parameters = {
+  a11y: {
+    config: {
+      rules: [
+        {
+          //  moved to technical backlog
+          id: 'aria-required-parent',
+          reviewOnFail: true,
+        },
+        {
+          // Appears to be a story bug
+          id: 'duplicate-id',
+          reviewOnFail: true
+        },
+        {
+          // Appears to be a story bug
+          id: 'duplicate-id-aria',
+          reviewOnFail: true
+        }
+      ],
+    },
+  },
+  actions: { argTypesRegex: "^on[A-Z].*" },
+  controls: {
+    matchers: {
+      color: /(background|color)$/i,
+      date: /Date$/,
+    },
+  },
+}

README.md

@@ -14,8 +14,7 @@ See:
 
 ```bash
  git checkout https://github.com/opentripplanner/otp-ui.git
- yarn install
- yarn dev # (opens storybook to running component library on localhost:5555)
+ yarn dev # (installs packages, transpiles files, opens storybook to running component library on localhost:5555)
 ```
 
 ## Development
@@ -30,16 +29,12 @@ Some packages in otp-ui depend on sibling packages (e.g., `@opentripplanner/core
 
    > "@opentripplanner/package-to-test": **"file:../package-to-test"**
 
-2. In your source files, find and replace:
-
-   > opentripplanner/package-to-test/**lib**/types
+2. Run:
+   `yarn && yarn dev`
 
-   with
+### Storyshot testing
 
-   > opentripplanner/package-to-test/**src**/types
-
-3. Run:
-   `yarn && yarn dev`
+This repo utilizes the [Storyshot](https://storybook.js.org/docs/react/workflows/snapshot-testing) Storybook addon to perform snapshot tests of every story in this monorepo. Whenever the script `yarn unit` is ran, the Storyshot addon will be included along with all the other tests. It will compare the initial output of every story to the saved snapshot of that story. This provides a quick way to make sure nothing drastic has changed and that every single story is able to initially render without an error. Storyshot doesn't snapshot all possible changes that can be done while interacting with story components. Often times these snapshots will need to be updated and that can be accomplished by running `yarn unit -u`.
 
 ## Stack
 
@@ -64,15 +59,8 @@ Some packages in otp-ui depend on sibling packages (e.g., `@opentripplanner/core
 - `npx lerna diff` - Show specifically what files have cause the packages to change.
 - `npx lerna create <packageName>` - Creates new package and walks through setting up package.json
 
-## Lerna Publish to NPM
+## Releasing
 
-Some commands you might need to execute for lerna to publish to npm:
+This project uses semantic-release to create releases to NPM. It is expect that contributors create [Conventional Commit](https://www.conventionalcommits.org/en/v1.0.0/) messages. These are then parsed by semantic-release which will automatically create an appropriate release for each package whenever a branch is merged to master.
 
-```bash
- npm whoami
- (if whomai comes back null, then: npm login; npm config set access public)
- npx lerna changed
- npx lerna publish  # option 1: default publish
- npx lerna publish 0.0.21 --force-publish=*  # option 2: publish all components to version X
- yarn deploy-storybook
-```
+Sometimes when creating new releases, it will be necessary to update numerous packages within this repo at once to a newer internal package version. For this purpose there is the `update-internal-dependencies` script. This should be ran manually as needed. By default, `yarn update-internal-dependencies` will update all dependencies with the `@opentripplanner` scope in all packages within this project. To only update specific dependencies, it is possible to run something like `yarn update-internal-dependencies core-utils base-map`. This would update all dependencies on either the `@opentripplanner/base-map` or the `@opentripplanner/core-utils` in all packages in this project.