Add accessibility tests for experimental (#9847)

### WHY are these changes introduced?

Fixes [this issue
](Shopify/archive-polaris-backlog-2024#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`

<img width="696" alt="Screenshot 2023-07-28 at 10 23 02 AM"
src="https://github.com/Shopify/polaris/assets/20652326/6e692f41-f704-4f5d-ac2e-6f2b542e9ca6">


### 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

@@ -0,0 +1,5 @@
+---
+'@shopify/polaris': patch
+---
+
+Added `role` prop to `VerticalStack`

.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 }}

.github/workflows/ci-a11y-vrt.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
       - next
+      - beta
     paths:
       - 'polaris-react/src/**'
       - 'polaris-react/playground/**'

polaris-react/.storybook/preview.js

@@ -29,7 +29,10 @@ function AppProviderDecorator(Story, context) {
   return (
     <AppProvider
       features={{
-        polarisSummerEditions2023,
+        polarisSummerEditions2023:
+          process.env.STORYBOOK_SE23 === 'on'
+            ? true
+            : polarisSummerEditions2023,
         polarisSummerEditions2023ShadowBevelOptOut,
       }}
       i18n={enTranslations}

polaris-react/src/components/ActionList/components/Section/Section.tsx

@@ -125,11 +125,15 @@ export function Section({
         as={polarisSummerEditions2023 ? 'div' : 'ul'}
         padding={polarisSummerEditions2023 ? '1_5-experimental' : '2'}
         {...(hasMultipleSections && {paddingBlockStart: '0'})}
-        {...(sectionRole && {role: sectionRole})}
+        {...(sectionRole && !polarisSummerEditions2023 && {role: sectionRole})}
         tabIndex={!hasMultipleSections ? -1 : undefined}
       >
         {polarisSummerEditions2023 ? (
-          <VerticalStack gap="1" as="ul">
+          <VerticalStack
+            gap="1"
+            as="ul"
+            {...(sectionRole && {role: sectionRole})}
+          >
             {actionMarkup}
           </VerticalStack>
         ) : (

polaris-react/src/components/Labelled/Labelled.tsx

@@ -62,7 +62,11 @@ export function Labelled({
   ) : null;
 
   const helpTextMarkup = helpText ? (
-    <div className={styles.HelpText} id={helpTextID(id)}>
+    <div
+      className={styles.HelpText}
+      id={helpTextID(id)}
+      aria-disabled={disabled}
+    >
       <Text as="span" color="subdued" breakWord>
         {helpText}
       </Text>

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);
+      }
     }
   }
 

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 = ({