mirror of
https://github.com/elastic/kibana.git
synced 2025-04-24 09:48:58 -04:00
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:
parent
1482bf4e7e
commit
962cfb4c67
1 changed files with 7 additions and 1 deletions
|
@ -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}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue