Show passed

README.md

@@ -137,11 +137,11 @@ Example:
 ```
 # Run local webserver
 yarn global add serve
-serve coverage/dist
+serve report/dist
 
 # Upload the report
 yarn global add surge
-cd coverage/dist
+cd report/dist
 surge
 ```
 

report/src/app/DataList.tsx

@@ -11,7 +11,6 @@ interface DataListState {
   isOpen: boolean;
   selected: any;
   sortIncreasing: boolean;
-  showPassedURLs: boolean;
   includePossibleIssues: boolean;
   sitesWithIssues: any[];
   sitesWithoutIssues: any[];
@@ -71,7 +70,6 @@ export class ExpandableDataList extends React.Component<
       isOpen: false,
       selected: "Sort by URL",
       sortIncreasing: true,
-      showPassedURLs: false,
       includePossibleIssues: true,
       sitesWithIssues,
       sitesWithoutIssues,
@@ -138,12 +136,6 @@ export class ExpandableDataList extends React.Component<
       expanded: shouldExpandAll ? Object.keys(this.props.report) : [],
     });
   };
-  handleShowPass = (checked, event) => {
-    const target = event.target;
-    const showPassedURLs =
-      target.type === "checkbox" ? target.checked : target.value;
-    this.setState({ showPassedURLs });
-  };
   handlePossibleIssues = (checked, event) => {
     const target = event.target;
     const includePossibleIssues =
@@ -174,14 +166,12 @@ export class ExpandableDataList extends React.Component<
       hideScreenshots,
       expandAll,
       sortIncreasing,
-      showPassedURLs,
       includePossibleIssues,
       sitesWithIssues,
       sitesWithoutIssues,
       totalNumberIssues,
     } = this.state;
     const { report } = this.props;
-
     return (
       <React.Fragment>
         <Bullseye style={{ padding: "15px" }}>
@@ -216,8 +206,6 @@ export class ExpandableDataList extends React.Component<
           handleChange={this.handleChange}
           expandAll={expandAll}
           handleExpandAll={this.handleExpandAll}
-          showPassedURLs={showPassedURLs}
-          handleShowPass={this.handleShowPass}
           includePossibleIssues={includePossibleIssues}
           handlePossibleIssues={this.handlePossibleIssues}
           sortIncreasing={sortIncreasing}
@@ -228,7 +216,7 @@ export class ExpandableDataList extends React.Component<
         <DataList aria-label="Accessibility report" isCompact>
           {[
             ...this.state.sitesWithIssues,
-            ...(this.state.showPassedURLs ? this.state.sitesWithoutIssues : []),
+            ...(this.state.sitesWithoutIssues || []),
           ]
             .filter((val: any) => {
               // filter out issues that do not match current severity selection
@@ -237,6 +225,9 @@ export class ExpandableDataList extends React.Component<
               const numViolations = val.filteredViolations?.length || 0; 
               const numIncomplete = val.filteredIncomplete?.length || 0; 
               if (numViolations + numIncomplete === 0) {
+                if (this.state.severitySelections.includes("ok")) {
+                  return val;
+                }
                 return null;
               } 
               return val;

report/src/app/SeveritySelect.tsx

@@ -39,6 +39,7 @@ const SeveritySelectInternal = ({ onSelect }) => {
       <SelectOption value="serious">Serious</SelectOption>
       <SelectOption value="moderate">Moderate</SelectOption>
       <SelectOption value="minor">Minor</SelectOption>
+      <SelectOption value="ok">Passed</SelectOption>
     </Select>
   );
 };

report/src/app/Toolbar.tsx

@@ -19,8 +19,6 @@ export const Toolbar = ({
   handleChange,
   expandAll,
   handleExpandAll,
-  showPassedURLs,
-  handleShowPass,
   includePossibleIssues,
   handlePossibleIssues,
   sortIncreasing,
@@ -43,16 +41,6 @@ export const Toolbar = ({
       <ToolbarItem>
         <ExpandAll expandAll={expandAll} handleExpandAll={handleExpandAll} />
       </ToolbarItem>
-      <ToolbarItem>
-        <Checkbox
-          label="Show passed URLs"
-          isChecked={showPassedURLs}
-          onChange={handleShowPass}
-          aria-label="Show passed URLs"
-          id="showPassedId"
-          name="showPassedName"
-        />
-      </ToolbarItem>
       <ToolbarItem>
         <Checkbox
           label={

report/webpack.config.js

@@ -6,7 +6,8 @@ const CopyPlugin = require('copy-webpack-plugin');
 
 module.exports = {
   entry: path.resolve(__dirname + '/src/index.tsx'),
-  devtool: 'eval-cheap-source-map',
+  // devtool: 'eval-cheap-source-map',
+  devtool: 'eval-source-map',
   mode: 'development',
   output: {
     path: path.resolve(__dirname + '/dist'),