fix(a11y): update role attributes for tab panels and improve workflow

.github/workflows/release.yml

@@ -36,20 +36,20 @@ jobs:
     runs-on: ubuntu-latest
     needs: [build-staging-image]
     steps:
-    - uses: passeidireto/trigger-external-workflow-action@main
-      env:
-        PAYLOAD_SERVICE: "webcomponents"
-      with:
-        repository: docaxess/pdfa11y-k8s-webservices
-        event: deploy_staging
-        github_pat: ${{ secrets.K8S_WEBSERVICES_PAT }}
+      - uses: passeidireto/trigger-external-workflow-action@main
+        env:
+          PAYLOAD_SERVICE: "webcomponents"
+        with:
+          repository: docaxess/pdfa11y-k8s-webservices
+          event: deploy_staging
+          github_pat: ${{ secrets.K8S_WEBSERVICES_PAT }}
 
-    - uses: slackapi/slack-github-action@v1.26.0
-      with:
-        channel-id: 'C0779L6QQT1' #'saas-deployment'
-        payload: |
-          {
-            "text": ":rocket: webcomponents.ipedis.com has been released on staging ! :tada: ( ${{ github.ref_name }} )"
-          }
-      env:
-        SLACK_WEBHOOK_URL: ${{ secrets.DEPLOYMENT_SLACK_BOT }}
+      - uses: slackapi/slack-github-action@v2.1.1
+        with:
+          webhook-type: webhook-trigger
+          #'saas-deployment'
+          webhook: ${{ secrets.DEPLOYMENT_SLACK_BOT }}
+          payload: |
+            {
+              "text": ":rocket: webcomponents.ipedis.com has been released on staging ! :tada: ( ${{ github.ref_name }} )"
+            }

.github/workflows/test.yml

@@ -5,30 +5,43 @@ on:
   pull_request:
 
 jobs:
-  build-and-test:
+  setup:
     runs-on: ubuntu-latest
-    strategy:
-      matrix:
-        node-version: [22.x]
     steps:
-      - uses: actions/checkout@v4
-      - name: Use Node ${{ matrix.node-version }}
-        uses: actions/setup-node@v4
+      - uses: actions/checkout@v5
+      - name: Setup Node.js
+        uses: actions/setup-node@v5
         with:
-          node-version: ${{ matrix.node-version }}
+          node-version: '22.x'
           cache: 'npm'
 
       - name: Install dependencies
-        run: npm install
-
-      - name: Lint all packages
-        run: npm run lint
+        run: npm ci
 
       - name: Build all packages
         run: npm run build
 
+      - name: Lint all packages
+        run: npx nx run-many --target=lint --all --parallel
+
       - name: Test all packages
-        run: npm run test
+        run: npx nx run-many --target=test --all --parallel
+
+      - name: Install Playwright browsers
+        run: npx playwright install --with-deps
 
-      - name: e2e all packages
-        run: npm run e2e
+      - name: Demo e2e tests
+        run: npx nx run-many --target=e2e --all --parallel --exclude=demo
+
+      - name: Demo Axe tests
+        run: npm run build:cleanup && npx playwright test apps/demo/e2e/accessibility.spec.ts --config apps/demo/playwright.config.ts
+        env:
+          AXE_DEVELOPER_HUB_API_KEY: ${{ secrets.AXE_DEVELOPER_HUB_API_KEY }}
+  axe-linter:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: dequelabs/axe-linter-action@v1
+        with:
+          api_key: ${{ secrets.AXE_LINTER_API_KEY }}
+          github_token: ${{ secrets.GITHUB_TOKEN }}

.gitignore

@@ -42,4 +42,9 @@ Thumbs.db
 .nx/workspace-data
 
 packages/*/.stencil
+packages/*/package.e2e.json
 .angular
+.env
+
+playwright-report
+test-results

apps/demo/docker/Dockerfile

@@ -3,7 +3,7 @@ WORKDIR /app/src
 RUN apk add --no-cache --virtual .build-deps alpine-sdk python3
 
 COPY package*.json ./
-RUN npm install
+RUN npm ci
 
 COPY . ./
 RUN npm run build

apps/demo/e2e/README.md

@@ -0,0 +1,55 @@
+# Demo App E2E Tests - Minimal Setup
+
+Simple, reliable e2e tests for the demo application.
+
+## Test Files
+
+- `home.spec.ts` - Basic home page tests
+- `demo-basic.spec.ts` - Navigation tests for main component pages
+
+## Running Tests
+
+### Local Development
+```bash
+# Run demo e2e tests
+npm run e2e:demo
+
+# Manual run (if server already running)
+npm run demo:e2e:manual
+
+# Build and test (full local CI simulation)
+npm run ci:demo
+```
+
+### CI Pipeline
+```bash
+# Basic CI (no e2e)
+npm run ci:basic
+
+# Full CI with e2e
+npm run build && npm run e2e:demo
+```
+
+## Configuration
+
+- **Browser**: Chromium only (for speed and reliability)
+- **Auto-server**: Starts demo app automatically on port 4201
+- **Timeout**: 5s per test
+- **Parallelization**: All tests run in parallel
+
+## Test Strategy
+
+**Minimal and Focused:**
+- ✅ Page loads successfully  
+- ✅ Basic navigation works
+- ✅ Components render on their pages
+- ✅ No complex interactions (to avoid flakiness)
+
+**What's NOT tested:**
+- ❌ Complex component interactions
+- ❌ Form submissions
+- ❌ Animation states
+- ❌ Mobile menu toggles
+- ❌ Tooltips/dropdowns
+
+This keeps tests fast, reliable, and focused on critical functionality.

apps/demo/e2e/accessibility.spec.ts

@@ -0,0 +1,106 @@
+import { BrowserContext, chromium, test } from '@playwright/test';
+import {
+  wrapPlaywrightPage,
+  playwrightConfig,
+  PlaywrightController
+} from '@axe-core/watcher';
+import * as dotenv from 'dotenv';
+
+// Load environment variables
+dotenv.config();
+
+const API_KEY = process.env['AXE_DEVELOPER_HUB_API_KEY'];
+
+if (!API_KEY) {
+  console.warn('AXE_DEVELOPER_HUB_API_KEY not found in environment variables');
+}
+
+test.describe('Accessibility Tests', () => {
+  let controller: PlaywrightController;
+
+  test.beforeEach(async ({ page, browser }) => {
+    const browserContext: BrowserContext = await chromium.launchPersistentContext(
+      '',
+      playwrightConfig({
+      axe: {
+        apiKey: API_KEY || '',
+        timeout: {
+          flush: 10000
+        }
+      },
+      channel: 'chromium',
+      args: ['--headless=new']
+    }));
+    const p = await browserContext.newPage();
+    controller = new PlaywrightController(p);
+
+    // Wrap the page for axe monitoring
+    wrapPlaywrightPage(p, controller);
+  });
+
+  test.afterEach(async () => {
+    // Flush test results to axe Developer Hub
+    if (controller) {
+      try {
+        await controller.flush();
+      } catch (error) {
+        console.warn('Failed to flush accessibility results:', error);
+      }
+    }
+  });
+
+  test('should pass accessibility audit on home page', async ({ page }) => {
+    await page.goto('/');
+    await page.waitForLoadState('networkidle');
+
+    // The axe-watcher automatically scans the page for accessibility issues
+    // We just need to interact with the page normally
+
+    // Wait a bit to ensure all content is loaded
+    await page.waitForTimeout(2000);
+  });
+
+  test('should pass accessibility audit on accordion page', async ({ page }) => {
+    await page.goto('/accordion');
+    await page.waitForLoadState('networkidle');
+
+    // Check that the page has loaded
+    await page.locator('h2:has-text("Accordion")').first().waitFor();
+
+    // Wait for component to be fully rendered
+    await page.waitForTimeout(2000);
+  });
+
+  test('should pass accessibility audit on alert page', async ({ page }) => {
+    await page.goto('/alert');
+    await page.waitForLoadState('networkidle');
+
+    // Check that the page has loaded
+    await page.locator('h2:has-text("Alert")').first().waitFor();
+
+    // Wait for component to be fully rendered
+    await page.waitForTimeout(2000);
+  });
+
+  test('should pass accessibility audit on table page', async ({ page }) => {
+    await page.goto('/table');
+    await page.waitForLoadState('networkidle');
+
+    // Check that the page has loaded
+    await page.locator('h2:has-text("Table")').first().waitFor();
+
+    // Wait for component to be fully rendered
+    await page.waitForTimeout(2000);
+  });
+
+  test('should pass accessibility audit on form components', async ({ page }) => {
+    await page.goto('/checkbox');
+    await page.waitForLoadState('networkidle');
+
+    // Check that the page has loaded
+    await page.locator('h1, h2').first().waitFor();
+
+    // Wait for component to be fully rendered
+    await page.waitForTimeout(2000);
+  });
+});

apps/demo/e2e/axe.md

@@ -0,0 +1,71 @@
+In the root level of your testing folder, install the @axe-core/watcher package and all of its dependencies using npm or your preferred package manager (for example, yarn or pnpm).
+```
+npm install --save-dev @axe-core/watcher
+```
+In your test file or files, import the playwrightConfig() function, the wrapPlaywright() function, and the PlaywrightController class from @axe-core/watcher:
+
+```
+import {
+  wrapPlaywrightPage,
+  playwrightConfig,
+  PlaywrightController
+} from '@axe-core/watcher';
+```
+In your test setup code (typically in a before or beforeAll block), wrap any existing code for creating a browserContext instance with a call to playwrightConfig() while providing your API key:
+
+```
+import { chromium, BrowserContext } from 'playwright';
+import { playwrightConfig } from '@axe-core/watcher';
+
+const API_KEY = process.env.AXE_DEVELOPER_HUB
+
+const browserContext: BrowserContext = await chromium.launchPersistentContext(
+  /**
+   * We set userDataDir to an empty string which saves
+   * browser data to a temporary directory
+   * @see https://playwright.dev/docs/api/class-browsertype#browser-type-launch-persistent-context
+   */
+  '',
+  playwrightConfig({
+    axe: {
+      apiKey: API_KEY
+    },
+    /**
+     * We support both headless and headed mode with Chrome.
+     * 
+     * For headless mode:
+     * - Use '--headless=chrome' for browsers v94-108.
+     * - Use '--headless=new' for browsers v109+.
+     * 
+     * For headed mode:
+     * - Remove the '--headless' flag.
+     * 
+     * @see https://playwright.dev/docs/chrome-extensions#headless-mode
+     */
+    headless: false,
+    args: ['--headless=new']
+  })
+);
+```
+
+
+Once you have a page instance, create an instance of the PlaywrightController class and wrap your browserContext:
+
+```
+// Create a page instance, using your browser context.
+let page = await browserContext.newPage();
+
+// Initialize the PlaywrightController by passing in the Playwright page.
+const controller = new PlaywrightController(page);
+
+// Use the new wrapped Playwright page instance.
+page = wrapPlaywrightPage(page, controller);
+```
+
+Finally, ensure all test results from axe Watcher are flushed out. To do this, add the following block of code to your test teardown code (typically in an afterEach block):
+
+```
+afterEach(async () => {
+await controller.flush()
+})
+```