Merge pull request #2034 from IBMa/htmlReport-2026-nam

feature(extension): HTML Report Hidden Filter Addition #2026

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

@@ -638,6 +638,8 @@ export class DevtoolsController extends Controller {
         let bgController = await getBGController();
         let rulesets = await bgController.getRulesets(this.contentTabId);
         let tabInfo = await bgController.getTabInfo(this.contentTabId);
+        let url = tabInfo.url!;
+        let Ignored = await bgController.getIgnore(url);
         if (devtoolsState?.lastReport && rulesets) {
             let reportObj: any = {
                 tabURL: tabInfo.url,
@@ -649,6 +651,8 @@ export class DevtoolsController extends Controller {
                     counts: {
                         "total": devtoolsState?.lastReport.counts.total
                     },
+                    ignored:Ignored,
+
                     results: []
                 }
             }

report-react/src/IReport.tsx

@@ -33,6 +33,7 @@ export interface IReport {
     }
     passUniqueElements?: string[]
     testedUniqueElements?: number
+    ignored?:string[]
 }
 
 export interface IReportItem {
@@ -45,7 +46,8 @@ export interface IReportItem {
     value: string[],
     message: string,
     snippet: string,
-    help: string
+    help: string,
+    isHidden?:boolean,
 }
 
 export interface ICheckpoint {

report-react/src/SavedReport.scss

@@ -207,4 +207,33 @@
             }
         }
     }
+    .viewMulti {
+        float:right;
+        width: 230px;
+        .cds--list-box {
+            max-height: 2rem;
+        }   
+        .cds--list-box__field {
+            background-color: #f4f4f4;
+            border: solid #a8a8a8 1px;
+        }
+    }
+    .iconGroup{
+        display: flex;
+        gap: 0.75rem;
+        align-items: center;
+    .iconSummary{
+        display: flex;
+        align-items: center;
+        font-weight: 600;
+    }
+}
+.reportGroupFilter{
+    display:flex;
+    flex-direction:column ;
+    float: right;
+    align-items: flex-end;
+    row-gap: 0.5rem;
+}
+
 }

report-react/src/SavedReport.tsx

@@ -22,7 +22,7 @@ import ReportChecklist from './report/ReportChecklist';
 import ReportRules from './report/ReportRules';
 import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme,Dropdown,MultiSelect} from '@carbon/react';
 import { UtilIssueReact } from "./util/UtilIssueReact";
-import { Violation16,NeedsReview16,Recommendation16 } from "./util/UtilImages";
+import { Violation16,NeedsReview16,Recommendation16,ViewOff16 } from "./util/UtilImages";
 import ReportElements from "./report/ReportElements";
 
 
@@ -40,7 +40,7 @@ const filterItems = [
     { id: '0', text: 'Violations' },
     { id: '1', text: 'Needs review' },
     { id: '2', text: 'Recommendations' },
-    // { id: '3', text: 'Hidden' },
+    { id: '3', text: 'Hidden' },
 ]
 const viewItems = ["Element roles", "Requirements","Rules"];
 
@@ -75,8 +75,17 @@ export class SavedReport extends React.Component<SavedReportProps, SavedReportSt
             this.setState({selectedItems:[...this.state.selectedItems,updatedFilter]})
         }
       }
+
     render() {
 
+
+        function issueBaselineMatch(baselineIssue: { ruleId: string, reasonId: string, path: { dom: string }, messageArgs: string[] }, issue: any) {
+            const ruleIdMatch = baselineIssue.ruleId === issue.ruleId;
+            const reasonIdMatch = baselineIssue.reasonId === issue.reasonId;
+            const pathDomMatch = baselineIssue.path?.dom === issue.path?.dom;       
+            return ruleIdMatch && reasonIdMatch && pathDomMatch ;
+        }
+
         if (!this.props.reportData) {
             return <React.Fragment>Report Error</React.Fragment>
         }
@@ -89,33 +98,58 @@ export class SavedReport extends React.Component<SavedReportProps, SavedReportSt
         let violations = 0;
         let needReview = 0;
         let recommendation = 0;
+        let hidden=0;
         for (const issue of this.props.reportData.report.results) {
-            if (issue.value[0] === "VIOLATION" && issue.value[1] === "FAIL") {
+            const isHidden = this.props.reportData?.report?.ignored && this.props.reportData?.report?.ignored.some(ignoredIssue => issueBaselineMatch(issue as any, ignoredIssue));
+
+            if (issue.value[0] === "VIOLATION" && issue.value[1] === "FAIL" && !isHidden) {
                 ++violations;
-            } else if (issue.value[0] === "VIOLATION" && (issue.value[1] === "POTENTIAL" || issue.value[1] === "MANUAL")) {
+            } else if (issue.value[0] === "VIOLATION" && (issue.value[1] === "POTENTIAL" || issue.value[1] === "MANUAL") && !isHidden) {
                 ++needReview;
-            } else if (issue.value[0] === "RECOMMENDATION") {
+            } else if (issue.value[0] === "RECOMMENDATION" && !isHidden) {
                 ++recommendation;
+            } else if(isHidden){
+                ++hidden;
             }
         }
-        const selectedFilters = this.state.selectedItems.map(item => item.text);
+        let total=violations+needReview+recommendation;
 
-        const filteredReport = {
-            ...this.props.reportData.report,
-            results: this.props.reportData.report.results.filter(issue => {
-                if (selectedFilters.includes("Violations") && issue.value[0] === "VIOLATION" && issue.value[1] === "FAIL") {
-                    return true;
-                }
-                if (selectedFilters.includes("Needs review") && issue.value[0] === "VIOLATION" && (issue.value[1] === "POTENTIAL" || issue.value[1] === "MANUAL")) {
-                    return true;
-                }
-                if (selectedFilters.includes("Recommendations") && issue.value[0] === "RECOMMENDATION") {
-                    return true;
-                }
-                return false; 
-            })
-        };
+        const selectedFilters = this.state.selectedItems.map(item => item.text);
 
+
+const filteredReport = {
+    ...this.props.reportData.report,
+    results: this.props.reportData.report.results
+        .map(issue => {
+            // Check if the issue is hidden
+            const isHidden = this.props.reportData?.report?.ignored?.some(ignoredIssue => 
+                issueBaselineMatch(issue as any, ignoredIssue)
+            );
+            // Add the hidden flag to each issue
+            return {
+                ...issue,
+                isHidden: isHidden 
+            };
+        })
+        .filter(issue => {
+            // show issues based on selected filter
+            if (issue.isHidden && selectedFilters.includes("Hidden")) {
+                return true;
+            }
+            if (selectedFilters.includes("Violations") && issue.value[0] === "VIOLATION" && issue.value[1] === "FAIL" && !issue.isHidden) {
+                return true;
+            }
+            if (selectedFilters.includes("Needs review") && issue.value[0] === "VIOLATION" && (issue.value[1] === "POTENTIAL" || issue.value[1] === "MANUAL") && !issue.isHidden) {
+                return true;
+            }
+            if (selectedFilters.includes("Recommendations") && issue.value[0] === "RECOMMENDATION" && !issue.isHidden) {
+                return true;
+            }
+
+            return false; 
+        })
+};
+
         return <div
             role="main"
             id="main-content"
@@ -165,9 +199,16 @@ export class SavedReport extends React.Component<SavedReportProps, SavedReportSt
                         <Grid>
                             <Column sm={4} md={8} lg={{offset: 4, span: 12}}>
                                 <div className="summReport">
-                                    <div style={{display:"flex",float:"right",gap:"1rem"}}>
-                                    <div style={{flex: "1 1 0", marginRight: "0px", margin: "-1px 0px" }}>
-                                    <Dropdown
+                                    <div className="reportGroupFilter">
+                                        <div className="iconGroup">
+                                    <span className="iconSummary">{Violation16}&nbsp;{violations}</span>
+                                    <span className="iconSummary">{Recommendation16}&nbsp;{recommendation}</span>
+                                    <span className="iconSummary">{NeedsReview16}&nbsp;{needReview}</span>
+                                    <span className="iconSummary">{ViewOff16}&nbsp;{hidden}</span>
+                                    <span style={{paddingLeft:"1rem"}}>{total} issues found</span>
+                                    </div>
+                                    <div style={{display:"flex",float:"right"}}>
+                                      <Dropdown
                                     className="viewMulti"
                                     ariaLabel="Select report view"
                                     id="reportView"
@@ -182,9 +223,7 @@ export class SavedReport extends React.Component<SavedReportProps, SavedReportSt
                                         this.setState({ reportViewState: evt.selectedItem });
                                     }}
                                 />
-                                </div>
-                                <div style={{flex: "1 1 0", margin: "-1px 0px",minWidth:"230px"}}>
-                                <MultiSelect
+                                    <MultiSelect
                                     className="viewMulti"
                                     ariaLabel="Issue type filter"
                                     label="Filter"
@@ -214,8 +253,8 @@ export class SavedReport extends React.Component<SavedReportProps, SavedReportSt
 
                                 />
                                 </div>
-                            
-                                </div>
+
+</div>
                                 {filteredReport.results.length>0 && <>
                                 {this.state.reportViewState === "Element roles" && <>
                                         <div style={{marginTop:"4rem"}}  role="table" aria-label="Issues grouped by Element roles">

report-react/src/ScoreCard.scss

@@ -19,7 +19,7 @@
     }
 
     .description {
-        color: #565656;
+        @include type.type-style('helper-text-01');
     }
 
     @include breakpoint.breakpoint('sm') {

report-react/src/SummScoreCard.scss

@@ -8,6 +8,10 @@
 
     border: 1px solid #9E63FB;
     background-color: #E8DAFF;
+
+    .summaryTitleDetail {
+        @include type.type-style('helper-text-01');
+    }
 
     .scLeft {
         flex: 0 0 51.25%;

report-react/src/SummScoreCard.tsx

@@ -71,7 +71,7 @@ export default class SummScoreCard extends React.Component<SummScoreCardProps, {
                 <Column sm={2} md={4} lg={4} className="scLeft">
                     <h2 className="title">{this.props.title}</h2>
                     <div className="score">{currentStatus}%</div>
-                    <div>Percentage of elements with no detected violations or items to review</div>
+                    <div className="summaryTitleDetail">Percentage of elements with no detected violations or items to review</div>
                 </Column>
                 <Column sm={2} md={4} lg={6}>
                     <div>
@@ -90,7 +90,7 @@ export default class SummScoreCard extends React.Component<SummScoreCardProps, {
                         >IBM Equal Access Toolkit</a> to guide you.
                     </div>
                     <div style={{paddingTop:"36px"}}>More resources:</div>
-                    <div><a className="link" href="https://www.ibm.com/able/toolkit/develop/overview/#unit-testing" target="_blank" rel="noopener noreferrer" style={{color:'#002D9C'}}>Quick unit test for accessibility</a></div>
+                    <div><a className="link" href="https://www.ibm.com/able/toolkit/develop/overview/#unit-testing" target="_blank" rel="noopener noreferrer" style={{color:'#002D9C'}}>Quick unit test for developers</a></div>
                     <div><a className="link" href="https://www.ibm.com/able/toolkit/verify/overview"target="_blank" rel="noopener noreferrer" style={{color:'#002D9C'}}>Full accessibility test process</a></div>
                 </Column>
             </Grid>

report-react/src/report/ReportElements.tsx

@@ -75,7 +75,7 @@ export default class ReportElements extends React.Component<IReportElementsProps
                     <div className="label" style={{ marginLeft: "2rem" }}>Issues</div>
                 </Column>
                 <Column sm={3} md={6} lg={8}>
-                    <div className="label">Element</div>
+                    <div className="label">Element Roles</div>
                 </Column>
             </Grid>
             {groups.map(group => {

report-react/src/report/ReportRow.tsx

@@ -17,11 +17,10 @@
 import React, { RefObject } from "react";
 
 import { IReportItem, valueMap, ICheckpoint, IReport } from "../IReport";
-import Popup from "@carbon/icons-react/lib/Popup";
 import ChevronUp from "@carbon/icons-react/lib/ChevronUp";
 import ChevronDown from "@carbon/icons-react/lib/ChevronDown";
 import { Grid, Column } from "@carbon/react";
-import { Violation16,NeedsReview16,Recommendation16 } from "../util/UtilImages";
+import { Violation16,NeedsReview16,Recommendation16,ViewOff16} from "../util/UtilImages";
 
 
 
@@ -48,7 +47,7 @@ export default class ReportRow extends React.Component<IReportRowProps, IReportR
     scrollRef: RefObject<HTMLDivElement> = React.createRef();
 
     state: IReportRowState = {
-        expanded: false,
+        expanded: true,
         lastTimestamp: this.props.report.timestamp,
         scrollTo: false
     };
@@ -112,10 +111,10 @@ export default class ReportRow extends React.Component<IReportRowProps, IReportR
             <Grid role="row" aria-expanded={open} className="itemHeader" onClick={this.toggleRow.bind(this)} tabIndex={0} onKeyDown={this.onKeyDown.bind(this)}>
                 <Column sm={1} md={2} lg={4} role="cell">
                     {this.state.scrollTo && <div ref={this.scrollRef}></div>}
-                    <span style={{ paddingRight: "16px" }}>{open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}</span>
-                    {vCount > 0 && <><span style={{ verticalAlign: "text-top", lineHeight: "8px" }}>{vCount}</span> <span>{Violation16}&nbsp;</span></>}
-                    {nrCount > 0 && <><span style={{ verticalAlign: "text-top", lineHeight: "8px" }}>{nrCount}</span> <span>{NeedsReview16}&nbsp;</span></>}
-                    {rCount > 0 && <><span style={{ verticalAlign: "text-top", lineHeight: "8px" }}>{rCount}</span> {Recommendation16}</>}
+                    <span style={{ paddingRight: "14px" }}>{open ? <ChevronUp size={16} /> : <ChevronDown size={16} />}</span>
+                    {vCount > 0 && <> <span>{Violation16}</span><span style={{verticalAlign: "text-top",lineHeight: "8px",  margin: ".25rem" }}>{vCount}</span></>}
+                    {nrCount > 0 && <> <span>{NeedsReview16}</span><span style={{verticalAlign: "text-top", lineHeight: "8px" , margin: ".25rem" }}>{nrCount}</span></>}
+                    {rCount > 0 && <><span>&nbsp;{Recommendation16}</span><span style={{ verticalAlign: "text-top", lineHeight: "8px", margin: ".25rem"  }}>{rCount}</span> </>}
                 </Column>
                 <Column sm={3} md={6} lg={8} role="cell">
                     <span >{group.title.length === 0 ? "Page" : group.title}</span>
@@ -125,19 +124,20 @@ export default class ReportRow extends React.Component<IReportRowProps, IReportR
             {open && <React.Fragment>
                 {group.items.map(item => {
                     let val = valueMap[item.value[0]][item.value[1]];
-                    return (<Grid className={"itemDetail"}>
-                        <Column sm={1} md={2} lg={4} role="cell"></Column>
-                        <Column sm={3} md={6} lg={8} role="cell">
-                            <div className="itemMessage">
+                    return (
+                    <Grid className={"itemDetail"} fullWidth>
+                        <Column  sm={4} md={8} lg={16} role="cell">
+                            <div className="itemMessage" style={{ width: "100%" }}>
                                 {val === "Violation" && <span>{Violation16}</span>}
                                 {val === "Needs review" && <span>{NeedsReview16}</span>}
                                 {val === "Recommendation" && <span>{Recommendation16}</span>}
+                                {item.isHidden===true && <span>{ViewOff16}</span>}
                                 <span style={{ fontSize: "12px" }}>{item.message}</span>
                                 <span> </span><a className="helpLink" href="/#" onClick={(evt) => {
                                     this.props.selectItem(item);
                                     evt.preventDefault();
                                     return false;
-                                }}>Learn more <Popup size={16} /></a>
+                                }}>Learn more </a>
                             </div>
                         </Column>
                     </Grid>)

report-react/src/report/report.scss

@@ -26,14 +26,16 @@
     padding: 0rem;
 
     .reportHeader {
-        height: 2rem;
-        background-color: #e0e0e0;
+        background-color: #f4f4f4;
         color: #161616;
-
+        border-top: solid #a8a8a8;
+        border-bottom:  solid #a8a8a8;
+        margin: 0rem -1rem;
+        padding: 0.5rem 0rem .5rem 1rem;
+        height: 100%;
         .label {
             @include type.type-style('heading-01');
             font-size: 12px;
-            padding: .4375rem 0 0;
         }
     }
 
@@ -42,6 +44,9 @@
         min-height: 32px;
         padding: 10px 0px 0px;
     }
+    .itemHeader[aria-expanded="true"]{
+        border-bottom: solid #888888 1px;
+      }
 
     .itemDetail {
         border-bottom: solid #888888 1px;
@@ -51,9 +56,8 @@
         } 
 
         .itemMessage {
-            margin-left: 5px;
-            text-indent: -22px;
-
+            margin-left: 1rem;
+
             img, svg {
                 margin-right: 6px;
                 vertical-align: middle;
@@ -68,7 +72,6 @@
     }
 
     .helpLink {
-        color: #000000;
         font-size: 12px;
         text-decoration: underline;
         svg {