From 6eea51f55a04189e58742e4f8cdfb48d929c2f45 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Gonz=C3=A1lez?= Date: Thu, 21 Nov 2024 13:32:17 +0100 Subject: [PATCH 1/3] Reseting focus to the first element when pressing Reset button --- .../components/settings/default_settings_flyout.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) 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 3c109e2135726..f1847c8d09f5b 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 @@ -5,7 +5,7 @@ * 2.0. */ -import React from 'react'; +import React, { useRef } from 'react'; import { useValues, useActions } from 'kea'; @@ -31,6 +31,7 @@ import { docLinks } from '../../../shared/doc_links'; import { SettingsLogic } from './settings_logic'; import { SettingsPanel } from './settings_panel'; +import { element } from 'prop-types'; export interface DefaultSettingsFlyoutProps { closeFlyout: () => void; @@ -56,6 +57,7 @@ export const DefaultSettingsFlyout: React.FC = ({ cl reduce_whitespace: reduceWhitespace, run_ml_inference: runMLInference, } = pipelineState; + const elementRef = useRef(null); return ( @@ -81,6 +83,7 @@ export const DefaultSettingsFlyout: React.FC = ({ cl data-telemetry-id="entSearchContent-defaultSettingsFlyout-ingestPipelinesLink" href={docLinks.ingestPipelines} target="_blank" + ref={elementRef} > {i18n.translate( 'xpack.enterpriseSearch.defaultSettingsFlyout.body.description.ingestPipelinesLink.link', @@ -204,7 +207,10 @@ export const DefaultSettingsFlyout: React.FC = ({ cl color="primary" disabled={hasNoChanges} isLoading={isLoading} - onClick={() => setPipeline(defaultPipeline)} + onClick={() => { + elementRef.current?.focus(); + setPipeline(defaultPipeline); + }} data-test-subj={'entSearchContentSettingsResetButton'} > {i18n.translate('xpack.enterpriseSearch.content.settings.resetButtonLabel', { From f77c706dcde6c56b2fb130a996b59b6905b1c1f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Gonz=C3=A1lez?= Date: Fri, 22 Nov 2024 09:52:00 +0100 Subject: [PATCH 2/3] Reseting focus when clicking also on Save button --- .../components/settings/default_settings_flyout.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) 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 f1847c8d09f5b..5652e0771e1a8 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 @@ -31,7 +31,6 @@ import { docLinks } from '../../../shared/doc_links'; import { SettingsLogic } from './settings_logic'; import { SettingsPanel } from './settings_panel'; -import { element } from 'prop-types'; export interface DefaultSettingsFlyoutProps { closeFlyout: () => void; @@ -57,7 +56,7 @@ export const DefaultSettingsFlyout: React.FC = ({ cl reduce_whitespace: reduceWhitespace, run_ml_inference: runMLInference, } = pipelineState; - const elementRef = useRef(null); + const elementRef = useRef(null); return ( @@ -208,8 +207,8 @@ export const DefaultSettingsFlyout: React.FC = ({ cl disabled={hasNoChanges} isLoading={isLoading} onClick={() => { - elementRef.current?.focus(); setPipeline(defaultPipeline); + elementRef.current?.focus(); }} data-test-subj={'entSearchContentSettingsResetButton'} > @@ -224,7 +223,10 @@ export const DefaultSettingsFlyout: React.FC = ({ cl fill disabled={hasNoChanges} isLoading={isLoading} - onClick={() => makeRequest(pipelineState)} + onClick={() => { + makeRequest(pipelineState); + elementRef.current?.focus(); + }} data-test-subj={'entSearchContentSettingsSaveButton'} > {i18n.translate('xpack.enterpriseSearch.content.settings.saveButtonLabel', { From b29a1f801b96c37b8b7ca32d9b854ef89b2bbb71 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Jos=C3=A9=20Luis=20Gonz=C3=A1lez?= Date: Fri, 22 Nov 2024 12:32:08 +0100 Subject: [PATCH 3/3] More accesibility context for changes --- .../components/settings/default_settings_flyout.tsx | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) 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'} >