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

[8.18] [A11y][APM] Add missing aria-label for some services buttons (#217325) (#217613)

Browse source 
# Backport

This will backport the following commits from `main` to `8.18`:
- [[A11y][APM] Add missing `aria-label` for some services buttons
(#217325)](https://github.com/elastic/kibana/pull/217325)

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

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

<!--BACKPORT [{"author":{"name":"Sergi
Romeu","email":"sergi.romeu@elastic.co"},"sourceCommit":{"committedDate":"2025-04-09T07:02:15Z","message":"[A11y][APM]
Add missing `aria-label` for some services buttons (#217325)\n\n##
Summary\n\nFixes #212264\n\nThis PR adds a couple of `aria-label`
attributes to buttons that do not\nhave a screen-reader announcement
under the Services and Services
Groups\npages.","sha":"749f57c12f685eee1f380644a39732773dcd7ab7","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["release_note:fix","apm","Team:obs-ux-infra_services","backport:version","a11y","v8.18.0","v9.1.0","v8.19.0","v9.0.1"],"title":"[A11y][APM]
Add missing `aria-label` for some services
buttons","number":217325,"url":"https://github.com/elastic/kibana/pull/217325","mergeCommit":{"message":"[A11y][APM]
Add missing `aria-label` for some services buttons (#217325)\n\n##
Summary\n\nFixes #212264\n\nThis PR adds a couple of `aria-label`
attributes to buttons that do not\nhave a screen-reader announcement
under the Services and Services
Groups\npages.","sha":"749f57c12f685eee1f380644a39732773dcd7ab7"}},"sourceBranch":"main","suggestedTargetBranches":["8.18","8.x","9.0"],"targetPullRequestStates":[{"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/217325","number":217325,"mergeCommit":{"message":"[A11y][APM]
Add missing `aria-label` for some services buttons (#217325)\n\n##
Summary\n\nFixes #212264\n\nThis PR adds a couple of `aria-label`
attributes to buttons that do not\nhave a screen-reader announcement
under the Services and Services
Groups\npages.","sha":"749f57c12f685eee1f380644a39732773dcd7ab7"}},{"branch":"8.x","label":"v8.19.0","branchLabelMappingKey":"^v8.19.0$","isSourceBranch":false,"state":"NOT_CREATED"},{"branch":"9.0","label":"v9.0.1","branchLabelMappingKey":"^v(\\d+).(\\d+).\\d+$","isSourceBranch":false,"state":"NOT_CREATED"}]}]
BACKPORT-->

Co-authored-by: Sergi Romeu <sergi.romeu@elastic.co>
This commit is contained in:
Kibana Machine 2025-04-09 14:00:58 +02:00 • committed by GitHub
parent d19b6e726b
commit b7da508e2e
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 26 additions and 4 deletions
Download patch file Download diff file Expand all files Collapse all files

3
x-pack/solutions/observability/plugins/apm/public/components/app/service_groups/service_groups_list/sort.tsx
View file

@ -36,6 +36,9 @@ export function Sort({ type, onChange }: Props) {
return (
<EuiSelect
data-test-subj="apmSortSelect"
aria-label={i18n.translate('xpack.apm.serviceGroups.list.sort.ariaLabel', {
defaultMessage: 'Sort service groups by',
})}
options={options}
value={type}
onChange={(e) => onChange(e.target.value as ServiceGroupsSortType)}

27
x-pack/solutions/observability/plugins/apm/public/components/shared/key_value_filter_list/index.tsx
View file

@ -20,6 +20,7 @@ import { i18n } from '@kbn/i18n';
import React, { Fragment } from 'react';
import styled from 'styled-components';
import { isEmpty } from 'lodash';
import { css } from '@emotion/react';
interface KeyValue {
key: string;
@ -78,23 +79,41 @@ export function KeyValueFilterList({
<Fragment key={key}>
<EuiDescriptionListTitle
className="descriptionList__title"
style={{ height: '40px' }}
css={css`
height: 40px;
`}
>
<EuiText size="s" style={{ fontWeight: 'bold' }}>
<EuiText
size="s"
css={css`
font-weight: bold;
`}
>
{key}
</EuiText>
</EuiDescriptionListTitle>
<EuiDescriptionListDescription
className="descriptionList__description"
style={{ height: '40px' }}
css={css`
height: 40px;
`}
>
<EuiFlexGroup alignItems="baseline" responsive={false} gutterSize="none">
<EuiFlexItem style={{ minWidth: '32px' }} grow={false}>
<EuiFlexItem
css={css`
min-width: 32px;
`}
grow={false}
>
{isFilterable && (
<EuiButtonEmpty
onClick={() => {
onClickFilter({ key, value });
}}
aria-label={i18n.translate(
'xpack.apm.keyValueFilterList.actionFilterLabel',
{ defaultMessage: 'Filter by value' }
)}
data-test-subj={`filter_by_${key}`}
>
<EuiToolTip