RHOAIENG-66823: Accessible pipeline run graphs

frontend/docs/pipelines.md

@@ -5,6 +5,13 @@
 - Manage Kubeflow Pipelines (KFP) v2 workflows in a Data Science Project: import definitions, create and schedule runs, inspect DAGs and outputs, compare metrics, and browse MLMD artifacts and executions.
 - Namespace-scoped; requires a ready pipeline server (`DSPipelineKind` CR) before operations are available.
 
+## Keyboard interaction with pipeline graphs
+
+- Tab through task, artifact, and task-group controls in visual reading order. Screen readers announce each control's name and available status.
+- Press Enter or Space on a task or artifact to open its details. Closing the details returns focus to the graph control.
+- For a collapsed task group, use its task-list button to choose a child or view group details. Use the task-group toggle to expand or collapse the group.
+- Focusing a graph control pans it into the visible graph viewport when needed.
+
 ## UI Entry Points
 
 | Nav Item | Route | Feature Flag(s) Required |

frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/PipelineDetails.tsx

@@ -89,7 +89,7 @@ const PipelineDetails: PipelineCoreDetailsPageComponent = ({ breadcrumbPath }) =
   const panelContent = selectedNode ? (
     <SelectedTaskDrawerContent
       task={selectedNode.data.pipelineTask}
-      onClose={() => setSelectedIds(undefined)}
+      onClose={() => setSelectedIds([])}
     />
   ) : null;
 

frontend/src/concepts/pipelines/content/pipelinesDetails/pipeline/SelectedTaskDrawerContent.tsx

@@ -22,7 +22,7 @@ const SelectedTaskDrawerContent: React.FC<SelectedTaskDrawerContentProps> = ({ t
   return (
     <>
       <DrawerHead>
-        <Title headingLevel="h2" size="xl" data-testid="pipeline-task-name">
+        <Title headingLevel="h2" size="xl" tabIndex={-1} data-testid="pipeline-drawer-task-title">
           {task.name} {task.type === 'artifact' ? 'Artifact details' : ''}
         </Title>
         <DrawerActions>

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRecurringRun/PipelineRecurringRunDetails.tsx

@@ -83,7 +83,7 @@ const PipelineRecurringRunDetails: PipelineCoreDetailsPageComponent = ({
   const panelContent = selectedNode ? (
     <SelectedTaskDrawerContent
       task={selectedNode.data.pipelineTask}
-      onClose={() => setSelectedIds(undefined)}
+      onClose={() => setSelectedIds([])}
     />
   ) : null;
 

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDetails.tsx

@@ -135,7 +135,7 @@ const PipelineRunDetails: React.FC<
     <PipelineRunDrawerRightContent
       task={selectedNode.data.pipelineTask}
       upstreamTaskName={selectedNode.runAfterTasks?.[0]}
-      onClose={() => setSelectedIds(undefined)}
+      onClose={() => setSelectedIds([])}
       executions={drawerExecutions}
       run={run}
     />

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightContent.tsx

@@ -48,7 +48,12 @@ const PipelineRunDrawerRightContent: React.FC<PipelineRunDrawerRightContentProps
       ) : (
         <>
           <DrawerHead>
-            <Title headingLevel="h2" size="xl">
+            <Title
+              headingLevel="h2"
+              size="xl"
+              tabIndex={-1}
+              data-testid="pipeline-drawer-task-title"
+            >
               {task.name}
             </Title>
             {task.status?.podName && (

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/PipelineRunDrawerRightTabs.tsx

@@ -81,7 +81,12 @@ const PipelineRunDrawerRightTabs: React.FC<PipelineRunDrawerRightTabsProps> = ({
 
   return (
     <>
-      <Tabs activeKey={selection} mountOnEnter>
+      <Tabs
+        activeKey={selection}
+        mountOnEnter
+        aria-label="Pipeline task details"
+        onSelect={(_, tabKey) => setSelection(String(tabKey))}
+      >
         {Object.entries(tabs).map(([tabName, { title, isDisabled }]) => (
           <Tab
             data-testid={`right-drawer-tab-${tabName}`}
@@ -90,7 +95,6 @@ const PipelineRunDrawerRightTabs: React.FC<PipelineRunDrawerRightTabsProps> = ({
             eventKey={tabName}
             tabContentId={tabName}
             isDisabled={isDisabled}
-            onClick={() => setSelection(tabName)}
           />
         ))}
       </Tabs>

frontend/src/concepts/pipelines/content/pipelinesDetails/pipelineRun/artifacts/ArtifactNodeDrawerContent.tsx

@@ -41,7 +41,7 @@ export const ArtifactNodeDrawerContent: React.FC<ArtifactNodeDrawerContentProps>
   return task ? (
     <>
       <DrawerHead>
-        <Title headingLevel="h2" size="xl">
+        <Title headingLevel="h2" size="xl" tabIndex={-1} data-testid="pipeline-drawer-task-title">
           {task.name}
         </Title>
         {task.status?.podName && <Content component="small">{task.status.podName}</Content>}

frontend/src/concepts/pipelines/topology/__tests__/usePipelineTaskTopology.spec.ts

@@ -14,6 +14,7 @@ jest.mock('@patternfly/react-topology', () => ({
     Skipped: 'Skipped',
   },
   observer: (c: unknown) => c,
+  action: (fn: (...args: unknown[]) => unknown) => fn,
   GraphComponent: {},
   ModelKind: { graph: 'graph', node: 'node', edge: 'edge' },
   ComponentFactory: {},

frontend/src/concepts/topology/NodeStatusIcon.tsx

@@ -5,18 +5,31 @@ import {
   CheckCircleIcon,
   ExclamationCircleIcon,
   InProgressIcon,
+  OutlinedWindowRestoreIcon,
   PendingIcon,
 } from '@patternfly/react-icons';
 import { RunStatus } from '@patternfly/react-topology';
 import { Icon, Tooltip } from '@patternfly/react-core';
-import { runtimeStateLabels, RuntimeStateKF } from '#~/concepts/pipelines/kfTypes';
+import {
+  ExecutionStateKF,
+  runtimeStateLabels,
+  RuntimeStateKF,
+} from '#~/concepts/pipelines/kfTypes';
 
-const NodeStatusIcon: React.FC<{ runStatus: RunStatus | string }> = ({ runStatus }) => {
+const NodeStatusIcon: React.FC<{
+  runStatus?: RunStatus | string;
+  executionState?: ExecutionStateKF | string;
+}> = ({ runStatus, executionState }) => {
   let icon: React.ReactNode;
   let status: React.ComponentProps<typeof Icon>['status'];
   let label: string;
 
-  switch (runStatus) {
+  switch (executionState === ExecutionStateKF.CACHED ? ExecutionStateKF.CACHED : runStatus) {
+    case ExecutionStateKF.CACHED:
+      icon = <OutlinedWindowRestoreIcon />;
+      status = 'success';
+      label = 'Cached';
+      break;
     case RunStatus.Pending:
     case RunStatus.Idle:
       icon = <PendingIcon />;
@@ -54,9 +67,13 @@ const NodeStatusIcon: React.FC<{ runStatus: RunStatus | string }> = ({ runStatus
       label = '';
   }
 
+  if (!icon || !label) {
+    return null;
+  }
+
   return (
     <Tooltip content={label}>
-      <Icon status={status} isInline>
+      <Icon status={status} isInline role="img" aria-label={label}>
         {icon}
       </Icon>
     </Tooltip>