[Scout][a11y] adding axe-core validation#243953
Merged
alexwizp merged 28 commits intoelastic:mainfrom Dec 1, 2025
Merged
Conversation
dmlemeshko
reviewed
Nov 24, 2025
alexwizp
changed the title
axe-core validation
…atus --include-path /api/alerting/rule/ --include-path /api/alerting/rules --include-path /api/actions --include-path /api/security/role --include-path /api/spaces --include-path /api/streams --include-path /api/fleet --include-path /api/saved_objects/_import --include-path /api/saved_objects/_export --include-path /api/maintenance_window --include-path /api/agent_builder --update
# Conflicts: # src/platform/packages/shared/kbn-scout/tsconfig.json
dmlemeshko
added
test:scout
release_note:skip
elena-shostak
approved these changes
Dec 1, 2025
Contributor
elena-shostak
left a comment
elena-shostak
left a comment
There was a problem hiding this comment.
@axe-core/playwright dependency ✅
Contributor
💚 Build Succeeded
Metrics [docs]Public APIs missing comments
Public APIs missing exports
History
|
delanni
approved these changes
Dec 1, 2025
alexwizp
added
backport:version
Contributor
|
Starting backport for target branches: 8.19, 9.1, 9.2 https://github.com/elastic/kibana/actions/runs/19828505273 |
Contributor
Author
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
Contributor
💔 All backports failed
Manual backportTo create the backport manually run: Questions ?Please refer to the Backport tool documentation |
alexwizp
added a commit
to alexwizp/kibana
that referenced
this pull request
Dec 1, 2025
**Summary**
- Integrates `axe-core` accessibility checks into our test-suite for
`Scout`.
- Adds a shared helper `checkA11y` that runs axe on a given DOM context.
- Targets automated detection of common accessibility issues (color
contrast, missing ARIA, etc.) so we catch regressions earlier.
Configuration is unified with Cypress and FTR
**Why**
- Improve accessibility coverage by running automated checks in-unit and
in functional tests.
- Provide a simple, reusable helper for tests so authors can validate
accessibility as part of normal test work.
**What changed**
- Adds `axe-core` dependency and wiring to run it in tests.
- Introduces `checkA11y` helper used by existing tests. This method is
accessible through the `Page` object.
**How to use**
> [!NOTE]
>We recommend running `checkA11y` with the `include` parameter set to
the root element you are testing. This makes the tests more isolated and
reduces the time required to analyze the DOM structure.
```
test('an example of using the checkA11y check', async ({ page }) => {
....
const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });
expect(violations).toHaveLength(0);
});
```
## Screens
**Example of report**
<img width="963" height="326" alt="image"
src="https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88"
/>
**ESLint issue*
<img width="963" height="326" alt="Screenshot 2025-11-28 at 15 23 55"
src="https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5"
/>
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
(cherry picked from commit 1caf007)
# Conflicts:
# .buildkite/scripts/steps/security/third_party_packages.txt
# package.json
# src/platform/packages/shared/kbn-scout/moon.yml
# src/platform/packages/shared/kbn-scout/src/playwright/fixtures/scope/test/scout_page/index.ts
# src/platform/packages/shared/kbn-scout/src/playwright/fixtures/scope/test/scout_page/single_thread.ts
# src/platform/packages/shared/kbn-scout/src/playwright/utils/index.ts
Contributor
Author
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
alexwizp
added a commit
to alexwizp/kibana
that referenced
this pull request
Dec 1, 2025
**Summary**
- Integrates `axe-core` accessibility checks into our test-suite for
`Scout`.
- Adds a shared helper `checkA11y` that runs axe on a given DOM context.
- Targets automated detection of common accessibility issues (color
contrast, missing ARIA, etc.) so we catch regressions earlier.
Configuration is unified with Cypress and FTR
**Why**
- Improve accessibility coverage by running automated checks in-unit and
in functional tests.
- Provide a simple, reusable helper for tests so authors can validate
accessibility as part of normal test work.
**What changed**
- Adds `axe-core` dependency and wiring to run it in tests.
- Introduces `checkA11y` helper used by existing tests. This method is
accessible through the `Page` object.
**How to use**
> [!NOTE]
>We recommend running `checkA11y` with the `include` parameter set to
the root element you are testing. This makes the tests more isolated and
reduces the time required to analyze the DOM structure.
```
test('an example of using the checkA11y check', async ({ page }) => {
....
const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });
expect(violations).toHaveLength(0);
});
```
## Screens
**Example of report**
<img width="963" height="326" alt="image"
src="https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88"
/>
**ESLint issue*
<img width="963" height="326" alt="Screenshot 2025-11-28 at 15 23 55"
src="https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5"
/>
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
(cherry picked from commit 1caf007)
# Conflicts:
# .buildkite/scripts/steps/security/third_party_packages.txt
# package.json
# src/platform/packages/shared/kbn-scout/moon.yml
# src/platform/packages/shared/kbn-scout/src/playwright/fixtures/scope/test/scout_page/index.ts
# src/platform/packages/shared/kbn-scout/src/playwright/fixtures/scope/test/scout_page/single_thread.ts
# src/platform/packages/shared/kbn-scout/src/playwright/utils/index.ts
# src/platform/packages/shared/kbn-scout/tsconfig.json
tkajtoch
pushed a commit
to tkajtoch/kibana
that referenced
this pull request
Dec 1, 2025
**Summary**
- Integrates `axe-core` accessibility checks into our test-suite for
`Scout`.
- Adds a shared helper `checkA11y` that runs axe on a given DOM context.
- Targets automated detection of common accessibility issues (color
contrast, missing ARIA, etc.) so we catch regressions earlier.
Configuration is unified with Cypress and FTR
**Why**
- Improve accessibility coverage by running automated checks in-unit and
in functional tests.
- Provide a simple, reusable helper for tests so authors can validate
accessibility as part of normal test work.
**What changed**
- Adds `axe-core` dependency and wiring to run it in tests.
- Introduces `checkA11y` helper used by existing tests. This method is
accessible through the `Page` object.
**How to use**
> [!NOTE]
>We recommend running `checkA11y` with the `include` parameter set to
the root element you are testing. This makes the tests more isolated and
reduces the time required to analyze the DOM structure.
```
test('an example of using the checkA11y check', async ({ page }) => {
....
const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });
expect(violations).toHaveLength(0);
});
```
## Screens
**Example of report**
<img width="963" height="326" alt="image"
src="https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88"
/>
**ESLint issue*
<img width="963" height="326" alt="Screenshot 2025-11-28 at 15 23 55"
src="https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5"
/>
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
alexwizp
added a commit
that referenced
this pull request
Dec 2, 2025
# Backport This will backport the following commits from `main` to `9.1`: - [[Scout][a11y] adding `axe-core` validation (#243953)](#243953) <!--- Backport version: 10.2.0 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2025-12-01T13:38:23Z","message":"[Scout][a11y] adding `axe-core` validation (#243953)\n\n**Summary**\n- Integrates `axe-core` accessibility checks into our test-suite for\n`Scout`.\n- Adds a shared helper `checkA11y` that runs axe on a given DOM context.\n- Targets automated detection of common accessibility issues (color\ncontrast, missing ARIA, etc.) so we catch regressions earlier.\nConfiguration is unified with Cypress and FTR\n\n**Why**\n- Improve accessibility coverage by running automated checks in-unit and\nin functional tests.\n- Provide a simple, reusable helper for tests so authors can validate\naccessibility as part of normal test work.\n\n**What changed**\n- Adds `axe-core` dependency and wiring to run it in tests.\n- Introduces `checkA11y` helper used by existing tests. This method is\naccessible through the `Page` object.\n\n**How to use**\n> [!NOTE]\n>We recommend running `checkA11y` with the `include` parameter set to\nthe root element you are testing. This makes the tests more isolated and\nreduces the time required to analyze the DOM structure.\n\n```\ntest('an example of using the checkA11y check', async ({ page }) => {\n ....\n \n const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });\n expect(violations).toHaveLength(0);\n});\n\n```\n\n\n## Screens\n\n**Example of report**\n\n<img width=\"963\" height=\"326\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88\"\n/>\n\n\n**ESLint issue*\n\n<img width=\"963\" height=\"326\" alt=\"Screenshot 2025-11-28 at 15 23 55\"\nsrc=\"https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>","sha":"1caf007ff13a21654ba74a596bf3614348adc424","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:version","test:scout","v9.3.0"],"title":"[Scout][a11y] adding `axe-core` validation","number":243953,"url":"https://github.com/elastic/kibana/pull/243953","mergeCommit":{"message":"[Scout][a11y] adding `axe-core` validation (#243953)\n\n**Summary**\n- Integrates `axe-core` accessibility checks into our test-suite for\n`Scout`.\n- Adds a shared helper `checkA11y` that runs axe on a given DOM context.\n- Targets automated detection of common accessibility issues (color\ncontrast, missing ARIA, etc.) so we catch regressions earlier.\nConfiguration is unified with Cypress and FTR\n\n**Why**\n- Improve accessibility coverage by running automated checks in-unit and\nin functional tests.\n- Provide a simple, reusable helper for tests so authors can validate\naccessibility as part of normal test work.\n\n**What changed**\n- Adds `axe-core` dependency and wiring to run it in tests.\n- Introduces `checkA11y` helper used by existing tests. This method is\naccessible through the `Page` object.\n\n**How to use**\n> [!NOTE]\n>We recommend running `checkA11y` with the `include` parameter set to\nthe root element you are testing. This makes the tests more isolated and\nreduces the time required to analyze the DOM structure.\n\n```\ntest('an example of using the checkA11y check', async ({ page }) => {\n ....\n \n const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });\n expect(violations).toHaveLength(0);\n});\n\n```\n\n\n## Screens\n\n**Example of report**\n\n<img width=\"963\" height=\"326\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88\"\n/>\n\n\n**ESLint issue*\n\n<img width=\"963\" height=\"326\" alt=\"Screenshot 2025-11-28 at 15 23 55\"\nsrc=\"https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>","sha":"1caf007ff13a21654ba74a596bf3614348adc424"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/243953","number":243953,"mergeCommit":{"message":"[Scout][a11y] adding `axe-core` validation (#243953)\n\n**Summary**\n- Integrates `axe-core` accessibility checks into our test-suite for\n`Scout`.\n- Adds a shared helper `checkA11y` that runs axe on a given DOM context.\n- Targets automated detection of common accessibility issues (color\ncontrast, missing ARIA, etc.) so we catch regressions earlier.\nConfiguration is unified with Cypress and FTR\n\n**Why**\n- Improve accessibility coverage by running automated checks in-unit and\nin functional tests.\n- Provide a simple, reusable helper for tests so authors can validate\naccessibility as part of normal test work.\n\n**What changed**\n- Adds `axe-core` dependency and wiring to run it in tests.\n- Introduces `checkA11y` helper used by existing tests. This method is\naccessible through the `Page` object.\n\n**How to use**\n> [!NOTE]\n>We recommend running `checkA11y` with the `include` parameter set to\nthe root element you are testing. This makes the tests more isolated and\nreduces the time required to analyze the DOM structure.\n\n```\ntest('an example of using the checkA11y check', async ({ page }) => {\n ....\n \n const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });\n expect(violations).toHaveLength(0);\n});\n\n```\n\n\n## Screens\n\n**Example of report**\n\n<img width=\"963\" height=\"326\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88\"\n/>\n\n\n**ESLint issue*\n\n<img width=\"963\" height=\"326\" alt=\"Screenshot 2025-11-28 at 15 23 55\"\nsrc=\"https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>","sha":"1caf007ff13a21654ba74a596bf3614348adc424"}},{"url":"https://github.com/elastic/kibana/pull/244796","number":244796,"branch":"8.19","state":"OPEN"}]}] BACKPORT--> --------- Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
alexwizp
added a commit
that referenced
this pull request
Dec 2, 2025
# Backport This will backport the following commits from `main` to `9.2`: - [[Scout][a11y] adding `axe-core` validation (#243953)](#243953) <!--- Backport version: 10.2.0 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2025-12-01T13:38:23Z","message":"[Scout][a11y] adding `axe-core` validation (#243953)\n\n**Summary**\n- Integrates `axe-core` accessibility checks into our test-suite for\n`Scout`.\n- Adds a shared helper `checkA11y` that runs axe on a given DOM context.\n- Targets automated detection of common accessibility issues (color\ncontrast, missing ARIA, etc.) so we catch regressions earlier.\nConfiguration is unified with Cypress and FTR\n\n**Why**\n- Improve accessibility coverage by running automated checks in-unit and\nin functional tests.\n- Provide a simple, reusable helper for tests so authors can validate\naccessibility as part of normal test work.\n\n**What changed**\n- Adds `axe-core` dependency and wiring to run it in tests.\n- Introduces `checkA11y` helper used by existing tests. This method is\naccessible through the `Page` object.\n\n**How to use**\n> [!NOTE]\n>We recommend running `checkA11y` with the `include` parameter set to\nthe root element you are testing. This makes the tests more isolated and\nreduces the time required to analyze the DOM structure.\n\n```\ntest('an example of using the checkA11y check', async ({ page }) => {\n ....\n \n const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });\n expect(violations).toHaveLength(0);\n});\n\n```\n\n\n## Screens\n\n**Example of report**\n\n<img width=\"963\" height=\"326\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88\"\n/>\n\n\n**ESLint issue*\n\n<img width=\"963\" height=\"326\" alt=\"Screenshot 2025-11-28 at 15 23 55\"\nsrc=\"https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>","sha":"1caf007ff13a21654ba74a596bf3614348adc424","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:version","test:scout","v9.3.0"],"title":"[Scout][a11y] adding `axe-core` validation","number":243953,"url":"https://github.com/elastic/kibana/pull/243953","mergeCommit":{"message":"[Scout][a11y] adding `axe-core` validation (#243953)\n\n**Summary**\n- Integrates `axe-core` accessibility checks into our test-suite for\n`Scout`.\n- Adds a shared helper `checkA11y` that runs axe on a given DOM context.\n- Targets automated detection of common accessibility issues (color\ncontrast, missing ARIA, etc.) so we catch regressions earlier.\nConfiguration is unified with Cypress and FTR\n\n**Why**\n- Improve accessibility coverage by running automated checks in-unit and\nin functional tests.\n- Provide a simple, reusable helper for tests so authors can validate\naccessibility as part of normal test work.\n\n**What changed**\n- Adds `axe-core` dependency and wiring to run it in tests.\n- Introduces `checkA11y` helper used by existing tests. This method is\naccessible through the `Page` object.\n\n**How to use**\n> [!NOTE]\n>We recommend running `checkA11y` with the `include` parameter set to\nthe root element you are testing. This makes the tests more isolated and\nreduces the time required to analyze the DOM structure.\n\n```\ntest('an example of using the checkA11y check', async ({ page }) => {\n ....\n \n const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });\n expect(violations).toHaveLength(0);\n});\n\n```\n\n\n## Screens\n\n**Example of report**\n\n<img width=\"963\" height=\"326\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88\"\n/>\n\n\n**ESLint issue*\n\n<img width=\"963\" height=\"326\" alt=\"Screenshot 2025-11-28 at 15 23 55\"\nsrc=\"https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>","sha":"1caf007ff13a21654ba74a596bf3614348adc424"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/243953","number":243953,"mergeCommit":{"message":"[Scout][a11y] adding `axe-core` validation (#243953)\n\n**Summary**\n- Integrates `axe-core` accessibility checks into our test-suite for\n`Scout`.\n- Adds a shared helper `checkA11y` that runs axe on a given DOM context.\n- Targets automated detection of common accessibility issues (color\ncontrast, missing ARIA, etc.) so we catch regressions earlier.\nConfiguration is unified with Cypress and FTR\n\n**Why**\n- Improve accessibility coverage by running automated checks in-unit and\nin functional tests.\n- Provide a simple, reusable helper for tests so authors can validate\naccessibility as part of normal test work.\n\n**What changed**\n- Adds `axe-core` dependency and wiring to run it in tests.\n- Introduces `checkA11y` helper used by existing tests. This method is\naccessible through the `Page` object.\n\n**How to use**\n> [!NOTE]\n>We recommend running `checkA11y` with the `include` parameter set to\nthe root element you are testing. This makes the tests more isolated and\nreduces the time required to analyze the DOM structure.\n\n```\ntest('an example of using the checkA11y check', async ({ page }) => {\n ....\n \n const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });\n expect(violations).toHaveLength(0);\n});\n\n```\n\n\n## Screens\n\n**Example of report**\n\n<img width=\"963\" height=\"326\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88\"\n/>\n\n\n**ESLint issue*\n\n<img width=\"963\" height=\"326\" alt=\"Screenshot 2025-11-28 at 15 23 55\"\nsrc=\"https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>","sha":"1caf007ff13a21654ba74a596bf3614348adc424"}},{"url":"https://github.com/elastic/kibana/pull/244796","number":244796,"branch":"8.19","state":"OPEN"}]}] BACKPORT-->
NicholasPeretti
pushed a commit
to NicholasPeretti/kibana
that referenced
this pull request
Dec 2, 2025
**Summary**
- Integrates `axe-core` accessibility checks into our test-suite for
`Scout`.
- Adds a shared helper `checkA11y` that runs axe on a given DOM context.
- Targets automated detection of common accessibility issues (color
contrast, missing ARIA, etc.) so we catch regressions earlier.
Configuration is unified with Cypress and FTR
**Why**
- Improve accessibility coverage by running automated checks in-unit and
in functional tests.
- Provide a simple, reusable helper for tests so authors can validate
accessibility as part of normal test work.
**What changed**
- Adds `axe-core` dependency and wiring to run it in tests.
- Introduces `checkA11y` helper used by existing tests. This method is
accessible through the `Page` object.
**How to use**
> [!NOTE]
>We recommend running `checkA11y` with the `include` parameter set to
the root element you are testing. This makes the tests more isolated and
reduces the time required to analyze the DOM structure.
```
test('an example of using the checkA11y check', async ({ page }) => {
....
const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });
expect(violations).toHaveLength(0);
});
```
## Screens
**Example of report**
<img width="963" height="326" alt="image"
src="https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88"
/>
**ESLint issue*
<img width="963" height="326" alt="Screenshot 2025-11-28 at 15 23 55"
src="https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5"
/>
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
alexwizp
added a commit
that referenced
this pull request
Dec 3, 2025
# Backport This will backport the following commits from `main` to `8.19`: - [[Scout][a11y] adding `axe-core` validation (#243953)](#243953) <!--- Backport version: 10.2.0 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Alexey Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2025-12-01T13:38:23Z","message":"[Scout][a11y] adding `axe-core` validation (#243953)\n\n**Summary**\n- Integrates `axe-core` accessibility checks into our test-suite for\n`Scout`.\n- Adds a shared helper `checkA11y` that runs axe on a given DOM context.\n- Targets automated detection of common accessibility issues (color\ncontrast, missing ARIA, etc.) so we catch regressions earlier.\nConfiguration is unified with Cypress and FTR\n\n**Why**\n- Improve accessibility coverage by running automated checks in-unit and\nin functional tests.\n- Provide a simple, reusable helper for tests so authors can validate\naccessibility as part of normal test work.\n\n**What changed**\n- Adds `axe-core` dependency and wiring to run it in tests.\n- Introduces `checkA11y` helper used by existing tests. This method is\naccessible through the `Page` object.\n\n**How to use**\n> [!NOTE]\n>We recommend running `checkA11y` with the `include` parameter set to\nthe root element you are testing. This makes the tests more isolated and\nreduces the time required to analyze the DOM structure.\n\n```\ntest('an example of using the checkA11y check', async ({ page }) => {\n ....\n \n const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });\n expect(violations).toHaveLength(0);\n});\n\n```\n\n\n## Screens\n\n**Example of report**\n\n<img width=\"963\" height=\"326\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88\"\n/>\n\n\n**ESLint issue*\n\n<img width=\"963\" height=\"326\" alt=\"Screenshot 2025-11-28 at 15 23 55\"\nsrc=\"https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>","sha":"1caf007ff13a21654ba74a596bf3614348adc424","branchLabelMapping":{"^v9.3.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","backport:version","test:scout","v9.3.0"],"title":"[Scout][a11y] adding `axe-core` validation","number":243953,"url":"https://github.com/elastic/kibana/pull/243953","mergeCommit":{"message":"[Scout][a11y] adding `axe-core` validation (#243953)\n\n**Summary**\n- Integrates `axe-core` accessibility checks into our test-suite for\n`Scout`.\n- Adds a shared helper `checkA11y` that runs axe on a given DOM context.\n- Targets automated detection of common accessibility issues (color\ncontrast, missing ARIA, etc.) so we catch regressions earlier.\nConfiguration is unified with Cypress and FTR\n\n**Why**\n- Improve accessibility coverage by running automated checks in-unit and\nin functional tests.\n- Provide a simple, reusable helper for tests so authors can validate\naccessibility as part of normal test work.\n\n**What changed**\n- Adds `axe-core` dependency and wiring to run it in tests.\n- Introduces `checkA11y` helper used by existing tests. This method is\naccessible through the `Page` object.\n\n**How to use**\n> [!NOTE]\n>We recommend running `checkA11y` with the `include` parameter set to\nthe root element you are testing. This makes the tests more isolated and\nreduces the time required to analyze the DOM structure.\n\n```\ntest('an example of using the checkA11y check', async ({ page }) => {\n ....\n \n const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });\n expect(violations).toHaveLength(0);\n});\n\n```\n\n\n## Screens\n\n**Example of report**\n\n<img width=\"963\" height=\"326\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88\"\n/>\n\n\n**ESLint issue*\n\n<img width=\"963\" height=\"326\" alt=\"Screenshot 2025-11-28 at 15 23 55\"\nsrc=\"https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>","sha":"1caf007ff13a21654ba74a596bf3614348adc424"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.3.0","branchLabelMappingKey":"^v9.3.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/243953","number":243953,"mergeCommit":{"message":"[Scout][a11y] adding `axe-core` validation (#243953)\n\n**Summary**\n- Integrates `axe-core` accessibility checks into our test-suite for\n`Scout`.\n- Adds a shared helper `checkA11y` that runs axe on a given DOM context.\n- Targets automated detection of common accessibility issues (color\ncontrast, missing ARIA, etc.) so we catch regressions earlier.\nConfiguration is unified with Cypress and FTR\n\n**Why**\n- Improve accessibility coverage by running automated checks in-unit and\nin functional tests.\n- Provide a simple, reusable helper for tests so authors can validate\naccessibility as part of normal test work.\n\n**What changed**\n- Adds `axe-core` dependency and wiring to run it in tests.\n- Introduces `checkA11y` helper used by existing tests. This method is\naccessible through the `Page` object.\n\n**How to use**\n> [!NOTE]\n>We recommend running `checkA11y` with the `include` parameter set to\nthe root element you are testing. This makes the tests more isolated and\nreduces the time required to analyze the DOM structure.\n\n```\ntest('an example of using the checkA11y check', async ({ page }) => {\n ....\n \n const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });\n expect(violations).toHaveLength(0);\n});\n\n```\n\n\n## Screens\n\n**Example of report**\n\n<img width=\"963\" height=\"326\" alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88\"\n/>\n\n\n**ESLint issue*\n\n<img width=\"963\" height=\"326\" alt=\"Screenshot 2025-11-28 at 15 23 55\"\nsrc=\"https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5\"\n/>\n\n---------\n\nCo-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>\nCo-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>","sha":"1caf007ff13a21654ba74a596bf3614348adc424"}}]}] BACKPORT-->
JordanSh
pushed a commit
to JordanSh/kibana
that referenced
this pull request
Dec 9, 2025
**Summary**
- Integrates `axe-core` accessibility checks into our test-suite for
`Scout`.
- Adds a shared helper `checkA11y` that runs axe on a given DOM context.
- Targets automated detection of common accessibility issues (color
contrast, missing ARIA, etc.) so we catch regressions earlier.
Configuration is unified with Cypress and FTR
**Why**
- Improve accessibility coverage by running automated checks in-unit and
in functional tests.
- Provide a simple, reusable helper for tests so authors can validate
accessibility as part of normal test work.
**What changed**
- Adds `axe-core` dependency and wiring to run it in tests.
- Introduces `checkA11y` helper used by existing tests. This method is
accessible through the `Page` object.
**How to use**
> [!NOTE]
>We recommend running `checkA11y` with the `include` parameter set to
the root element you are testing. This makes the tests more isolated and
reduces the time required to analyze the DOM structure.
```
test('an example of using the checkA11y check', async ({ page }) => {
....
const { violations } = await page.checkA11y({ include: ['{CSS selector of root element you are testing}'] });
expect(violations).toHaveLength(0);
});
```
## Screens
**Example of report**
<img width="963" height="326" alt="image"
src="https://github.com/user-attachments/assets/c8450ad8-deea-47c3-a4d7-e7e2e0a73d88"
/>
**ESLint issue*
<img width="963" height="326" alt="Screenshot 2025-11-28 at 15 23 55"
src="https://github.com/user-attachments/assets/387400ac-4fb8-45d6-9649-09f7ee3fb8f5"
/>
---------
Co-authored-by: kibanamachine <42973632+kibanamachine@users.noreply.github.com>
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
This file contains hidden or 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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
axe-coreaccessibility checks into our test-suite forScout.checkA11ythat runs axe on a given DOM context.Why
What changed
axe-coredependency and wiring to run it in tests.checkA11yhelper used by existing tests. This method is accessible through thePageobject.How to use
Note
We recommend running
checkA11ywith theincludeparameter set to the root element you are testing. This makes the tests more isolated and reduces the time required to analyze the DOM structure.Screens
Example of report
*ESLint issue