Skip to content

fix(files_example): add tableCaption to EuiInMemoryTable for a11y#258289

Merged
alexwizp merged 3 commits intomainfrom
copilot/fix-eslint-require-table-caption
Mar 24, 2026
Merged

fix(files_example): add tableCaption to EuiInMemoryTable for a11y#258289
alexwizp merged 3 commits intomainfrom
copilot/fix-eslint-require-table-caption

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented Mar 18, 2026

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.
Original prompt

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

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

Guidelines

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

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

<EuiBasicTable
  tableCaption={i18n.translate('usersList.tableCaption', {
    defaultMessage: 'User accounts list',
  })}
  items={items}
  columns={columns}
/>

Comments on the Issue (you are @copilot in this section)


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

…ility

Co-authored-by: alexwizp <20072247+alexwizp@users.noreply.github.com>
Copilot AI changed the title [WIP] [eslint-issue-reporter] Fix @elastic/eui/require-table-caption violations fix(files_example): add tableCaption to EuiInMemoryTable for a11y Mar 18, 2026
Copilot AI requested a review from alexwizp March 18, 2026 09:51
@alexwizp alexwizp added the a11y:agent-pr PR has been created by the agent label Mar 18, 2026
@alexwizp alexwizp marked this pull request as ready for review March 18, 2026 10:02
@alexwizp alexwizp requested a review from a team as a code owner March 18, 2026 10:02
<EuiPageTemplate.Header pageTitle="Files example" />
<EuiPageTemplate.Section>
<EuiInMemoryTable
tableCaption="Files example"
Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I see that all translations in that file are not localized. I think that’s okay for examples.

@alexwizp alexwizp added backport:version Backport to applied version labels v9.4.0 v9.3.3 release_note:skip Skip the PR/issue when compiling release notes labels Mar 18, 2026
@alexwizp alexwizp enabled auto-merge (squash) March 18, 2026 12:16
@alexwizp
Copy link
Copy Markdown
Contributor

@elasticmachine run docs-build

@alexwizp
Copy link
Copy Markdown
Contributor

/ci

@elasticmachine
Copy link
Copy Markdown
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #163 / dashboard app - group 6 dashboard add ES|QL chart "after all" hook for "should not remove the first panel of two when editing and cancelling"
  • [job] [logs] FTR Configs #163 / dashboard app - group 6 dashboard add ES|QL chart should be able to edit the query and render another chart
  • [job] [logs] Scout: [ platform / dashboard-serverless-security_complete ] plugin / local-serverless-security_complete - Sync colors - should be possible to disable color sync
  • [job] [logs] Scout: [ platform / workflows_management ] plugin / local-serverless-security_complete - Workflow execution concurrency control - drop strategy drops new executions until there is an already running execution

Metrics [docs]

✅ unchanged

History

cc @alexwizp @Copilot

@alexwizp
Copy link
Copy Markdown
Contributor

@elasticmachine run docs-build

@alexwizp
Copy link
Copy Markdown
Contributor

/ci

@alexwizp
Copy link
Copy Markdown
Contributor

@elasticmachine run docs-build

@alexwizp
Copy link
Copy Markdown
Contributor

/ci

@alexwizp alexwizp merged commit da00f82 into main Mar 24, 2026
17 checks passed
@alexwizp alexwizp deleted the copilot/fix-eslint-require-table-caption branch March 24, 2026 13:55
@kibanamachine
Copy link
Copy Markdown
Contributor

Starting backport for target branches: 9.3

https://github.com/elastic/kibana/actions/runs/23493172768

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 24, 2026
…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)
@kibanamachine
Copy link
Copy Markdown
Contributor

💚 All backports created successfully

Status Branch Result
9.3

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

mbondyra added a commit to mbondyra/kibana that referenced this pull request Mar 24, 2026
…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)
  ...
jeramysoucy pushed a commit to jeramysoucy/kibana that referenced this pull request Mar 26, 2026
…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>
@kibanamachine kibanamachine added the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 26, 2026
@kibanamachine
Copy link
Copy Markdown
Contributor

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
@kibanamachine
Copy link
Copy Markdown
Contributor

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.

@kibanamachine
Copy link
Copy Markdown
Contributor

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.

kibanamachine added a commit that referenced this pull request Mar 30, 2026
…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>
@kibanamachine kibanamachine removed the backport missing Added to PRs automatically when the are determined to be missing a backport. label Mar 30, 2026
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

a11y:agent-pr PR has been created by the agent backport:version Backport to applied version labels 💝community release_note:skip Skip the PR/issue when compiling release notes v9.3.3 v9.4.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[eslint-issue-reporter] Fix @elastic/eui/require-table-caption lint violations across @elastic/appex-sharedux files

5 participants