Btsymbala/keyboard accesibility trusted app deletion (#81156) (#81195)

* Added auto focusing of confirm button in trusted apps deletion dialog on opening. * Updated snapshots. * Updated snapshots after kbn:bootstrap.
elastic · Oct 21, 2020 · d618098 · d618098
1 parent 2a09061
commit d618098
Showing 1 changed file with 20 additions and 3 deletions.
diff --git a/...curity_solution/public/management/pages/trusted_apps/view/trusted_app_deletion_dialog.tsx b/...curity_solution/public/management/pages/trusted_apps/view/trusted_app_deletion_dialog.tsx
@@ -4,13 +4,15 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import React, { memo, useCallback, useMemo } from 'react';
+import React, { FC, memo, useCallback, useEffect, useMemo, useRef } from 'react';
 import { useDispatch } from 'react-redux';
 import { Dispatch } from 'redux';
 import { FormattedMessage } from '@kbn/i18n/react';
 import {
   EuiButton,
   EuiButtonEmpty,
+  EuiButtonProps,
+  PropsForButton,
   EuiModal,
   EuiModalBody,
   EuiModalFooter,
@@ -66,6 +68,21 @@ const getTranslations = (entry: Immutable<TrustedApp> | undefined) => ({
   ),
 });
 
+const AutoFocusButton: FC<PropsForButton<EuiButtonProps>> = memo((props) => {
+  const buttonRef = useRef<HTMLButtonElement>(null);
+  const button = <EuiButton buttonRef={buttonRef} {...props} />;
+
+  useEffect(() => {
+    if (buttonRef.current) {
+      buttonRef.current.focus();
+    }
+  }, []);
+
+  return button;
+});
+
+AutoFocusButton.displayName = 'AutoFocusButton';
+
 export const TrustedAppDeletionDialog = memo(() => {
   const dispatch = useDispatch<Dispatch<AppAction>>();
   const isBusy = useTrustedAppsSelector(isDeletionInProgress);
@@ -100,15 +117,15 @@ export const TrustedAppDeletionDialog = memo(() => {
               {translations.cancelButton}
             </EuiButtonEmpty>
 
-            <EuiButton
+            <AutoFocusButton
               fill
               color="danger"
               onClick={onConfirm}
               isLoading={isBusy}
               data-test-subj={CONFIRM_SUBJ}
             >
               {translations.confirmButton}
-            </EuiButton>
+            </AutoFocusButton>
           </EuiModalFooter>
         </EuiModal>
       </EuiOverlayMask>