test(e2e): Переносим тесты на доступность в playwright

.github/workflows/pull_request_packages.yml

@@ -138,6 +138,20 @@ jobs:
           path: playwright-report
           retention-days: 30
 
+      # - name: Download @axe-core/playwright HTML report from GitHub Actions Artifacts
+      #   uses: actions/download-artifact@v3
+      #   with:
+      #     name: axe-report
+      #     path: axe-report
+
+      # - name: Upload @axe-core/playwright HTML report to GitHub Actions Artifacts
+      #   uses: actions/upload-artifact@v3
+      #   if: always()
+      #   with:
+      #     name: axe-report
+      #     path: axe-report
+      #     retention-days: 30
+
   analyze_bundle_size:
     if: ${{ needs.changed_files.outputs.package_vkui == 'true' }}
     needs: changed_files
@@ -235,3 +249,15 @@ jobs:
     uses: ./.github/workflows/reusable_workflow_pr_worfklow_payload.yml
     with:
       action: upload
+
+  # check_a11y:
+  #   needs: [test, test_e2e_prepare_and_upload_report, docs_styleguide_upload, docs_storybook_upload]
+  #   # Не используем always(), т.к. он не учитывает отмену воркфлоу
+  #   # см. https://github.com/orgs/community/discussions/26303
+  #   if: ${{ !cancelled() }}
+  #   steps:
+  #     - name: Fail if a11y has deteriorated
+  #       if: ${{ needs.a11y_violations.outputs.HEAD > needs.a11y_violations.outputs.BASE }}
+  #       run: |
+  #         echo "::error file=packages/vkui/src/index.ts,line=1::VKUI a11y has decreased"
+  #         exit 1

.github/workflows/pull_request_packages_deploy.yml

@@ -184,3 +184,115 @@ jobs:
 
             Commit ${{ env.PR_HEAD_SHA }}
           edit-mode: replace
+
+  # deploy_a11y_report:
+  #   needs: [pr_workflow_payload]
+  #   if: ${{ needs.pr_workflow_payload.outputs.status == 'success' }}
+  #   runs-on: ubuntu-latest
+  #   name: Deploy @axe-core/playwright HTML report
+  #   outputs:
+  #     url: ${{ steps.url.outputs.value }}
+  #   steps:
+  #     - name: Download @axe-core/playwright HTML report from GitHub Actions Artifacts
+  #       id: artifact
+  #       uses: VKCOM/gh-actions/shared/download-workflow-artifact@main
+  #       with:
+  #         name: axe-report
+  #         path: axe-report
+
+  #     - name: Deploy @axe-core/playwright HTML report
+  #       if: ${{ steps.artifact.outputs.found_artifact == 'true' }}
+  #       id: deploy
+  #       uses: VKCOM/gh-actions/VKUI/s3@main
+  #       with:
+  #         awsAccessKeyId: ${{ secrets.AWS_ACCESS_KEY_ID }}
+  #         awsSecretAccessKey: ${{ secrets.AWS_SECRET_KEY }}
+  #         awsBucket: ${{ vars.AWS_BUCKET }}
+  #         awsEndpoint: https://${{ vars.AWS_ENDPOINT }}
+  #         command: upload
+  #         commandUploadSrc: axe-report/
+  #         commandUploadDist: pull/${{ needs.pr_workflow_payload.outputs.pr_number }}/${{ env.PR_HEAD_SHA }}/axe-report
+
+  #     - name: Create @axe-core/playwright HTML report url
+  #       if: ${{ steps.deploy.outcome == 'success' }}
+  #       id: url
+  #       run: echo "value=${{ env.AWS_S3_URL }}/pull/${{ needs.pr_workflow_payload.outputs.pr_number }}/${{ env.PR_HEAD_SHA }}/axe-report/index.html" >> $GITHUB_OUTPUT
+
+  # a11y_report_comment:
+  #   needs: [deploy_a11y_report, pr_workflow_payload]
+  #   if: ${{ needs.deploy_a11y_report.outputs.url != '' }}
+  #   runs-on: ubuntu-latest
+  #   name: a11y report comment
+  #   steps:
+  #     - name: Download @axe-core/playwright json report from GitHub Actions Artifacts
+  #       uses: actions/download-artifact@v3
+  #       with:
+  #         name: a11y-output
+  #         path: a11y-output
+
+  #     - name: Get number of a11y violations for BASE and HEAD from @axe-core/playwright json report
+  #       id: get_violations
+  #       run: |
+  #         basejson=`cat packages/vkui/a11y-results.json`
+  #         headjson=`cat a11y-output/a11y-results.json`
+  #         echo "BASE=$(jq -r '.count' <<< $basejson)" >> $GITHUB_OUTPUT
+  #         echo "HEAD=$(jq -r '.count' <<< $headjson)" >> $GITHUB_OUTPUT
+
+  #     - name: Find Axe Report URL comment
+  #       uses: peter-evans/find-comment@v2
+  #       id: find_url_comment
+  #       with:
+  #         issue-number: ${{ needs.pr_workflow_payload.outputs.pr_number }}
+  #         comment-author: 'github-actions[bot]'
+  #         body-includes: <!-- axe_report_url -->
+
+  #     - name: stable a11y — Create or update @axe-core/playwright HTML report comment
+  #       if: ${{ steps.get_violations.outputs.HEAD == steps.get_violations.outputs.BASE }}
+  #       uses: peter-evans/create-or-update-comment@v3
+  #       with:
+  #         comment-id: ${{ steps.find_url_comment.outputs.comment-id }}
+  #         issue-number: ${{ github.event.pull_request.number }}
+  #         body: |
+  #           <!-- axe_report_url -->
+  #           ## ♿ `@axe-core/playwright` Report
+
+  #           ### 👌 This PR does not affect accessibility 👌
+
+  #           > There are ${{ steps.get_violations.outputs.HEAD }} violations on ${{ env.PR_HEAD_SHA }} compared to ${{ steps.get_violations.outputs.BASE }} violations in `a11y-results.json`.
+
+  #           See full [Axe Accessibility Report](${{ needs.deploy_a11y_report.outputs.url }})
+  #         edit-mode: replace
+
+  #     - name: improved a11y — Create or update @axe-core/playwright HTML report
+  #       if: ${{ steps.get_violations.outputs.HEAD < steps.get_violations.outputs.BASE }}
+  #       uses: peter-evans/create-or-update-comment@v3
+  #       with:
+  #         comment-id: ${{ steps.find_url_comment.outputs.comment-id }}
+  #         issue-number: ${{ github.event.pull_request.number }}
+  #         body: |
+  #           <!-- axe_report_url -->
+  #           ## ♿ `@axe-core/playwright` Report
+
+  #           ### 🎉 Hooray! This PR improves accessibility! 🎉
+
+  #           > There are ${{ steps.get_violations.outputs.HEAD }} violations on ${{ env.PR_HEAD_SHA }} compared to ${{ steps.get_violations.outputs.BASE }} violations in `a11y-results.json`.
+
+  #           See full [Axe Accessibility Report](${{ needs.deploy_a11y_report.outputs.url }})
+  #         edit-mode: replace
+
+  #     - name: deteriorated a11y — Create or update @axe-core/playwright HTML report
+  #       if: ${{ steps.get_violations.outputs.HEAD > steps.get_violations.outputs.BASE }}
+  #       uses: peter-evans/create-or-update-comment@v3
+  #       with:
+  #         comment-id: ${{ steps.find_url_comment.outputs.comment-id }}
+  #         issue-number: ${{ github.event.pull_request.number }}
+  #         body: |
+  #           <!-- axe_report_url -->
+  #           ## ♿ `@axe-core/playwright` Report
+
+  #           ### 🚨 Attention! This PR deteriorates accessibility! 🚨
+
+  #           > There are ${{ steps.get_violations.outputs.HEAD }} violations on ${{ env.PR_HEAD_SHA }} compared to ${{ steps.get_violations.outputs.BASE }} violations
+
+  #           See full [Axe Accessibility Report](${{ needs.deploy_a11y_report.outputs.url }})
+  #         edit-mode: replace

.github/workflows/reusable_workflow_test_e2e.yml

@@ -70,3 +70,11 @@ jobs:
           name: all-blob-reports-${{ matrix.shardIndex }}-${{ matrix.shardTotal }}
           path: packages/vkui/blob-report
           retention-days: 1
+
+      - name: Upload @axe-core/playwright json report to GitHub Actions Artifacts
+        uses: actions/upload-artifact@v3
+        if: always()
+        with:
+          name: a11y-output-${{ matrix.shardIndex }}-${{ matrix.shardTotal }}
+          path: packages/vkui/a11y-results-${{ matrix.shardIndex }}-${{ matrix.shardTotal }}.json
+          retention-days: 1

.gitignore

@@ -12,13 +12,13 @@ node_modules/
 npm-debug.log
 stats.json
 test-results.json
-a11y-results.json
 lint-results.json
 e2e-results.json
 yarn-error.log
 playwright-report/
 blob-report/
 all-blob-reports/
+axe-report/
 
 # Caches
 .cache
@@ -32,7 +32,6 @@ coverage
 
 # nyc test coverage
 .nyc_output
-.nyc_a11y_output
 
 # Snapshot directory of Cypress Image Diff
 __diff_output__

package.json

@@ -3,11 +3,13 @@
   "version": "0.0.0",
   "name": "@vkontakte/vkui-monorepo",
   "dependencies": {
+    "@axe-core/playwright": "^4.8.2",
     "@project-docs/styleguide": "workspace:1.0.0",
     "@project-tools/eslint-plugin-vkui": "workspace:1.0.0",
     "@project-tools/postcss-restructure-variable": "workspace:1.0.0",
     "@project-tools/storybook-addon-cartesian": "workspace:1.0.0",
-    "@project-tools/stylelint-bad-multiplication": "workspace:1.0.0"
+    "@project-tools/stylelint-bad-multiplication": "workspace:1.0.0",
+    "axe-html-reporter": "^2.2.3"
   },
   "devDependencies": {
     "@csstools/postcss-global-data": "2.1.1",
@@ -103,6 +105,7 @@
     "test": "yarn workspaces foreach run test",
     "test:ci": "yarn workspaces foreach run test:ci",
     "test:e2e": "yarn workspace @vkontakte/vkui run test:e2e",
+    "test:e2e-shard": "yarn workspace @vkontakte/vkui run test:e2e-shard",
     "test:e2e-update": "yarn workspace @vkontakte/vkui run test:e2e-update",
     "test:e2e:ci": "yarn workspace @vkontakte/vkui run test:e2e:ci",
     "test:e2e-update:ci": "yarn workspace @vkontakte/vkui run test:e2e-update:ci",