Skip to content

Add aria-label to Auto-included badge for screen reader announcement#271083

Merged
bhavyarm merged 3 commits into
mainfrom
copilot/fix-tooltip-announcement
May 27, 2026
Merged

Add aria-label to Auto-included badge for screen reader announcement#271083
bhavyarm merged 3 commits into
mainfrom
copilot/fix-tooltip-announcement

Conversation

Copy link
Copy Markdown
Contributor

Copilot AI commented May 25, 2026

The "Auto-included" badge in the skill/tool/plugin library panel has tooltip text that is not announced by screen readers (VoiceOver), violating WCAG 4.1.2 (Name, Role, Value).

  • Added aria-label to the EuiBadge in LibraryToggleRow that concatenates the badge label, tooltip title, and tooltip body so the full context is announced on focus
<EuiBadge
  tabIndex={0}
  color="hollow"
  aria-label={
    [disabledBadgeLabel, disabledTooltipTitle, disabledTooltipBody]
      .filter(Boolean)
      .join('. ') || undefined
  }
>

This is in the shared library_toggle_row.tsx component, so it applies to all three library panels (skills, tools, plugins).

Warning

Firewall rules blocked me from connecting to one or more addresses (expand for details)

I tried to connect to the following addresses, but was blocked by firewall rules:

  • ci-stats.kibana.dev
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node scripts/eslint x-pack/platform/plugins/shared/agent_builder/public/application/components/agents/common/library_toggle_row.tsx (dns block)
    • Triggering command: /home/REDACTED/work/_temp/ghcca-node/node/bin/node node scripts/type_check --project x-pack/platform/plugins/shared/agent_builder/tsconfig.json (dns block)

If you need me to access, download, or install something from one of these locations, you can either:

Copilot AI linked an issue May 25, 2026 that may be closed by this pull request
…ment

The EuiBadge in the library toggle row now includes an aria-label that
combines the badge label, tooltip title, and tooltip body text so that
screen readers announce the tooltip content when the element receives focus.

Agent-Logs-Url: https://github.com/elastic/kibana/sessions/854fa800-c0e6-4cf1-bf52-2982ef7aa033

Co-authored-by: bhavyarm <7074629+bhavyarm@users.noreply.github.com>
Copilot AI changed the title [WIP] Fix missing tooltip announcement for skills page Add aria-label to Auto-included badge for screen reader announcement May 25, 2026
Copilot AI requested a review from bhavyarm May 25, 2026 13:36
@bhavyarm bhavyarm added a11y:agent-pr PR has been created by the agent backport:version Backport to applied version labels release_note:skip Skip the PR/issue when compiling release notes Project:Accessibility v9.5.0 v9.3.5 v9.4.2 labels May 25, 2026
@bhavyarm bhavyarm marked this pull request as ready for review May 25, 2026 20:37
@bhavyarm bhavyarm requested a review from a team as a code owner May 25, 2026 20:37
@infra-vault-gh-plugin-prod
Copy link
Copy Markdown

Pinging @elastic/kibana-accessibility (Project:Accessibility)

@kibanamachine
Copy link
Copy Markdown
Contributor

💛 Build succeeded, but was flaky

Failed CI Steps

Test Failures

  • [job] [logs] FTR Configs #135 / Serverless Common UI - Home Page Sample data in serverless "after all" hook for "Sample data loads"

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
agentBuilder 1.3MB 1.3MB +56.0B

cc @bhavyarm @Copilot

@bhavyarm bhavyarm enabled auto-merge (squash) May 27, 2026 13:32
@bhavyarm bhavyarm merged commit 628ed46 into main May 27, 2026
30 checks passed
@bhavyarm bhavyarm deleted the copilot/fix-tooltip-announcement branch May 27, 2026 13:32
@kibanamachine
Copy link
Copy Markdown
Contributor

Starting backport for target branches: 9.3, 9.4

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

@kibanamachine
Copy link
Copy Markdown
Contributor

💔 Some backports could not be created

Status Branch Result
9.3 Backport failed because of merge conflicts

You might need to backport the following PRs to 9.3:
- Add aria-label to Custom Instructions textarea in edit details flyout (#271073)
- Fix @elastic/eui/require-table-caption lint violations in drilldown manager UI (#271377)
- [Synthetics] Wait for active space before fetching cross-space monitor in flyout !! (#270936)
- [Scout] Sanitize Buildkite step keys for nested plugin names (#271412)
- [Fleet] Normalize endpoint package policy input ids (#271269)
9.4

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

Manual backport

To create the backport manually run:

node scripts/backport --pr 271083

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request May 27, 2026
…ement (#271083) (#271462)

# Backport

This will backport the following commits from `main` to `9.4`:
- [Add aria-label to Auto-included badge for screen reader announcement
(#271083)](#271083)

<!--- 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-05-27T13:32:30Z","message":"Add
aria-label to Auto-included badge for screen reader announcement
(#271083)","sha":"628ed46af2a753879a19ac3a3393d53d73d3b01a","branchLabelMapping":{"^v9.5.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","💝community","backport:version","a11y:agent-pr","v9.5.0","v9.3.5","v9.4.2"],"title":"Add
aria-label to Auto-included badge for screen reader
announcement","number":271083,"url":"https://github.com/elastic/kibana/pull/271083","mergeCommit":{"message":"Add
aria-label to Auto-included badge for screen reader announcement
(#271083)","sha":"628ed46af2a753879a19ac3a3393d53d73d3b01a"}},"sourceBranch":"main","suggestedTargetBranches":["9.3","9.4"],"targetPullRequestStates":[{"branch":"main","label":"v9.5.0","branchLabelMappingKey":"^v9.5.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/271083","number":271083,"mergeCommit":{"message":"Add
aria-label to Auto-included badge for screen reader announcement
(#271083)","sha":"628ed46af2a753879a19ac3a3393d53d73d3b01a"}},{"branch":"9.3","label":"v9.3.5","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.4","label":"v9.4.2","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Copilot <198982749+Copilot@users.noreply.github.com>
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 Project:Accessibility release_note:skip Skip the PR/issue when compiling release notes v9.3.5 v9.4.2 v9.5.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Search:Skills]Missing tooltip announcement

4 participants