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

Explore: Fix a11y issue with logs navigation buttons (#58944)

Browse Source
This commit is contained in:
Giordano Ricci 2022-11-18 14:54:56 +01:00 committed by GitHub
parent b68fe6336a
commit 27b5e5f781
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
1 changed files with 5 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
public/app/features/explore/LogsNavigationPages.tsx
View File

@ -3,7 +3,7 @@ import React from 'react';
import { dateTimeFormat, systemDateFormats, TimeZone, AbsoluteTimeRange, GrafanaTheme2 } from '@grafana/data';
import { reportInteraction } from '@grafana/runtime';
import { CustomScrollbar, Spinner, useTheme2 } from '@grafana/ui';
import { CustomScrollbar, Spinner, useTheme2, clearButtonStyles } from '@grafana/ui';
import { LogsPage } from './LogsNavigation';
@ -48,7 +48,8 @@ export function LogsNavigationPages({
<div className={styles.pagesWrapper} data-testid="logsNavigationPages">
<div className={styles.pagesContainer}>
{pages.map((page: LogsPage, index: number) => (
<div
<button
type="button"
data-testid={`page${index + 1}`}
className={styles.page}
key={page.queryRange.to}
@ -64,7 +65,7 @@ export function LogsNavigationPages({
<div className={cx(styles.time, { selectedText: currentPageIndex === index })}>
{createPageContent(page, index)}
</div>
</div>
</button>
))}
</div>
</div>
@ -101,6 +102,7 @@ const getStyles = (theme: GrafanaTheme2, loading: boolean) => {
flex-direction: column;
`,
page: css`
${clearButtonStyles(theme)}
display: flex;
margin: ${theme.spacing(2)} 0;
cursor: ${loading ? 'auto' : 'pointer'};