[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)
elastic · Nov 21, 2024 · d88ce9e · d88ce9e
1 parent f473762
commit d88ce9e
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 2 deletions.
diff --git 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/.../enterprise_search_content/components/connector_detail/components/run_options_buttons.tsx b/.../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/...t/components/search_index/crawler/automatic_crawl_scheduler/automatic_crawl_scheduler.tsx b/...t/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/.../crawler/crawler_domain_detail/authentication_panel/authentication_panel_edit_content.tsx b/.../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">