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

A11y: Make the Library Panel "clear filter" buttons accessible (#46341)

Browse Source 
* swap span for button + add aria-label

* swap span for button + add aria-label

* add new style + increase padding

* fix typo

* switch to link variant + trim custom css
This commit is contained in:
matt abrams
2022-03-11 00:10:13 -10:00
committed by GitHub
parent 73ba04cda6
commit ec84b7bd23
3 changed files with 46 additions and 35 deletions
Download Patch File Download Diff File Expand all files Collapse all files

37
public/app/features/library-panels/components/LibraryPanelsSearch/LibraryPanelsSearch.tsx
View File

@@ -66,18 +66,23 @@ export const LibraryPanelsSearch = ({
placeholder={'Search by name or description'}
width={0}
/>
<HorizontalGroup
spacing="sm"
justify={(showSort && showPanelFilter) || showFolderFilter ? 'space-between' : 'flex-end'}
>
{showSort && (
<SortPicker value={sortDirection} onChange={onSortChange} filter={['alpha-asc', 'alpha-desc']} />
)}
<HorizontalGroup spacing="sm" justify={showFolderFilter && showPanelFilter ? 'space-between' : 'flex-end'}>
{showFolderFilter && <FolderFilter onChange={onFolderFilterChange} />}
{showPanelFilter && <PanelTypeFilter onChange={onPanelFilterChange} />}
<div className={styles.buttonRow}>
<HorizontalGroup
spacing="sm"
justify={(showSort && showPanelFilter) || showFolderFilter ? 'space-between' : 'flex-end'}
>
{showSort && (
<SortPicker value={sortDirection} onChange={onSortChange} filter={['alpha-asc', 'alpha-desc']} />
)}
<HorizontalGroup
spacing="sm"
justify={showFolderFilter && showPanelFilter ? 'space-between' : 'flex-end'}
>
{showFolderFilter && <FolderFilter onChange={onFolderFilterChange} />}
{showPanelFilter && <PanelTypeFilter onChange={onPanelFilterChange} />}
</HorizontalGroup>
</HorizontalGroup>
</HorizontalGroup>
</div>
<div className={styles.libraryPanelsView}>
<LibraryPanelsView
onClickCard={onClick}
@@ -98,7 +103,7 @@ export const LibraryPanelsSearch = ({
return (
<div className={styles.container}>
<VerticalGroup spacing="xs">
<div className={styles.buttonRow}>
<div className={styles.tightButtonRow}>
<div className={styles.tightFilter}>
<FilterInput value={searchQuery} onChange={onFilterChange} placeholder={'Search by name'} width={0} />
</div>
@@ -136,7 +141,13 @@ function getStyles(theme: GrafanaTheme2) {
display: flex;
justify-content: space-between;
width: 100%;
margin-top: ${theme.spacing(1.5)}; // Clear types link
margin-top: ${theme.spacing(2)}; // Clear types link
`,
tightButtonRow: css`
display: flex;
justify-content: space-between;
width: 100%;
margin-top: ${theme.spacing(4)}; // Clear types link
`,
tightFilter: css`
flex-grow: 1;