A11y: Update buttons in Explore page to not use HTML Title for tooltip (#53894)

This commit is contained in:
eledobleefe 2022-08-22 11:19:22 +02:00 committed by GitHub
parent 51d173711f
commit 8cdfedc559
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 7 additions and 7 deletions

View File

@ -26,7 +26,7 @@ export const QueryOperationAction: React.FC<QueryOperationActionProps> = ({
<div className={cx(styles.icon, active && styles.active)}>
<IconButton
name={icon}
title={title}
tooltip={title}
className={styles.icon}
disabled={!!disabled}
onClick={onClick}

View File

@ -155,11 +155,11 @@ class UnConnectedExploreToolbar extends PureComponent<Props> {
>
<ToolbarButtonRow>
{!splitted ? (
<ToolbarButton title="Split" onClick={() => split()} icon="columns" disabled={isLive}>
<ToolbarButton tooltip="Split the pane" onClick={() => split()} icon="columns" disabled={isLive}>
Split
</ToolbarButton>
) : (
<ToolbarButton title="Close split pane" onClick={() => closeSplit(exploreId)} icon="times">
<ToolbarButton tooltip="Close split pane" onClick={() => closeSplit(exploreId)} icon="times">
Close
</ToolbarButton>
)}

View File

@ -78,7 +78,7 @@ describe('Explore QueryRows', () => {
// waiting for the d&d component to fully render.
await screen.findAllByText('someDs query editor');
let duplicateButton = screen.getByTitle('Duplicate query');
let duplicateButton = screen.getByLabelText(/Duplicate query/i);
fireEvent.click(duplicateButton);

View File

@ -211,17 +211,17 @@ describe('Wrapper', () => {
});
});
it('can close a pane from a split', async () => {
it('can close a panel from a split', async () => {
const urlParams = {
left: JSON.stringify(['now-1h', 'now', 'loki', { refId: 'A' }]),
right: JSON.stringify(['now-1h', 'now', 'elastic', { refId: 'A' }]),
};
setupExplore({ urlParams });
const closeButtons = await screen.findAllByTitle(/Close split pane/i);
const closeButtons = await screen.findAllByLabelText(/Close split pane/i);
await userEvent.click(closeButtons[1]);
await waitFor(() => {
const logsPanels = screen.queryAllByTitle(/Close split pane/i);
const logsPanels = screen.queryAllByLabelText(/Close split pane/i);
expect(logsPanels.length).toBe(0);
});
});