root
/
grafana
mirror of https://github.com/grafana/grafana.git
1
0
Fork 0
Code Issues Actions 243 Packages Projects Releases Wiki Activity

A11y: ignore rule since keyboard interaction is already handled (#62850) 

* Revert "Accessibility: Remove unnecessary onClick from title element (#59696)"

This reverts commit f19b07c0bc.

* ignore eslint rule
This commit is contained in:
Ashley Harrison 2023-02-08 14:17:15 +00:00 committed by GitHub
parent a0b563f596
commit 6a720f96f7
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
3 changed files with 10 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
public/app/core/components/QueryOperationRow/QueryOperationRow.test.tsx
View File

@ -32,7 +32,7 @@ describe('QueryOperationRow', () => {
const onCloseSpy = jest.fn();
setup({ isOpen: false, onOpen: onOpenSpy, onClose: onCloseSpy });
const queryRow = screen.getByRole('button', { name: /^test-title$/ });
const queryRow = screen.getByText(/^test-title$/);
expect(queryRow).toBeInTheDocument();
// open row on click

14
public/app/core/components/QueryOperationRow/QueryOperationRowHeader.tsx
View File

@ -1,5 +1,4 @@
import { css, cx } from '@emotion/css';
import { useId } from '@react-aria/utils';
import React, { MouseEventHandler } from 'react';
import { DraggableProvidedDragHandleProps } from 'react-beautiful-dnd';
@ -32,7 +31,6 @@ export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = (
id,
}: QueryOperationRowHeaderProps) => {
const styles = useStyles2(getStyles);
const titleId = useId();
return (
<div className={styles.header}>
@ -46,13 +44,13 @@ export const QueryOperationRowHeader: React.FC<QueryOperationRowHeaderProps> = (
type="button"
aria-expanded={isContentVisible}
aria-controls={id}
aria-labelledby={titleId}
/>
{title && (
<div className={styles.titleWrapper}>
<div id={titleId} className={cx(styles.title, disabled && styles.disabled)}>
{title}
</div>
// disabling the a11y rules here as the IconButton above handles keyboard interactions
// this is just to provide a better experience for mouse users
// eslint-disable-next-line jsx-a11y/click-events-have-key-events, jsx-a11y/no-static-element-interactions
<div className={styles.titleWrapper} onClick={onRowToggle} aria-label="Query operation row title">
<div className={cx(styles.title, disabled && styles.disabled)}>{title}</div>
</div>
)}
{headerElement}
@ -114,11 +112,13 @@ const getStyles = (theme: GrafanaTheme2) => ({
display: flex;
align-items: center;
flex-grow: 1;
cursor: pointer;
overflow: hidden;
margin-right: ${theme.spacing(0.5)};
`,
title: css`
font-weight: ${theme.typography.fontWeightBold};
color: ${theme.colors.text.link};
margin-left: ${theme.spacing(0.5)};
overflow: hidden;
text-overflow: ellipsis;

4
public/app/features/inspector/InspectDataTab.test.tsx
View File

@ -50,14 +50,14 @@ describe('InspectDataTab', () => {
});
it('should show available options', async () => {
render(<InspectDataTab {...createProps()} />);
const dataOptions = screen.getByRole('button', { name: /Data options/i });
const dataOptions = screen.getByText(/Data options/i);
await userEvent.click(dataOptions);
expect(screen.getByText(/Show data frame/i)).toBeInTheDocument();
expect(screen.getByText(/Download for Excel/i)).toBeInTheDocument();
});
it('should show available dataFrame options', async () => {
render(<InspectDataTab {...createProps()} />);
const dataOptions = screen.getByRole('button', { name: /Data options/i });
const dataOptions = screen.getByText(/Data options/i);
await userEvent.click(dataOptions);
const dataFrameInput = screen.getByRole('combobox', { name: /Select dataframe/i });
await userEvent.click(dataFrameInput);