More accesibility context for changes

elastic · Nov 22, 2024 · b29a1f8 · b29a1f8
1 parent f77c706
commit b29a1f8
Showing 1 changed file with 5 additions and 4 deletions.
diff --git a/...ic/applications/enterprise_search_content/components/settings/default_settings_flyout.tsx b/...ic/applications/enterprise_search_content/components/settings/default_settings_flyout.tsx
@@ -56,7 +56,8 @@ export const DefaultSettingsFlyout: React.FC<DefaultSettingsFlyoutProps> = ({ cl
     reduce_whitespace: reduceWhitespace,
     run_ml_inference: runMLInference,
   } = pipelineState;
-  const elementRef = useRef<HTMLAnchorElement>(null);
+  // Reference the first focusable element in the flyout for accessibility on click or Enter key action either Reset or Save button
+  const firstFocusInFlyoutRef = useRef<HTMLAnchorElement>(null);
   return (
     <EuiFlyout onClose={closeFlyout} size="s" paddingSize="l">
       <EuiFlyoutHeader hasBorder>
@@ -82,7 +83,7 @@ export const DefaultSettingsFlyout: React.FC<DefaultSettingsFlyoutProps> = ({ cl
                     data-telemetry-id="entSearchContent-defaultSettingsFlyout-ingestPipelinesLink"
                     href={docLinks.ingestPipelines}
                     target="_blank"
-                    ref={elementRef}
+                    ref={firstFocusInFlyoutRef}
                   >
                     {i18n.translate(
                       'xpack.enterpriseSearch.defaultSettingsFlyout.body.description.ingestPipelinesLink.link',
@@ -208,7 +209,7 @@ export const DefaultSettingsFlyout: React.FC<DefaultSettingsFlyoutProps> = ({ cl
                   isLoading={isLoading}
                   onClick={() => {
                     setPipeline(defaultPipeline);
-                    elementRef.current?.focus();
+                    firstFocusInFlyoutRef.current?.focus();
                   }}
                   data-test-subj={'entSearchContentSettingsResetButton'}
                 >
@@ -225,7 +226,7 @@ export const DefaultSettingsFlyout: React.FC<DefaultSettingsFlyoutProps> = ({ cl
                   isLoading={isLoading}
                   onClick={() => {
                     makeRequest(pipelineState);
-                    elementRef.current?.focus();
+                    firstFocusInFlyoutRef.current?.focus();
                   }}
                   data-test-subj={'entSearchContentSettingsSaveButton'}
                 >