WB-1676.2: Add a11y features to announce combobox changes to screen readers #3723
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| name: Node CI (PR) | |
| on: | |
| pull_request: | |
| # ready_for_review is useful for when a PR is converted from "draft" to "not | |
| # draft". | |
| types: [edited, opened, synchronize, ready_for_review, reopened] | |
| # Our jobs run like this to minimize wasting resource cycles: | |
| # 1. Prime caches for primary configuration (ubuntu on node 16). | |
| # This way the next two jobs can run in parallel but rely on this primed | |
| # cache. | |
| # 2. Lint and Test | |
| # a. Lint | |
| # b. Test/Coverage | |
| # 3. Verify that build sizes are reasonable | |
| jobs: | |
| prime_cache_primary: | |
| name: Prime node_modules cache for primary configuration | |
| runs-on: ${{ matrix.os }} | |
| strategy: | |
| matrix: | |
| os: [ubuntu-latest] | |
| node-version: [20.x] | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - name: Install & cache node_modules | |
| uses: Khan/actions@shared-node-cache-v2 | |
| with: | |
| node-version: ${{ matrix.node-version }} | |
| changeset: | |
| name: Check for .changeset entries for all changed files | |
| if: github.actor != 'dependabot[bot]' && github.actor != 'dependabot-preview[bot]' | |
| runs-on: ${{ matrix.os }} | |
| strategy: | |
| matrix: | |
| os: [ubuntu-latest] | |
| node-version: [20.x] | |
| steps: | |
| - name: Checkout repository | |
| uses: actions/checkout@v4 | |
| with: | |
| fetch-depth: 0 | |
| - name: Get changed files | |
| uses: Khan/actions@get-changed-files-v2 | |
| id: changed | |
| - name: Filter out files that don't need a changeset | |
| uses: Khan/actions@filter-files-v1 | |
| id: match | |
| with: | |
| changed-files: ${{ steps.changed.outputs.files }} | |
| files: packages/ # Only look for changes in packages | |
| globs: "!(**/__tests__/**), !(**/dist/*)" # Ignore test files | |
| matchAllGlobs: true # All globs must match (disjunction is the default) | |
| conjunctive: true # Only return files that match all of the above | |
| - name: Verify changeset entries | |
| uses: Khan/changeset-per-package@v1.0.2-pre | |
| with: | |
| changed_files: ${{ steps.match.outputs.filtered }} | |
| lint: | |
| name: Lint | |
| needs: prime_cache_primary | |
| runs-on: ${{ matrix.os }} | |
| strategy: | |
| matrix: | |
| os: [ubuntu-latest] | |
| node-version: [20.x] | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - name: Use Node.js ${{ matrix.node-version }} | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: ${{ matrix.node-version }} | |
| - name: Install & cache node_modules | |
| uses: Khan/actions@shared-node-cache-v2 | |
| with: | |
| node-version: ${{ matrix.node-version }} | |
| - name: Get All Changed Files | |
| uses: Khan/actions@get-changed-files-v2 | |
| id: changed | |
| - id: js-ts-files | |
| name: Find .js, .ts changed files | |
| uses: Khan/actions@filter-files-v1 | |
| with: | |
| changed-files: ${{ steps.changed.outputs.files }} | |
| extensions: '.js,.jsx,.ts,.tsx' | |
| - id: eslint-reset | |
| uses: Khan/actions@filter-files-v1 | |
| name: Files that would trigger a full eslint run | |
| with: | |
| changed-files: ${{ steps.changed.outputs.files }} | |
| files: '.eslintrc.js,yarn.lock,.eslintignore' | |
| - id: typecheck-reset | |
| uses: Khan/actions@filter-files-v1 | |
| name: Files that would trigger a typecheck run | |
| with: | |
| changed-files: ${{ steps.changed.outputs.files }} | |
| files: '.yarn.lock' | |
| # Linting / type checking | |
| - name: Eslint | |
| uses: Khan/actions@full-or-limited-v0 | |
| with: | |
| full-trigger: ${{ steps.eslint-reset.outputs.filtered }} | |
| full: yarn lint:ci . | |
| limited-trigger: ${{ steps.js-ts-files.outputs.filtered }} | |
| limited: yarn lint:ci {} | |
| - name: Typecheck | |
| if: always() # always run this check until we update the eslint config | |
| # if: steps.js-ts-files.outputs.filtered != '[]' || steps.typecheck-reset.outputs.filtered != '[]' | |
| run: yarn typecheck | |
| - name: Build .js bundles | |
| run: yarn build | |
| - name: Build .d.ts types | |
| run: yarn build:types | |
| - name: Check package.json files | |
| run: node utils/publish/pre-publish-check-ci.js | |
| test: | |
| name: Test | |
| needs: prime_cache_primary | |
| runs-on: ${{ matrix.os }} | |
| strategy: | |
| matrix: | |
| os: [ubuntu-latest] | |
| node-version: [20.x] | |
| shard: ["1/2", "2/2"] | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - name: Use Node.js ${{ matrix.node-version }} | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: ${{ matrix.node-version }} | |
| - name: Install & cache node_modules | |
| uses: Khan/actions@shared-node-cache-v2 | |
| with: | |
| node-version: ${{ matrix.node-version }} | |
| # Testing and coverage | |
| - name: Run jest tests with coverage | |
| run: yarn coverage:ci --shard ${{ matrix.shard }} | |
| - name: Upload Coverage | |
| uses: codecov/codecov-action@v4 | |
| with: | |
| token: ${{ secrets.CODECOV_TOKEN }} | |
| files: ./coverage/coverage-final.json | |
| check_builds: | |
| name: Check build sizes | |
| needs: prime_cache_primary | |
| runs-on: ${{ matrix.os }} | |
| strategy: | |
| matrix: | |
| os: [ubuntu-latest] | |
| node-version: [20.x] | |
| steps: | |
| - uses: actions/checkout@v4 | |
| - name: Use Node.js ${{ matrix.node-version }} | |
| uses: actions/setup-node@v4 | |
| with: | |
| node-version: ${{ matrix.node-version }} | |
| - name: Install & cache node_modules | |
| uses: Khan/actions@shared-node-cache-v2 | |
| with: | |
| node-version: ${{ matrix.node-version }} | |
| # Make sure our packages aren't growing unexpectedly | |
| - name: Check Builds | |
| uses: preactjs/compressed-size-action@v2 | |
| with: | |
| # Specify our custom build script | |
| build-script: "build" | |
| # Clean up state between builds | |
| clean-script: "clean" | |
| # Any JS files anywhere within a dist directory: | |
| pattern: "**/dist/es/*.js" | |
| # Always ignore SourceMaps and node_modules: | |
| exclude: "{**/*.map,**/node_modules/**}" | |
| publish_snapshot: | |
| name: Publish npm snapshot | |
| # We don't publish snapshots on draft PRs or | |
| # on the main Changeset "Version Packages" PR | |
| if: | | |
| github.event.pull_request.draft == false | |
| && !startsWith(github.head_ref, 'changeset-release/') | |
| runs-on: ${{ matrix.os }} | |
| strategy: | |
| matrix: | |
| os: [ubuntu-latest] | |
| node-version: [20.x] | |
| steps: | |
| # We need to checkout all history, so that the changeset tool can diff it | |
| - name: Checkout current commit | |
| uses: actions/checkout@v4 | |
| with: | |
| fetch-depth: "0" | |
| - name: Ensure main branch is avaialble | |
| run: | | |
| REF=$(git rev-parse HEAD) | |
| git checkout main | |
| git checkout $REF | |
| - name: Use Node.js ${{ matrix.node-version }} & Install & cache node_modules | |
| uses: Khan/actions@shared-node-cache-v2 | |
| with: | |
| node-version: ${{ matrix.node-version }} | |
| - name: Publish snapshot release to npm | |
| id: publish-snapshot | |
| run: ./utils/publish/publish-snapshot.sh # All config is via Github env vars | |
| env: | |
| NPM_TOKEN: ${{ secrets.NPM_TOKEN }} | |
| - name: Calculate short SHA for this commit | |
| id: short-sha | |
| run: echo "short_sha=$(echo ${GITHUB_SHA} | cut -c1-8)" >> $GITHUB_OUTPUT | |
| # Note: these two actions are locked to the latest version that were | |
| # published when @jeremy (Jeremy Wiebe) created the original job in Perseus. | |
| - name: Find existing comment | |
| uses: peter-evans/find-comment@3eae4d37986fb5a8592848f6a574fdf654e61f9e | |
| id: find-comment | |
| with: | |
| issue-number: ${{ github.event.pull_request.number }} | |
| comment-author: "github-actions[bot]" | |
| body-includes: "npm Snapshot:" | |
| - name: Create or update npm snapshot comment - Success | |
| if: steps.publish-snapshot.outputs.npm_snapshot_tag != '' | |
| uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 | |
| with: | |
| issue-number: ${{ github.event.pull_request.number }} | |
| comment-id: ${{ steps.find-comment.outputs.comment-id }} | |
| edit-mode: replace | |
| body: | | |
| ## npm Snapshot: Published | |
| 🎉 Good news!! We've packaged up the latest commit from this PR (${{ | |
| steps.short-sha.outputs.short_sha }}) and published all packages with changesets to npm. | |
| You can install the packages in webapp by running: | |
| ```sh | |
| ./services/static/dev/tools/deploy_wonder_blocks.js --tag="${{ | |
| steps.publish-snapshot.outputs.npm_snapshot_tag }}" | |
| ``` | |
| Packages can also be installed manually by running: | |
| ```sh | |
| yarn add @khanacademy/wonder-blocks-<package-name>@${{ | |
| steps.publish-snapshot.outputs.npm_snapshot_tag }} | |
| ``` | |
| - name: Create or update npm snapshot comment - Failure | |
| if: steps.publish-snapshot.outputs.npm_snapshot_tag == '' | |
| uses: peter-evans/create-or-update-comment@71345be0265236311c031f5c7866368bd1eff043 | |
| with: | |
| issue-number: ${{ github.event.pull_request.number }} | |
| comment-id: ${{ steps.find-comment.outputs.comment-id }} | |
| edit-mode: replace | |
| body: | | |
| ## npm Snapshot: **NOT** Published | |
| 🤕 Oh noes!! We couldn't find any changesets in this PR (${{ | |
| steps.short-sha.outputs.short_sha }}). As a result, we did **not** publish an npm snapshot for you. |