[9.0] [Connectors] Apply autoFocus prop to cc and bcc elements on email connector form (#223828) (#223940)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Connectors] Apply `autoFocus` prop to `cc` and `bcc` elements on
email connector form
(#223828)](https://github.com/elastic/kibana/pull/223828)

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

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

<!--BACKPORT [{"author":{"name":"Justin
Kambic","email":"jk@elastic.co"},"sourceCommit":{"committedDate":"2025-06-13T15:00:59Z","message":"[Connectors]
Apply `autoFocus` prop to `cc` and `bcc` elements on email connector
form (#223828)\n\n## Summary\n\nResolves #212419.\n\nIn the Synthetics
plugin, we are referencing the action connector form\nprovided for
Email. The a11y audit noted that the `Cc` and `Bcc`\nfeatures on this
form break the focus flow and make the page\ninaccessible. This patch
will apply `autoFocus` to the combo box\nelements that get rendered when
these buttons are clicked, thus allowing\nscreen reader and
keyboard-only users to navigate the UI properly.\n\n**NOTE:** you may
see an example of the failure on the linked issue. I\nhave re-created
the flow using VoiceOver and keyboard navigation and\nincluded a GIF of
it below.\n\n##
Example\n\n\n![20250612155139](https://github.com/user-attachments/assets/db8fff12-6fa7-43c8-889d-e05f2473f8e8)","sha":"449c62f972b54f6659a0c1772ced5a5242d3d20c","branchLabelMapping":{"^v9.1.0$":"main","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","Team:obs-ux-management","backport:version","v9.1.0","v8.19.0","v9.0.3","v8.18.3","v8.17.8"],"title":"[Connectors]
Apply `autoFocus` prop to `cc` and `bcc` elements on email connector
form","number":223828,"url":"https://github.com/elastic/kibana/pull/223828","mergeCommit":{"message":"[Connectors]
Apply `autoFocus` prop to `cc` and `bcc` elements on email connector
form (#223828)\n\n## Summary\n\nResolves #212419.\n\nIn the Synthetics
plugin, we are referencing the action connector form\nprovided for
Email. The a11y audit noted that the `Cc` and `Bcc`\nfeatures on this
form break the focus flow and make the page\ninaccessible. This patch
will apply `autoFocus` to the combo box\nelements that get rendered when
these buttons are clicked, thus allowing\nscreen reader and
keyboard-only users to navigate the UI properly.\n\n**NOTE:** you may
see an example of the failure on the linked issue. I\nhave re-created
the flow using VoiceOver and keyboard navigation and\nincluded a GIF of
it below.\n\n##
Example\n\n\n![20250612155139](https://github.com/user-attachments/assets/db8fff12-6fa7-43c8-889d-e05f2473f8e8)","sha":"449c62f972b54f6659a0c1772ced5a5242d3d20c"}},"sourceBranch":"main","suggestedTargetBranches":["8.19","9.0","8.18","8.17"],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/223828","number":223828,"mergeCommit":{"message":"[Connectors]
Apply `autoFocus` prop to `cc` and `bcc` elements on email connector
form (#223828)\n\n## Summary\n\nResolves #212419.\n\nIn the Synthetics
plugin, we are referencing the action connector form\nprovided for
Email. The a11y audit noted that the `Cc` and `Bcc`\nfeatures on this
form break the focus flow and make the page\ninaccessible. This patch
will apply `autoFocus` to the combo box\nelements that get rendered when
these buttons are clicked, thus allowing\nscreen reader and
keyboard-only users to navigate the UI properly.\n\n**NOTE:** you may
see an example of the failure on the linked issue. I\nhave re-created
the flow using VoiceOver and keyboard navigation and\nincluded a GIF of
it below.\n\n##
Example\n\n\n![20250612155139](https://github.com/user-attachments/assets/db8fff12-6fa7-43c8-889d-e05f2473f8e8)","sha":"449c62f972b54f6659a0c1772ced5a5242d3d20c"}},{"branch":"8.19","label":"v8.19.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.3","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.17","label":"v8.17.8","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Justin Kambic <jk@elastic.co>
This commit is contained in:
Kibana Machine 2025-06-13 18:50:11 +02:00 committed by GitHub
parent 699bc6b3da
commit 29270b170d
No known key found for this signature in database
GPG key ID: B5690EEEBB952194

View file

@ -156,6 +156,7 @@ export const EmailParamsFields = ({
)}
>
<EuiComboBox
autoFocus
noSuggestions
isInvalid={isCCInvalid}
isLoading={isLoading}
@ -199,6 +200,7 @@ export const EmailParamsFields = ({
)}
>
<EuiComboBox
autoFocus
noSuggestions
isInvalid={isBCCInvalid}
isDisabled={isDisabled}