Skip to content

[Obs Overview] Replace clickable tooltip with external link#213741

Merged
baileycash-elastic merged 11 commits intoelastic:mainfrom
baileycash-elastic:slo-core-web-vitals-link
Mar 17, 2025
Merged

[Obs Overview] Replace clickable tooltip with external link#213741
baileycash-elastic merged 11 commits intoelastic:mainfrom
baileycash-elastic:slo-core-web-vitals-link

Conversation

@baileycash-elastic
Copy link
Contributor

@baileycash-elastic baileycash-elastic commented Mar 10, 2025

Summary

Resolves this issue

Vital links / clickable items should not be hidden behind tooltips that require an additional click, as they do not include necessary indicators for screen readers. Converting the clickable tooltip with the core web vitals docs to a standard link.

Screenshot 2025-03-10 at 9 33 30 AM

@baileycash-elastic baileycash-elastic added release_note:skip Skip the PR/issue when compiling release notes v9.0.0 Team:actionable-obs Formerly "obs-ux-management", responsible for SLO, o11y alerting, significant events, & synthetics. backport:current-major obs-accessibilty A11Y issues in the Obs. solution. v9.1.0 v8.19.0 labels Mar 10, 2025
@baileycash-elastic baileycash-elastic self-assigned this Mar 10, 2025
@baileycash-elastic baileycash-elastic requested a review from a team as a code owner March 10, 2025 13:43
@elasticmachine
Copy link
Contributor

Pinging @elastic/obs-ux-management-team (Team:obs-ux-management)

Copy link
Contributor

@kdelemme kdelemme left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

one comment but otherwise looks good to me

@baileycash-elastic baileycash-elastic requested a review from a team March 12, 2025 18:10
@baileycash-elastic baileycash-elastic force-pushed the slo-core-web-vitals-link branch from b717d99 to c0198dc Compare March 12, 2025 18:12
@baileycash-elastic
Copy link
Contributor Author

@elasticmachine merge upstream

@baileycash-elastic baileycash-elastic enabled auto-merge (squash) March 12, 2025 20:45
Comment on lines 62 to 72
<EuiLink
style={{ fontSize: 14 }}
data-test-subj="o11yWebCoreVitalsTitleLink"
href="https://web.dev/vitals/"
external
target="_blank"
>
{i18n.translate('xpack.observability.ux.dashboard.webCoreVitals.help', {
defaultMessage: 'Learn more',
})}
</EuiLink>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Instead of manually changing the fontSize you could wrap EuiLink with EuiText

Suggested change
<EuiLink
style={{ fontSize: 14 }}
data-test-subj="o11yWebCoreVitalsTitleLink"
href="https://web.dev/vitals/"
external
target="_blank"
>
{i18n.translate('xpack.observability.ux.dashboard.webCoreVitals.help', {
defaultMessage: 'Learn more',
})}
</EuiLink>
<EuiText size="s">
<EuiLink
data-test-subj="o11yWebCoreVitalsTitleLink"
href="https://web.dev/vitals/"
external
target="_blank"
>
{i18n.translate('xpack.observability.ux.dashboard.webCoreVitals.help', {
defaultMessage: 'Learn more',
})}
</EuiLink>
</EuiText>

displayServiceName={true}
serviceName={serviceName}
/>
<div style={{ marginTop: 24 }}>
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Same here:

Suggested change
<div style={{ marginTop: 24 }}>
<EuiSpacer size="xl">

<CoreVitals
data={coreWebVitals}
loading={isLoading}
displayServiceName={true}
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit:

Suggested change
displayServiceName={true}
displayServiceName

<EuiLink
style={{ fontSize: 14 }}
data-test-subj="o11yWebCoreVitalsTitleLink"
href="https://web.dev/vitals/"
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

nit: could we create a constant for this url?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And create a shorter version with Elastic links

Copy link
Contributor Author

@baileycash-elastic baileycash-elastic Mar 13, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

And create a shorter version with Elastic links

Will you share documentation?

Copy link
Contributor

@crespocarlos crespocarlos Mar 14, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Let me know if the updated urls are okay

@baileycash-elastic baileycash-elastic enabled auto-merge (squash) March 13, 2025 17:57
Copy link
Contributor

@crespocarlos crespocarlos left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM!

@baileycash-elastic
Copy link
Contributor Author

@elasticmachine merge upstream

Copy link
Contributor

@cauemarcondes cauemarcondes left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

LGTM

@baileycash-elastic baileycash-elastic merged commit 26d84c4 into elastic:main Mar 17, 2025
9 checks passed
@kibanamachine
Copy link
Contributor

Starting backport for target branches: 8.x, 9.0

https://github.com/elastic/kibana/actions/runs/13902911830

@elasticmachine
Copy link
Contributor

💚 Build Succeeded

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id before after diff
observability 1.3MB 1.3MB -359.0B

History

cc @baileycash-elastic

kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 17, 2025
…213741)

## Summary

Resolves [this issue](elastic#210168)

Vital links / clickable items should not be hidden behind tooltips that
require an additional click, as they do not include necessary indicators
for screen readers. Converting the clickable tooltip with the core web
vitals docs to a standard link.

<img width="1727" alt="Screenshot 2025-03-10 at 9 33 30 AM"
src="https://github.com/user-attachments/assets/ab611238-1fa1-455b-b0c4-563ae875e51d"
/>

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit 26d84c4)
kibanamachine pushed a commit to kibanamachine/kibana that referenced this pull request Mar 17, 2025
…213741)

## Summary

Resolves [this issue](elastic#210168)

Vital links / clickable items should not be hidden behind tooltips that
require an additional click, as they do not include necessary indicators
for screen readers. Converting the clickable tooltip with the core web
vitals docs to a standard link.

<img width="1727" alt="Screenshot 2025-03-10 at 9 33 30 AM"
src="https://github.com/user-attachments/assets/ab611238-1fa1-455b-b0c4-563ae875e51d"
/>

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
(cherry picked from commit 26d84c4)
@kibanamachine
Copy link
Contributor

💚 All backports created successfully

Status Branch Result
8.x
9.0

Note: Successful backport PRs will be merged automatically after passing CI.

Questions ?

Please refer to the Backport tool documentation

kibanamachine added a commit that referenced this pull request Mar 17, 2025
…13741) (#214799)

# Backport

This will backport the following commits from `main` to `8.x`:
- [[Obs Overview] Replace clickable tooltip with external link
(#213741)](#213741)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Bailey
Cash","email":"bailey.cash@elastic.co"},"sourceCommit":{"committedDate":"2025-03-17T15:09:13Z","message":"[Obs
Overview] Replace clickable tooltip with external link (#213741)\n\n##
Summary\n\nResolves [this
issue](https://github.com/elastic/kibana/issues/210168)\n\nVital links /
clickable items should not be hidden behind tooltips that\nrequire an
additional click, as they do not include necessary indicators\nfor
screen readers. Converting the clickable tooltip with the core
web\nvitals docs to a standard link.\n\n<img width=\"1727\"
alt=\"Screenshot 2025-03-10 at 9 33
30 AM\"\nsrc=\"https://github.com/user-attachments/assets/ab611238-1fa1-455b-b0c4-563ae875e51d\"\n/>\n\n---------\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"26d84c4e1375362ef3a494fb9c9961c17e3ea1f8","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:obs-ux-management","backport:current-major","obs-accessibilty","v9.1.0","v8.19.0"],"title":"[Obs
Overview] Replace clickable tooltip with external
link","number":213741,"url":"https://github.com/elastic/kibana/pull/213741","mergeCommit":{"message":"[Obs
Overview] Replace clickable tooltip with external link (#213741)\n\n##
Summary\n\nResolves [this
issue](https://github.com/elastic/kibana/issues/210168)\n\nVital links /
clickable items should not be hidden behind tooltips that\nrequire an
additional click, as they do not include necessary indicators\nfor
screen readers. Converting the clickable tooltip with the core
web\nvitals docs to a standard link.\n\n<img width=\"1727\"
alt=\"Screenshot 2025-03-10 at 9 33
30 AM\"\nsrc=\"https://github.com/user-attachments/assets/ab611238-1fa1-455b-b0c4-563ae875e51d\"\n/>\n\n---------\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"26d84c4e1375362ef3a494fb9c9961c17e3ea1f8"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/213741","number":213741,"mergeCommit":{"message":"[Obs
Overview] Replace clickable tooltip with external link (#213741)\n\n##
Summary\n\nResolves [this
issue](https://github.com/elastic/kibana/issues/210168)\n\nVital links /
clickable items should not be hidden behind tooltips that\nrequire an
additional click, as they do not include necessary indicators\nfor
screen readers. Converting the clickable tooltip with the core
web\nvitals docs to a standard link.\n\n<img width=\"1727\"
alt=\"Screenshot 2025-03-10 at 9 33
30 AM\"\nsrc=\"https://github.com/user-attachments/assets/ab611238-1fa1-455b-b0c4-563ae875e51d\"\n/>\n\n---------\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"26d84c4e1375362ef3a494fb9c9961c17e3ea1f8"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Bailey Cash <bailey.cash@elastic.co>
kibanamachine added a commit that referenced this pull request Mar 17, 2025
…13741) (#214800)

# Backport

This will backport the following commits from `main` to `9.0`:
- [[Obs Overview] Replace clickable tooltip with external link
(#213741)](#213741)

<!--- Backport version: 9.6.6 -->

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

<!--BACKPORT [{"author":{"name":"Bailey
Cash","email":"bailey.cash@elastic.co"},"sourceCommit":{"committedDate":"2025-03-17T15:09:13Z","message":"[Obs
Overview] Replace clickable tooltip with external link (#213741)\n\n##
Summary\n\nResolves [this
issue](https://github.com/elastic/kibana/issues/210168)\n\nVital links /
clickable items should not be hidden behind tooltips that\nrequire an
additional click, as they do not include necessary indicators\nfor
screen readers. Converting the clickable tooltip with the core
web\nvitals docs to a standard link.\n\n<img width=\"1727\"
alt=\"Screenshot 2025-03-10 at 9 33
30 AM\"\nsrc=\"https://github.com/user-attachments/assets/ab611238-1fa1-455b-b0c4-563ae875e51d\"\n/>\n\n---------\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"26d84c4e1375362ef3a494fb9c9961c17e3ea1f8","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:skip","v9.0.0","Team:obs-ux-management","backport:current-major","obs-accessibilty","v9.1.0","v8.19.0"],"title":"[Obs
Overview] Replace clickable tooltip with external
link","number":213741,"url":"https://github.com/elastic/kibana/pull/213741","mergeCommit":{"message":"[Obs
Overview] Replace clickable tooltip with external link (#213741)\n\n##
Summary\n\nResolves [this
issue](https://github.com/elastic/kibana/issues/210168)\n\nVital links /
clickable items should not be hidden behind tooltips that\nrequire an
additional click, as they do not include necessary indicators\nfor
screen readers. Converting the clickable tooltip with the core
web\nvitals docs to a standard link.\n\n<img width=\"1727\"
alt=\"Screenshot 2025-03-10 at 9 33
30 AM\"\nsrc=\"https://github.com/user-attachments/assets/ab611238-1fa1-455b-b0c4-563ae875e51d\"\n/>\n\n---------\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"26d84c4e1375362ef3a494fb9c9961c17e3ea1f8"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/213741","number":213741,"mergeCommit":{"message":"[Obs
Overview] Replace clickable tooltip with external link (#213741)\n\n##
Summary\n\nResolves [this
issue](https://github.com/elastic/kibana/issues/210168)\n\nVital links /
clickable items should not be hidden behind tooltips that\nrequire an
additional click, as they do not include necessary indicators\nfor
screen readers. Converting the clickable tooltip with the core
web\nvitals docs to a standard link.\n\n<img width=\"1727\"
alt=\"Screenshot 2025-03-10 at 9 33
30 AM\"\nsrc=\"https://github.com/user-attachments/assets/ab611238-1fa1-455b-b0c4-563ae875e51d\"\n/>\n\n---------\n\nCo-authored-by:
Elastic Machine
<elasticmachine@users.noreply.github.com>","sha":"26d84c4e1375362ef3a494fb9c9961c17e3ea1f8"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Bailey Cash <bailey.cash@elastic.co>
clintandrewhall pushed a commit to clintandrewhall/kibana that referenced this pull request Mar 20, 2025
…213741)

## Summary

Resolves [this issue](elastic#210168)

Vital links / clickable items should not be hidden behind tooltips that
require an additional click, as they do not include necessary indicators
for screen readers. Converting the clickable tooltip with the core web
vitals docs to a standard link.

<img width="1727" alt="Screenshot 2025-03-10 at 9 33 30 AM"
src="https://github.com/user-attachments/assets/ab611238-1fa1-455b-b0c4-563ae875e51d"
/>

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
CAWilson94 pushed a commit to CAWilson94/kibana that referenced this pull request Mar 22, 2025
…213741)

## Summary

Resolves [this issue](elastic#210168)

Vital links / clickable items should not be hidden behind tooltips that
require an additional click, as they do not include necessary indicators
for screen readers. Converting the clickable tooltip with the core web
vitals docs to a standard link.

<img width="1727" alt="Screenshot 2025-03-10 at 9 33 30 AM"
src="https://github.com/user-attachments/assets/ab611238-1fa1-455b-b0c4-563ae875e51d"
/>

---------

Co-authored-by: Elastic Machine <elasticmachine@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

obs-accessibilty A11Y issues in the Obs. solution. release_note:skip Skip the PR/issue when compiling release notes Team:actionable-obs Formerly "obs-ux-management", responsible for SLO, o11y alerting, significant events, & synthetics. v8.19.0 v9.0.0 v9.1.0

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[Observability:Overview page]Issues with Core web vitals info graphic

6 participants