Merge branch 'master' into awe-266

accessibility-checker-extension/src/ts/devtools/DevToolsPanelApp.tsx

@@ -133,7 +133,6 @@ export default class DevToolsPanelApp extends React.Component<IPanelProps, IPane
         // and get url using chrome.tabs.get via message "TAB_INFO"
         let thisTabId = chrome.devtools.inspectedWindow.tabId;
         let tab = await PanelMessaging.sendToBackground("TAB_INFO", {tabId: thisTabId });
-
         if (tab.id && tab.url && tab.id && tab.title) {
             let rulesets = await PanelMessaging.sendToBackground("DAP_Rulesets", { tabId: tab.id })
 
@@ -149,7 +148,8 @@ export default class DevToolsPanelApp extends React.Component<IPanelProps, IPane
 
                 PanelMessaging.sendToBackground("DAP_CACHED", { tabId: tab.id })
             }
-            self.setState({ rulesets: rulesets, listenerRegistered: true, tabURL: tab.url, tabId: tab.id, tabTitle: tab.title });
+            self.setState({ rulesets: rulesets, listenerRegistered: true, tabURL: tab.url, 
+                tabId: tab.id, tabTitle: tab.title, showIssueTypeFilter: [true, false, false, false] });
 
         }
     }

accessibility-checker-extension/src/ts/devtools/Header.tsx

@@ -28,6 +28,10 @@ const BeeLogo = "/assets/Bee_logo.svg";
 import Violation16 from "../../assets/Violation16.svg";
 import NeedsReview16 from "../../assets/NeedsReview16.svg";
 import Recommendation16 from "../../assets/Recommendation16.svg";
+import { Filter16 } from '@carbon/icons-react';
+import ViolationsFiltered from "../../assets/ViolationsFiltered.svg";
+import NeedsReviewFiltered from "../../assets/NeedsReviewFiltered.svg";
+import RecommendationsFiltered from "../../assets/RecommendationsFiltered.svg";
 
 interface IHeaderState {}
 
@@ -80,20 +84,24 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
             || counts.total["Needs review"] !== counts.filtered["Needs review"]
             || counts.total["Recommendation"] !== counts.filtered["Recommendation"];
 
-        let headerContent = (<div className="bx--grid">
+        let violationFilterButtonAriaLabel = noScan ? ((bDiff ? counts.filtered["Violation"] + " of " : "") + counts.total["Violation"]) : " ";
+        console.log(violationFilterButtonAriaLabel);
+        // violationFilterButtonAriaLabel += " Violations Filter show only violations";
+
+        let headerContent = (<div className="bx--grid" style={{paddingLeft:"1rem", paddingRight:"1rem"}}>
             <div className="bx--row" style={{ lineHeight: "1rem" }}>
                 <div className="bx--col-sm-3">
                     <h1>IBM Equal Access Accessibility Checker</h1>
                 </div>
-                <div className="bx--col-sm-1" style={{ position: "relative" }}>
+                <div className="bx--col-sm-1" style={{ position: "relative", textAlign: "right" }}>
                     <img className="bee-logo" src={BeeLogo} alt="IBM Accessibility" />
                 </div>
             </div>
             <div className="bx--row" style={{ marginTop: '10px' }}>
                 <div className="bx--col-sm-2">
                     <Button disabled={this.props.scanning} onClick={this.props.startScan.bind(this)} size="small" className="scan-button">Scan</Button>
                 </div>
-                <div className="bx--col-sm-2" style={{ position: "relative" }}>
+                <div className="bx--col-sm-2" style={{ position: "relative", textAlign: "right" }}>
                     <div className="headerTools" >
                         <Button
                             disabled={!this.props.counts}
@@ -113,43 +121,66 @@ export default class Header extends React.Component<IHeaderProps, IHeaderState>
                 </div>
             </div>
 
-            <div className="bx--row summary" role="region" arial-label='Issue count' style={{marginTop:"14px"}}>
-                <div className="bx--col-sm-1" style={{paddingBottom:"0"}}>
-                    <img src={Violation16} alt="Violations" />
-                    <Button kind="ghost" 
-                            className="summaryBarViolationButton"
+            <div className="countRow summary" role="region" arial-label='Issue count' style={{marginTop:"14px"}}>
+                <div className="countItem" style={{paddingTop:"0", paddingLeft:"0", paddingBottom:"0", height: "34px", textAlign:"left", overflow:"visible"}}>
+                    <img src={Violation16} style={{verticalAlign:"middle",paddingTop:"0px", marginRight:"4px"}} alt="Violations" />
+                    <span
+                        style={{lineHeight:"32px"}} className="summaryBarCounts" >
+                        {noScan ? ((bDiff ? counts.filtered["Violation"] + "/" : "") + counts.total["Violation"]) : " "}
+                        <span className="summaryBarLabels" style={{marginLeft:"4px"}}>Violations</span>
+                    </span>
+                    <span className="filterButtons">
+                        <Button
+                            disabled={!this.props.counts}
+                            style={{paddingTop:"0px", paddingBottom:"0px"}}
                             onClick={() => this.sendShowIssueTypeData("Violations")}
-                            style={this.props.dataFromParent[0] || this.props.dataFromParent[1] ? {fontWeight: 600} : {fontWeight: 400}}
                             aria-pressed = {this.props.dataFromParent[1]}
-                            aria-label= "Show only violations">
-                            {noScan ? ((bDiff ? counts.filtered["Violation"] + "/" : "") + counts.total["Violation"]) : " "} Violations
-                    </Button>
+                            aria-label={"Filter by violations"}
+                            className="settingsButtons" size="small" hasIconOnly kind="ghost" iconDescription="Filter" type="button"
+                            >
+                            {(!noScan || this.props.scanning) ? <Filter16/> : (this.props.dataFromParent[0] || this.props.dataFromParent[1] ? <img src={ViolationsFiltered}/> : <Filter16/>)}    
+                        </Button>
+                    </span>
                 </div>
-                <div className="bx--col-sm-1">
-                    <img src={NeedsReview16} alt="Needs review" />
-                    <Button kind="ghost" 
-                            className="summaryBarNeedsReviewButton"
+                <div className="countItem" style={{paddingTop:"0", paddingBottom:"0", height: "34px", textAlign:"left", overflow:"visible"}}>
+                    <img src={NeedsReview16} style={{verticalAlign:"middle",paddingTop:"0px", marginRight:"4px"}} alt="Needs review" />
+                    <span style={{lineHeight:"32px"}} className="summaryBarCounts" >{noScan ? ((bDiff ? counts.filtered["Needs review"] + "/" : "") + counts.total["Needs review"]) : " "}
+                        <span className="summaryBarLabels" style={{marginLeft:"4px"}}>Needs review</span>
+                    </span>
+                    <span className="filterButtons">
+                        <Button
+                            disabled={!this.props.counts}
+                            style={{paddingTop:"0px", paddingBottom:"0px"}}
                             onClick={() => this.sendShowIssueTypeData("NeedsReview")}
-                            style={this.props.dataFromParent[0] || this.props.dataFromParent[2] ? {fontWeight: 600} : {fontWeight: 400}}
                             aria-pressed = {this.props.dataFromParent[2]}
-                            aria-label= "Show only needs review">
-                            {noScan ? ((bDiff ? counts.filtered["Needs review"] + "/" : "") + counts.total["Needs review"]) : " "} Needs review
-                    </Button>
+                            aria-label={"Filter by Needs review"}
+                            className="settingsButtons" size="small" hasIconOnly kind="ghost" iconDescription="Filter" type="button"
+                            >
+                            {(!noScan || this.props.scanning) ? <Filter16/> : (this.props.dataFromParent[0] || this.props.dataFromParent[2] ? <img src={NeedsReviewFiltered}/> : <Filter16/>)}
+                        </Button>
+                    </span>
                 </div>
-                <div className="bx--col-sm-1">
-                    <img src={Recommendation16} alt="Recommendation" />
-                    <Button kind="ghost" 
-                        className="summaryBarRecommendationButton"
-                        onClick={() => this.sendShowIssueTypeData("Recommendations")}
-                        style={this.props.dataFromParent[0] || this.props.dataFromParent[3] ? {fontWeight: 600} : {fontWeight: 400}}
-                        aria-pressed = {this.props.dataFromParent[3]}
-                        aria-label= "Show only needs recommendations">
-                        {noScan ? ((bDiff ? counts.filtered["Recommendation"] + "/" : "") + counts.total["Recommendation"]) : " "} Recommendations
-                    </Button>
+                <div className="countItem" style={{paddingTop:"0", paddingBottom:"0", height: "34px", textAlign:"left", overflow:"visible"}}>
+                    <img src={Recommendation16} style={{verticalAlign:"middle",paddingTop:"0px", marginRight:"4px"}} alt="Recommendation" />
+                    <span style={{lineHeight:"32px"}} className="summaryBarCounts" >{noScan ? ((bDiff ? counts.filtered["Recommendation"] + "/" : "") + counts.total["Recommendation"]) : " "}
+                        <span className="summaryBarLabels" style={{marginLeft:"4px"}}>Recommendations</span>
+                    </span>
+                    <span className="filterButtons">
+                        <Button
+                            disabled={!this.props.counts}
+                            style={{paddingTop:"0px", paddingBottom:"0px"}}
+                            onClick={() => this.sendShowIssueTypeData("Recommendations")}
+                            aria-pressed = {this.props.dataFromParent[3]}
+                            aria-label={"Filter by Recommendations"}
+                            className="settingsButtons" size="small" hasIconOnly kind="ghost" iconDescription="Filter" type="button"
+                            >
+                            {(!noScan || this.props.scanning) ? <Filter16/> : (this.props.dataFromParent[0] || this.props.dataFromParent[3] ? <img src={RecommendationsFiltered}/> : <Filter16/>)} 
+                        </Button>
+                    </span>
                 </div>
-                <div className="bx--col-sm-1" role="status">
+                <div className="countItem" role="status" style={{paddingTop:"0", paddingBottom:"0", height: "34px", textAlign:"right", overflow:"visible"}}>
                     {/* <span className="summaryBarCounts" style={{ fontWeight: 400 }}>{noScan ? ((bDiff ? counts.filtered["All"] + "/" : "") + counts.total["All"]) : " "}&nbsp;Issues&nbsp;{(bDiff ? "selected" : "found")}</span> */}
-                    <span className="summaryBarCounts" style={{ fontWeight: 400 }}>{!noScan ? "Not Scanned" : (this.props.scanning ? "Scanning...": ((bDiff ? counts.filtered["All"] + "/" : "") + counts.total["All"] + " Issues " + (bDiff ? "selected" : "found")))}</span>
+                    <span className="summaryBarCounts" style={{fontWeight: 400,lineHeight:"32px" }}>{!noScan ? "Not Scanned" : (this.props.scanning ? "Scanning...": ((bDiff ? counts.filtered["All"] + "/" : "") + counts.total["All"] + " Issues " + (bDiff ? "selected" : "found")))}</span>
                 </div>
             </div>
         </div>);

accessibility-checker-extension/src/ts/devtools/Report.tsx

@@ -162,7 +162,7 @@ export default class Report extends React.Component<IReportProps, IReportState>
         }
 
         return <React.Fragment>
-            <div className="bx--grid" style={{paddingLeft: "1rem", paddingRight: "1rem", marginTop: '1rem'}}>
+            <div className="bx--grid" style={{paddingLeft:"1rem", marginTop:"6px"}}>
                 <div className="bx--row">
                     <div className="bx--col-sm-4">
                         <Tabs
@@ -186,6 +186,7 @@ export default class Report extends React.Component<IReportProps, IReportState>
                                 // renderContent={function noRefCheck() { }}
                                 role="presentation"
                                 className={"tab-content-"+tabId}
+                                style={{paddingTop:"6px"}}
                             >
                                 <div>
                                     {tabId === 'element' && <div style={{marginLeft: "-2rem", marginRight: "-2rem" }}>

accessibility-checker-extension/src/ts/devtools/ReportChecklist.tsx

@@ -99,7 +99,7 @@ export default class ReportChecklist extends React.Component<IReportChecklistPro
         let idx=0;
         groups = groups.filter(group => group.items.length > 0);
         let scrollFirst = true;
-        return <div className="bx--grid report" role="table" aria-label="Issues grouped by checkpoint">
+        return <div className="bx--grid report" role="table"  style={{paddingLeft:"1rem", paddingRight:"0"}} aria-label="Issues grouped by checkpoint">
             <div role="rowgroup">
                 <div className="bx--row reportHeader" role="row">
                     <div className="bx--col-sm-1" role="columnheader">

accessibility-checker-extension/src/ts/devtools/ReportElements.tsx

@@ -88,7 +88,7 @@ export default class ReportElements extends React.Component<IReportElementsProps
 
         let idx=0;
         let scrollFirst = true;
-        return <div className="bx--grid report" role="table" aria-label="Issues grouped by element role">
+        return <div className="bx--grid report" role="table" style={{paddingLeft:"1rem", paddingRight:"0"}} aria-label="Issues grouped by element role">
             <div role="rowgroup">
                 <div className="bx--row reportHeader" role="row">
                     <div className="bx--col-sm-1" role="columnheader">

accessibility-checker-extension/src/ts/devtools/ReportRules.tsx

@@ -85,7 +85,7 @@ export default class ReportRules extends React.Component<IReportRulesProps, IRep
 
         let idx=0;
         let scrollFirst = true;
-        return <div className="bx--grid report" role="table" aria-label="Issues grouped by rule">
+        return <div className="bx--grid report" role="table" style={{paddingLeft:"1rem", paddingRight:"0"}} aria-label="Issues grouped by rule">
             <div role="rowgroup">
                 <div className="bx--row reportHeader" role="row">
                     <div className="bx--col-sm-1" role="columnheader">

accessibility-checker-extension/src/ts/styles/mainpanel.scss

@@ -88,6 +88,8 @@ html, body, #devtoolsPanel-root {
     min-height: 30px;
 }
 
+
+
 .tab-padding1 {
     padding: 0px;
     width: 185px;

accessibility-checker-extension/src/ts/styles/panel.scss

@@ -38,16 +38,16 @@ $feature-flags: (
 
     .bee-logo {
         height: 2rem;
-        position: absolute;
-        right: 1rem;
+        // position: absolute;
+        // right: 1rem;
         @media only screen and (min-width: 42rem) {
             right: 0px;
         }
     }
 
     .headerTools {
-        position: absolute;
-        right: .5rem;
+        // position: absolute;
+        // right: .5rem;
         @media only screen and (min-width: 42rem) {
             right: -.5rem;
         }
@@ -76,6 +76,47 @@ $feature-flags: (
         }
     }
 
+    .filterButtons {
+        button .bx--assistive-text {
+            top: -1.5rem;
+        }
+        button::before {
+            top: 0rem;
+        }
+        button.bx--btn {
+            color: black;
+            background-color: white;
+        }
+
+        button.bx--btn.bx--btn--disabled {
+            color: #c6c6c6;
+            border-width: 0px;
+            background-color: white;
+        }
+
+        button.bx--btn.bx--btn--disabled:hover {
+            color: #c6c6c6;
+            svg {
+                fill: #c6c6c6;
+            }
+        }
+    }
+
+    .countRow{
+        display: flex;
+        //flex-wrap: wrap;
+    }
+
+    .countItem {
+        margin-bottom: 2px;
+        text-align: left;
+        flex-grow: 1;
+    }
+
+    filterViolationButtonColor {
+        fill: rebeccapurple
+    }
+
     .summary {
         margin-top: 10px;
 
@@ -475,12 +516,15 @@ $feature-flags: (
         top: 1rem;
 
         .bx--grid {
-            padding: 0rem 1rem;
+            padding: 0rem 0rem;
         }
 
         .fixed-header .headerTools {
             right: 1.5rem;
         }
+        .fixed-header .filterButtons {
+            left: 8rem;
+        }
         .fixed-header .bee-logo {
             right: 2rem;
         }