[Security Solution][A11Y] add aria labels to flyout panels to support screen readers (elastic#250824)

## Summary

[Issue 1](elastic#250130)
[Issue 2](elastic#250337)

This is a partial fix for issue 1, and full fix for issue 2. It does not
address the history button popover (issue 1), which will be a separate
PR. This PR adds an aria label to the the security solution flyout based
on the panel it hosts.

Used AI to generate the `panel_aria_labels.ts` file. It looks reasonable
to me but not sure if the default descriptions are entirely correct
(might be lacking some context).


https://github.com/user-attachments/assets/0d1203e0-5f47-44dd-92c6-73b344bf816c

### Checklist

Check the PR satisfies following conditions. 

Reviewers should verify this PR satisfies this list as well.

- [ ] Any text added follows [EUI's writing
guidelines](https://elastic.github.io/eui/#/guidelines/writing), uses
sentence case text and includes [i18n
support](https://github.com/elastic/kibana/blob/main/src/platform/packages/shared/kbn-i18n/README.md)
- [ ]
[Documentation](https://www.elastic.co/guide/en/kibana/master/development-documentation.html)
was added for features that require explanation or tutorials
- [ ] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [ ] If a plugin configuration key changed, check if it needs to be
allowlisted in the cloud and added to the [docker
list](https://github.com/elastic/kibana/blob/main/src/dev/build/tasks/os_packages/docker_generator/resources/base/bin/kibana-docker)
- [ ] This was checked for breaking HTTP API changes, and any breaking
changes have been approved by the breaking-change committee. The
`release_note:breaking` label should be applied in these situations.
- [ ] [Flaky Test
Runner](https://ci-stats.kibana.dev/trigger_flaky_test_runner/1) was
used on any tests changed
- [ ] The PR description includes the appropriate Release Notes section,
and the correct `release_note:*` label is applied per the
[guidelines](https://www.elastic.co/guide/en/kibana/master/contributing.html#kibana-release-notes-process)
- [ ] Review the [backport
guidelines](https://docs.google.com/document/d/1VyN5k91e5OVumlc0Gb9RPa3h1ewuPE705nRtioPiTvY/edit?usp=sharing)
and apply applicable `backport:*` labels.

Author: kelvtanv

x-pack/solutions/security/packages/expandable-flyout/src/components/container.tsx

@@ -170,6 +170,11 @@ export const Container: React.FC<ContainerProps> = memo(
       type,
     ]);
 
+    const flyoutAriaLabel = useMemo(() => {
+      const registeredPanel = registeredPanels.find((panel) => panel.key === right?.id);
+      return registeredPanel?.['aria-label'];
+    }, [registeredPanels, right?.id]);
+
     // callback function called when user changes the flyout's width
     const onResize = useCallback(
       (width: number) => {
@@ -219,6 +224,7 @@ export const Container: React.FC<ContainerProps> = memo(
         css={customStyles}
         onResize={onResize}
         minWidth={minFlyoutWidth}
+        aria-label={flyoutAriaLabel}
       >
         <ResizableContainer
           leftComponent={leftComponent as React.ReactElement}

x-pack/solutions/security/packages/expandable-flyout/src/types.ts

@@ -85,6 +85,10 @@ export interface Panel {
    * Component to be rendered
    */
   component: (props: FlyoutPanelProps) => React.ReactElement;
+  /**
+   * Human-readable label for the panel
+   */
+  'aria-label'?: string;
 }
 
 export interface FlyoutPanelHistory {

x-pack/solutions/security/plugins/security_solution/public/flyout/index.tsx

@@ -74,6 +74,37 @@ import type { ServicePanelExpandableFlyoutProps } from './entity_details/service
 import { ServicePanel } from './entity_details/service_right';
 import type { ServiceDetailsExpandableFlyoutProps } from './entity_details/service_details_left';
 import { ServiceDetailsPanel, ServiceDetailsPanelKey } from './entity_details/service_details_left';
+import {
+  ATTACK_DETAILS_RIGHT_PANEL_ARIA_LABEL,
+  DOCUMENT_DETAILS_ALERT_REASON_PANEL_ARIA_LABEL,
+  DOCUMENT_DETAILS_ANALYZER_PANEL_ARIA_LABEL,
+  DOCUMENT_DETAILS_ISOLATE_HOST_PANEL_ARIA_LABEL,
+  DOCUMENT_DETAILS_LEFT_PANEL_ARIA_LABEL,
+  DOCUMENT_DETAILS_PREVIEW_PANEL_ARIA_LABEL,
+  DOCUMENT_DETAILS_RIGHT_PANEL_ARIA_LABEL,
+  DOCUMENT_DETAILS_SESSION_VIEW_PANEL_ARIA_LABEL,
+  EASE_PANEL_ARIA_LABEL,
+  GENERIC_ENTITY_DETAILS_PANEL_ARIA_LABEL,
+  GENERIC_ENTITY_PANEL_ARIA_LABEL,
+  GRAPH_GROUPED_NODE_PREVIEW_PANEL_ARIA_LABEL,
+  HOST_DETAILS_PANEL_ARIA_LABEL,
+  HOST_PANEL_ARIA_LABEL,
+  HOST_PREVIEW_PANEL_ARIA_LABEL,
+  IOC_RIGHT_PANEL_ARIA_LABEL,
+  MISCONFIGURATION_FINDINGS_PREVIEW_PANEL_ARIA_LABEL,
+  MISCONFIGURATION_PANEL_ARIA_LABEL,
+  NETWORK_PANEL_ARIA_LABEL,
+  NETWORK_PREVIEW_PANEL_ARIA_LABEL,
+  RULE_PANEL_ARIA_LABEL,
+  RULE_PREVIEW_PANEL_ARIA_LABEL,
+  SERVICE_DETAILS_PANEL_ARIA_LABEL,
+  SERVICE_PANEL_ARIA_LABEL,
+  USER_DETAILS_PANEL_ARIA_LABEL,
+  USER_PANEL_ARIA_LABEL,
+  USER_PREVIEW_PANEL_ARIA_LABEL,
+  VULNERABILITY_FINDINGS_PANEL_ARIA_LABEL,
+  VULNERABILITY_FINDINGS_PREVIEW_PANEL_ARIA_LABEL,
+} from './panel_aria_labels';
 import {
   MisconfigurationFindingsPanelKey,
   MisconfigurationFindingsPreviewPanelKey,
@@ -104,14 +135,15 @@ const GraphGroupedNodePreviewPanel = React.lazy(() =>
  * List of all panels that will be used within the document details expandable flyout.
  * This needs to be passed to the expandable flyout registeredPanels property.
  */
-const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels'] = [
+export const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels'] = [
   {
     key: DocumentDetailsRightPanelKey,
     component: (props) => (
       <DocumentDetailsProvider {...(props as DocumentDetailsProps).params}>
         <RightPanel path={props.path as DocumentDetailsProps['path']} />
       </DocumentDetailsProvider>
     ),
+    'aria-label': DOCUMENT_DETAILS_RIGHT_PANEL_ARIA_LABEL,
   },
   {
     key: DocumentDetailsLeftPanelKey,
@@ -120,6 +152,7 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         <LeftPanel path={props.path as DocumentDetailsProps['path']} />
       </DocumentDetailsProvider>
     ),
+    'aria-label': DOCUMENT_DETAILS_LEFT_PANEL_ARIA_LABEL,
   },
   {
     key: DocumentDetailsPreviewPanelKey,
@@ -128,6 +161,7 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         <PreviewPanel path={props.path as DocumentDetailsProps['path']} />
       </DocumentDetailsProvider>
     ),
+    'aria-label': DOCUMENT_DETAILS_PREVIEW_PANEL_ARIA_LABEL,
   },
   {
     key: DocumentDetailsAlertReasonPanelKey,
@@ -136,6 +170,7 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         <AlertReasonPanel />
       </AlertReasonPanelProvider>
     ),
+    'aria-label': DOCUMENT_DETAILS_ALERT_REASON_PANEL_ARIA_LABEL,
   },
   {
     key: GraphGroupedNodePreviewPanelKey,
@@ -144,16 +179,19 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
       const params = props.params as unknown as GraphGroupedNodePreviewPanelProps;
       return <GraphGroupedNodePreviewPanel {...params} />;
     },
+    'aria-label': GRAPH_GROUPED_NODE_PREVIEW_PANEL_ARIA_LABEL,
   },
   {
     key: RulePanelKey,
     component: (props) => <RulePanel {...(props as RulePanelExpandableFlyoutProps).params} />,
+    'aria-label': RULE_PANEL_ARIA_LABEL,
   },
   {
     key: RulePreviewPanelKey,
     component: (props) => (
       <RulePanel {...(props as RulePanelExpandableFlyoutProps).params} isPreviewMode />
     ),
+    'aria-label': RULE_PREVIEW_PANEL_ARIA_LABEL,
   },
   {
     key: DocumentDetailsIsolateHostPanelKey,
@@ -162,12 +200,14 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         <IsolateHostPanel path={props.path as IsolateHostPanelProps['path']} />
       </IsolateHostPanelProvider>
     ),
+    'aria-label': DOCUMENT_DETAILS_ISOLATE_HOST_PANEL_ARIA_LABEL,
   },
   {
     key: DocumentDetailsAnalyzerPanelKey,
     component: (props) => (
       <AnalyzerPanel {...(props as AnalyzerPanelExpandableFlyoutProps).params} />
     ),
+    'aria-label': DOCUMENT_DETAILS_ANALYZER_PANEL_ARIA_LABEL,
   },
   {
     key: DocumentDetailsSessionViewPanelKey,
@@ -176,71 +216,84 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         <SessionViewPanel path={props.path as SessionViewPanelProps['path']} />
       </SessionViewPanelProvider>
     ),
+    'aria-label': DOCUMENT_DETAILS_SESSION_VIEW_PANEL_ARIA_LABEL,
   },
   {
     key: UserPanelKey,
     component: (props) => <UserPanel {...(props as UserPanelExpandableFlyoutProps).params} />,
+    'aria-label': USER_PANEL_ARIA_LABEL,
   },
   {
     key: UserDetailsPanelKey,
     component: (props) => (
       <UserDetailsPanel {...(props as UserDetailsExpandableFlyoutProps).params} />
     ),
+    'aria-label': USER_DETAILS_PANEL_ARIA_LABEL,
   },
   {
     key: UserPreviewPanelKey,
     component: (props) => (
       <UserPanel {...(props as UserPanelExpandableFlyoutProps).params} isPreviewMode />
     ),
+    'aria-label': USER_PREVIEW_PANEL_ARIA_LABEL,
   },
   {
     key: HostPanelKey,
     component: (props) => <HostPanel {...(props as HostPanelExpandableFlyoutProps).params} />,
+    'aria-label': HOST_PANEL_ARIA_LABEL,
   },
   {
     key: HostDetailsPanelKey,
     component: (props) => (
       <HostDetailsPanel {...(props as HostDetailsExpandableFlyoutProps).params} />
     ),
+    'aria-label': HOST_DETAILS_PANEL_ARIA_LABEL,
   },
   {
     key: HostPreviewPanelKey,
     component: (props) => (
       <HostPanel {...(props as HostPanelExpandableFlyoutProps).params} isPreviewMode />
     ),
+    'aria-label': HOST_PREVIEW_PANEL_ARIA_LABEL,
   },
   {
     key: NetworkPanelKey,
     component: (props) => <NetworkPanel {...(props as NetworkExpandableFlyoutProps).params} />,
+    'aria-label': NETWORK_PANEL_ARIA_LABEL,
   },
   {
     key: NetworkPreviewPanelKey,
     component: (props) => (
       <NetworkPanel {...(props as NetworkExpandableFlyoutProps).params} isPreviewMode />
     ),
+    'aria-label': NETWORK_PREVIEW_PANEL_ARIA_LABEL,
   },
 
   {
     key: ServicePanelKey,
     component: (props) => <ServicePanel {...(props as ServicePanelExpandableFlyoutProps).params} />,
+    'aria-label': SERVICE_PANEL_ARIA_LABEL,
   },
   {
     key: ServiceDetailsPanelKey,
     component: (props) => (
       <ServiceDetailsPanel {...(props as ServiceDetailsExpandableFlyoutProps).params} />
     ),
+    'aria-label': SERVICE_DETAILS_PANEL_ARIA_LABEL,
   },
   {
     key: GenericEntityPanelKey,
     component: (props) => (
       <GenericEntityPanel {...(props as GenericEntityPanelExpandableFlyoutProps).params} />
     ),
+    'aria-label': GENERIC_ENTITY_PANEL_ARIA_LABEL,
   },
   {
     key: GenericEntityDetailsPanelKey,
     component: (props) => (
       <GenericEntityDetailsPanel {...(props as GenericEntityDetailsExpandableFlyoutProps).params} />
     ),
+    'aria-label': GENERIC_ENTITY_DETAILS_PANEL_ARIA_LABEL,
   },
   {
     key: MisconfigurationFindingsPanelKey,
@@ -249,6 +302,7 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         {...(props as FindingsMisconfigurationPanelExpandableFlyoutPropsNonPreview).params}
       />
     ),
+    'aria-label': MISCONFIGURATION_PANEL_ARIA_LABEL,
   },
   {
     key: EasePanelKey,
@@ -257,6 +311,7 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         <EasePanel />
       </EaseDetailsProvider>
     ),
+    'aria-label': EASE_PANEL_ARIA_LABEL,
   },
   {
     key: AttackDetailsRightPanelKey,
@@ -265,6 +320,7 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         <AttackDetailsPanel path={props.path as AttackDetailsProps['path']} />
       </AttackDetailsProvider>
     ),
+    'aria-label': ATTACK_DETAILS_RIGHT_PANEL_ARIA_LABEL,
   },
   {
     key: MisconfigurationFindingsPreviewPanelKey,
@@ -273,6 +329,7 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         {...(props as FindingsMisconfigurationPanelExpandableFlyoutPropsPreview).params}
       />
     ),
+    'aria-label': MISCONFIGURATION_FINDINGS_PREVIEW_PANEL_ARIA_LABEL,
   },
   {
     key: VulnerabilityFindingsPanelKey,
@@ -281,6 +338,7 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         {...(props as FindingsVulnerabilityPanelExpandableFlyoutPropsNonPreview).params}
       />
     ),
+    'aria-label': VULNERABILITY_FINDINGS_PANEL_ARIA_LABEL,
   },
   {
     key: VulnerabilityFindingsPreviewPanelKey,
@@ -289,6 +347,7 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         {...(props as FindingsVulnerabilityPanelExpandableFlyoutPropsPreview).params}
       />
     ),
+    'aria-label': VULNERABILITY_FINDINGS_PREVIEW_PANEL_ARIA_LABEL,
   },
   {
     key: IOCRightPanelKey,
@@ -297,6 +356,7 @@ const expandableFlyoutDocumentsPanels: ExpandableFlyoutProps['registeredPanels']
         <IOCPanel path={props.path as IOCDetailsProps['path']} />
       </IOCDetailsProvider>
     ),
+    'aria-label': IOC_RIGHT_PANEL_ARIA_LABEL,
   },
 ];