github-mirrors/kibana
1
0
Fork 0
mirror of https://github.com/elastic/kibana.git synced 2025-04-24 17:59:23 -04:00
Code Issues Projects Releases Packages Wiki Activity

[8.x] [Search][a11y] Fix tooltip missing on keyboard navigation (#201385) (#201932)

Browse source 
# Backport

This will backport the following commits from `main` to `8.x`:
- [[Search][a11y] Fix tooltip missing on keyboard navigation
(#201385)](https://github.com/elastic/kibana/pull/201385)

<!--- Backport version: 9.4.3 -->

### Questions ?
Please refer to the [Backport tool
documentation](https://github.com/sqren/backport)

<!--BACKPORT [{"author":{"name":"Navarone
Feekery","email":"13634519+navarone-feekery@users.noreply.github.com"},"sourceCommit":{"committedDate":"2024-11-27T10:31:31Z","message":"[Search][a11y]
Fix tooltip missing on keyboard navigation (#201385)\n\n## Closes
https://github.com/elastic/kibana/issues/196707\r\n\r\nMove the
`EuiButtonEmpty` element to inside the `EuiTooltip`. The\r\ntooltip
being nested inside the button was preventing the tooltip
from\r\nappearing when focusing with a
keyboard.","sha":"0131eb2d29520ab148f1140a3f07c1b4f4067741","branchLabelMapping":{"^v9.0.0$":"main","^v8.18.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:Search","backport:prev-minor"],"title":"[Search][a11y]
Fix tooltip missing on keyboard
navigation","number":201385,"url":"https://github.com/elastic/kibana/pull/201385","mergeCommit":{"message":"[Search][a11y]
Fix tooltip missing on keyboard navigation (#201385)\n\n## Closes
https://github.com/elastic/kibana/issues/196707\r\n\r\nMove the
`EuiButtonEmpty` element to inside the `EuiTooltip`. The\r\ntooltip
being nested inside the button was preventing the tooltip
from\r\nappearing when focusing with a
keyboard.","sha":"0131eb2d29520ab148f1140a3f07c1b4f4067741"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.0.0","branchLabelMappingKey":"^v9.0.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/201385","number":201385,"mergeCommit":{"message":"[Search][a11y]
Fix tooltip missing on keyboard navigation (#201385)\n\n## Closes
https://github.com/elastic/kibana/issues/196707\r\n\r\nMove the
`EuiButtonEmpty` element to inside the `EuiTooltip`. The\r\ntooltip
being nested inside the button was preventing the tooltip
from\r\nappearing when focusing with a
keyboard.","sha":"0131eb2d29520ab148f1140a3f07c1b4f4067741"}}]}]
BACKPORT-->

Co-authored-by: Navarone Feekery <13634519+navarone-feekery@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2024-11-27 23:29:28 +11:00 • committed by GitHub
parent 09abf5e8ed
commit d3e27346b5
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 24 additions and 13 deletions
Download patch file Download diff file Expand all files Collapse all files

19
x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/inference_pipeline_card.tsx
View file

@ -51,17 +51,11 @@ export const TrainedModelHealthPopover: React.FC<InferencePipeline> = (pipeline)
const { pipelineName } = pipeline;
const actionButton = (
<EuiButtonEmpty
iconSide="right"
flush="both"
iconType="boxesHorizontal"
onClick={() => setIsPopOverOpen(!isPopOverOpen)}
>
<TrainedModelHealth
modelState={pipeline.modelState}
modelStateReason={pipeline.modelStateReason}
/>
</EuiButtonEmpty>
<TrainedModelHealth
modelState={pipeline.modelState}
modelStateReason={pipeline.modelStateReason}
onClickAction={() => setIsPopOverOpen(!isPopOverOpen)}
/>
);
const showConfirmDeleteModal = () => {
@ -81,6 +75,7 @@ export const TrainedModelHealthPopover: React.FC<InferencePipeline> = (pipeline)
<EuiFlexItem>
<span>
<EuiButtonEmpty
data-test-subj="enterpriseSearchTrainedModelHealthPopoverFixIssueInTrainedModelsButton"
data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-fixIssueInTrainedModels`}
size="s"
flush="both"
@ -101,6 +96,7 @@ export const TrainedModelHealthPopover: React.FC<InferencePipeline> = (pipeline)
<EuiFlexItem>
<span>
<EuiButtonEmpty
data-test-subj="enterpriseSearchTrainedModelHealthPopoverViewInStackManagementButton"
data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-stackManagement`}
size="s"
flush="both"
@ -119,6 +115,7 @@ export const TrainedModelHealthPopover: React.FC<InferencePipeline> = (pipeline)
<EuiFlexItem>
<span>
<EuiButtonEmpty
data-test-subj="enterpriseSearchTrainedModelHealthPopoverDetachPipelineButton"
data-telemetry-id={`entSearchContent-${ingestionMethod}-pipelines-inferencePipeline-detachPipeline`}
size="s"
flush="both"

18
x-pack/plugins/enterprise_search/public/applications/enterprise_search_content/components/search_index/pipelines/ml_model_health.tsx
View file

@ -7,7 +7,7 @@
import React from 'react';
import { EuiHealth, EuiToolTip } from '@elastic/eui';
import { EuiButtonEmpty, EuiHealth, EuiToolTip } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { FormattedMessage } from '@kbn/i18n-react';
@ -113,12 +113,14 @@ export interface TrainedModelHealthProps {
modelState: TrainedModelState | MlModelDeploymentState;
modelStateReason?: string;
isDownloadable?: boolean;
onClickAction?: Function;
}
export const TrainedModelHealth: React.FC<TrainedModelHealthProps> = ({
modelState,
modelStateReason,
isDownloadable,
onClickAction,
}) => {
let modelHealth: {
healthColor: string;
@ -207,7 +209,19 @@ export const TrainedModelHealth: React.FC<TrainedModelHealthProps> = ({
}
return (
<EuiToolTip content={modelHealth.tooltipText}>
<EuiHealth color={modelHealth.healthColor}>{modelHealth.healthText}</EuiHealth>
{onClickAction ? (
<EuiButtonEmpty
data-test-subj="enterpriseSearchTrainedModelHealthPopoverButton"
iconSide="right"
flush="both"
iconType="boxesHorizontal"
onClick={() => onClickAction()}
>
<EuiHealth color={modelHealth.healthColor}>{modelHealth.healthText}</EuiHealth>
</EuiButtonEmpty>
) : (
<EuiHealth color={modelHealth.healthColor}>{modelHealth.healthText}</EuiHealth>
)}
</EuiToolTip>
);
};