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

[8.18] fix: [Analytics:Visualize Library page]Incorrect aria label used for Tags list (#215658) (#216187)

Browse source 
# Backport

This will backport the following commits from `main` to `8.18`:
- [fix: [Analytics:Visualize Library page]Incorrect aria label used for
Tags list (#215658)](https://github.com/elastic/kibana/pull/215658)

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

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

<!--BACKPORT [{"author":{"name":"Alexey
Antonov","email":"alexwizp@gmail.com"},"sourceCommit":{"committedDate":"2025-03-27T14:14:11Z","message":"fix:
[Analytics:Visualize Library page]Incorrect aria label used for Tags
list (#215658)\n\nCloses: #215004\n\n# Description\nNames of elements
has to be clear and descriptive for user to know what\nelement is
currently active, how to interact with it. Same with
aria\nlabels.\nEspecially for the users using assistive technology.\n\n#
Changes made? \n1. Fixed mentioned a11y concerns\n2. Fixed
translations\n\n\n# Screen: \n<img width=\"1408\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/d5b1b404-5a4a-4499-8a1c-59528c866bf9\"\n/>\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"418e328b9d25fde0743fa569c5b0c8a41669319e","branchLabelMapping":{"^v9.1.0$":"main","^v8.19.0$":"8.x","^v(\\d+).(\\d+).\\d+$":"$1.$2"}},"sourcePullRequest":{"labels":["Project:Accessibility","release_note:skip","backport:prev-major","v9.1.0"],"title":"fix:
[Analytics:Visualize Library page]Incorrect aria label used for Tags
list","number":215658,"url":"https://github.com/elastic/kibana/pull/215658","mergeCommit":{"message":"fix:
[Analytics:Visualize Library page]Incorrect aria label used for Tags
list (#215658)\n\nCloses: #215004\n\n# Description\nNames of elements
has to be clear and descriptive for user to know what\nelement is
currently active, how to interact with it. Same with
aria\nlabels.\nEspecially for the users using assistive technology.\n\n#
Changes made? \n1. Fixed mentioned a11y concerns\n2. Fixed
translations\n\n\n# Screen: \n<img width=\"1408\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/d5b1b404-5a4a-4499-8a1c-59528c866bf9\"\n/>\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"418e328b9d25fde0743fa569c5b0c8a41669319e"}},"sourceBranch":"main","suggestedTargetBranches":[],"targetPullRequestStates":[{"branch":"main","label":"v9.1.0","branchLabelMappingKey":"^v9.1.0$","isSourceBranch":true,"state":"MERGED","url":"https://github.com/elastic/kibana/pull/215658","number":215658,"mergeCommit":{"message":"fix:
[Analytics:Visualize Library page]Incorrect aria label used for Tags
list (#215658)\n\nCloses: #215004\n\n# Description\nNames of elements
has to be clear and descriptive for user to know what\nelement is
currently active, how to interact with it. Same with
aria\nlabels.\nEspecially for the users using assistive technology.\n\n#
Changes made? \n1. Fixed mentioned a11y concerns\n2. Fixed
translations\n\n\n# Screen: \n<img width=\"1408\"
alt=\"image\"\nsrc=\"https://github.com/user-attachments/assets/d5b1b404-5a4a-4499-8a1c-59528c866bf9\"\n/>\n\n---------\n\nCo-authored-by:
kibanamachine
<42973632+kibanamachine@users.noreply.github.com>","sha":"418e328b9d25fde0743fa569c5b0c8a41669319e"}}]}]
BACKPORT-->

Co-authored-by: Alexey Antonov <alexwizp@gmail.com>
This commit is contained in:
Kibana Machine 2025-03-27 17:56:59 +01:00 • committed by GitHub
parent 6016065bfd
commit a002e9b3c9
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 25 additions and 6 deletions
Download patch file Download diff file Expand all files Collapse all files

31
src/platform/packages/shared/content-management/table_list_view_table/src/components/tag_filter_panel.tsx
View file

@ -24,8 +24,10 @@ import {
useEuiTheme,
EuiPopoverFooter,
EuiButton,
useGeneratedHtmlId,
type EuiSelectableProps,
type ExclusiveUnion,
} from '@elastic/eui';
import type { EuiSelectableProps, ExclusiveUnion } from '@elastic/eui';
import { css } from '@emotion/react';
import { i18n } from '@kbn/i18n';
import { RedirectAppLinks } from '@kbn/shared-ux-link-redirect-app';
@ -68,6 +70,8 @@ export const TagFilterPanel: FC<{}> = ({}) => {
const { euiTheme } = useEuiTheme();
const { navigateToUrl, currentAppId$, getTagManagementUrl } = useServices();
const componentContext = React.useContext(TagFilterContext);
const titleId = useGeneratedHtmlId();
if (!componentContext)
throw new Error('TagFilterPanel must be used within a TagFilterContextProvider');
const {
@ -110,9 +114,14 @@ export const TagFilterPanel: FC<{}> = ({}) => {
};
}
const tagsLabel = i18n.translate('contentManagement.tableList.tagFilterPanel.tagsLabel', {
defaultMessage: 'Tags',
});
return (
<>
<EuiPopover
aria-labelledby={titleId}
button={
<EuiFilterButton
iconType="arrowDown"
@ -123,7 +132,7 @@ export const TagFilterPanel: FC<{}> = ({}) => {
numActiveFilters={totalActiveFilters}
grow
>
Tags
{tagsLabel}
</EuiFilterButton>
}
isOpen={isPopoverOpen}
@ -135,7 +144,7 @@ export const TagFilterPanel: FC<{}> = ({}) => {
>
<EuiPopoverTitle paddingSize="m" css={popoverTitleCSS}>
<EuiFlexGroup>
<EuiFlexItem>Tags</EuiFlexItem>
<EuiFlexItem id={titleId}>{tagsLabel}</EuiFlexItem>
<EuiFlexItem grow={false}>
{totalActiveFilters > 0 && (
<EuiButtonEmpty flush="both" onClick={clearTagSelection} css={clearSelectionBtnCSS}>
@ -152,13 +161,23 @@ export const TagFilterPanel: FC<{}> = ({}) => {
</EuiPopoverTitle>
<EuiSelectable<any>
singleSelection={false}
aria-label="some aria label"
options={options}
renderOption={(option) => option.view}
emptyMessage="There aren't any tags"
noMatchesMessage="No tag matches the search"
emptyMessage={i18n.translate(
'contentManagement.tableList.tagFilterPanel.listEmptyMessage',
{
defaultMessage: "There aren't any tags",
}
)}
noMatchesMessage={i18n.translate(
'contentManagement.tableList.tagFilterPanel.listNoMatchesMessage',
{
defaultMessage: 'No tag matches the search',
}
)}
onChange={onSelectChange}
data-test-subj="tagSelectableList"
aria-label={tagsLabel}
{...searchProps}
>
{(list, search) => {