[Security Solution] Accessibility (a11y) fixes (#87783)

## [Security Solution] Accessibility (a11y) fixes

This PR fixes the following accessibility (a11y) issues:

- Fixes an issue that prevented tabbing through all elements on pages with embedded Timelines
- Fixes an issue where the Timeline data providers popover menu was not displayed when Enter is pressed
- Fixes an issue where duplicate draggable IDs caused errors when re-arranging Timeline columns
- Fixes an issue where Timeline columns could not be removed or sorted via keyboard
- Fixes an issue where focus is not restored to the `Customize Columns` button when the `Reset` button is pressed
- Fixes an issue where filtering the `Customize Event Renderers` view via the input cleared selected entries
- Fixes an issue where the active timeline button wasn't focused when Timeline is closed
- Fixes an issue where the `(+)` Create / Open Timeline button's hover panel didn't own focus

Author: andrew-goldstein

x-pack/plugins/security_solution/cypress/integration/fields_browser.spec.ts

@@ -16,6 +16,7 @@ import {
   FIELDS_BROWSER_SELECTED_CATEGORY_COUNT,
   FIELDS_BROWSER_SYSTEM_CATEGORIES_COUNT,
 } from '../screens/fields_browser';
+import { TIMELINE_FIELDS_BUTTON } from '../screens/timeline';
 import { cleanKibana } from '../tasks/common';
 
 import {
@@ -182,5 +183,19 @@ describe('Fields Browser', () => {
 
       cy.get(FIELDS_BROWSER_HEADER_HOST_GEO_CONTINENT_NAME_HEADER).should('not.exist');
     });
+
+    it('restores focus to the Customize Columns button when `Reset Fields` is clicked', () => {
+      openTimelineFieldsBrowser();
+      resetFields();
+
+      cy.get(TIMELINE_FIELDS_BUTTON).should('have.focus');
+    });
+
+    it('restores focus to the Customize Columns button when Esc is pressed', () => {
+      openTimelineFieldsBrowser();
+      cy.get('body').type('{esc}');
+
+      cy.get(TIMELINE_FIELDS_BUTTON).should('have.focus');
+    });
   });
 });

x-pack/plugins/security_solution/cypress/integration/timeline_data_providers.spec.ts

@@ -8,6 +8,7 @@ import {
   TIMELINE_DATA_PROVIDERS,
   TIMELINE_DATA_PROVIDERS_EMPTY,
   TIMELINE_DROPPED_DATA_PROVIDERS,
+  TIMELINE_DATA_PROVIDERS_ACTION_MENU,
 } from '../screens/timeline';
 import { HOSTS_NAMES_DRAGGABLE } from '../screens/hosts/all_hosts';
 
@@ -53,6 +54,17 @@ describe('timeline data providers', () => {
       });
   });
 
+  it('displays the data provider action menu when Enter is pressed', () => {
+    dragAndDropFirstHostToTimeline();
+    openTimelineUsingToggle();
+    cy.get(TIMELINE_DATA_PROVIDERS_ACTION_MENU).should('not.exist');
+
+    cy.get(TIMELINE_DROPPED_DATA_PROVIDERS).first().focus();
+    cy.get(TIMELINE_DROPPED_DATA_PROVIDERS).first().parent().type('{enter}');
+
+    cy.get(TIMELINE_DATA_PROVIDERS_ACTION_MENU).should('exist');
+  });
+
   it('sets the background to euiColorSuccess with a 10% alpha channel when the user starts dragging a host, but is not hovering over the data providers', () => {
     dragFirstHostToTimeline();
 

x-pack/plugins/security_solution/cypress/integration/timeline_flyout_button.spec.ts

@@ -4,12 +4,22 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
-import { TIMELINE_FLYOUT_HEADER, TIMELINE_DATA_PROVIDERS } from '../screens/timeline';
+import { TIMELINE_BOTTOM_BAR_TOGGLE_BUTTON } from '../screens/security_main';
+import {
+  CREATE_NEW_TIMELINE,
+  TIMELINE_DATA_PROVIDERS,
+  TIMELINE_FLYOUT_HEADER,
+  TIMELINE_SETTINGS_ICON,
+} from '../screens/timeline';
 import { cleanKibana } from '../tasks/common';
 
 import { dragFirstHostToTimeline, waitForAllHostsToBeLoaded } from '../tasks/hosts/all_hosts';
 import { loginAndWaitForPage } from '../tasks/login';
-import { openTimelineUsingToggle, closeTimelineUsingToggle } from '../tasks/security_main';
+import {
+  closeTimelineUsingCloseButton,
+  closeTimelineUsingToggle,
+  openTimelineUsingToggle,
+} from '../tasks/security_main';
 
 import { HOSTS_URL } from '../urls/navigation';
 
@@ -26,6 +36,34 @@ describe('timeline flyout button', () => {
     closeTimelineUsingToggle();
   });
 
+  it('re-focuses the toggle button when timeline is closed by clicking the active timeline toggle button', () => {
+    openTimelineUsingToggle();
+    closeTimelineUsingToggle();
+
+    cy.get(TIMELINE_BOTTOM_BAR_TOGGLE_BUTTON).should('have.focus');
+  });
+
+  it('re-focuses the toggle button when timeline is closed by clicking the [X] close button', () => {
+    openTimelineUsingToggle();
+    closeTimelineUsingCloseButton();
+
+    cy.get(TIMELINE_BOTTOM_BAR_TOGGLE_BUTTON).should('have.focus');
+  });
+
+  it('re-focuses the toggle button when timeline is closed by pressing the Esc key', () => {
+    openTimelineUsingToggle();
+    cy.get('body').type('{esc}');
+
+    cy.get(TIMELINE_BOTTOM_BAR_TOGGLE_BUTTON).should('have.focus');
+  });
+
+  it('the `(+)` button popover menu owns focus', () => {
+    cy.get(TIMELINE_SETTINGS_ICON).filter(':visible').click({ force: true });
+    cy.get(CREATE_NEW_TIMELINE).should('have.focus');
+    cy.get('body').type('{esc}');
+    cy.get(CREATE_NEW_TIMELINE).should('not.be.visible');
+  });
+
   it('sets the data providers background to euiColorSuccess with a 10% alpha channel when the user starts dragging a host, but is not hovering over the data providers area', () => {
     dragFirstHostToTimeline();
 

x-pack/plugins/security_solution/cypress/screens/security_main.ts

@@ -4,6 +4,8 @@
  * you may not use this file except in compliance with the Elastic License.
  */
 
+export const CLOSE_TIMELINE_BUTTON = '[data-test-subj="close-timeline"]';
+
 export const MAIN_PAGE = '[data-test-subj="kibanaChrome"]';
 
 export const TIMELINE_TOGGLE_BUTTON = '[data-test-subj="flyoutOverlay"]';

x-pack/plugins/security_solution/cypress/screens/timeline.ts

@@ -111,6 +111,8 @@ export const TIMELINE_COLUMN_SPINNER = '[data-test-subj="timeline-loading-spinne
 
 export const TIMELINE_DATA_PROVIDERS = '[data-test-subj="dataProviders"]';
 
+export const TIMELINE_DATA_PROVIDERS_ACTION_MENU = '[data-test-subj="providerActions"]';
+
 export const TIMELINE_DATA_PROVIDERS_EMPTY =
   '[data-test-subj="dataProviders"] [data-test-subj="empty"]';
 

x-pack/plugins/security_solution/cypress/tasks/security_main.ts

@@ -5,6 +5,7 @@
  */
 
 import {
+  CLOSE_TIMELINE_BUTTON,
   MAIN_PAGE,
   TIMELINE_TOGGLE_BUTTON,
   TIMELINE_BOTTOM_BAR_TOGGLE_BUTTON,
@@ -18,6 +19,10 @@ export const closeTimelineUsingToggle = () => {
   cy.get(TIMELINE_TOGGLE_BUTTON).filter(':visible').click();
 };
 
+export const closeTimelineUsingCloseButton = () => {
+  cy.get(CLOSE_TIMELINE_BUTTON).filter(':visible').click();
+};
+
 export const openTimelineIfClosed = () =>
   cy.get(MAIN_PAGE).then(($page) => {
     if ($page.find(TIMELINE_BOTTOM_BAR_TOGGLE_BUTTON).length === 1) {

x-pack/plugins/security_solution/public/detections/components/alerts_table/alerts_utility_bar/index.tsx

@@ -220,7 +220,7 @@ const AlertsUtilityBarComponent: React.FC<AlertsUtilityBarProps> = ({
               disabled={areEventsLoading}
               iconType="arrowDown"
               iconSide="right"
-              ownFocus={false}
+              ownFocus={true}
               popoverContent={UtilityBarAdditionalFiltersContent}
             >
               {i18n.ADDITIONAL_FILTERS_ACTIONS}

x-pack/plugins/security_solution/public/detections/pages/detection_engine/detection_engine.tsx

@@ -6,14 +6,15 @@
 
 import { EuiSpacer, EuiWindowEvent } from '@elastic/eui';
 import { noop } from 'lodash/fp';
-import React, { useCallback, useMemo, useState } from 'react';
+import React, { useCallback, useMemo, useRef, useState } from 'react';
 import { useDispatch } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 
 import { useDeepEqualSelector, useShallowEqualSelector } from '../../../common/hooks/use_selector';
 import { SecurityPageName } from '../../../app/types';
 import { TimelineId } from '../../../../common/types/timeline';
 import { useGlobalTime } from '../../../common/containers/use_global_time';
+import { isTab } from '../../../common/components/accessibility/helpers';
 import { UpdateDateRange } from '../../../common/components/charts/common';
 import { FiltersGlobal } from '../../../common/components/filters_global';
 import { getRulesUrl } from '../../../common/components/link_to/redirect_to_detection_engine';
@@ -39,7 +40,12 @@ import { LinkButton } from '../../../common/components/links';
 import { useFormatUrl } from '../../../common/components/link_to';
 import { useGlobalFullScreen } from '../../../common/containers/use_full_screen';
 import { Display } from '../../../hosts/pages/display';
-import { showGlobalFilters } from '../../../timelines/components/timeline/helpers';
+import {
+  focusUtilityBarAction,
+  onTimelineTabKeyPressed,
+  resetKeyboardFocus,
+  showGlobalFilters,
+} from '../../../timelines/components/timeline/helpers';
 import { timelineSelectors } from '../../../timelines/store/timeline';
 import { timelineDefaults } from '../../../timelines/store/timeline/defaults';
 import { buildShowBuildingBlockFilter } from '../../components/alerts_table/default_config';
@@ -48,6 +54,7 @@ import { SourcererScopeName } from '../../../common/store/sourcerer/model';
 
 const DetectionEnginePageComponent = () => {
   const dispatch = useDispatch();
+  const containerElement = useRef<HTMLDivElement | null>(null);
   const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
   const graphEventId = useShallowEqualSelector(
     (state) => (getTimeline(state, TimelineId.detectionsPage) ?? timelineDefaults).graphEventId
@@ -128,6 +135,28 @@ const DetectionEnginePageComponent = () => {
 
   const { indicesExist, indexPattern } = useSourcererScope(SourcererScopeName.detections);
 
+  const onSkipFocusBeforeEventsTable = useCallback(() => {
+    focusUtilityBarAction(containerElement.current);
+  }, [containerElement]);
+
+  const onSkipFocusAfterEventsTable = useCallback(() => {
+    resetKeyboardFocus();
+  }, []);
+
+  const onKeyDown = useCallback(
+    (keyboardEvent: React.KeyboardEvent) => {
+      if (isTab(keyboardEvent)) {
+        onTimelineTabKeyPressed({
+          containerElement: containerElement.current,
+          keyboardEvent,
+          onSkipFocusBeforeEventsTable,
+          onSkipFocusAfterEventsTable,
+        });
+      }
+    },
+    [containerElement, onSkipFocusBeforeEventsTable, onSkipFocusAfterEventsTable]
+  );
+
   if (isUserAuthenticated != null && !isUserAuthenticated && !loading) {
     return (
       <WrapperPage>
@@ -154,7 +183,7 @@ const DetectionEnginePageComponent = () => {
       {hasEncryptionKey != null && !hasEncryptionKey && <NoApiIntegrationKeyCallOut />}
       <ReadOnlyAlertsCallOut />
       {indicesExist ? (
-        <>
+        <div onKeyDown={onKeyDown} ref={containerElement}>
           <EuiWindowEvent event="resize" handler={noop} />
           <FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId })}>
             <SiemSearchBar id="global" indexPattern={indexPattern} />
@@ -211,7 +240,7 @@ const DetectionEnginePageComponent = () => {
               to={to}
             />
           </WrapperPage>
-        </>
+        </div>
       ) : (
         <WrapperPage>
           <DetectionEngineHeaderPage border title={i18n.PAGE_TITLE} />

x-pack/plugins/security_solution/public/detections/pages/detection_engine/rules/details/index.tsx

@@ -19,7 +19,7 @@ import {
 } from '@elastic/eui';
 import { FormattedMessage } from '@kbn/i18n/react';
 import { noop } from 'lodash/fp';
-import React, { useCallback, useEffect, useMemo, useState } from 'react';
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
 import { useParams, useHistory } from 'react-router-dom';
 import { useDispatch } from 'react-redux';
 
@@ -81,7 +81,12 @@ import { useGlobalFullScreen } from '../../../../../common/containers/use_full_s
 import { Display } from '../../../../../hosts/pages/display';
 import { ExceptionListTypeEnum, ExceptionListIdentifiers } from '../../../../../shared_imports';
 import { useRuleAsync } from '../../../../containers/detection_engine/rules/use_rule_async';
-import { showGlobalFilters } from '../../../../../timelines/components/timeline/helpers';
+import {
+  focusUtilityBarAction,
+  onTimelineTabKeyPressed,
+  resetKeyboardFocus,
+  showGlobalFilters,
+} from '../../../../../timelines/components/timeline/helpers';
 import { timelineSelectors } from '../../../../../timelines/store/timeline';
 import { timelineDefaults } from '../../../../../timelines/store/timeline/defaults';
 import { useSourcererScope } from '../../../../../common/containers/sourcerer';
@@ -95,6 +100,7 @@ import {
 import * as detectionI18n from '../../translations';
 import * as ruleI18n from '../translations';
 import * as i18n from './translations';
+import { isTab } from '../../../../../common/components/accessibility/helpers';
 
 enum RuleDetailTabs {
   alerts = 'alerts',
@@ -127,6 +133,7 @@ const getRuleDetailsTabs = (rule: Rule | null) => {
 
 const RuleDetailsPageComponent = () => {
   const dispatch = useDispatch();
+  const containerElement = useRef<HTMLDivElement | null>(null);
   const getTimeline = useMemo(() => timelineSelectors.getTimelineByIdSelector(), []);
   const graphEventId = useShallowEqualSelector(
     (state) =>
@@ -408,6 +415,28 @@ const RuleDetailsPageComponent = () => {
     }
   }, [rule]);
 
+  const onSkipFocusBeforeEventsTable = useCallback(() => {
+    focusUtilityBarAction(containerElement.current);
+  }, [containerElement]);
+
+  const onSkipFocusAfterEventsTable = useCallback(() => {
+    resetKeyboardFocus();
+  }, []);
+
+  const onKeyDown = useCallback(
+    (keyboardEvent: React.KeyboardEvent) => {
+      if (isTab(keyboardEvent)) {
+        onTimelineTabKeyPressed({
+          containerElement: containerElement.current,
+          keyboardEvent,
+          onSkipFocusBeforeEventsTable,
+          onSkipFocusAfterEventsTable,
+        });
+      }
+    },
+    [containerElement, onSkipFocusBeforeEventsTable, onSkipFocusAfterEventsTable]
+  );
+
   if (
     redirectToDetections(
       isSignalIndexExists,
@@ -430,7 +459,7 @@ const RuleDetailsPageComponent = () => {
       <ReadOnlyAlertsCallOut />
       <ReadOnlyRulesCallOut />
       {indicesExist ? (
-        <>
+        <div onKeyDown={onKeyDown} ref={containerElement}>
           <EuiWindowEvent event="resize" handler={noop} />
           <FiltersGlobal show={showGlobalFilters({ globalFullScreen, graphEventId })}>
             <SiemSearchBar id="global" indexPattern={indexPattern} />
@@ -588,7 +617,7 @@ const RuleDetailsPageComponent = () => {
             )}
             {ruleDetailTab === RuleDetailTabs.failures && <FailureHistory id={rule?.id} />}
           </WrapperPage>
-        </>
+        </div>
       ) : (
         <WrapperPage>
           <DetectionEngineHeaderPage border title={i18n.PAGE_TITLE} />