Skip to content

[9.3] fix(files_example): add tableCaption to EuiInMemoryTable for a11y (#258289)#259363

Merged
kibanamachine merged 2 commits intoelastic:9.3from
kibanamachine:backport/9.3/pr-258289
Mar 30, 2026
Merged

[9.3] fix(files_example): add tableCaption to EuiInMemoryTable for a11y (#258289)#259363
kibanamachine merged 2 commits intoelastic:9.3from
kibanamachine:backport/9.3/pr-258289

Conversation

@kibanamachine
Copy link
Copy Markdown
Contributor

Backport

This will backport the following commits from main to 9.3:

Questions ?

Please refer to the Backport tool documentation

…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 kibanamachine added the backport This PR is a backport of another PR label Mar 24, 2026
@kibanamachine kibanamachine enabled auto-merge (squash) March 24, 2026 14:04
@alexwizp alexwizp self-requested a review March 24, 2026 14:56
@kibanamachine kibanamachine merged commit 4f3dc21 into elastic:9.3 Mar 30, 2026
14 checks passed
@elasticmachine
Copy link
Copy Markdown
Contributor

💚 Build Succeeded

Metrics [docs]

✅ unchanged

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

backport This PR is a backport of another PR

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants