diff --git a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/settings/default_settings_flyout.tsx b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/settings/default_settings_flyout.tsx index 5652e0771e1a8..e62c08f3cdaa9 100644 --- a/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/settings/default_settings_flyout.tsx +++ b/x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/settings/default_settings_flyout.tsx @@ -56,7 +56,8 @@ export const DefaultSettingsFlyout: React.FC = ({ cl reduce_whitespace: reduceWhitespace, run_ml_inference: runMLInference, } = pipelineState; - const elementRef = useRef(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(null); return ( @@ -82,7 +83,7 @@ export const DefaultSettingsFlyout: React.FC = ({ 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 = ({ 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 = ({ cl isLoading={isLoading} onClick={() => { makeRequest(pipelineState); - elementRef.current?.focus(); + firstFocusInFlyoutRef.current?.focus(); }} data-test-subj={'entSearchContentSettingsSaveButton'} >