From d88ce9e549575db8d151e4c353f539850c7b6bac Mon Sep 17 00:00:00 2001
From: Saarika Bhasi <55930906+saarikabhasi@users.noreply.github.com>
Date: Thu, 21 Nov 2024 14:07:13 +0530
Subject: [PATCH] [Search][a11y] fix radio buttons to focus (#200573)

## Summary

Added name attribute in `EuiCheckableCard` components so that focus
stays on selected radio component when navigated using keyboard.






### Checklist
- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/packages/kbn-i18n/README.md)
---
 .../kbn-search-api-panels/components/cloud_details.tsx |  4 ++--
 .../components/run_options_buttons.tsx                 | 10 ++++++++++
 .../automatic_crawl_scheduler.tsx                      |  2 ++
 .../authentication_panel_edit_content.tsx              |  2 ++
 4 files changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/kbn-search-api-panels/components/cloud_details.tsx b/packages/kbn-search-api-panels/components/cloud_details.tsx
index 26710fb17436b..df2cc6bb6837d 100644
--- a/packages/kbn-search-api-panels/components/cloud_details.tsx
+++ b/packages/kbn-search-api-panels/components/cloud_details.tsx
@@ -82,7 +82,7 @@ export const CloudDetailsPanel = ({
       <EuiSpacer size="l" />
       <EuiCheckableCard
         id={CloudDetail.ElasticsearchEndpoint}
-        name={CloudDetail.ElasticsearchEndpoint}
+        name="copy-connection-details-choices"
         label={
           <EuiFlexGroup alignItems="center">
             <EuiFlexItem>
@@ -123,7 +123,7 @@ export const CloudDetailsPanel = ({
       {Boolean(cloudId) && (
         <EuiCheckableCard
           id={CloudDetail.CloudId}
-          name={CloudDetail.CloudId}
+          name="copy-connection-details-choices"
           label={
             <EuiTitle size="xxs">
               <h5>
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/run_options_buttons.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/run_options_buttons.tsx
index c0dd0ff23622d..233b6ddb67374 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/run_options_buttons.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/connector_detail/components/run_options_buttons.tsx
@@ -42,6 +42,11 @@ export const RunOptionsButtons: React.FC<RunOptionsButtonsProps> = ({
               onChange={() => selectDeploymentMethod('docker')}
               id="xpack.enterpriseSearch.content.connector_detail.configurationConnector.steps.runConnectorService.docker"
               checked={selectedDeploymentMethod === 'docker'}
+              aria-label={i18n.translate(
+                'xpack.enterpriseSearch.connectorConfiguration.dockerTextLabel.ariaLabel',
+                { defaultMessage: 'Run with Docker' }
+              )}
+              name="deployment-method-run-connector"
               label={
                 <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
                   <EuiFlexItem grow={false}>
@@ -64,6 +69,11 @@ export const RunOptionsButtons: React.FC<RunOptionsButtonsProps> = ({
               onChange={() => selectDeploymentMethod('source')}
               id="xpack.enterpriseSearch.content.connector_detail.configurationConnector.steps.runConnectorService.source"
               checked={selectedDeploymentMethod === 'source'}
+              aria-label={i18n.translate(
+                'xpack.enterpriseSearch.connectorConfiguration.sourceTextLabel.ariaLabel',
+                { defaultMessage: 'Run from source' }
+              )}
+              name="deployment-method-run-connector"
               label={
                 <EuiFlexGroup responsive={false} gutterSize="s" alignItems="center">
                   <EuiFlexItem grow={false}>
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/automatic_crawl_scheduler/automatic_crawl_scheduler.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/automatic_crawl_scheduler/automatic_crawl_scheduler.tsx
index 107be669d8852..ddc98157f80ca 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/automatic_crawl_scheduler/automatic_crawl_scheduler.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/automatic_crawl_scheduler/automatic_crawl_scheduler.tsx
@@ -93,6 +93,7 @@ export const AutomaticCrawlScheduler: React.FC = () => {
             <EuiFlexItem>
               <EuiCheckableCard
                 id="specificTimeSchedulingCard"
+                name="scheduling-card"
                 label={
                   <>
                     <EuiTitle size="xxs">
@@ -137,6 +138,7 @@ export const AutomaticCrawlScheduler: React.FC = () => {
             <EuiFlexItem>
               <EuiCheckableCard
                 id="intervalSchedulingCard"
+                name="scheduling-card"
                 label={
                   <>
                     <EuiTitle size="xxs">
diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/authentication_panel/authentication_panel_edit_content.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/authentication_panel/authentication_panel_edit_content.tsx
index c8d24525747e0..bbc9c6877f0c0 100644
--- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/authentication_panel/authentication_panel_edit_content.tsx
+++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/crawler/crawler_domain_detail/authentication_panel/authentication_panel_edit_content.tsx
@@ -42,6 +42,7 @@ export const AuthenticationPanelEditContent: React.FC = () => {
           <EuiCheckableCard
             data-telemetry-id="entSearchContent-crawler-domainDetail-authentication-basicAuthentication"
             id="basicAuthenticationCheckableCard"
+            name="authenticationCard"
             className="authenticationCheckable"
             label={
               <EuiTitle size="xxs">
@@ -75,6 +76,7 @@ export const AuthenticationPanelEditContent: React.FC = () => {
           <EuiCheckableCard
             data-telemetry-id="entSearchContent-crawler-domainDetail-authentication-authenticationHeader"
             id="authenticationHeaderCheckableCard"
+            name="authenticationCard"
             className="authenticationCheckable"
             label={
               <EuiTitle size="xxs">