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

[8.18] [ObsUX][A11y] Add aria-label to "Show all" links (#217076) (#217175)

Browse source 
# Backport

This will backport the following commits from `main` to `8.18`:
- [[ObsUX][A11y] Add aria-label to "Show all" links
(#217076)](https://github.com/elastic/kibana/pull/217076)

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

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

<!--BACKPORT
[{"author":{"name":"Miriam","email":"31922082+MiriamAparicio@users.noreply.github.com"},"sourceCommit":{"committedDate":"2025-04-04T12:07:58Z","message":"[ObsUX][A11y]
Add aria-label to \"Show all\" links (#217076)\n\nCloses
https://github.com/elastic/kibana/issues/194973\n\n## Summary\n\nThere
are multiple links that say \"Show all\" but do not provide context\nto
answer all of what?\n\n### What was done\nAdded aria-label to all the
\"Show all links\"\n\n### How to test\nUse screen reader to see the
context of the link\n\nEXAMPLES\n\n<img width=\"1232\" alt=\"Screenshot
2025-04-03 at 17 45
47\"\nsrc=\"https://github.com/user-attachments/assets/8e8b33f8-d2f1-45b5-99ed-e9306a832d9c\"\n/>\n\n<img
width=\"1232\" alt=\"Screenshot 2025-04-03 at 17 46
03\"\nsrc=\"https://github.com/user-attachments/assets/e23cce5c-dca0-41ec-9221-0c32dbc8eb0d\"\n/>\n\n<img
width=\"1232\" alt=\"Screenshot 2025-04-03 at 17 46
45\"\nsrc=\"https://github.com/user-attachments/assets/c7fe658c-5ab2-4665-a187-671ba7b49bfd\"\n/>","sha":"faae1423f02daec2c6e0b723dc42892f9460c0b7","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-infra_services","backport:version","v8.18.0","v9.1.0","v8.19.0"],"title":"[ObsUX][A11y]
Add aria-label to \"Show all\"
links","number":217076,"url":"https://github.com/elastic/kibana/pull/217076","mergeCommit":{"message":"[ObsUX][A11y]
Add aria-label to \"Show all\" links (#217076)\n\nCloses
https://github.com/elastic/kibana/issues/194973\n\n## Summary\n\nThere
are multiple links that say \"Show all\" but do not provide context\nto
answer all of what?\n\n### What was done\nAdded aria-label to all the
\"Show all links\"\n\n### How to test\nUse screen reader to see the
context of the link\n\nEXAMPLES\n\n<img width=\"1232\" alt=\"Screenshot
2025-04-03 at 17 45
47\"\nsrc=\"https://github.com/user-attachments/assets/8e8b33f8-d2f1-45b5-99ed-e9306a832d9c\"\n/>\n\n<img
width=\"1232\" alt=\"Screenshot 2025-04-03 at 17 46
03\"\nsrc=\"https://github.com/user-attachments/assets/e23cce5c-dca0-41ec-9221-0c32dbc8eb0d\"\n/>\n\n<img
width=\"1232\" alt=\"Screenshot 2025-04-03 at 17 46
45\"\nsrc=\"https://github.com/user-attachments/assets/c7fe658c-5ab2-4665-a187-671ba7b49bfd\"\n/>","sha":"faae1423f02daec2c6e0b723dc42892f9460c0b7"}},"sourceBranch":"main","suggestedTargetBranches":["9.0","8.18","8.x"],"targetPullRequestStates":[{"branch":"9.0","label":"v9.0.0","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"8.18","label":"v8.18.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/217076","number":217076,"mergeCommit":{"message":"[ObsUX][A11y]
Add aria-label to \"Show all\" links (#217076)\n\nCloses
https://github.com/elastic/kibana/issues/194973\n\n## Summary\n\nThere
are multiple links that say \"Show all\" but do not provide context\nto
answer all of what?\n\n### What was done\nAdded aria-label to all the
\"Show all links\"\n\n### How to test\nUse screen reader to see the
context of the link\n\nEXAMPLES\n\n<img width=\"1232\" alt=\"Screenshot
2025-04-03 at 17 45
47\"\nsrc=\"https://github.com/user-attachments/assets/8e8b33f8-d2f1-45b5-99ed-e9306a832d9c\"\n/>\n\n<img
width=\"1232\" alt=\"Screenshot 2025-04-03 at 17 46
03\"\nsrc=\"https://github.com/user-attachments/assets/e23cce5c-dca0-41ec-9221-0c32dbc8eb0d\"\n/>\n\n<img
width=\"1232\" alt=\"Screenshot 2025-04-03 at 17 46
45\"\nsrc=\"https://github.com/user-attachments/assets/c7fe658c-5ab2-4665-a187-671ba7b49bfd\"\n/>","sha":"faae1423f02daec2c6e0b723dc42892f9460c0b7"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Miriam <31922082+MiriamAparicio@users.noreply.github.com>
This commit is contained in:
Kibana Machine 2025-04-04 15:57:24 +02:00 • committed by GitHub
parent 3650b998ed
commit 9112209a0e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
8 changed files with 45 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

8
x-pack/solutions/observability/plugins/infra/public/components/asset_details/charts/docker_charts.tsx
View file

@ -10,6 +10,7 @@ import { findInventoryFields } from '@kbn/metrics-data-access-plugin/common';
import { FormattedMessage } from '@kbn/i18n-react';
import { css, cx } from '@emotion/css';
import { EuiText, EuiLink, EuiButtonEmpty } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useDockerContainerPageViewMetricsCharts } from '../hooks/use_container_metrics_charts';
import { Section } from '../components/section';
import { ChartsGrid } from '../charts_grid/charts_grid';
@ -72,6 +73,13 @@ export const DockerCharts = React.forwardRef<HTMLDivElement, Props>(
extraAction={
onShowAll ? (
<EuiButtonEmpty
aria-label={i18n.translate(
'xpack.infra.assetDetails.charts.host.showAllButton.ariaLabel',
{
defaultMessage: 'Show all {metric} charts',
values: { metric: CONTAINER_METRIC_GROUP_TITLES[metric] },
}
)}
data-test-subj="infraAssetDetailsHostChartsShowAllButton"
onClick={() => onShowAll(metric)}
size="xs"

8
x-pack/solutions/observability/plugins/infra/public/components/asset_details/charts/host_charts.tsx
View file

@ -9,6 +9,7 @@ import { EuiText, EuiLink, EuiButtonEmpty } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { findInventoryFields } from '@kbn/metrics-data-access-plugin/common';
import { css, cx } from '@emotion/css';
import { i18n } from '@kbn/i18n';
import { HOST_METRICS_DOC_HREF } from '../../../common/visualizations';
import { HOST_METRIC_GROUP_TITLES } from '../translations';
import { Section } from '../components/section';
@ -73,6 +74,13 @@ export const HostCharts = React.forwardRef<HTMLDivElement, Props>(
extraAction={
onShowAll ? (
<EuiButtonEmpty
aria-label={i18n.translate(
'xpack.infra.assetDetails.charts.host.showAllButton.ariaLabel',
{
defaultMessage: 'Show all {metric} charts',
values: { metric: HOST_METRIC_GROUP_TITLES[metric] },
}
)}
data-test-subj="infraAssetDetailsHostChartsShowAllButton"
onClick={() => onShowAll(metric)}
size="xs"

11
x-pack/solutions/observability/plugins/infra/public/components/asset_details/charts/kubernetes_charts.tsx
View file

@ -9,6 +9,7 @@ import { EuiButtonEmpty, EuiText, EuiLink } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import { css, cx } from '@emotion/css';
import { findInventoryFields } from '@kbn/metrics-data-access-plugin/common';
import { i18n } from '@kbn/i18n';
import { useKubernetesCharts } from '../hooks/use_host_metrics_charts';
import { Section } from '../components/section';
import { SectionTitle, TitleWithTooltip } from '../components/section_title';
@ -45,6 +46,12 @@ export const KubernetesNodeCharts = React.forwardRef<HTMLDivElement, MetricsChar
extraAction={
onShowAll ? (
<EuiButtonEmpty
aria-label={i18n.translate(
'xpack.infra.assetDetails.charts.kubernetes.showAllButton.ariaLabel',
{
defaultMessage: 'Show all Kubernetes charts',
}
)}
data-test-subj="infraAssetDetailsKubernetesChartsShowAllButton"
onClick={() => onShowAll('kubernetes')}
size="xs"
@ -127,6 +134,10 @@ export const KubernetesContainerCharts = React.forwardRef<
extraAction={
onShowAll ? (
<EuiButtonEmpty
aria-label={i18n.translate(
'xpack.infra.kubernetesContainerCharts.showallButton.ariaLabel',
{ defaultMessage: 'Show all {metric} charts', values: { metric } }
)}
data-test-subj="infraAssetDetailsKubernetesChartsShowAllButton"
onClick={() => onShowAll(metric)}
size="xs"

4
x-pack/solutions/observability/plugins/infra/public/components/asset_details/links/link_to_apm_services.tsx
View file

@ -9,6 +9,7 @@ import { stringify } from 'querystring';
import { encode } from '@kbn/rison';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiButtonEmpty } from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import { useKibanaContextForPlugin } from '../../../hooks/use_kibana';
export interface LinkToApmServicesProps {
@ -32,6 +33,9 @@ export const LinkToApmServices = ({ assetId, apmField }: LinkToApmServicesProps)
return (
<EuiButtonEmpty
aria-label={i18n.translate('xpack.infra.assetDetails.apmServicesLink.ariaLabel', {
defaultMessage: 'Show all APM services',
})}
data-test-subj="infraAssetDetailsViewAPMShowAllServicesButton"
size="xs"
flush="both"

7
x-pack/solutions/observability/plugins/infra/public/components/asset_details/tabs/overview/metadata_summary/metadata_summary_list.tsx
View file

@ -17,6 +17,7 @@ import {
EuiLoadingSpinner,
EuiSpacer,
} from '@elastic/eui';
import { i18n } from '@kbn/i18n';
import type { InfraMetadata } from '../../../../../../common/http_api';
import { NOT_AVAILABLE_LABEL } from '../../../translations';
import { useTabSwitcherContext } from '../../../hooks/use_tab_switcher';
@ -143,6 +144,12 @@ const MetadataSummaryListWrapper = ({
id="metadata"
extraAction={
<EuiButtonEmpty
aria-label={i18n.translate(
'xpack.infra.assetDetails.metadataSummary.showAllMetadataButton.ariaLabel',
{
defaultMessage: 'Show all metadata',
}
)}
data-test-subj="infraAssetDetailsMetadataShowAllButton"
onClick={onClick}
size="xs"

2
x-pack/solutions/observability/plugins/infra/public/components/shared/alerts/links/__snapshots__/link_to_alerts_page.test.tsx.snap generated
View file

@ -3,6 +3,7 @@
exports[`LinkToAlertsPage component renders correctly with default props 1`] = `
<div>
<a
aria-label="Show all alerts"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-both"
data-test-subj="test-link"
href="/app/observability/alerts?_a=(rangeFrom:'2024-04-01',rangeTo:'2024-04-15',status:all)"
@ -28,6 +29,7 @@ exports[`LinkToAlertsPage component renders correctly with default props 1`] = `
exports[`LinkToAlertsPage component renders correctly with optional props 1`] = `
<div>
<a
aria-label="Show all alerts"
class="euiButtonEmpty emotion-euiButtonDisplay-euiButtonEmpty-xs-empty-primary-flush-both"
data-test-subj="test-link"
href="/app/observability/alerts?_a=(kuery:'foo:bar',rangeFrom:'2024-04-01',rangeTo:'2024-04-15',status:all)"

2
x-pack/solutions/observability/plugins/infra/public/components/shared/alerts/links/link_to_alerts_page.test.tsx
View file

@ -71,7 +71,7 @@ describe('LinkToAlertsPage component', () => {
<LinkToAlertsPage {...props} />
</IntlProvider>
);
const href = screen.getByRole('link', { name: 'Show all' }).getAttribute('href');
const href = screen.getByRole('link', { name: 'Show all alerts' }).getAttribute('href');
expect(href).toContain(
"/app/observability/alerts?_a=(kuery:'foo:bar',rangeFrom:'2024-04-01',rangeTo:'2024-04-15',status:all)"
);

4
x-pack/solutions/observability/plugins/infra/public/components/shared/alerts/links/link_to_alerts_page.tsx
View file

@ -9,6 +9,7 @@ import { encode } from '@kbn/rison';
import { FormattedMessage } from '@kbn/i18n-react';
import { EuiButtonEmpty, EuiLink } from '@elastic/eui';
import type { TimeRange } from '@kbn/es-query';
import { i18n } from '@kbn/i18n';
import { useKibanaContextForPlugin } from '../../../../hooks/use_kibana';
import { ALERTS_PATH } from '../constants';
@ -36,6 +37,9 @@ export const LinkToAlertsPage = ({
);
return (
<EuiButtonEmpty
aria-label={i18n.translate('xpack.infra.assetDetails.alertsLink.ariaLabel', {
defaultMessage: 'Show all alerts',
})}
data-test-subj={dataTestSubj}
size="xs"
iconSide="right"