IntenseWebs/grafana
3
0
Fork 0
mirror of https://github.com/grafana/grafana.git synced 2025-02-25 18:55:37 -06:00
Code Issues Packages Projects Releases Wiki Activity

Accessibility: Enable rule jsx-a11y/no-noninteractive-element-interactions (#58077)

Browse Source 
* fixes for no-noninteractive-element-interactions

* remaining fixes

* add type="button"

* fix unit tests
This commit is contained in:
Ashley Harrison
2022-11-03 10:55:58 +00:00
committed by GitHub
parent 65bd5c65d8
commit 514d3111f4
16 changed files with 79 additions and 65 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
public/app/features/dashboard/components/AnnotationSettings/AnnotationSettingsList.tsx
View File

@@ -57,7 +57,7 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
return (
<VerticalGroup>
{annotations.length > 0 && (
<table className="filter-table filter-table--hover">
<table role="grid" className="filter-table filter-table--hover">
<thead>
<tr>
<th>Query name</th>
@@ -69,26 +69,26 @@ export const AnnotationSettingsList = ({ dashboard, onNew, onEdit }: Props) => {
{dashboard.annotations.list.map((annotation, idx) => (
<tr key={`${annotation.name}-${idx}`}>
{annotation.builtIn ? (
<td style={{ width: '90%' }} className="pointer" onClick={() => onEdit(idx)}>
<td role="gridcell" style={{ width: '90%' }} className="pointer" onClick={() => onEdit(idx)}>
{getAnnotationName(annotation)}
</td>
) : (
<td className="pointer" onClick={() => onEdit(idx)}>
<td role="gridcell" className="pointer" onClick={() => onEdit(idx)}>
{getAnnotationName(annotation)}
</td>
)}
<td className="pointer" onClick={() => onEdit(idx)}>
<td role="gridcell" className="pointer" onClick={() => onEdit(idx)}>
{dataSourceSrv.getInstanceSettings(annotation.datasource)?.name || annotation.datasource?.uid}
</td>
<td style={{ width: '1%' }}>
<td role="gridcell" style={{ width: '1%' }}>
{idx !== 0 && <IconButton name="arrow-up" aria-label="arrow-up" onClick={() => onMove(idx, -1)} />}
</td>
<td style={{ width: '1%' }}>
<td role="gridcell" style={{ width: '1%' }}>
{dashboard.annotations.list.length > 1 && idx !== dashboard.annotations.list.length - 1 ? (
<IconButton name="arrow-down" aria-label="arrow-down" onClick={() => onMove(idx, 1)} />
) : null}
</td>
<td style={{ width: '1%' }}>
<td role="gridcell" style={{ width: '1%' }}>
{!annotation.builtIn && (
<DeleteButton
size="sm"

2
public/app/features/dashboard/components/DashboardSettings/AnnotationsSettings.test.tsx
View File

@@ -101,7 +101,7 @@ describe('AnnotationsSettings', () => {
test('it renders empty list cta if only builtIn annotation', async () => {
setup(dashboard);
expect(screen.queryByRole('table')).toBeInTheDocument();
expect(screen.queryByRole('grid')).toBeInTheDocument();
expect(screen.getByRole('row', { name: /annotations & alerts \(built\-in\) grafana/i })).toBeInTheDocument();
expect(
screen.getByTestId(selectors.components.CallToActionCard.buttonV2('Add annotation query'))

14
public/app/features/dashboard/components/LinksSettings/LinkSettingsList.tsx
View File

@@ -53,7 +53,7 @@ export const LinkSettingsList: React.FC<LinkSettingsListProps> = ({ dashboard, o
return (
<>
<table className="filter-table filter-table--hover">
<table role="grid" className="filter-table filter-table--hover">
<thead>
<tr>
<th>Type</th>
@@ -64,28 +64,28 @@ export const LinkSettingsList: React.FC<LinkSettingsListProps> = ({ dashboard, o
<tbody>
{links.map((link, idx) => (
<tr key={`${link.title}-${idx}`}>
<td className="pointer" onClick={() => onEdit(idx)}>
<td role="gridcell" className="pointer" onClick={() => onEdit(idx)}>
<Icon name="external-link-alt" /> &nbsp; {link.type}
</td>
<td>
<td role="gridcell">
<HorizontalGroup>
{link.title && <span>{link.title}</span>}
{link.type === 'link' && <span>{link.url}</span>}
{link.type === 'dashboards' && <TagList tags={link.tags ?? []} />}
</HorizontalGroup>
</td>
<td style={{ width: '1%' }}>
<td style={{ width: '1%' }} role="gridcell">
{idx !== 0 && <IconButton name="arrow-up" aria-label="arrow-up" onClick={() => moveLink(idx, -1)} />}
</td>
<td style={{ width: '1%' }}>
<td style={{ width: '1%' }} role="gridcell">
{links.length > 1 && idx !== links.length - 1 ? (
<IconButton name="arrow-down" aria-label="arrow-down" onClick={() => moveLink(idx, 1)} />
) : null}
</td>
<td style={{ width: '1%' }}>
<td style={{ width: '1%' }} role="gridcell">
<IconButton aria-label="copy" name="copy" onClick={() => duplicateLink(link, idx)} />
</td>
<td style={{ width: '1%' }}>
<td style={{ width: '1%' }} role="gridcell">
<DeleteButton
aria-label={`Delete link with title "${link.title}"`}
size="sm"