mrva/vscode-codeql
1
0
Fork 0
Code Issues Pull Requests Actions 2 Packages Projects Releases Wiki Activity

Merge pull request #2726 from github/koesie10/fix-alert-table-accessibility

Browse Source 
Fix accessibility of alert table
This commit is contained in:
Robert
2023-08-21 11:04:41 +01:00
committed by GitHub
parent 2cb520d603 d6e0c6a4a7
commit 2f4eed4a4d
5 changed files with 484 additions and 34 deletions
Download Patch File Download Diff File Expand all files Collapse all files

443
extensions/ql-vscode/src/stories/results/AlertTable.stories.tsx Normal file
View File

@@ -0,0 +1,443 @@
import * as React from "react";
import { Meta, StoryFn } from "@storybook/react";
import { AlertTable as AlertTableComponent } from "../../view/results/AlertTable";
import "../../view/results/resultsView.css";
export default {
title: "Results/Alert Table",
component: AlertTableComponent,
} as Meta<typeof AlertTableComponent>;
const Template: StoryFn<typeof AlertTableComponent> = (args) => (
<AlertTableComponent {...args} />
);
export const WithoutCodeFlows = Template.bind({});
WithoutCodeFlows.args = {
resultSet: {
t: "InterpretedResultSet",
schema: { name: "alerts", rows: 1, columns: [] },
name: "alerts",
interpretation: {
data: {
version: "2.1.0",
runs: [
{
tool: { driver: { name: "" } },
results: [
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/internal/Streams.java",
uriBaseId: "%SRCROOT%",
index: 0,
},
region: { startLine: 98, startColumn: 35, endColumn: 37 },
},
},
],
partialFingerprints: {
primaryLocationLineHash: "1d25c2fbd979cbb:1",
primaryLocationStartColumnFingerprint: "30",
},
},
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/internal/Streams.java",
uriBaseId: "%SRCROOT%",
index: 0,
},
region: { startLine: 99, startColumn: 35, endColumn: 37 },
},
},
],
partialFingerprints: {
primaryLocationLineHash: "5c5ed8d70236498a:1",
primaryLocationStartColumnFingerprint: "30",
},
},
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/internal/UnsafeAllocator.java",
uriBaseId: "%SRCROOT%",
index: 1,
},
region: {
startLine: 66,
startColumn: 33,
endLine: 68,
endColumn: 6,
},
},
},
],
partialFingerprints: {
primaryLocationLineHash: "bd306a1ab438981d:1",
primaryLocationStartColumnFingerprint: "28",
},
},
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/internal/UnsafeAllocator.java",
uriBaseId: "%SRCROOT%",
index: 1,
},
region: {
startLine: 91,
startColumn: 33,
endLine: 93,
endColumn: 6,
},
},
},
],
partialFingerprints: {
primaryLocationLineHash: "b91980e3f3ee2a16:1",
primaryLocationStartColumnFingerprint: "28",
},
},
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/internal/ReflectionAccessFilterHelper.java",
uriBaseId: "%SRCROOT%",
index: 2,
},
region: {
startLine: 100,
startColumn: 49,
endLine: 102,
endColumn: 10,
},
},
},
],
partialFingerprints: {
primaryLocationLineHash: "e4d69f1851f45b95:1",
primaryLocationStartColumnFingerprint: "40",
},
},
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/internal/UnsafeAllocator.java",
uriBaseId: "%SRCROOT%",
index: 1,
},
region: {
startLine: 112,
startColumn: 33,
endLine: 114,
endColumn: 6,
},
},
},
],
partialFingerprints: {
primaryLocationLineHash: "f3fb11daf511ebdb:1",
primaryLocationStartColumnFingerprint: "28",
},
},
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/internal/bind/DateTypeAdapter.java",
uriBaseId: "%SRCROOT%",
index: 3,
},
region: {
startLine: 84,
startColumn: 42,
endLine: 86,
endColumn: 10,
},
},
},
],
partialFingerprints: {
primaryLocationLineHash: "65a5e0f08a26f7fd:1",
primaryLocationStartColumnFingerprint: "33",
},
},
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/internal/bind/DefaultDateTypeAdapter.java",
uriBaseId: "%SRCROOT%",
index: 4,
},
region: {
startLine: 157,
startColumn: 42,
endLine: 159,
endColumn: 10,
},
},
},
],
partialFingerprints: {
primaryLocationLineHash: "c7647299ca3416a7:1",
primaryLocationStartColumnFingerprint: "33",
},
},
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/internal/bind/JsonTreeWriter.java",
uriBaseId: "%SRCROOT%",
index: 5,
},
region: {
startLine: 227,
startColumn: 52,
endLine: 228,
endColumn: 4,
},
},
},
],
partialFingerprints: {
primaryLocationLineHash: "d86e48478bd5f82f:1",
primaryLocationStartColumnFingerprint: "49",
},
},
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/stream/JsonReader.java",
uriBaseId: "%SRCROOT%",
index: 6,
},
region: {
startLine: 969,
startColumn: 47,
endLine: 971,
endColumn: 8,
},
},
},
],
partialFingerprints: {
primaryLocationLineHash: "3bc8c477478d1d94:1",
primaryLocationStartColumnFingerprint: "40",
},
},
{
ruleId: "java/example/empty-block",
ruleIndex: 0,
rule: { id: "java/example/empty-block", index: 0 },
message: { text: "This is a empty block." },
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "gson/src/main/java/com/google/gson/stream/JsonReader.java",
uriBaseId: "%SRCROOT%",
index: 6,
},
region: {
startLine: 1207,
startColumn: 47,
endLine: 1209,
endColumn: 8,
},
},
},
],
partialFingerprints: {
primaryLocationLineHash: "3bc8c477478d1d94:2",
primaryLocationStartColumnFingerprint: "40",
},
},
],
},
],
t: "SarifInterpretationData",
},
sourceLocationPrefix: "/home/runner/work/gson/gson",
numTruncatedResults: 0,
numTotalResults: 11,
},
},
databaseUri: "file:///a/b/c/java",
resultsPath: "file:///a/b/c/results.sarif",
nonemptyRawResults: true,
offset: 0,
};
export const WithCodeFlows = Template.bind({});
WithCodeFlows.args = {
resultSet: {
t: "InterpretedResultSet",
schema: { name: "alerts", rows: 1, columns: [] },
name: "alerts",
interpretation: {
data: {
version: "2.1.0",
runs: [
{
tool: { driver: { name: "" } },
results: [
{
ruleId: "java/sql-injection",
ruleIndex: 0,
rule: { id: "java/sql-injection", index: 0 },
message: {
text: "This query depends on a [user-provided value](1).",
},
locations: [
{
physicalLocation: {
artifactLocation: {
uri: "src/main/java/org/example/HelloController.java",
uriBaseId: "%SRCROOT%",
index: 0,
},
region: { startLine: 15, startColumn: 29, endColumn: 56 },
},
},
],
partialFingerprints: {
primaryLocationLineHash: "87e2d3cc5b365094:1",
primaryLocationStartColumnFingerprint: "16",
},
codeFlows: [
{
threadFlows: [
{
locations: [
{
location: {
physicalLocation: {
artifactLocation: {
uri: "src/main/java/org/example/HelloController.java",
uriBaseId: "%SRCROOT%",
index: 0,
},
region: {
startLine: 13,
startColumn: 25,
endColumn: 54,
},
},
message: { text: "id : String" },
},
},
{
location: {
physicalLocation: {
artifactLocation: {
uri: "src/main/java/org/example/HelloController.java",
uriBaseId: "%SRCROOT%",
index: 0,
},
region: {
startLine: 15,
startColumn: 29,
endColumn: 56,
},
},
message: { text: "... + ..." },
},
},
],
},
],
},
],
relatedLocations: [
{
id: 1,
physicalLocation: {
artifactLocation: {
uri: "src/main/java/org/example/HelloController.java",
uriBaseId: "%SRCROOT%",
index: 0,
},
region: { startLine: 13, startColumn: 25, endColumn: 54 },
},
message: { text: "user-provided value" },
},
],
},
],
},
],
t: "SarifInterpretationData",
},
sourceLocationPrefix: "/home/runner/work/sql2o-example/sql2o-example",
numTruncatedResults: 0,
numTotalResults: 1,
},
},
databaseUri: "file:///a/b/c/java",
resultsPath: "file:///a/b/c/results.sarif",
nonemptyRawResults: true,
offset: 0,
};

7
extensions/ql-vscode/src/view/common/TextButton.tsx
View File

@@ -8,7 +8,8 @@ const StyledButton = styled.button<{ size: Size }>`
color: var(--vscode-textLink-foreground); color: var(--vscode-textLink-foreground);
border: none; border: none;
cursor: pointer; cursor: pointer;
font-size: ${(props) => props.size}; font-size: ${(props) => props.size ?? "1em"};
padding: 0;
`; `;
const TextButton = ({ const TextButton = ({
@@ -16,8 +17,8 @@ const TextButton = ({
onClick, onClick,
children, children,
}: { }: {
size: Size; size?: Size;
onClick: () => void; onClick: (e: React.MouseEvent) => void;
children: React.ReactNode; children: React.ReactNode;
}) => ( }) => (
<StyledButton size={size} onClick={onClick}> <StyledButton size={size} onClick={onClick}>

35
extensions/ql-vscode/src/view/results/AlertTable.tsx
View File

@@ -1,7 +1,7 @@
import * as React from "react"; import * as React from "react";
import * as Sarif from "sarif"; import * as Sarif from "sarif";
import * as Keys from "./result-keys"; import * as Keys from "./result-keys";
import { chevronDown, chevronRight, info, listUnordered } from "./octicons"; import { info, listUnordered } from "./octicons";
import { import {
className, className,
ResultTableProps, ResultTableProps,
@@ -22,6 +22,7 @@ import { AlertTableHeader } from "./AlertTableHeader";
import { SarifMessageWithLocations } from "./locations/SarifMessageWithLocations"; import { SarifMessageWithLocations } from "./locations/SarifMessageWithLocations";
import { SarifLocation } from "./locations/SarifLocation"; import { SarifLocation } from "./locations/SarifLocation";
import { EmptyQueryResultsMessage } from "./EmptyQueryResultsMessage"; import { EmptyQueryResultsMessage } from "./EmptyQueryResultsMessage";
import { AlertTableDropdownIndicatorCell } from "./AlertTableDropdownIndicatorCell";
type AlertTableProps = ResultTableProps & { type AlertTableProps = ResultTableProps & {
resultSet: InterpretedResultSet<SarifInterpretationData>; resultSet: InterpretedResultSet<SarifInterpretationData>;
@@ -137,7 +138,6 @@ export class AlertTable extends React.Component<
const currentResultExpanded = this.state.expanded.has( const currentResultExpanded = this.state.expanded.has(
Keys.keyToString(resultKey), Keys.keyToString(resultKey),
); );
const indicator = currentResultExpanded ? chevronDown : chevronRight;
const location = result.locations !== undefined && const location = result.locations !== undefined &&
result.locations.length > 0 && ( result.locations.length > 0 && (
<SarifLocation <SarifLocation
@@ -184,16 +184,10 @@ export class AlertTable extends React.Component<
{...selectableZebraStripe(resultRowIsSelected, resultIndex)} {...selectableZebraStripe(resultRowIsSelected, resultIndex)}
key={resultIndex} key={resultIndex}
> >
{/* <AlertTableDropdownIndicatorCell
eslint-disable-next-line expanded={currentResultExpanded}
jsx-a11y/no-noninteractive-element-interactions onClick={toggler(indices)}
*/} />
<td
className="vscode-codeql__icon-cell vscode-codeql__dropdown-cell"
onMouseDown={toggler(indices)}
>
{indicator}
</td>
<td className="vscode-codeql__icon-cell">{listUnordered}</td> <td className="vscode-codeql__icon-cell">{listUnordered}</td>
<td colSpan={2}>{msg}</td> <td colSpan={2}>{msg}</td>
{locationCells} {locationCells}
@@ -206,9 +200,6 @@ export class AlertTable extends React.Component<
Keys.keyToString(pathKey), Keys.keyToString(pathKey),
); );
if (currentResultExpanded) { if (currentResultExpanded) {
const indicator = currentPathExpanded
? chevronDown
: chevronRight;
const isPathSpecificallySelected = Keys.equalsNotUndefined( const isPathSpecificallySelected = Keys.equalsNotUndefined(
pathKey, pathKey,
selectedItem, selectedItem,
@@ -225,16 +216,10 @@ export class AlertTable extends React.Component<
<td className="vscode-codeql__icon-cell"> <td className="vscode-codeql__icon-cell">
<span className="vscode-codeql__vertical-rule"></span> <span className="vscode-codeql__vertical-rule"></span>
</td> </td>
{/* <AlertTableDropdownIndicatorCell
eslint-disable-next-line expanded={currentPathExpanded}
jsx-a11y/no-noninteractive-element-interactions onClick={toggler([pathKey])}
*/} />
<td
className="vscode-codeql__icon-cell vscode-codeql__dropdown-cell"
onMouseDown={toggler([pathKey])}
>
{indicator}
</td>
<td className="vscode-codeql__text-center" colSpan={3}> <td className="vscode-codeql__text-center" colSpan={3}>
Path Path
</td> </td>

18
extensions/ql-vscode/src/view/results/AlertTableDropdownIndicatorCell.tsx Normal file
View File

@@ -0,0 +1,18 @@
import * as React from "react";
import TextButton from "../common/TextButton";
import { chevronDown, chevronRight } from "./octicons";
type Props = {
expanded: boolean;
onClick: (e: React.MouseEvent) => void;
};
export function AlertTableDropdownIndicatorCell({ expanded, onClick }: Props) {
const indicator = expanded ? chevronDown : chevronRight;
return (
<td className="vscode-codeql__icon-cell">
<TextButton onClick={onClick}>{indicator}</TextButton>
</td>
);
}

15
extensions/ql-vscode/src/view/results/resultsView.css
View File

@@ -84,8 +84,15 @@
.vscode-codeql__result-table th { .vscode-codeql__result-table th {
border-top: 1px solid rgba(88, 96, 105, 0.25); border-top: 1px solid rgba(88, 96, 105, 0.25);
border-bottom: 1px solid rgba(88, 96, 105, 0.25); border-bottom: 1px solid rgba(88, 96, 105, 0.25);
font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, font-family:
sans-serif, Apple Color Emoji, Segoe UI Emoji; -apple-system,
BlinkMacSystemFont,
Segoe UI,
Helvetica,
Arial,
sans-serif,
Apple Color Emoji,
Segoe UI Emoji;
background: rgba(225, 228, 232, 0.25); background: rgba(225, 228, 232, 0.25);
padding: 0.25em 0.5em; padding: 0.25em 0.5em;
text-align: center; text-align: center;
@@ -167,10 +174,6 @@ td.vscode-codeql__icon-cell {
width: 24px; width: 24px;
} }
td.vscode-codeql__dropdown-cell:hover {
cursor: pointer;
}
td.vscode-codeql__path-index-cell { td.vscode-codeql__path-index-cell {
text-align: right; text-align: right;
} }