github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 01:38:56 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.18] Improve accessibility in create connector flyout (#218426) (#218681)

Browse source 
# Backport

This will backport the following commits from `main` to `8.18`:
- [Improve accessibility in create connector flyout
(#218426)](https://github.com/elastic/kibana/pull/218426)

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

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

<!--BACKPORT [{"author":{"name":"Arturo
Lidueña","email":"arturo.liduena@elastic.co"},"sourceCommit":{"committedDate":"2025-04-18T20:32:17Z","message":"Improve
accessibility in create connector flyout (#218426)\n\npart of #212776
\n\n## Summary\nImproves screen reader accessibility for the GenAI
connector panels in\nthe Observability AI Assistant by providing more
descriptive\nannouncements when these panels are opened. Previously,
Kibana would\nannounce a generic modal dialog message (from EUI) without
context,\nwhich could confuse screen reader users.\n\n###
Problem\n\nWhen a user with a screen reader (e.g., VoiceOver) clicks on
the “Set up\nGenAI connector” button, Kibana announces a generic message
like “modal\ndialog” without explaining what the modal is about.\n\n###
Fix\n•\tInclude aria-label to the `CreateConnectorFlyout`
component\n\n### How to Test\n1.\tNavigate to Observability → AI
Assistant\n2.\tUse VoiceOver (macOS) or another screen reader\n3.\tClick
“Set up GenAI connector”\n4.\tVerify that the screen reader announces
\"create connector
flyout\".","sha":"962cfb4c67a3e0dce1f45a83364b871508ca7061","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:feature","backport:prev-minor","backport:prev-major","Team:Obs
AI Assistant","v9.1.0"],"title":"Improve accessibility in create
connector flyout
","number":218426,"url":"https://github.com/elastic/kibana/pull/218426","mergeCommit":{"message":"Improve
accessibility in create connector flyout (#218426)\n\npart of #212776
\n\n## Summary\nImproves screen reader accessibility for the GenAI
connector panels in\nthe Observability AI Assistant by providing more
descriptive\nannouncements when these panels are opened. Previously,
Kibana would\nannounce a generic modal dialog message (from EUI) without
context,\nwhich could confuse screen reader users.\n\n###
Problem\n\nWhen a user with a screen reader (e.g., VoiceOver) clicks on
the “Set up\nGenAI connector” button, Kibana announces a generic message
like “modal\ndialog” without explaining what the modal is about.\n\n###
Fix\n•\tInclude aria-label to the `CreateConnectorFlyout`
component\n\n### How to Test\n1.\tNavigate to Observability → AI
Assistant\n2.\tUse VoiceOver (macOS) or another screen reader\n3.\tClick
“Set up GenAI connector”\n4.\tVerify that the screen reader announces
\"create connector
flyout\".","sha":"962cfb4c67a3e0dce1f45a83364b871508ca7061"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/218426","number":218426,"mergeCommit":{"message":"Improve
accessibility in create connector flyout (#218426)\n\npart of #212776
\n\n## Summary\nImproves screen reader accessibility for the GenAI
connector panels in\nthe Observability AI Assistant by providing more
descriptive\nannouncements when these panels are opened. Previously,
Kibana would\nannounce a generic modal dialog message (from EUI) without
context,\nwhich could confuse screen reader users.\n\n###
Problem\n\nWhen a user with a screen reader (e.g., VoiceOver) clicks on
the “Set up\nGenAI connector” button, Kibana announces a generic message
like “modal\ndialog” without explaining what the modal is about.\n\n###
Fix\n•\tInclude aria-label to the `CreateConnectorFlyout`
component\n\n### How to Test\n1.\tNavigate to Observability → AI
Assistant\n2.\tUse VoiceOver (macOS) or another screen reader\n3.\tClick
“Set up GenAI connector”\n4.\tVerify that the screen reader announces
\"create connector
flyout\".","sha":"962cfb4c67a3e0dce1f45a83364b871508ca7061"}}]}]
BACKPORT-->

Co-authored-by: Arturo Lidueña <arturo.liduena@elastic.co>
This commit is contained in:
Kibana Machine 2025-04-19 00:20:50 +02:00 • committed by GitHub
parent 1af5b2556a
commit 946a98671f
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 7 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

8
x-pack/platform/plugins/shared/triggers_actions_ui/public/application/sections/action_connector_form/create_connector_flyout/index.tsx
View file

@ -207,7 +207,13 @@ const CreateConnectorFlyoutComponent: React.FC<CreateConnectorFlyoutProps> = ({
}, []);
return (
<EuiFlyout onClose={onClose} data-test-subj="create-connector-flyout">
<EuiFlyout
onClose={onClose}
data-test-subj="create-connector-flyout"
aria-label={i18n.translate('xpack.triggersActionsUI.createConnectorFlyout', {
defaultMessage: 'create connector flyout',
})}
>
<FlyoutHeader
icon={actionTypeModel?.iconClass}
actionTypeName={actionType?.name}