- +

IBM Accessibility
@@ -121,22 +173,23 @@ export class SavedReport extends React.Component
- +
{new Date(this.props.reportData.report.timestamp).toLocaleString()}
Scanned page: {this.props.reportData.tabURL}
 - - + + item.text==="Violations")} + handleCardClick={this.handleCardClick}> Accessibility failures that need to be corrected - - + + item.text==="Needs review")} handleCardClick={this.handleCardClick}> Issues that may not be a violation; manual review is needed - - + + item.text==="Recommendations")} handleCardClick={this.handleCardClick}> Opportunities to apply best practices to further improve accessibility @@ -146,24 +199,83 @@ export class SavedReport extends React.Component
- - - Requirements - Rules - - - -
- +
+
+ {Violation16} {violations} + {NeedsReview16} {needReview} + {Recommendation16} {recommendation} + {ViewOff16} {hidden} + {total} issues found +
+
+ { + // set state + this.setState({ reportViewState: evt.selectedItem }); + }} + /> + (item ? item.text : '')} + itemToElement={(item:any) => { + if (item && item.id === "0") { + return {UtilIssueReact.valueSingToIcon("Violation", "reportSecIcon")} {item.text} + } else if (item && item.id === "1") { + return {UtilIssueReact.valueSingToIcon("Needs review", "reportSecIcon")} {item.text} + } else if (item && item.id === "2") { + return {UtilIssueReact.valueSingToIcon("Recommendation", "reportSecIcon")} {item.text} + } else if (item && item.id === "3") { + return {UtilIssueReact.valueSingToIcon("ViewOff", "reportSecIcon")} {item.text} + } + return <> + } + } + light={false} + type="default" + selectedItems={this.state.selectedItems} + initialSelectedItems={this.state.selectedItems} + onChange={(event: { selectedItems: Array<{ id: string; text: string }> }) => this.handleFilterChange(event.selectedItems)} + + /> +
+ +
+ {filteredReport.results.length>0 && <> + {this.state.reportViewState === "Element roles" && <> +
+ +
+ } + + {this.state.reportViewState === "Requirements" && <> +
+
- - -
- + } + {this.state.reportViewState === "Rules" && <> +
+
- - - + } + } + {filteredReport.results.length===0 && +
No issues detected for the chosen filter criteria. To see all issues, select all issue types, and do not filter hidden issues.
} +
diff --git a/report-react/src/ScoreCard.scss b/report-react/src/ScoreCard.scss index 857bbb985..0616a63d8 100644 --- a/report-react/src/ScoreCard.scss +++ b/report-react/src/ScoreCard.scss @@ -19,7 +19,7 @@ } .description { - color: #565656; + @include type.type-style('helper-text-01'); } @include breakpoint.breakpoint('sm') { @@ -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/ScoreCard.tsx b/report-react/src/ScoreCard.tsx index 36125efc3..6bdce3ecc 100644 --- a/report-react/src/ScoreCard.tsx +++ b/report-react/src/ScoreCard.tsx @@ -14,6 +14,7 @@ limitations under the License. *****************************************************************************/ import React, { ReactNode } from "react"; +import { SelectableTile } from '@carbon/react'; import "./ScoreCard.scss"; interface ScoreCardProps { @@ -21,15 +22,22 @@ interface ScoreCardProps { icon?: ReactNode count?: number children?: any + checked?:Boolean + handleCardClick?:(item:string)=>void } export default class ScoreCard extends React.Component { - + render() { - return
-
{this.props.title}{this.props.icon}
+ return
+ this.props.handleCardClick && this.props.handleCardClick(this.props.title)} + + > +
{this.props.title} {this.props.icon}
{this.props.count}
{this.props.children}
+
} } diff --git a/report-react/src/SummScoreCard.scss b/report-react/src/SummScoreCard.scss index fb5ddbcfb..1a9bcb961 100644 --- a/report-react/src/SummScoreCard.scss +++ b/report-react/src/SummScoreCard.scss @@ -3,31 +3,25 @@ .summScoreCard { margin: 1rem -1rem 0rem -1rem; padding: 1rem; + min-height: 12rem; + border: 1px solid #8A3FFC; + background-color:#E8DAFF; - box-sizing: border-box; - - border: 1px solid #9E63FB; - background-color: #E8DAFF; - - .scLeft { - flex: 0 0 51.25%; - max-width: 51.25%; - - @media (min-width: 66rem) { - flex: 0 0 33.75%; - max-width: 33.75%; - } + .summaryTitleDetail { + @include type.type-style('helper-text-01'); + font-size: 14px; } - + .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 index 06ca73106..41cca96a5 100644 --- a/report-react/src/SummScoreCard.tsx +++ b/report-react/src/SummScoreCard.tsx @@ -65,13 +65,13 @@ export default class SummScoreCard extends React.Component + return

{this.props.title}

{currentStatus}%
-
Percentage of elements with no detected violations or items to review
+
Percentage of elements with no detected violations or items to review
@@ -90,7 +90,7 @@ export default class SummScoreCard extends React.ComponentIBM Equal Access Toolkit to guide you.
More resources:
- + diff --git a/report-react/src/report/ReportElements.tsx b/report-react/src/report/ReportElements.tsx index 37fa878ed..8007aa1cc 100644 --- a/report-react/src/report/ReportElements.tsx +++ b/report-react/src/report/ReportElements.tsx @@ -20,6 +20,8 @@ import "./report.scss"; import { IReport, IReportItem, valueMap } from "../IReport"; import ReportRow from "./ReportRow"; import { Grid, Column } from "@carbon/react"; +import { UtilIssue } from "../util/UtilIssue"; +import { IssueValue } from "../util/UtilIssueReact"; interface IReportElementsState { } @@ -49,7 +51,7 @@ export default class ReportElements extends React.Component groupA.title.localeCompare(groupB.title)); + for (const group of groups) { + group.items.sort((a, b) => UtilIssue.valueToOrder(a.value as IssueValue)-UtilIssue.valueToOrder(b.value as IssueValue)); + } + return
@@ -67,7 +75,7 @@ export default class ReportElements extends React.ComponentIssues
-
Element
+
Element Roles
 {groups.map(group => { diff --git a/report-react/src/report/ReportRow.tsx b/report-react/src/report/ReportRow.tsx index 95686cafc..5448ba151 100644 --- a/report-react/src/report/ReportRow.tsx +++ b/report-react/src/report/ReportRow.tsx @@ -17,44 +17,12 @@ 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,ViewOff16} from "../util/UtilImages"; + -const Violation16 = - - - - - -const NeedsReview16 = - - - - - - - - - - - - - - - - -const Recommendation16 = - - - i - export interface IReportRowGroup { checkpoint?: ICheckpoint, @@ -79,7 +47,7 @@ export default class ReportRow extends React.Component = React.createRef(); state: IReportRowState = { - expanded: false, + expanded: true, lastTimestamp: this.props.report.timestamp, scrollTo: false }; @@ -141,34 +109,35 @@ export default class ReportRow extends React.Component - + {this.state.scrollTo &&
} - {open ? : } - {vCount > 0 && <>{vCount} {Violation16} } - {nrCount > 0 && <>{nrCount} {NeedsReview16} } - {rCount > 0 && <>{rCount} {Recommendation16}} + {open ? : } + {vCount > 0 && <> {Violation16}{vCount}} + {nrCount > 0 && <> {NeedsReview16}{nrCount}} + {rCount > 0 && <> {Recommendation16}{rCount} } - - {group.title.length === 0 ? "Page" : group.title} + + {group.title.length === 0 ? "Page" : group.title} {!open && } {open && {group.items.map(item => { let val = valueMap[item.value[0]][item.value[1]]; - return ( - - -
+ return ( + + +
{val === "Violation" && {Violation16}} {val === "Needs review" && {NeedsReview16}} {val === "Recommendation" && {Recommendation16}} + {item.isHidden===true && {ViewOff16}} {item.message} { this.props.selectItem(item); evt.preventDefault(); return false; - }}>Learn more + }}>Learn more
) diff --git a/report-react/src/report/ReportRules.tsx b/report-react/src/report/ReportRules.tsx index b26faa25f..5a61c0ddc 100644 --- a/report-react/src/report/ReportRules.tsx +++ b/report-react/src/report/ReportRules.tsx @@ -19,6 +19,8 @@ import React from "react"; import { IReport, IReportItem, valueMap } from "../IReport"; import ReportRow from "./ReportRow"; import { Grid, Column } from "@carbon/react"; +import { UtilIssue } from "../util/UtilIssue"; +import { IssueValue } from "../util/UtilIssueReact"; interface IReportRulesState { } @@ -62,6 +64,9 @@ export default class ReportRules extends React.Component UtilIssue.valueToOrder(a.value as IssueValue)-UtilIssue.valueToOrder(b.value as IssueValue)); + } return
diff --git a/report-react/src/report/report.scss b/report-react/src/report/report.scss index ff8b6a79c..24d2e87e8 100644 --- a/report-react/src/report/report.scss +++ b/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 { diff --git a/report-react/src/util/UtilImages.tsx b/report-react/src/util/UtilImages.tsx new file mode 100644 index 000000000..0a48206ba --- /dev/null +++ b/report-react/src/util/UtilImages.tsx @@ -0,0 +1,72 @@ +/****************************************************************************** + Copyright:: 2020- IBM, Inc + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*****************************************************************************/ + + +//svg images for report +export const Violation16 = + + + + + +export const NeedsReview16 = + + + + + + + + + + + + + + + + +export const Recommendation16 = + + + i + + +export const ViewOn16= + + + + + + +export const ViewOff16= + + + + + + diff --git a/report-react/src/util/UtilIssue.tsx b/report-react/src/util/UtilIssue.tsx new file mode 100644 index 000000000..d2e8f3ced --- /dev/null +++ b/report-react/src/util/UtilIssue.tsx @@ -0,0 +1,63 @@ +/****************************************************************************** + Copyright:: 2020- IBM, Inc + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*****************************************************************************/ +import { IssueValue } from './UtilIssueReact'; + +export class UtilIssue { + private static 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" + } + }; + + public static valueToStringSingular(value: IssueValue) : string { + return UtilIssue.valueMap[value[0]][value[1]]; + } + + public static valueToStringPlural(value: IssueValue) : string { + let sing = UtilIssue.valueToStringSingular(value); + return this.singToStringPlural(sing); + } + + public static singToStringPlural(sing: string) : string { + if (sing === "Violation") return "Violations"; + if (sing === "Needs review") return "Needs review"; + if (sing === "Recommendation") return "Recommendations"; + return sing; + } + + public static valueToOrder(value: IssueValue) : number { + let sing = UtilIssue.valueToStringSingular(value); + if (sing === "Violation") return 0; + if (sing === "Needs review") return 1; + if (sing === "Recommendation") return 2; + return 3; + } +} \ No newline at end of file diff --git a/report-react/src/util/UtilIssueReact.tsx b/report-react/src/util/UtilIssueReact.tsx new file mode 100644 index 000000000..61f96aa55 --- /dev/null +++ b/report-react/src/util/UtilIssueReact.tsx @@ -0,0 +1,50 @@ +/****************************************************************************** + Copyright:: 2020- IBM, Inc + + Licensed under the Apache License, Version 2.0 (the "License"); + you may not use this file except in compliance with the License. + You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + + Unless required by applicable law or agreed to in writing, software + distributed under the License is distributed on an "AS IS" BASIS, + WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. + See the License for the specific language governing permissions and + limitations under the License. +*****************************************************************************/ +import * as React from 'react'; +import { UtilIssue } from './UtilIssue'; +import { Violation16,NeedsReview16,Recommendation16,ViewOff16,ViewOn16 } from './UtilImages'; + +export type IssueValue = [ + "VIOLATION" | "RECOMMENDATION"| "INFORMATION", + "FAIL" | "POTENTIAL" | "MANUAL" | "PASS" +]; + + + +export class UtilIssueReact { + public static valueToIcon(value: IssueValue, className?: string) : React.ReactNode { + let sing = UtilIssue.valueToStringSingular(value); + return this.valueSingToIcon(sing, className); + } + + public static valueSingToIcon(sing: string, className?: string) : React.ReactNode { + if (sing === "Violation") { + return <>{Violation16} + } else if (sing === "Needs review") { + return <>{NeedsReview16} + } else if (sing === "Recommendation") { + return <>{Recommendation16} + } else if (sing === "ViewOff") { + return <>{ViewOff16} + } else if (sing === "ViewOn") { + return <>{ViewOn16} + } else if (sing === "Pass") { + return <> + } else { + return <>; + } + } +} \ No newline at end of file