Merge pull request #1850 from IBMa/joho-ReportsShowHide-1709

feature(extension): Add hidden issues to the Checker reports

accessibility-checker-extension/src/ts/background/backgroundController.ts

@@ -31,10 +31,11 @@ export type TabChangeType = {
 
 type eLevel = "Violation" | "Needs review" | "Recommendation";
 
-export function issueBaselineMatch(baselineIssue: {ruleId: string, reasonId:string, path: { dom: string}}, issue: IIssue) {
+export function issueBaselineMatch(baselineIssue: {ruleId: string, reasonId:string, path: { dom: string}, messageArgs: string[]}, issue: IIssue) {
     return baselineIssue.ruleId === issue.ruleId
         && baselineIssue.reasonId === issue.reasonId
-        && baselineIssue.path.dom === issue.path.dom;
+        && baselineIssue.path.dom === issue.path.dom
+        && JSON.stringify(baselineIssue.messageArgs) === JSON.stringify(issue.messageArgs);
 }
 
 class BackgroundController extends Controller {
@@ -399,6 +400,17 @@ class BackgroundController extends Controller {
                         }
                     });
                 }, [settings]);
+
+                // Remove issues that are essentially equivalent to the user (same path, rule, reason, and message)
+                for (let idx=0; idx<report.results.length; ++idx) {
+                    for (let checkIdx=0; checkIdx < idx; ++checkIdx) {
+                        if (issueBaselineMatch(report.results[idx], report.results[checkIdx])) {
+                            report.results.splice(idx--, 1);
+                            break;
+                        }
+                    }
+                }
+
                 console.info(`[INFO]: Scanning complete in ${report.totalTime}ms with ${report.ruleTime}ms in rules`);
                 let browser = (navigator.userAgent.match(/\) ([^)]*)$/) || ["", "Unknown"])[1];
                 this.metrics.profileV2(report.totalTime, browser, settings.selected_ruleset.id);

accessibility-checker-extension/src/ts/devtools/components/reportTreeGrid.tsx

@@ -869,6 +869,8 @@ export class ReportTreeGrid<RowType extends IRowGroup> extends React.Component<R
                                 let url = (await ReportTreeGrid.bgcontroller.getTabInfo(getTabId())).url!;
                                 ReportTreeGrid.bgcontroller.setIgnore(url, this.state.checkedIssues, ignoreAction !== "Show");
                                 this.setState({checkedIssues: []});
+                                let report = await ReportTreeGrid.devtoolsController.getReport();
+                                await ReportTreeGrid.devtoolsController.setReport(report);
                                 this.props.onFilterToolbar(true);
                             }}
                         >{ignoreAction}</TableBatchAction>

accessibility-checker-extension/src/ts/devtools/devtoolsController.ts

@@ -83,6 +83,9 @@ export class DevtoolsController extends Controller {
         });
     }
 
+     /**
+     * Set stored reports
+     */
     public async setStoredReportsMeta(updateMetaArr: IStoredReportMeta[]) : Promise<void> {
         return await this.hook("setStoredReportsMeta", updateMetaArr, async () => {
             if (updateMetaArr.length === 0) {
@@ -177,6 +180,65 @@ export class DevtoolsController extends Controller {
 
     private scanCounter = 1;
 
+    valueMap: { [key: string]: { [key2: string]: string } } = {
+        "VIOLATION": {
+            "POTENTIAL": "Needs review",
+            "FAIL": "Violation",
+            "PASS": "Pass",
+            "MANUAL": "Needs review"
+        },
+        "RECOMMENDATION": {
+            "POTENTIAL": "Recommendation",
+            "FAIL": "Recommendation",
+            "PASS": "Pass",
+            "MANUAL": "Recommendation"
+        },
+        "INFORMATION": {
+            "POTENTIAL": "Needs review",
+            "FAIL": "Violation",
+            "PASS": "Pass",
+            "MANUAL": "Recommendation"
+        }
+    };
+
+    initCount() {
+        return {
+            "Violation": 0,
+            "Needs review": 0,
+            "Recommendation": 0,
+            "Hidden": 0,
+            "Pass": 0,
+            "total": 0,
+        }
+    }
+
+    async getCountsWithHidden (reportCounts: IReport["counts"], ignored: IIssue[]) {
+        let counts = this.initCount(); // setup counts
+        // populate initial counts
+        counts.Violation = reportCounts.Violation;
+        counts["Needs review"] = reportCounts["Needs review"];
+        counts.Recommendation = reportCounts.Recommendation;
+        counts.Hidden = ignored.length;
+        counts.Pass = reportCounts.Pass;
+
+        // correct issue type counts to take into account the hidden issues
+        if (ignored.length > 0) { // if we have hidden
+            for (const ignoredIssue of ignored) {
+                if ("Violation" === this.valueMap[ignoredIssue.value[0]][ignoredIssue.value[1]]) {
+                    counts.Violation--;
+                }
+                if ("Needs review" === this.valueMap[ignoredIssue.value[0]][ignoredIssue.value[1]]) {
+                    counts["Needs review"]--;
+                }
+                if ("Recommendation" === this.valueMap[ignoredIssue.value[0]][ignoredIssue.value[1]]) {
+                    counts.Recommendation--;
+                }
+            }
+        }
+        counts.total = counts.Violation + counts["Needs review"] + counts.Recommendation;
+        return counts;
+    }
+
     /**
      * Set report 
      */
@@ -187,6 +249,8 @@ export class DevtoolsController extends Controller {
             if (report) {
                 let tabId = getTabId();
                 let tabInfo = await bgController.getTabInfo(tabId);
+                let ignored: IIssue[] = await bgController.getIgnore(tabInfo.url!);
+                let newCounts = await this.getCountsWithHidden(report.counts, ignored);
                 const now = new Date().getTime();
                 devtoolsState!.lastReportMeta = {
                     id: devtoolsState!.storedReports.length+"",
@@ -200,13 +264,14 @@ export class DevtoolsController extends Controller {
                     storedScanData: MultiScanData.issues_sheet_rows({
                         settings: settings,
                         report: report,
+                        ignored: ignored,
                         pageTitle: tabInfo.title!,
                         pageURL: tabInfo.url!,
                         timestamp: now+"",
                         rulesets: await bgController.getRulesets(tabId!)
                     }),
                     testedUniqueElements: report.testedUniqueElements,
-                    counts: report.counts
+                    counts: newCounts
                 };
                 if (devtoolsState?.storeReports) {
                     devtoolsState.storedReports.push(devtoolsState.lastReportMeta);
@@ -534,6 +599,7 @@ export class DevtoolsController extends Controller {
                 this.xlsxReportHandler("current");
             }
         });
+
     }
 
     private async htmlReportHandler() {

accessibility-checker-extension/src/ts/docs/QuickGuideACApp.tsx

@@ -308,10 +308,9 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
                     </p>
 
                     <h2 id="hide">6. Show/Hide issues</h2>
-                    <p>
-                        The Hide feature allows issues to be ignored or marked as resolved. 
-                        When this feature is used, issues are not only hidden from view, they are also subtracted from the respective issue counts. 
-                        Issues that are determined to be irrelevant or resolved can be hidden and removed from the counts towards achieving a goal of zero counts both in the issues list and in the Scan summary report.
+                    <p>                      
+                        The Hide feature allows issues to be removed from view and subtracted from the respective issue counts and Scan summary report. 
+                        This can be useful for showing a set of issues or reflecting progress by hiding issues that have been resolved or identified to be fixed later.
                     </p>
                     <p>
                         <img

accessibility-checker-extension/src/ts/docs/UsingACApp.tsx

@@ -329,7 +329,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                 </p>
                 <p>
                     <img
-                        src="assets/img/3.1Checker1.png"
+                        src="assets/img/3.1Checker123.png"
                         alt="DevTools with 'Elements tab', 'Accessibility Checker tab', and blue scan button highlighted and numbered 1 to 3"
                     />
                 </p>
@@ -613,10 +613,8 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
 
                 <h2 id="hide_issues">3.8 Show/Hide issues</h2>
                     <p>
-                        The Hide feature allows issues to be ignored or marked as resolved. 
-                        When this feature is used, issues are not only hidden from view, they are also subtracted from the respective issue counts. 
-                        Issues that are determined to be irrelevant or resolved can be hidden and removed from the counts 
-                        towards achieving a goal of zero counts both in the issues list and in the Scan summary report.
+                        The Hide feature allows issues to be removed from view and subtracted from the respective issue counts and Scan summary report. 
+                        This can be useful for showing a set of issues or reflecting progress by hiding issues that have been resolved or identified to be fixed later.
                     </p>
                     <p>
                         <img

accessibility-checker-extension/src/ts/interfaces/interfaces.ts

@@ -129,6 +129,7 @@ export type StoredScanData = [
     string, //item.snippet,
     string, //item.path.dom,
     string, //engine_end_point + '/tools/help/' + item.ruleId
+    boolean,//hidden if true
 ];
 
 export interface IStoredReportMeta extends IBasicTableRowRecord {
@@ -143,6 +144,7 @@ export interface IStoredReportMeta extends IBasicTableRowRecord {
         "Violation": number
         "Needs review": number
         "Recommendation": number
+        "Hidden" : number
         "Pass": number
         total: number
     }

accessibility-checker-extension/src/ts/util/xlsxReport/multiScanReport/xlsx/MultiScanData.tsx

@@ -14,14 +14,15 @@
     limitations under the License.
  *****************************************************************************/
 
-import { IReport, ISettings, StoredScanData } from "../../../../interfaces/interfaces";
+import { IReport, IIssue, ISettings, StoredScanData } from "../../../../interfaces/interfaces";
 
 
 const stringHash = require("string-hash");
 
 interface XLSXProps {
     settings: ISettings,
     report: IReport,
+    ignored: IIssue[],
     pageURL: string,
     pageTitle: string,
     timestamp: string,
@@ -30,7 +31,7 @@ interface XLSXProps {
 
 export default class MultiScanData { 
 
-    // this class barrows heavily from singlePageReport
+    // this class borrows heavily from singlePageReport
     // however, our purpose here is just to generate the data
     // needed for a multiScanReport which will replace singlePageReport
     // also when saving scans we will be saving a reduced set of the 
@@ -41,11 +42,14 @@ export default class MultiScanData {
     // sheet as all other data is either static or can be calculated
     // from the issue data
 
+
+
     public static issues_sheet_rows(xlsx_props: XLSXProps) : StoredScanData[] {
 
         let ret: any[] = [];
 
         let report = xlsx_props.report;
+        let ignored = xlsx_props.ignored;
         let tab_url = xlsx_props.pageURL;
         let tab_title = xlsx_props.pageTitle;
         const rule_map = this.id_rule_map(xlsx_props);
@@ -80,6 +84,17 @@ export default class MultiScanData {
             if (item.value[1] === "PASS") {
                 continue;
             }
+
+            // Calc hidden, add to end of row
+            let hidden = false;
+            for (const ignoredIssue of ignored) {
+                hidden = item.path.dom === ignoredIssue.path.dom
+                         && item.ruleId === ignoredIssue.ruleId
+                         && item.reasonId === ignoredIssue.reasonId;
+                if (hidden === true) {
+                    break;
+                }
+            }
 
             let row = [
                 tab_title,
@@ -95,7 +110,8 @@ export default class MultiScanData {
                 this.get_element(item.snippet),
                 item.snippet,
                 item.path.dom,
-                item.help
+                item.help,
+                hidden
             ]
 
             ret.push(row);