Improve accessibility in create connector flyout (#218426)

part of #212776 

## Summary
Improves screen reader accessibility for the GenAI connector panels in
the Observability AI Assistant by providing more descriptive
announcements when these panels are opened. Previously, Kibana would
announce a generic modal dialog message (from EUI) without context,
which could confuse screen reader users.

### Problem

When a user with a screen reader (e.g., VoiceOver) clicks on the “Set up
GenAI connector” button, Kibana announces a generic message like “modal
dialog” without explaining what the modal is about.

### Fix
•	Include aria-label  to the `CreateConnectorFlyout` component

### How to Test
1.	Navigate to Observability → AI Assistant
2.	Use VoiceOver (macOS) or another screen reader
3.	Click “Set up GenAI connector”
4.	Verify that the screen reader announces "create connector flyout".
This commit is contained in:
Arturo Lidueña 2025-04-18 22:32:17 +02:00 committed by GitHub
parent 1482bf4e7e
commit 962cfb4c67
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -214,7 +214,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}