Merge pull request #2049 from IBMa/htmlReport-2035-nam

feature(extension): HTML Report CSS and Font Fix #2035
IBMa · Sep 19, 2024 · ef801b9 · ef801b9
2 parents b20057d + e54b485
commit ef801b9
Show file tree

Hide file tree

Showing 7 changed files with 21 additions and 35 deletions.
diff --git a/accessibility-checker-extension/src/ts/devtools/components/summaryScreen.scss b/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
         }
     }
 

diff --git a/report-react/src/SavedReport.scss b/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 {

diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx
@@ -157,7 +157,7 @@ const filteredReport = {
             <Theme theme="g10">
                 <div>
                     <Grid>
-                        <Column sm={2} md={8} lg={4}>
+                        <Column sm={4} md={8} lg={4}>
                             <div className="summInfo">
                                 <h1 className="prodName">
                                     IBM <strong>Accessibility</strong><br />
@@ -173,22 +173,22 @@ const filteredReport = {
                     </Grid>
                     <section aria-label="Report overview: score cards">
                         <Grid>
-                            <Column sm={2} md={4} lg={4}>
+                            <Column sm={4} md={4} lg={4}>
                                 <div className="time" style={{paddingTop:"12px"}}>{new Date(this.props.reportData.report.timestamp).toLocaleString()}</div>
                                 <div className="url"><strong>Scanned page:</strong> {this.props.reportData.tabURL}</div>
                             </Column>
-                            <Column sm={2} md={4} lg={4}>
+                            <Column sm={4} md={4} lg={4}>
                                 <ScoreCard count={violations} title="Violations" icon={Violation16} checked={this.state.selectedItems.some((item)=>item.text==="Violations")}
                                     handleCardClick={this.handleCardClick}>
                                     Accessibility failures that need to be corrected
                                 </ScoreCard>
                             </Column>
-                            <Column sm={2} md={4} lg={4}>
+                            <Column sm={4} md={4} lg={4}>
                                 <ScoreCard count={needReview} title="Needs review" icon={NeedsReview16} checked={this.state.selectedItems.some((item)=>item.text==="Needs review")}  handleCardClick={this.handleCardClick}>
                                     Issues that may not be a violation; manual review is needed
                                 </ScoreCard>
                             </Column>
-                            <Column sm={2} md={4} lg={4}>
+                            <Column sm={4} md={4} lg={4}>
                                 <ScoreCard count={recommendation} title="Recommendations" icon={Recommendation16} checked={this.state.selectedItems.some((item)=>item.text==="Recommendations")}  handleCardClick={this.handleCardClick}>
                                     Opportunities to apply best practices to further improve accessibility
                                 </ScoreCard>
@@ -202,8 +202,8 @@ const filteredReport = {
                                     <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">{Recommendation16}&nbsp;{recommendation}</span>
                                     <span className="iconSummary">{ViewOff16}&nbsp;{hidden}</span>
                                     <span style={{paddingLeft:"1rem"}}>{total} issues found</span>
                                     </div>

diff --git a/report-react/src/ScoreCard.scss b/report-react/src/ScoreCard.scss
@@ -27,11 +27,7 @@
     }
 }
 
-@include breakpoint.breakpoint('sm') {
-    .cds--css-grid-column:nth-child(even) .scoreCard {
-        margin-right: -1rem;
-    }
-}
+
 @include breakpoint.breakpoint('md') {
     .cds--css-grid-column:nth-child(even) .scoreCard {
         margin-right: 0rem;

diff --git a/report-react/src/SummScoreCard.scss b/report-react/src/SummScoreCard.scss
@@ -3,35 +3,25 @@
 .summScoreCard {
     margin: 1rem -1rem 0rem -1rem;
     padding: 1rem;
-
-    box-sizing: border-box;
-
-    border: 1px solid #9E63FB;
-    background-color: #E8DAFF;
+    min-height: 12rem;
+    border: 1px solid #8A3FFC;
+    background-color:#E8DAFF;
 
     .summaryTitleDetail {
         @include type.type-style('helper-text-01');
+        font-size: 14px;
     }
-
-    .scLeft {
-        flex: 0 0 51.25%;
-        max-width: 51.25%;
-
-        @media (min-width: 66rem) {
-            flex: 0 0 33.75%;
-            max-width: 33.75%;
-        }
-    }
-
+
     .title {
         @include type.type-style('heading-02');
     }
 
     .score {
         // @include type.type-style('display-03');
-        font-size: 96px;
+        font-size: 54px;
+        font-weight: 400;
+        margin: 1rem 0rem;
     }
-
     @media (min-width: 42rem) {
         margin: 1rem 0rem 0rem -1rem;
     }

diff --git a/report-react/src/SummScoreCard.tsx b/report-react/src/SummScoreCard.tsx
@@ -65,7 +65,7 @@ export default class SummScoreCard extends React.Component<SummScoreCardProps, {
         let summaryNumbers = this.calcSummary(this.props.report);
         let currentStatus = summaryNumbers[3].toFixed(0);
 
-        return <div className="scoreCard" style={{border: "1px solid #9E63FB", backgroundColor:'#be95ff'}}>
+        return <div className="summScoreCard" >
 
             <Grid>
                 <Column sm={2} md={4} lg={4} className="scLeft">

diff --git a/report-react/src/report/ReportRow.tsx b/report-react/src/report/ReportRow.tsx
@@ -109,15 +109,15 @@ export default class ReportRow extends React.Component<IReportRowProps, IReportR
         }
         return <div className="itemRow">
             <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">
+                <Column sm={2} md={2} lg={4} role="cell" >
                     {this.state.scrollTo && <div ref={this.scrollRef}></div>}
                     <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>
+                <Column sm={2} md={6} lg={8} role="cell">
+                    <span  style={{wordWrap:"break-word"}}>{group.title.length === 0 ? "Page" : group.title}</span>
                 </Column>
             </Grid>
             {!open && <Grid className="itemDetail" />}