IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-11 08:05:43 -06:00
Code Issues Packages Projects Releases Wiki Activity

Accessibility: Improve keyboard accessibility in AnnoListPanel (#58971)

Browse Source 
fix keyboard accessibility in AnnoListPanel
This commit is contained in:
Ashley Harrison 2022-11-21 09:25:56 +00:00 committed by GitHub
parent b57689e07e
commit 598935cb34
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 21 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
public/app/plugins/panel/annolist/AnnoListPanel.tsx
View File

@ -1,5 +1,4 @@
import { css } from '@emotion/css'; import { css } from '@emotion/css';
import { FocusScope } from '@react-aria/focus';
import React, { PureComponent } from 'react'; import React, { PureComponent } from 'react';
import { Subscription } from 'rxjs'; import { Subscription } from 'rxjs';
@ -14,7 +13,7 @@ import {
PanelProps, PanelProps,
} from '@grafana/data'; } from '@grafana/data';
import { config, getBackendSrv, locationService } from '@grafana/runtime'; import { config, getBackendSrv, locationService } from '@grafana/runtime';
import { CustomScrollbar, stylesFactory, TagList } from '@grafana/ui'; import { Button, CustomScrollbar, stylesFactory, TagList } from '@grafana/ui';
import { AbstractList } from '@grafana/ui/src/components/List/AbstractList'; import { AbstractList } from '@grafana/ui/src/components/List/AbstractList';
import appEvents from 'app/core/app_events'; import appEvents from 'app/core/app_events';
import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv'; import { getDashboardSrv } from 'app/features/dashboard/services/DashboardSrv';
@ -263,12 +262,17 @@ export class AnnoListPanel extends PureComponent<Props, State> {
<div className={this.style.filter}> <div className={this.style.filter}>
<b>Filter:</b> <b>Filter:</b>
{queryUser && ( {queryUser && (
<span onClick={this.onClearUser} className="pointer"> <Button
size="sm"
variant="secondary"
fill="text"
onClick={this.onClearUser}
aria-label={`Remove filter: ${queryUser.email}`}
>
{queryUser.email} {queryUser.email}
</span> </Button>
)} )}
{queryTags.length > 0 && ( {queryTags.length > 0 && (
<FocusScope restoreFocus>
<TagList <TagList
icon="times" icon="times"
tags={queryTags} tags={queryTags}
@ -277,7 +281,6 @@ export class AnnoListPanel extends PureComponent<Props, State> {
className={this.style.tagList} className={this.style.tagList}
ref={this.tagListRef} ref={this.tagListRef}
/> />
</FocusScope>
)} )}
</div> </div>
)} )}
@ -299,11 +302,11 @@ const getStyles = stylesFactory((theme: GrafanaTheme2) => ({
height: calc(100% - 30px); height: calc(100% - 30px);
`, `,
filter: css({ filter: css({
alignItems: 'center',
display: 'flex', display: 'flex',
padding: `0px ${theme.spacing(0.5)}`, flexWrap: 'wrap',
b: { gap: theme.spacing(0.5),
paddingRight: theme.spacing(1), padding: theme.spacing(0.5),
},
}), }),
tagList: css({ tagList: css({
justifyContent: 'flex-start', justifyContent: 'flex-start',