Skip to content

Commit da2726e

Browse files
[9.1] [SharedUX][A11y] Announce log rate analysis info popover (#234722) (#234862)
# Backport This will backport the following commits from `main` to `9.1`: - [[SharedUX][A11y] Announce log rate analysis info popover (#234722)](#234722) <!--- Backport version: 9.6.6 --> ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sorenlouv/backport) <!--BACKPORT [{"author":{"name":"Ángeles Martínez Barrio","email":"[email protected]"},"sourceCommit":{"committedDate":"2025-09-12T07:58:14Z","message":"[SharedUX][A11y] Announce log rate analysis info popover (#234722)\n\nCloses https://github.com/elastic/kibana/issues/216005\n\n## Summary\n\nAdded `aria-labelledby` attribute to the popover associated to the\nrelevant popover title.\n\n## Testing\n**- Safari:**\nBefore announcement:\n\n<img width=\"980\" height=\"698\" alt=\"Screenshot 2025-09-11 at 10 57 42\"\nsrc=\"https://github.com/user-attachments/assets/35f162e0-7af0-44c8-a963-35dfe4327915\"\n/>\n\nAfter announcement:\n\n<img width=\"959\" height=\"727\" alt=\"Screenshot 2025-09-11 at 10 20 05\"\nsrc=\"https://github.com/user-attachments/assets/097596cd-f683-492d-9035-cb6f12fe8467\"\n/>\n\n**- Chrome:**\nBefore a11y tree:\n\n<img width=\"2351\" height=\"663\" alt=\"Screenshot 2025-09-11 at 10 54 02\"\nsrc=\"https://github.com/user-attachments/assets/4e6c0af6-e24b-417f-a809-6df6f959e4dd\"\n/>\n\nAfter a11y tree:\n\n<img width=\"2396\" height=\"633\" alt=\"Screenshot 2025-09-11 at 10 52 51\"\nsrc=\"https://github.com/user-attachments/assets/955219d5-4ea7-41bc-972d-2614c1c57c30\"\n/>\n\n\nSee\n[discussion](https://elastic.slack.com/archives/C04UK0RDL2J/p1744641509849679?thread_ts=1744637550.194309&cid=C04UK0RDL2J)\non why `role=\"dialog\"` and `aria-labelledby`cannot be tested on\nChrome+VO.","sha":"3ccef6399038da8ff1cf05e9199c01ed690590c7","branchLabelMapping":{"^v9.2.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","Team:SharedUX","backport:prev-minor","v9.2.0"],"title":"[SharedUX][A11y] Announce log rate analysis info popover","number":234722,"url":"https://github.com/elastic/kibana/pull/234722","mergeCommit":{"message":"[SharedUX][A11y] Announce log rate analysis info popover (#234722)\n\nCloses https://github.com/elastic/kibana/issues/216005\n\n## Summary\n\nAdded `aria-labelledby` attribute to the popover associated to the\nrelevant popover title.\n\n## Testing\n**- Safari:**\nBefore announcement:\n\n<img width=\"980\" height=\"698\" alt=\"Screenshot 2025-09-11 at 10 57 42\"\nsrc=\"https://github.com/user-attachments/assets/35f162e0-7af0-44c8-a963-35dfe4327915\"\n/>\n\nAfter announcement:\n\n<img width=\"959\" height=\"727\" alt=\"Screenshot 2025-09-11 at 10 20 05\"\nsrc=\"https://github.com/user-attachments/assets/097596cd-f683-492d-9035-cb6f12fe8467\"\n/>\n\n**- Chrome:**\nBefore a11y tree:\n\n<img width=\"2351\" height=\"663\" alt=\"Screenshot 2025-09-11 at 10 54 02\"\nsrc=\"https://github.com/user-attachments/assets/4e6c0af6-e24b-417f-a809-6df6f959e4dd\"\n/>\n\nAfter a11y tree:\n\n<img width=\"2396\" height=\"633\" alt=\"Screenshot 2025-09-11 at 10 52 51\"\nsrc=\"https://github.com/user-attachments/assets/955219d5-4ea7-41bc-972d-2614c1c57c30\"\n/>\n\n\nSee\n[discussion](https://elastic.slack.com/archives/C04UK0RDL2J/p1744641509849679?thread_ts=1744637550.194309&cid=C04UK0RDL2J)\non why `role=\"dialog\"` and `aria-labelledby`cannot be tested on\nChrome+VO.","sha":"3ccef6399038da8ff1cf05e9199c01ed690590c7"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.2.0","branchLabelMappingKey":"^v9.2.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/234722","number":234722,"mergeCommit":{"message":"[SharedUX][A11y] Announce log rate analysis info popover (#234722)\n\nCloses https://github.com/elastic/kibana/issues/216005\n\n## Summary\n\nAdded `aria-labelledby` attribute to the popover associated to the\nrelevant popover title.\n\n## Testing\n**- Safari:**\nBefore announcement:\n\n<img width=\"980\" height=\"698\" alt=\"Screenshot 2025-09-11 at 10 57 42\"\nsrc=\"https://github.com/user-attachments/assets/35f162e0-7af0-44c8-a963-35dfe4327915\"\n/>\n\nAfter announcement:\n\n<img width=\"959\" height=\"727\" alt=\"Screenshot 2025-09-11 at 10 20 05\"\nsrc=\"https://github.com/user-attachments/assets/097596cd-f683-492d-9035-cb6f12fe8467\"\n/>\n\n**- Chrome:**\nBefore a11y tree:\n\n<img width=\"2351\" height=\"663\" alt=\"Screenshot 2025-09-11 at 10 54 02\"\nsrc=\"https://github.com/user-attachments/assets/4e6c0af6-e24b-417f-a809-6df6f959e4dd\"\n/>\n\nAfter a11y tree:\n\n<img width=\"2396\" height=\"633\" alt=\"Screenshot 2025-09-11 at 10 52 51\"\nsrc=\"https://github.com/user-attachments/assets/955219d5-4ea7-41bc-972d-2614c1c57c30\"\n/>\n\n\nSee\n[discussion](https://elastic.slack.com/archives/C04UK0RDL2J/p1744641509849679?thread_ts=1744637550.194309&cid=C04UK0RDL2J)\non why `role=\"dialog\"` and `aria-labelledby`cannot be tested on\nChrome+VO.","sha":"3ccef6399038da8ff1cf05e9199c01ed690590c7"}}]}] BACKPORT--> Co-authored-by: Ángeles Martínez Barrio <[email protected]>
1 parent 58abbcd commit da2726e

File tree

1 file changed

+11
-2
lines changed

1 file changed

+11
-2
lines changed

x-pack/platform/plugins/shared/aiops/public/components/log_rate_analysis/log_rate_analysis_info_popover.tsx

Lines changed: 11 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,14 @@
77

88
import React, { useState, type FC } from 'react';
99

10-
import { useEuiTheme, EuiBadge, EuiPopover, EuiPopoverTitle, EuiText } from '@elastic/eui';
10+
import {
11+
useEuiTheme,
12+
EuiBadge,
13+
EuiPopover,
14+
EuiPopoverTitle,
15+
EuiText,
16+
htmlIdGenerator,
17+
} from '@elastic/eui';
1118

1219
import { LOG_RATE_ANALYSIS_TYPE } from '@kbn/aiops-log-rate-analysis';
1320
import { useAppSelector } from '@kbn/aiops-log-rate-analysis/state';
@@ -48,6 +55,7 @@ export const LogRateAnalysisInfoPopover: FC = () => {
4855

4956
const [isPopoverOpen, setIsPopoverOpen] = useState(false);
5057

58+
const popoverTitleId = htmlIdGenerator()('logRateAnalysisInfoPopoverTitle');
5159
const infoTitlePrefix = i18n.translate('xpack.aiops.analysis.analysisTypeInfoTitlePrefix', {
5260
defaultMessage: 'Analysis type: ',
5361
});
@@ -107,9 +115,10 @@ export const LogRateAnalysisInfoPopover: FC = () => {
107115
isOpen={isPopoverOpen}
108116
ownFocus
109117
panelPaddingSize="m"
118+
aria-labelledby={popoverTitleId}
110119
>
111120
{infoTitle && (
112-
<EuiPopoverTitle>
121+
<EuiPopoverTitle id={popoverTitleId}>
113122
{infoTitlePrefix}
114123
{infoTitle}
115124
</EuiPopoverTitle>

0 commit comments

Comments
 (0)