Skip to content

Commit

Permalink
Added aria labels for 508 compliance
Browse files Browse the repository at this point in the history
  • Loading branch information
@chrtorres
chrtorres committed Jun 25, 2024
1 parent 3057d74 commit 06bb2d6
Show file tree
Hide file tree
Showing 3 changed files with 104 additions and 88 deletions.
6 changes: 6 additions & 0 deletions frontend/src/pages/Search/Dashboard.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -36,6 +36,7 @@ import { SavedSearch, Vulnerability } from 'types';
import { useBeforeunload } from 'react-beforeunload';
import { NoResults } from 'components/NoResults';
import { exportCSV } from 'components/ImportExport';
import { useHistory } from 'react-router-dom';

export const DashboardUI: React.FC<ContextType & { location: any }> = (
props
Expand Down Expand Up @@ -79,6 +80,7 @@ export const DashboardUI: React.FC<ContextType & { location: any }> = (
? JSON.parse(localStorage.getItem('savedSearch')!)
: undefined;

const history = useHistory();
const modalRef = useRef<ModalRef>(null);
const [savedSearchValues, setSavedSearchValues] = useState<
Partial<SavedSearch> & {
Expand Down Expand Up @@ -379,8 +381,12 @@ export const DashboardUI: React.FC<ContextType & { location: any }> = (
};
if (search) {
await apiPut('/saved-searches/' + search.id, body);
history.push('/inventory');
window.location.reload();
} else {
await apiPost('/saved-searches/', body);
history.push('/inventory');
window.location.reload();
}
}}
>
Expand Down
185 changes: 98 additions & 87 deletions frontend/src/pages/Search/FilterDrawer.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import {
IconButton,
Paper
} from '@mui/material';
import { DataGrid } from '@mui/x-data-grid';
import { DataGrid, GridRenderCellParams } from '@mui/x-data-grid';

Check warning on line 9 in frontend/src/pages/Search/FilterDrawer.tsx

View workflow job for this annotation

GitHub Actions / lint 

'GridRenderCellParams' is defined but never used
import { classes, StyledWrapper } from './Styling/filterDrawerStyle';
import {
Delete,
Expand Down Expand Up @@ -58,7 +58,7 @@ export const FilterDrawer: React.FC<Props> = (props) => {
}
};
fetchSearches();
}, []);
}, [apiGet]);

const deleteSearch = async (id: string) => {
try {
Expand Down Expand Up @@ -99,9 +99,6 @@ export const FilterDrawer: React.FC<Props> = (props) => {
? facets['vulnerabilities.severity'][0].data
: [];

// Create rows for DataGrid
// const savedSearchRows: SavedSearch[] = savedSearches

// Always show all severities
for (const value of ['Critical', 'High', 'Medium', 'Low']) {
if (!severityFacet.find((severity) => value === severity.value))
Expand Down Expand Up @@ -350,98 +347,112 @@ export const FilterDrawer: React.FC<Props> = (props) => {
</AccordionSummary>
<Accordion style={{ overflowY: 'auto' }}>
<AccordionDetails classes={{ root: classes.details }}>
<Paper elevation={2}>
<DataGrid
density="compact"
key={'Data Grid'}
rows={savedSearches.map((search) => ({ ...search }))}
rowCount={savedSearchCount}
columns={[
{
field: 'name',
headerName: 'Name',
flex: 1,
renderCell: (cellValues) => {
const applyFilter = () => {
if (clearFilters) clearFilters();
localStorage.setItem(
'savedSearch',
JSON.stringify(cellValues.row)
);
history.push(
'/inventory' +
cellValues.row.searchPath +
'&searchId=' +
cellValues.row.id
);
props.updateSearchTerm(cellValues.row.searchTerm); // Prop to lift the search term to the parent component
<Paper elevation={2} style={{ width: '15em' }}>
{savedSearches.length > 0 ? (
<DataGrid
density="compact"
key={'Data Grid'}
rows={savedSearches.map((search) => ({ ...search }))}
rowCount={savedSearchCount}
columns={[
{
field: 'name',
headerName: 'Name',
flex: 1,
width: 100,
description: 'Name',
renderCell: (cellValues) => {
const applyFilter = () => {
if (clearFilters) clearFilters();
localStorage.setItem(
'savedSearch',
JSON.stringify(cellValues.row)
);
history.push(
'/inventory' +
cellValues.row.searchPath +
'&searchId=' +
cellValues.row.id
);
props.updateSearchTerm(cellValues.row.searchTerm); // Prop to lift the search term to the parent component

// Apply the filters
cellValues.row.filters.forEach((filter) => {
filter.values.forEach((value) => {
addFilter(filter.field, value, 'any');
// Apply the filters
cellValues.row.filters.forEach((filter) => {
filter.values.forEach((value) => {
addFilter(filter.field, value, 'any');
});
});
});
};
return (
<div
tabIndex={0}
onClick={applyFilter}
onKeyDown={(e) => {
if (e.key === 'Enter') {
applyFilter();
}
}}
style={{ cursor: 'pointer', textAlign: 'center' }}
>
{cellValues.value}
</div>
);
}
},
{
field: 'actions',
headerName: '',
flex: 0.1,
renderCell: (cellValues) => {
const searchId = cellValues.id.toString();
return (
<div style={{ display: 'flexbox', textAlign: 'end' }}>
<IconButton
onClick={(e) => {
e.stopPropagation();
deleteSearch(searchId);
}}
};
return (
<div
aria-label={cellValues.row.name}
title={`Saved Search: ${cellValues.row.name}`}
tabIndex={0}
onClick={applyFilter}
onKeyDown={(e) => {
if (e.key === 'Enter') {
deleteSearch(searchId);
applyFilter();
}
}}
style={{
cursor: 'pointer',
textAlign: 'left',
width: '100%'
}}
>
<Delete />
</IconButton>
</div>
);
{cellValues.value}
</div>
);
}
},
{
field: 'actions',
headerName: '',
flex: 0.1,
renderCell: (cellValues) => {
const searchId = cellValues.id.toString();
return (
<div style={{ display: 'flexbox', textAlign: 'end' }}>
<IconButton
aria-label="Delete"
title="Delete Search"
onClick={(e) => {
e.stopPropagation();
deleteSearch(searchId);
}}
tabIndex={0}
onKeyDown={(e) => {
if (e.key === 'Enter') {
deleteSearch(searchId);
}
}}
>
<Delete />
</IconButton>
</div>
);
}
}
]}
initialState={{
pagination: {
paginationModel: {
pageSize: 5
}
}
}
]}
initialState={{
pagination: {
paginationModel: {
pageSize: 5
}}
pageSizeOptions={[5, 10]}
disableRowSelectionOnClick
sx={{
disableColumnfilter: 'true',
'& .MuiDataGrid-row:hover': {
cursor: 'pointer'
}
}
}}
pageSizeOptions={[5, 10]}
disableRowSelectionOnClick
sx={{
disableColumnfilter: 'true',
'& .MuiDataGrid-row:hover': {
cursor: 'pointer'
}
}}
/>
}}
/>
) : (
<div>No Saved Searches</div>
)}
</Paper>
</AccordionDetails>
</Accordion>
Expand Down
1 change: 0 additions & 1 deletion frontend/src/pages/Search/Styling/filterDrawerStyle.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -75,7 +75,6 @@ export const StyledWrapper = styled(Wrapper)(({ theme }) => ({
// display: 'flex',
alignItems: 'left',
flexFlow: 'row nowrap',
padding: '0 1rem',
minHeight: 25,
justifyContent: 'space-between',
'& h3': {
Expand Down

0 comments on commit 06bb2d6

Please sign in to comment.