From 85b68a358a0390c243216ad8059d9bccf5f00594 Mon Sep 17 00:00:00 2001 From: Sophie Schneider Date: Mon, 31 Jul 2023 11:18:20 -0400 Subject: [PATCH] Add accessibility tests for experimental (#9847) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit ### WHY are these changes introduced? Fixes [this issue ](https://github.com/Shopify/polaris-summer-editions/issues/1030) ### WHAT is this pull request doing? Adds a duplicate CI check to run the accessibility tests on storybook with the `polarisSummerEditions2023` feature flag forced to true. I do this with a [Storybook Env Variable](https://storybook.js.org/docs/react/configure/environment-variables). I also had to fix some minor a11y failures, which included adding an `aria-role` to `VerticalStack` Screenshot 2023-07-28 at 10 23 02 AM ### How to 🎩 * Make sure the new CI passes! * `aria-role='menu'` is on `Box` pre se23 and on `VerticalStack` post se23 in [`ActionList`](https://5d559397bae39100201eedc1-fbggpulucd.chromatic.com/?path=/story/all-components-actionlist--all) --- .changeset/curvy-cheetahs-march.md | 5 + .../workflows/ci-a11y-vrt-experimental.yml | 118 ++++++++++++++++++ .github/workflows/ci-a11y-vrt.yml | 1 + polaris-react/.storybook/preview.js | 5 +- .../ActionList/components/Section/Section.tsx | 8 +- .../src/components/Labelled/Labelled.tsx | 6 +- .../TopBar/components/Menu/Menu.scss | 5 + .../VerticalStack/VerticalStack.tsx | 5 + 8 files changed, 149 insertions(+), 4 deletions(-) create mode 100644 .changeset/curvy-cheetahs-march.md create mode 100644 .github/workflows/ci-a11y-vrt-experimental.yml diff --git a/.changeset/curvy-cheetahs-march.md b/.changeset/curvy-cheetahs-march.md new file mode 100644 index 00000000000..64fd3637297 --- /dev/null +++ b/.changeset/curvy-cheetahs-march.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Added `role` prop to `VerticalStack` diff --git a/.github/workflows/ci-a11y-vrt-experimental.yml b/.github/workflows/ci-a11y-vrt-experimental.yml new file mode 100644 index 00000000000..429543499bd --- /dev/null +++ b/.github/workflows/ci-a11y-vrt-experimental.yml @@ -0,0 +1,118 @@ +name: Accessibility and Visual Regression Experimental Tests + +on: + push: + branches: + - main + - next + - beta + paths: + - 'polaris-react/src/**' + - 'polaris-react/playground/**' + - 'polaris-tokens/src/**' + pull_request: + paths: + - 'polaris-react/src/**' + - 'polaris-react/playground/**' + - 'polaris-tokens/src/**' + +jobs: + accessibility_test: + name: 'Accessibility test' + runs-on: ubuntu-latest + steps: + - name: Checkout branch + uses: actions/checkout@v3 + + - name: Free up space on GitHub image + run: | + # Based on the official advice: + # https://github.com/actions/virtual-environments/issues/2840#issuecomment-790492173 + sudo rm -rf /usr/share/dotnet + sudo rm -rf /opt/ghc + sudo rm -rf "/usr/local/share/boost" + sudo rm -rf "$AGENT_TOOLSDIRECTORY" + + - name: Setup Node with v18.12.0 + uses: actions/setup-node@v3 + with: + node-version: 18.12.0 + cache: yarn + + - name: Restore cache + uses: actions/cache@v3 + with: + path: | + **/.turbo + node_modules/.cache/turbo + polaris-react/build-internal/cache + key: ${{ runner.os }}-accessibility-test-experimental-${{ github.sha }} + restore-keys: | + ${{ runner.os }}-accessibility-test-experimental- + + - name: Install dependencies + run: yarn --frozen-lockfile + + - name: Build packages + run: yarn build --filter=@shopify/polaris + + - name: Build Storybook + run: STORYBOOK_SE23='on' yarn workspace @shopify/polaris run storybook:build --quiet + + - name: Run accessibility test + run: node ./polaris-react/scripts/accessibility-check.js + env: + STORYBOOK_DISABLE_DOCS: 1 + + visual_regression_test: + name: 'Visual regression test' + runs-on: ubuntu-latest + steps: + - name: Checkout branch + uses: actions/checkout@v3 + with: + fetch-depth: 0 # Chromatic git history to track changes + + - name: Setup Node with v18.12.0 + uses: actions/setup-node@v3 + with: + node-version: 18.12.0 + cache: yarn + + - name: Restore cache + uses: actions/cache@v3 + with: + path: | + **/.turbo + node_modules/.cache/turbo + polaris-react/build-internal/cache + key: ${{ runner.os }}-visual-regression-test-experimental-${{ github.sha }} + restore-keys: | + ${{ runner.os }}-visual-regression-test-experimental- + + - name: Install dependencies + run: yarn --frozen-lockfile + + - name: Build packages + run: yarn build --filter=@shopify/polaris + + - name: Build Storybook + run: yarn workspace @shopify/polaris run storybook:build --quiet + env: + STORYBOOK_GITHUB_SHA: ${{ github.sha }} + STORYBOOK_GITHUB_REPO_URL: ${{ github.server_url }}/${{ github.repository }} + STORYBOOK_GITHUB_PR: ${{ github.event.number }} + + - name: Run Chromatic tests + uses: chromaui/action@v1 + with: + token: ${{ secrets.GITHUB_TOKEN }} + projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }} + autoAcceptChanges: 'main' + storybookBuildDir: 'polaris-react/build-internal/storybook/static' + exitZeroOnChanges: true + exitOnceUploaded: true + env: + STORYBOOK_GITHUB_SHA: ${{ github.sha }} + STORYBOOK_GITHUB_REPO_URL: ${{ github.server_url }}/${{ github.repository }} + STORYBOOK_GITHUB_PR: ${{ github.event.number }} diff --git a/.github/workflows/ci-a11y-vrt.yml b/.github/workflows/ci-a11y-vrt.yml index f4138b811a8..a38a5845244 100644 --- a/.github/workflows/ci-a11y-vrt.yml +++ b/.github/workflows/ci-a11y-vrt.yml @@ -5,6 +5,7 @@ on: branches: - main - next + - beta paths: - 'polaris-react/src/**' - 'polaris-react/playground/**' diff --git a/polaris-react/.storybook/preview.js b/polaris-react/.storybook/preview.js index 5d0385f24d9..4a5db4d336d 100644 --- a/polaris-react/.storybook/preview.js +++ b/polaris-react/.storybook/preview.js @@ -29,7 +29,10 @@ function AppProviderDecorator(Story, context) { return ( {polarisSummerEditions2023 ? ( - + {actionMarkup} ) : ( diff --git a/polaris-react/src/components/Labelled/Labelled.tsx b/polaris-react/src/components/Labelled/Labelled.tsx index 43336291d8e..e3ba170fe02 100644 --- a/polaris-react/src/components/Labelled/Labelled.tsx +++ b/polaris-react/src/components/Labelled/Labelled.tsx @@ -62,7 +62,11 @@ export function Labelled({ ) : null; const helpTextMarkup = helpText ? ( -
+
{helpText} diff --git a/polaris-react/src/components/TopBar/components/Menu/Menu.scss b/polaris-react/src/components/TopBar/components/Menu/Menu.scss index 506a7530b7c..dd6890c577a 100644 --- a/polaris-react/src/components/TopBar/components/Menu/Menu.scss +++ b/polaris-react/src/components/TopBar/components/Menu/Menu.scss @@ -100,6 +100,11 @@ $activator-variables: ( #{$se23} & { background-color: var(--p-color-bg-inverse-active); + + // stylelint-disable -- se23 text needs to be lighter to pass a11y on --p-color-bg-inverse-active + p { + color: var(--p-color-text-inverse); + } } } diff --git a/polaris-react/src/components/VerticalStack/VerticalStack.tsx b/polaris-react/src/components/VerticalStack/VerticalStack.tsx index dcbb2a6fac2..851b8f3ddd9 100644 --- a/polaris-react/src/components/VerticalStack/VerticalStack.tsx +++ b/polaris-react/src/components/VerticalStack/VerticalStack.tsx @@ -42,6 +42,11 @@ export interface VerticalStackProps extends React.AriaAttributes { * @default false */ reverseOrder?: boolean; + /** Aria role */ + role?: Extract< + React.AriaRole, + 'status' | 'presentation' | 'menu' | 'listbox' | 'combobox' + >; } export const VerticalStack = ({