feature(extension): HTML Report Card Change, View menu, CSS and fonts, Filter addition, and include Hidden

accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss

@@ -65,7 +65,7 @@
 
     &.cds--g10 {
         .status-score-tile {
-            background-color: #BE95FF; // purple / 40
+            background-color:#E8DAFF ; // purple / 20
         }
     }
 

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: []
                 }
             }

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

@@ -206,12 +206,12 @@ export class QuickGuideACApp extends React.Component<{}, quickGuideACAppState> {
 
                     <h2 id="scan">2. Create a scan report</h2>
                     <p>
-                        From a single scan, generate a report in both HTML web and Microsoft Excel XLS spreadsheet formats.
+                        From a single scan, export a report in both HTML web and Microsoft Excel XLS spreadsheet formats.
                     </p>
                     <p>
                         <img
                             src="assets/img/2_2_ScanReport.png"
-                            alt="open dropdown menu with focus on 'Download current scan'"
+                            alt="'Export XLS' button highlighted"
                         />
                     </p>
                     <p>

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

@@ -488,25 +488,25 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
 
                 <h2 id="t_single_scan_report">3.4 Create a scan report</h2>
                 <p>
-                    To generate a report for a single scan in the Checker view:
+                    You can export a report in both HTML web and Microsoft Excel XLS spreadsheet formats while in the Checker view:
                 </p>
                 <p>
                     <img
 
                         src="assets/img/2_2_ScanReport.png" //was 3.2Report.png
-                        alt="an open dropdown menu with focus on 'download current scan'."
+                        alt="'Export XLS' button highlighted"
                     />
                 </p>
                 <p>
-                    Open the 'Reports' dropdown menu and select 'Download current scan'. 
+                    Once a page has been scanned, select 'Export XLS'. Both HTML and XLS formats will be downloaded.
                 </p>
                 <p>
                     See <Link inline={true} size="lg" href="#the_report" title="Checker reports">Checker reports</Link> for more details.
                 </p>
 
                 <h2 id="t_multi_scan_report">3.5 Create a multi-scan report</h2>
                 <p>
-                    To combine up to 50 multiple scans into a single report:
+                    Combine up to 50 multiple scans into a single Microsoft Excel XLS spreadsheet report: 
                 </p>
                 <p>
                     <img
@@ -515,7 +515,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                         alt="an open dropdown menu with focus on 'Start storing scans'"
                     />
                 </p>
-                <p>1. Open the 'Reports' dropdown menu and select 'Start storing scans.'</p>
+                <p>1. Open the 'Options' dropdown menu and select 'Start storing scans.'</p>
                 <p>
                     <img
 
@@ -536,7 +536,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                         alt="an open dropdown menu with focus on 'download stored scans"
                     />
                 </p> */}
-                <p>4. Open the 'Reports' dropdown menu and select 'View stored scans'.</p>
+                <p>4. Open the 'Options' dropdown menu and select 'View stored scans'.</p>
                 <p>
                     <img
                         src="assets/img/3_5_StoredScans.png" //was 3.3Multi4.png
@@ -554,6 +554,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                     <ListItem><strong>Cancel</strong>: to uncheck the selections</ListItem>
                     <ListItem><strong>Return</strong>: click back (or navigate) into the Checker to continue using the functionality, such as storing more scans</ListItem>
                 </UnorderedList>
+                <p>6. Open the 'Options' dropdown menu and select 'Export stored scans'.</p>
 
                 <h2 id="focus_view">3.6 Focus view</h2>
                 <p>
@@ -1031,24 +1032,35 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                     inline={true} size="lg">Create a multi-scan report</Link>.
                 </p>
 
-                <h3 id="HTML_reports">HTML reports</h3>
+                <h3 id="HTML_reports">HTML report</h3>
                 {/* <p><strong>HTML reports</strong></p> */}
                 <p>
                     <img
                         src="assets/img/7_1_ReportHTML.png"
-                        alt="an HTML page for 'IBM accessibility equal access toolkit: accessibility checker report'"
+                        alt="screenshot of a report sorted by Requirements."
                     />
+                </p>
                 <p>
-                    This interactive report is in an HTML web format that includes:
-                </p></p>
+                    This interactive report is an accessible web page (single HTML file) that includes:
+                </p>
                 <OrderedList>
                     <ListItem>Scan date and time</ListItem>
                     <ListItem>URL scanned</ListItem>
                     <ListItem>Percentage of elements with no detected violations or items to review</ListItem>
-                    <ListItem>Summary of test results </ListItem>
-                    <ListItem>Issue details organized by Requirements or by Rules</ListItem>
+                    <ListItem>Summary of test results by Violations, Needs review, and Recommendations</ListItem>
+                    <ListItem>Issue details organizable by Elements roles, Requirements, or by Rules</ListItem>
                     <ListItem>‘Learn more’ link with detailed help description for each issue</ListItem>
                 </OrderedList>
+                <p>
+                    The interactive features of the report are similar to the Summary report in the Checker view:
+                </p>
+                <OrderedList>
+                    <ListItem>Filter the list of issues displayed by selecting either the 'Filter' dropdown or by selecting the checkboxes on the summary tiles by 'Violation', 'Needs review', and 'Recommendation'.</ListItem>
+                    <ListItem>Display the 'Hidden' issues by selecting the 'Filter' dropdown. Note that the counts and total displayed do not include the 'Hidden' issues.</ListItem>
+                    <ListItem>Change the organization of the issues list by selecting the dropdown to see issues by 'Elements roles', 'Requirements', or by 'Rules'. Note that each group is an accordion that can be collapsed for a condensed view.</ListItem>
+                    <ListItem>Display the specific 'What to do' guidance for each individual issue by selecting the 'Learn more' link.</ListItem>
+                    <ListItem>Send the single HTML file to team members or save it in project records.</ListItem>
+                </OrderedList>
                 <p>
                     <strong>Note</strong>: The percentages reported are based on automated tests only. 
                     Be sure to follow all the <Link
@@ -1066,7 +1078,7 @@ class UsingACApp extends React.Component<{}, UsingACAppState> {
                 <p>
                     <img
                         src="assets/img/7_1_ReportXLS_hidden.png"
-                        alt="an Excel spreadsheet of an accessibility scan report"
+                        alt="an Excel spreadsheet of a scan report"
                     />
                 </p>
                 <OrderedList>

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

@@ -23,7 +23,7 @@
     .summReport, .summCard {
         margin: 1rem -1rem 0rem -1rem;
         padding: 1rem;
-
+        border:solid #a8a8a8;
         background-color: #FFFFFF;
 
         .title {
@@ -34,6 +34,9 @@
             margin: 1rem 0rem 0rem -1rem;
         }
     }
+    .reportTreeGridEmptyText {
+    margin-top: 5rem;
+}
 
     .cds--modal-content {
         padding: 1rem 1rem 0rem 1rem;
@@ -204,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;
+}
+
 }