Merge pull request #9666 from jerolimov/odc-6190

Bug 1986988: Add button around pipeline builder icon to make popover accessibly via keyboard

frontend/packages/pipelines-plugin/locales/en/pipelines-plugin.json

@@ -161,6 +161,7 @@
   "Add workspace": "Add workspace",
   "Error loading the tasks.": "Error loading the tasks.",
   "Unable to locate any tasks.": "Unable to locate any tasks.",
+  "Open hint": "Open hint",
   "Resources aren't in beta, so it is recommended to use workspaces instead.": "Resources aren't in beta, so it is recommended to use workspaces instead.",
   "Invalid runAfter": "Invalid runAfter",
   "TaskSpec or TaskRef must be provided.": "TaskSpec or TaskRef must be provided.",

frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineWorkspaceSuggestionIcon.scss

@@ -1,5 +1,4 @@
 .opp-pipeline-workspace-suggestion-icon {
   height: 1rem;
   width: 1rem;
-  cursor: pointer;
 }

frontend/packages/pipelines-plugin/src/components/pipelines/pipeline-builder/PipelineWorkspaceSuggestionIcon.tsx

@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Popover } from '@patternfly/react-core';
+import { Button, ButtonVariant, Popover } from '@patternfly/react-core';
 import { InfoCircleIcon } from '@patternfly/react-icons';
 import { useTranslation } from 'react-i18next';
 
@@ -8,13 +8,16 @@ import './PipelineWorkspaceSuggestionIcon.scss';
 const PipelineWorkspaceSuggestionIcon: React.FC = () => {
   const { t } = useTranslation();
 
+  const ariaLabel = t('pipelines-plugin~Open hint');
   const content = t(
     "pipelines-plugin~Resources aren't in beta, so it is recommended to use workspaces instead.",
   );
 
   return (
     <Popover aria-label={content} bodyContent={content}>
-      <InfoCircleIcon className="opp-pipeline-workspace-suggestion-icon" />
+      <Button isInline variant={ButtonVariant.link} aria-label={ariaLabel}>
+        <InfoCircleIcon className="opp-pipeline-workspace-suggestion-icon" />
+      </Button>
     </Popover>
   );
 };