fix(files_example): add tableCaption to EuiInMemoryTable for a11y#258289
fix(files_example): add tableCaption to EuiInMemoryTable for a11y#258289
Conversation
…ility Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>
| <EuiPageTemplate.Header pageTitle="Files example" /> | ||
| <EuiPageTemplate.Section> | ||
| <EuiInMemoryTable | ||
| tableCaption="Files example" |
There was a problem hiding this comment.
I see that all translations in that file are not localized. I think that’s okay for examples.
|
@elasticmachine run docs-build |
|
/ci |
💛 Build succeeded, but was flaky
Failed CI Steps
Test Failures
Metrics [docs]
History
cc @alexwizp @Copilot |
|
@elasticmachine run docs-build |
|
/ci |
|
@elasticmachine run docs-build |
|
/ci |
|
Starting backport for target branches: 9.3 |
…astic#258289) The `EuiInMemoryTable` in `examples/files_example` was missing the required `tableCaption` prop, violating the `@elastic/eui/require-table-caption` ESLint rule. ## Changes - **`examples/files_example/public/components/app.tsx`**: Added `tableCaption="Files example"` to the `EuiInMemoryTable` component so screen readers can announce the table's purpose. <!-- START COPILOT ORIGINAL PROMPT --> <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>[`eslint-issue-reporter`] `@elastic_appex-sharedux` — fix `@elastic_eui_require-table-caption` violations</issue_title> > <issue_description> > > [!NOTE] > > Reserved for AI coding agents—please don’t take it manually. > > ## Summary > This issue groups **1** ESLint violation for rule `@elastic/eui/require-table-caption` across **1** file for team **@elastic/appex-sharedux**. Latest monitoring snapshot: index `kibana-eslint-20260318-014121`, versions: 9.4.0 (Mar 18). > > ## Why this issue exists > This is a grouped ESLint backlog item generated from the latest monitoring snapshot. One issue per (team, rule) keeps the backlog stable and actionable. > > ## What to fix > Rule: `@elastic/eui/require-table-caption` > ```text > EuiInMemoryTable must include a `tableCaption` prop for accessibility. > > Example: > <EuiInMemoryTable tableCaption="Descriptive caption for the table" ... /> > ``` > > ## Places to fix > - [ ] `examples/files_example/public/components/app.tsx` — line 140 > > ## Pull request > When you open a PR for this work, apply the label **`a11y:agent-pr`** (required). > > <details> > <summary><strong>Guidelines</strong></summary> > > # Constitution > > ## Accessibility > > - **Prefer visible text** — Use existing labels, headings, or visible copy when they can provide the accessible name; avoid adding hidden text (e.g. `aria-label`) when visible text is sufficient. > - **Do not remove a11y attributes** — Keep existing `title`, `alt`, and similar attributes unless you replace them with a better alternative. > > ## i18n > > - **Import** — Add `i18n` only when you introduce a new `i18n.translate(...)` call; place it at the top with other imports from the same package. > - **IDs** — Reuse existing translation IDs for equivalent messages in the same file. Follow the local naming convention; if none exists, use `<fileOrComponent>.<attributeName>` (e.g. `myTable.tableCaption`, `myButton.ariaLabel`). > - **Messages** — Keep `defaultMessage` short, user-facing, and consistent with the UI. Do not create duplicate IDs with different `defaultMessage` values in the same file. > > ## Restrictions > > - Do not change unrelated components, logic, behavior, or layout. > - Do not add comments to updated lines; do not delete existing comments. > - Do not remove or modify license headers. > - Do not include explanations in the output. > > </details> > > <details> > <summary><strong>Skill</strong></summary> > > # Skill fix-no-table-captions > > ## Description > > This skill fixes violations of the `@elastic/eui/require-table-caption` rule. > Ensure `EuiInMemoryTable` and `EuiBasicTable` components have a meaningful `tableCaption` property for accessibility. > > ## Task > Refactor the provided React TypeScript file so `EuiInMemoryTable` and `EuiBasicTable` use an accessible `tableCaption`. > > ## Scope > Only modify: > - `EuiInMemoryTable` > - `EuiBasicTable` > > ## Decision Rules > 1. Ensure each target component has exactly one `tableCaption` prop. > 2. Keep existing meaningful captions unchanged. > 3. Replace captions that are missing, empty, or not meaningful. > 4. Prefer nearby visible text first (heading, section title, label). > 5. If no suitable text exists, use `i18n.translate`. > > ## Example > ```tsx > <EuiBasicTable > tableCaption={i18n.translate('usersList.tableCaption', { > defaultMessage: 'User accounts list', > })} > items={items} > columns={columns} > /> > ``` > > </details> > > <!-- > { > "schemaVersion": 1, > "team": "@elastic/appex-sharedux", > "teams": [ > "@elastic/appex-sharedux" > ], > "ruleId": "@elastic/eui/require-table-caption", > "index": "kibana-eslint-20260318-014121", > "versions": [ > "9.4.0 (Mar 18)" > ], > "violationCount": 1, > "fileCount": 1, > "generatedAt": "2026-03-18T09:00:32.072Z", > "exampleFiles": [ > "examples/files_example/public/components/app.tsx" > ] > } > --></issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> <!-- START COPILOT CODING AGENT SUFFIX --> - Fixes elastic#258288 <!-- START COPILOT CODING AGENT TIPS --> --- 💬 Send tasks to Copilot coding agent from [Slack](https://gh.io/cca-slack-docs) and [Teams](https://gh.io/cca-teams-docs) to turn conversations into code. Copilot posts an update in your thread when it's finished. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com> (cherry picked from commit da00f82)
💚 All backports created successfully
Note: Successful backport PRs will be merged automatically after passing CI. Questions ?Please refer to the Backport tool documentation |
…ra/kibana into dashboard_align_attachment_to_api * 'dashboard_align_attachment_to_api' of github.com:mbondyra/kibana: (45 commits) [OTel Tracing] HTTP instrumentation (elastic#258663) Replace deprecated EUI icons in files owned by @elastic/ml-ui (elastic#255624) [Codeowners] add missing codeowners for security_solution_api_integration tests (elastic#259223) [CI] fix bad imports that came from a merge-race (elastic#259383) Add `.claude/worktrees/` to `.gitignore` (elastic#259192) Improve unknown-key validation error message in @kbn/config-schema (elastic#258633) [ML] Update Security ML jobs to use entity analytics fields for host and user fields (elastic#255339) [Table sweep] Update table columns responsiveness in Index Management and Dashboards (elastic#259340) skip failing test suite (elastic#258790) skip failing test suite (elastic#259261) chore: util to clean cached images (elastic#259335) [Entity Store] Use last_seen for automated resolution watermark (elastic#258574) [One Workflow] Fix flaky alert trigger Scout test by removing order-dependent assertions (elastic#259299) Skip serverless Discover request counts tests for MKI (elastic#259333) [Security Solution] render header title in new document flyout in Security Solution and Discover (elastic#258166) [Agent Builder] register inference endpoint feature (elastic#259259) [Agent Builder] Skills Command Menu - Add descriptions and scope options to agent (elastic#258964) [Streams][Streamlang][API] Fully use meta({id}) to reuse schema partials in OAS output (elastic#259275) fix(files_example): add tableCaption to EuiInMemoryTable for a11y (elastic#258289) [Entity Store] Adding list endpoint with query filter (elastic#258320) ...
…astic#258289) The `EuiInMemoryTable` in `examples/files_example` was missing the required `tableCaption` prop, violating the `@elastic/eui/require-table-caption` ESLint rule. ## Changes - **`examples/files_example/public/components/app.tsx`**: Added `tableCaption="Files example"` to the `EuiInMemoryTable` component so screen readers can announce the table's purpose. <!-- START COPILOT ORIGINAL PROMPT --> <details> <summary>Original prompt</summary> > > ---- > > *This section details on the original issue you should resolve* > > <issue_title>[`eslint-issue-reporter`] `@elastic_appex-sharedux` — fix `@elastic_eui_require-table-caption` violations</issue_title> > <issue_description> > > [!NOTE] > > Reserved for AI coding agents—please don’t take it manually. > > ## Summary > This issue groups **1** ESLint violation for rule `@elastic/eui/require-table-caption` across **1** file for team **@elastic/appex-sharedux**. Latest monitoring snapshot: index `kibana-eslint-20260318-014121`, versions: 9.4.0 (Mar 18). > > ## Why this issue exists > This is a grouped ESLint backlog item generated from the latest monitoring snapshot. One issue per (team, rule) keeps the backlog stable and actionable. > > ## What to fix > Rule: `@elastic/eui/require-table-caption` > ```text > EuiInMemoryTable must include a `tableCaption` prop for accessibility. > > Example: > <EuiInMemoryTable tableCaption="Descriptive caption for the table" ... /> > ``` > > ## Places to fix > - [ ] `examples/files_example/public/components/app.tsx` — line 140 > > ## Pull request > When you open a PR for this work, apply the label **`a11y:agent-pr`** (required). > > <details> > <summary><strong>Guidelines</strong></summary> > > # Constitution > > ## Accessibility > > - **Prefer visible text** — Use existing labels, headings, or visible copy when they can provide the accessible name; avoid adding hidden text (e.g. `aria-label`) when visible text is sufficient. > - **Do not remove a11y attributes** — Keep existing `title`, `alt`, and similar attributes unless you replace them with a better alternative. > > ## i18n > > - **Import** — Add `i18n` only when you introduce a new `i18n.translate(...)` call; place it at the top with other imports from the same package. > - **IDs** — Reuse existing translation IDs for equivalent messages in the same file. Follow the local naming convention; if none exists, use `<fileOrComponent>.<attributeName>` (e.g. `myTable.tableCaption`, `myButton.ariaLabel`). > - **Messages** — Keep `defaultMessage` short, user-facing, and consistent with the UI. Do not create duplicate IDs with different `defaultMessage` values in the same file. > > ## Restrictions > > - Do not change unrelated components, logic, behavior, or layout. > - Do not add comments to updated lines; do not delete existing comments. > - Do not remove or modify license headers. > - Do not include explanations in the output. > > </details> > > <details> > <summary><strong>Skill</strong></summary> > > # Skill fix-no-table-captions > > ## Description > > This skill fixes violations of the `@elastic/eui/require-table-caption` rule. > Ensure `EuiInMemoryTable` and `EuiBasicTable` components have a meaningful `tableCaption` property for accessibility. > > ## Task > Refactor the provided React TypeScript file so `EuiInMemoryTable` and `EuiBasicTable` use an accessible `tableCaption`. > > ## Scope > Only modify: > - `EuiInMemoryTable` > - `EuiBasicTable` > > ## Decision Rules > 1. Ensure each target component has exactly one `tableCaption` prop. > 2. Keep existing meaningful captions unchanged. > 3. Replace captions that are missing, empty, or not meaningful. > 4. Prefer nearby visible text first (heading, section title, label). > 5. If no suitable text exists, use `i18n.translate`. > > ## Example > ```tsx > <EuiBasicTable > tableCaption={i18n.translate('usersList.tableCaption', { > defaultMessage: 'User accounts list', > })} > items={items} > columns={columns} > /> > ``` > > </details> > > <!-- > { > "schemaVersion": 1, > "team": "@elastic/appex-sharedux", > "teams": [ > "@elastic/appex-sharedux" > ], > "ruleId": "@elastic/eui/require-table-caption", > "index": "kibana-eslint-20260318-014121", > "versions": [ > "9.4.0 (Mar 18)" > ], > "violationCount": 1, > "fileCount": 1, > "generatedAt": "2026-03-18T09:00:32.072Z", > "exampleFiles": [ > "examples/files_example/public/components/app.tsx" > ] > } > --></issue_description> > > ## Comments on the Issue (you are @copilot in this section) > > <comments> > </comments> > </details> <!-- START COPILOT CODING AGENT SUFFIX --> - Fixes elastic#258288 <!-- START COPILOT CODING AGENT TIPS --> --- 💬 Send tasks to Copilot coding agent from [Slack](https://gh.io/cca-slack-docs) and [Teams](https://gh.io/cca-teams-docs) to turn conversations into code. Copilot posts an update in your thread when it's finished. --------- Co-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com> Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
2 similar comments
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
|
Looks like this PR has a backport PR but it still hasn't been merged. Please merge it ASAP to keep the branches relatively in sync. |
…1y (#258289) (#259363) # Backport This will backport the following commits from `main` to `9.3`: - [fix(files_example): add tableCaption to EuiInMemoryTable for a11y (#258289)](#258289) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Copilot","email":"198982749+Copilot@users.noreply.github.com"},"sourceCommit":{"committedDate":"2026-03-24T13:55:14Z","message":"fix(files_example): add tableCaption to EuiInMemoryTable for a11y (#258289)\n\nThe `EuiInMemoryTable` in `examples/files_example` was missing the\nrequired `tableCaption` prop, violating the\n`@elastic/eui/require-table-caption` ESLint rule.\n\n## Changes\n\n- **`examples/files_example/public/components/app.tsx`**: Added\n`tableCaption=\"Files example\"` to the `EuiInMemoryTable` component so\nscreen readers can announce the table's purpose.\n\n\n\n\n\n<details>\n\n<summary>Original prompt</summary>\n\n> \n> ----\n> \n> *This section details on the original issue you should resolve*\n> \n> <issue_title>[`eslint-issue-reporter`] `@elastic_appex-sharedux` — fix\n`@elastic_eui_require-table-caption` violations</issue_title>\n> <issue_description>\n> > [!NOTE]\n> > Reserved for AI coding agents—please don’t take it manually.\n> \n> ## Summary\n> This issue groups **1** ESLint violation for rule\n`@elastic/eui/require-table-caption` across **1** file for team\n**@elastic/appex-sharedux**. Latest monitoring snapshot: index\n`kibana-eslint-20260318-014121`, versions: 9.4.0 (Mar 18).\n> \n> ## Why this issue exists\n> This is a grouped ESLint backlog item generated from the latest\nmonitoring snapshot. One issue per (team, rule) keeps the backlog stable\nand actionable.\n> \n> ## What to fix\n> Rule: `@elastic/eui/require-table-caption`\n> ```text \n> EuiInMemoryTable must include a `tableCaption` prop for accessibility.\n> \n> Example:\n> <EuiInMemoryTable tableCaption=\"Descriptive caption for the table\" ...\n/>\n> ```\n> \n> ## Places to fix\n> - [ ] `examples/files_example/public/components/app.tsx` — line 140\n> \n> ## Pull request\n> When you open a PR for this work, apply the label **`a11y:agent-pr`**\n(required).\n> \n> <details>\n> <summary><strong>Guidelines</strong></summary>\n> \n> # Constitution\n> \n> ## Accessibility\n> \n> - **Prefer visible text** — Use existing labels, headings, or visible\ncopy when they can provide the accessible name; avoid adding hidden text\n(e.g. `aria-label`) when visible text is sufficient.\n> - **Do not remove a11y attributes** — Keep existing `title`, `alt`,\nand similar attributes unless you replace them with a better\nalternative.\n> \n> ## i18n\n> \n> - **Import** — Add `i18n` only when you introduce a new\n`i18n.translate(...)` call; place it at the top with other imports from\nthe same package.\n> - **IDs** — Reuse existing translation IDs for equivalent messages in\nthe same file. Follow the local naming convention; if none exists, use\n`<fileOrComponent>.<attributeName>` (e.g. `myTable.tableCaption`,\n`myButton.ariaLabel`).\n> - **Messages** — Keep `defaultMessage` short, user-facing, and\nconsistent with the UI. Do not create duplicate IDs with different\n`defaultMessage` values in the same file.\n> \n> ## Restrictions\n> \n> - Do not change unrelated components, logic, behavior, or layout.\n> - Do not add comments to updated lines; do not delete existing\ncomments.\n> - Do not remove or modify license headers.\n> - Do not include explanations in the output.\n> \n> </details>\n> \n> <details>\n> <summary><strong>Skill</strong></summary>\n> \n> # Skill fix-no-table-captions\n> \n> ## Description \n> \n> This skill fixes violations of the\n`@elastic/eui/require-table-caption` rule.\n> Ensure `EuiInMemoryTable` and `EuiBasicTable` components have a\nmeaningful `tableCaption` property for accessibility.\n> \n> ## Task\n> Refactor the provided React TypeScript file so `EuiInMemoryTable` and\n`EuiBasicTable` use an accessible `tableCaption`.\n> \n> ## Scope\n> Only modify:\n> - `EuiInMemoryTable`\n> - `EuiBasicTable`\n> \n> ## Decision Rules\n> 1. Ensure each target component has exactly one `tableCaption` prop.\n> 2. Keep existing meaningful captions unchanged.\n> 3. Replace captions that are missing, empty, or not meaningful.\n> 4. Prefer nearby visible text first (heading, section title, label).\n> 5. If no suitable text exists, use `i18n.translate`.\n> \n> ## Example\n> ```tsx\n> <EuiBasicTable\n> tableCaption={i18n.translate('usersList.tableCaption', {\n> defaultMessage: 'User accounts list',\n> })}\n> items={items}\n> columns={columns}\n> />\n> ```\n> \n> </details>\n> \n> </issue_description>\n> \n> ## Comments on the Issue (you are @copilot in this section)\n> \n> <comments>\n> </comments>\n> \n\n\n</details>\n\n\n\n\n\n- Fixes #258288\n\n\n---\n\n💬 Send tasks to Copilot coding agent from\n[Slack](https://gh.io/cca-slack-docs) and\n[Teams](https://gh.io/cca-teams-docs) to turn conversations into code.\nCopilot posts an update in your thread when it's finished.\n\n---------\n\nCo-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>\nCo-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>","sha":"da00f82c1244b9c63e22e33ba3b560a0db9114db","branchLabelMapping":{"^v9.4.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","💝community","backport:version","v9.4.0","v9.3.3","a11y:agent-pr"],"title":"fix(files_example): add tableCaption to EuiInMemoryTable for a11y","number":258289,"url":"https://github.com/elastic/kibana/pull/258289","mergeCommit":{"message":"fix(files_example): add tableCaption to EuiInMemoryTable for a11y (#258289)\n\nThe `EuiInMemoryTable` in `examples/files_example` was missing the\nrequired `tableCaption` prop, violating the\n`@elastic/eui/require-table-caption` ESLint rule.\n\n## Changes\n\n- **`examples/files_example/public/components/app.tsx`**: Added\n`tableCaption=\"Files example\"` to the `EuiInMemoryTable` component so\nscreen readers can announce the table's purpose.\n\n\n\n\n\n<details>\n\n<summary>Original prompt</summary>\n\n> \n> ----\n> \n> *This section details on the original issue you should resolve*\n> \n> <issue_title>[`eslint-issue-reporter`] `@elastic_appex-sharedux` — fix\n`@elastic_eui_require-table-caption` violations</issue_title>\n> <issue_description>\n> > [!NOTE]\n> > Reserved for AI coding agents—please don’t take it manually.\n> \n> ## Summary\n> This issue groups **1** ESLint violation for rule\n`@elastic/eui/require-table-caption` across **1** file for team\n**@elastic/appex-sharedux**. Latest monitoring snapshot: index\n`kibana-eslint-20260318-014121`, versions: 9.4.0 (Mar 18).\n> \n> ## Why this issue exists\n> This is a grouped ESLint backlog item generated from the latest\nmonitoring snapshot. One issue per (team, rule) keeps the backlog stable\nand actionable.\n> \n> ## What to fix\n> Rule: `@elastic/eui/require-table-caption`\n> ```text \n> EuiInMemoryTable must include a `tableCaption` prop for accessibility.\n> \n> Example:\n> <EuiInMemoryTable tableCaption=\"Descriptive caption for the table\" ...\n/>\n> ```\n> \n> ## Places to fix\n> - [ ] `examples/files_example/public/components/app.tsx` — line 140\n> \n> ## Pull request\n> When you open a PR for this work, apply the label **`a11y:agent-pr`**\n(required).\n> \n> <details>\n> <summary><strong>Guidelines</strong></summary>\n> \n> # Constitution\n> \n> ## Accessibility\n> \n> - **Prefer visible text** — Use existing labels, headings, or visible\ncopy when they can provide the accessible name; avoid adding hidden text\n(e.g. `aria-label`) when visible text is sufficient.\n> - **Do not remove a11y attributes** — Keep existing `title`, `alt`,\nand similar attributes unless you replace them with a better\nalternative.\n> \n> ## i18n\n> \n> - **Import** — Add `i18n` only when you introduce a new\n`i18n.translate(...)` call; place it at the top with other imports from\nthe same package.\n> - **IDs** — Reuse existing translation IDs for equivalent messages in\nthe same file. Follow the local naming convention; if none exists, use\n`<fileOrComponent>.<attributeName>` (e.g. `myTable.tableCaption`,\n`myButton.ariaLabel`).\n> - **Messages** — Keep `defaultMessage` short, user-facing, and\nconsistent with the UI. Do not create duplicate IDs with different\n`defaultMessage` values in the same file.\n> \n> ## Restrictions\n> \n> - Do not change unrelated components, logic, behavior, or layout.\n> - Do not add comments to updated lines; do not delete existing\ncomments.\n> - Do not remove or modify license headers.\n> - Do not include explanations in the output.\n> \n> </details>\n> \n> <details>\n> <summary><strong>Skill</strong></summary>\n> \n> # Skill fix-no-table-captions\n> \n> ## Description \n> \n> This skill fixes violations of the\n`@elastic/eui/require-table-caption` rule.\n> Ensure `EuiInMemoryTable` and `EuiBasicTable` components have a\nmeaningful `tableCaption` property for accessibility.\n> \n> ## Task\n> Refactor the provided React TypeScript file so `EuiInMemoryTable` and\n`EuiBasicTable` use an accessible `tableCaption`.\n> \n> ## Scope\n> Only modify:\n> - `EuiInMemoryTable`\n> - `EuiBasicTable`\n> \n> ## Decision Rules\n> 1. Ensure each target component has exactly one `tableCaption` prop.\n> 2. Keep existing meaningful captions unchanged.\n> 3. Replace captions that are missing, empty, or not meaningful.\n> 4. Prefer nearby visible text first (heading, section title, label).\n> 5. If no suitable text exists, use `i18n.translate`.\n> \n> ## Example\n> ```tsx\n> <EuiBasicTable\n> tableCaption={i18n.translate('usersList.tableCaption', {\n> defaultMessage: 'User accounts list',\n> })}\n> items={items}\n> columns={columns}\n> />\n> ```\n> \n> </details>\n> \n> </issue_description>\n> \n> ## Comments on the Issue (you are @copilot in this section)\n> \n> <comments>\n> </comments>\n> \n\n\n</details>\n\n\n\n\n\n- Fixes #258288\n\n\n---\n\n💬 Send tasks to Copilot coding agent from\n[Slack](https://gh.io/cca-slack-docs) and\n[Teams](https://gh.io/cca-teams-docs) to turn conversations into code.\nCopilot posts an update in your thread when it's finished.\n\n---------\n\nCo-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>\nCo-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>","sha":"da00f82c1244b9c63e22e33ba3b560a0db9114db"}},"sourceBranch":"main","suggestedTargetBranches":["9.3"],"targetPullRequestStates":[{"branch":"main","label":"v9.4.0","branchLabelMappingKey":"^v9.4.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/258289","number":258289,"mergeCommit":{"message":"fix(files_example): add tableCaption to EuiInMemoryTable for a11y (#258289)\n\nThe `EuiInMemoryTable` in `examples/files_example` was missing the\nrequired `tableCaption` prop, violating the\n`@elastic/eui/require-table-caption` ESLint rule.\n\n## Changes\n\n- **`examples/files_example/public/components/app.tsx`**: Added\n`tableCaption=\"Files example\"` to the `EuiInMemoryTable` component so\nscreen readers can announce the table's purpose.\n\n\n\n\n\n<details>\n\n<summary>Original prompt</summary>\n\n> \n> ----\n> \n> *This section details on the original issue you should resolve*\n> \n> <issue_title>[`eslint-issue-reporter`] `@elastic_appex-sharedux` — fix\n`@elastic_eui_require-table-caption` violations</issue_title>\n> <issue_description>\n> > [!NOTE]\n> > Reserved for AI coding agents—please don’t take it manually.\n> \n> ## Summary\n> This issue groups **1** ESLint violation for rule\n`@elastic/eui/require-table-caption` across **1** file for team\n**@elastic/appex-sharedux**. Latest monitoring snapshot: index\n`kibana-eslint-20260318-014121`, versions: 9.4.0 (Mar 18).\n> \n> ## Why this issue exists\n> This is a grouped ESLint backlog item generated from the latest\nmonitoring snapshot. One issue per (team, rule) keeps the backlog stable\nand actionable.\n> \n> ## What to fix\n> Rule: `@elastic/eui/require-table-caption`\n> ```text \n> EuiInMemoryTable must include a `tableCaption` prop for accessibility.\n> \n> Example:\n> <EuiInMemoryTable tableCaption=\"Descriptive caption for the table\" ...\n/>\n> ```\n> \n> ## Places to fix\n> - [ ] `examples/files_example/public/components/app.tsx` — line 140\n> \n> ## Pull request\n> When you open a PR for this work, apply the label **`a11y:agent-pr`**\n(required).\n> \n> <details>\n> <summary><strong>Guidelines</strong></summary>\n> \n> # Constitution\n> \n> ## Accessibility\n> \n> - **Prefer visible text** — Use existing labels, headings, or visible\ncopy when they can provide the accessible name; avoid adding hidden text\n(e.g. `aria-label`) when visible text is sufficient.\n> - **Do not remove a11y attributes** — Keep existing `title`, `alt`,\nand similar attributes unless you replace them with a better\nalternative.\n> \n> ## i18n\n> \n> - **Import** — Add `i18n` only when you introduce a new\n`i18n.translate(...)` call; place it at the top with other imports from\nthe same package.\n> - **IDs** — Reuse existing translation IDs for equivalent messages in\nthe same file. Follow the local naming convention; if none exists, use\n`<fileOrComponent>.<attributeName>` (e.g. `myTable.tableCaption`,\n`myButton.ariaLabel`).\n> - **Messages** — Keep `defaultMessage` short, user-facing, and\nconsistent with the UI. Do not create duplicate IDs with different\n`defaultMessage` values in the same file.\n> \n> ## Restrictions\n> \n> - Do not change unrelated components, logic, behavior, or layout.\n> - Do not add comments to updated lines; do not delete existing\ncomments.\n> - Do not remove or modify license headers.\n> - Do not include explanations in the output.\n> \n> </details>\n> \n> <details>\n> <summary><strong>Skill</strong></summary>\n> \n> # Skill fix-no-table-captions\n> \n> ## Description \n> \n> This skill fixes violations of the\n`@elastic/eui/require-table-caption` rule.\n> Ensure `EuiInMemoryTable` and `EuiBasicTable` components have a\nmeaningful `tableCaption` property for accessibility.\n> \n> ## Task\n> Refactor the provided React TypeScript file so `EuiInMemoryTable` and\n`EuiBasicTable` use an accessible `tableCaption`.\n> \n> ## Scope\n> Only modify:\n> - `EuiInMemoryTable`\n> - `EuiBasicTable`\n> \n> ## Decision Rules\n> 1. Ensure each target component has exactly one `tableCaption` prop.\n> 2. Keep existing meaningful captions unchanged.\n> 3. Replace captions that are missing, empty, or not meaningful.\n> 4. Prefer nearby visible text first (heading, section title, label).\n> 5. If no suitable text exists, use `i18n.translate`.\n> \n> ## Example\n> ```tsx\n> <EuiBasicTable\n> tableCaption={i18n.translate('usersList.tableCaption', {\n> defaultMessage: 'User accounts list',\n> })}\n> items={items}\n> columns={columns}\n> />\n> ```\n> \n> </details>\n> \n> </issue_description>\n> \n> ## Comments on the Issue (you are @copilot in this section)\n> \n> <comments>\n> </comments>\n> \n\n\n</details>\n\n\n\n\n\n- Fixes #258288\n\n\n---\n\n💬 Send tasks to Copilot coding agent from\n[Slack](https://gh.io/cca-slack-docs) and\n[Teams](https://gh.io/cca-teams-docs) to turn conversations into code.\nCopilot posts an update in your thread when it's finished.\n\n---------\n\nCo-authored-by: copilot-swe-agent[bot] <198982749+Copilot@users.noreply.github.com>\nCo-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>","sha":"da00f82c1244b9c63e22e33ba3b560a0db9114db"}},{"branch":"9.3","label":"v9.3.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}] BACKPORT--> Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com> Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com> Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
The
EuiInMemoryTableinexamples/files_examplewas missing the requiredtableCaptionprop, violating the@elastic/eui/require-table-captionESLint rule.Changes
examples/files_example/public/components/app.tsx: AddedtableCaption="Files example"to theEuiInMemoryTablecomponent so screen readers can announce the table's purpose.Original prompt
eslint-issue-reporter] Fix@elastic/eui/require-table-captionlint violations across@elastic/appex-shareduxfiles #258288💬 Send tasks to Copilot coding agent from Slack and Teams to turn conversations into code. Copilot posts an update in your thread when it's finished.