[8.x] [A11y][APM] Add aria-label to technical preview badge (#216483) (#216601)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[A11y][APM] Add `aria-label` to technical preview badge
(#216483)](https://github.com/elastic/kibana/pull/216483)

<!--- Backport version: 9.6.6 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sorenlouv/backport)

<!--BACKPORT [{"author":{"name":"Sergi
Romeu","email":"sergi.romeu@elastic.co"},"sourceCommit":{"committedDate":"2025-04-01T09:08:27Z","message":"[A11y][APM]
Add `aria-label` to technical preview badge (#216483)\n\n##
Summary\n\nFixes https://github.com/elastic/kibana/issues/212093\n\nThis
PR adds the `aria-label` prop so screen readers work with this\ntooltip
text.\n\n![image](https://github.com/user-attachments/assets/8c3d345d-68be-42cb-ab6f-addafd0d7683)","sha":"8767adc6222f5201a37bf6ed84ac4418d05b57a0","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","apm","Team:obs-ux-infra_services","backport:version","a11y","v9.1.0","v8.19.0"],"title":"[A11y][APM]
Add `aria-label` to technical preview
badge","number":216483,"url":"https://github.com/elastic/kibana/pull/216483","mergeCommit":{"message":"[A11y][APM]
Add `aria-label` to technical preview badge (#216483)\n\n##
Summary\n\nFixes https://github.com/elastic/kibana/issues/212093\n\nThis
PR adds the `aria-label` prop so screen readers work with this\ntooltip
text.\n\n![image](https://github.com/user-attachments/assets/8c3d345d-68be-42cb-ab6f-addafd0d7683)","sha":"8767adc6222f5201a37bf6ed84ac4418d05b57a0"}},"sourceBranch":"main","suggestedTargetBranches":["8.x"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/216483","number":216483,"mergeCommit":{"message":"[A11y][APM]
Add `aria-label` to technical preview badge (#216483)\n\n##
Summary\n\nFixes https://github.com/elastic/kibana/issues/212093\n\nThis
PR adds the `aria-label` prop so screen readers work with this\ntooltip
text.\n\n![image](https://github.com/user-attachments/assets/8c3d345d-68be-42cb-ab6f-addafd0d7683)","sha":"8767adc6222f5201a37bf6ed84ac4418d05b57a0"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Sergi Romeu <sergi.romeu@elastic.co>
This commit is contained in:
Kibana Machine 2025-04-01 12:58:37 +02:00 committed by GitHub
parent e04403d7ba
commit 5561abe7fc
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -20,6 +20,10 @@ export function TechnicalPreviewBadge({ icon, size, style }: Props) {
label={i18n.translate('xpack.apm.technicalPreviewBadgeLabel', {
defaultMessage: 'Technical preview',
})}
aria-label={i18n.translate('xpack.apm.technicalPreviewBadge.ariaLabel', {
defaultMessage:
'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',
})}
tooltipContent={i18n.translate('xpack.apm.technicalPreviewBadgeDescription', {
defaultMessage:
'This functionality is in technical preview and may be changed or removed completely in a future release. Elastic will work to fix any issues, but features in technical preview are not subject to the support SLA of official GA features.',