From 3d68dd83b37634c896564b431f53c922f01b1efa Mon Sep 17 00:00:00 2001 From: nam-singh Date: Fri, 30 Aug 2024 20:37:16 +0530 Subject: [PATCH 01/29] added icons,changed css and bg color --- report-react/public/index.html | 2 +- report-react/src/SavedReport.tsx | 90 +++++++++++++------- report-react/src/ScoreCard.tsx | 4 +- report-react/src/SummScoreCard.tsx | 2 +- report-react/src/assets/NeedsReview16.svg | 25 ++++++ report-react/src/assets/Recommendation16.svg | 15 ++++ report-react/src/assets/Violation16.svg | 13 +++ report-react/src/report/ReportRow.tsx | 80 ++++++++--------- 8 files changed, 156 insertions(+), 75 deletions(-) create mode 100644 report-react/src/assets/NeedsReview16.svg create mode 100644 report-react/src/assets/Recommendation16.svg create mode 100644 report-react/src/assets/Violation16.svg diff --git a/report-react/public/index.html b/report-react/public/index.html index f20f2886e..c96cff085 100644 --- a/report-react/public/index.html +++ b/report-react/public/index.html @@ -10,7 +10,7 @@ IBM Equal Access Accessibility Checker Report - + diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx index b3955051b..7ba374244 100644 --- a/report-react/src/SavedReport.tsx +++ b/report-react/src/SavedReport.tsx @@ -20,40 +20,43 @@ import ScoreCard from './ScoreCard'; import SummScoreCard from './SummScoreCard'; import ReportChecklist from './report/ReportChecklist'; import ReportRules from './report/ReportRules'; -import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme, Tabs, TabList, TabPanel, Tab, TabPanels } from '@carbon/react'; +import Violation16 from '../src/assets/Violation16.svg' +import NeedsReview16 from '../src/assets/NeedsReview16.svg'; +import Recommendation16 from '../src/assets/Recommendation16.svg'; +import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme, Tabs, TabList, TabPanel, Tab, TabPanels ,Dropdown} from '@carbon/react'; -const Violation16 = - - - - +// const Violation16 = +// +// +// +// -const NeedsReview16 = - - - - - - - - - - - - - - - +// const NeedsReview16 = +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// -const Recommendation16 = - - - i - +// const Recommendation16 = +// +// +// i +// interface SavedReportProps { reportData: ISavedReportData | null @@ -61,13 +64,16 @@ interface SavedReportProps { interface SavedReportState { selectedItem: IReportItem | null + reportViewState:'Requirements'|'Rules'|'Element roles' } export class SavedReport extends React.Component { state: SavedReportState = { - selectedItem: null + selectedItem: null, + reportViewState: "Element roles", } + selectItem(item: IReportItem) { this.setState({ selectedItem: item }); } @@ -75,8 +81,12 @@ export class SavedReport extends React.ComponentReport Error } @@ -146,6 +156,22 @@ export class SavedReport extends React.Component
+ { + // set state + this.setState({ reportViewState: evt.selectedItem }); + }} + /> Requirements diff --git a/report-react/src/ScoreCard.tsx b/report-react/src/ScoreCard.tsx index 36125efc3..d0495032d 100644 --- a/report-react/src/ScoreCard.tsx +++ b/report-react/src/ScoreCard.tsx @@ -18,7 +18,7 @@ import "./ScoreCard.scss"; interface ScoreCardProps { title: string - icon?: ReactNode + icon?: string count?: number children?: any } @@ -27,7 +27,7 @@ export default class ScoreCard extends React.Component { render() { return
-
{this.props.title}{this.props.icon}
+
{this.props.title} {this.props.title}/
{this.props.count}
{this.props.children}
diff --git a/report-react/src/SummScoreCard.tsx b/report-react/src/SummScoreCard.tsx index 06ca73106..973e12d14 100644 --- a/report-react/src/SummScoreCard.tsx +++ b/report-react/src/SummScoreCard.tsx @@ -65,7 +65,7 @@ export default class SummScoreCard extends React.Component + return
diff --git a/report-react/src/assets/NeedsReview16.svg b/report-react/src/assets/NeedsReview16.svg new file mode 100644 index 000000000..60107684b --- /dev/null +++ b/report-react/src/assets/NeedsReview16.svg @@ -0,0 +1,25 @@ + + + + + + + + + + + + + + + + + + + diff --git a/report-react/src/assets/Recommendation16.svg b/report-react/src/assets/Recommendation16.svg new file mode 100644 index 000000000..5e68da929 --- /dev/null +++ b/report-react/src/assets/Recommendation16.svg @@ -0,0 +1,15 @@ + + + + + + +i + diff --git a/report-react/src/assets/Violation16.svg b/report-react/src/assets/Violation16.svg new file mode 100644 index 000000000..4ce8e754d --- /dev/null +++ b/report-react/src/assets/Violation16.svg @@ -0,0 +1,13 @@ + + + + + + + + diff --git a/report-react/src/report/ReportRow.tsx b/report-react/src/report/ReportRow.tsx index 95686cafc..6226a1a4c 100644 --- a/report-react/src/report/ReportRow.tsx +++ b/report-react/src/report/ReportRow.tsx @@ -17,44 +17,46 @@ import React, { RefObject } from "react"; import { IReportItem, valueMap, ICheckpoint, IReport } from "../IReport"; - +import Violation16 from '../assets/Violation16.svg' +import NeedsReview16 from '../assets/NeedsReview16.svg'; +import Recommendation16 from '../assets/Recommendation16.svg'; 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"; -const Violation16 = - - - - - -const NeedsReview16 = - - - - - - - - - - - - - - - - -const Recommendation16 = - - - i - +// const Violation16 = +// +// +// +// + +// const NeedsReview16 = +// +// +// +// +// +// +// +// +// +// +// +// +// +// +// + +// const Recommendation16 = +// +// +// i +// export interface IReportRowGroup { checkpoint?: ICheckpoint, @@ -144,9 +146,9 @@ export default class ReportRow extends React.Component {this.state.scrollTo &&
} {open ? : } - {vCount > 0 && <>{vCount} {Violation16} } - {nrCount > 0 && <>{nrCount} {NeedsReview16} } - {rCount > 0 && <>{rCount} {Recommendation16}} + {vCount > 0 && <>{vCount} Violation } + {nrCount > 0 && <>{nrCount} Need review } + {rCount > 0 && <>{rCount} Recommendation} {group.title.length === 0 ? "Page" : group.title} @@ -160,9 +162,9 @@ export default class ReportRow extends React.Component
- {val === "Violation" && {Violation16}} - {val === "Needs review" && {NeedsReview16}} - {val === "Recommendation" && {Recommendation16}} + {val === "Violation" && Violation} + {val === "Needs review" && Need review} + {val === "Recommendation" && Recommendation} {item.message} { this.props.selectItem(item); From ebdc30437b614acef0d28a1c989e1ea406c898c8 Mon Sep 17 00:00:00 2001 From: nam-singh Date: Wed, 4 Sep 2024 15:12:05 +0530 Subject: [PATCH 02/29] corrected import and images --- .../{ACReporterHTML.ts => ACReporterHTML.tsx} | 2 +- report-react/src/FilterController.ts | 19 +++ report-react/src/SavedReport.tsx | 119 +++++++++++------- report-react/src/ScoreCard.tsx | 27 +++- report-react/src/assets/NeedsReview16.svg | 25 ---- report-react/src/assets/Recommendation16.svg | 15 --- report-react/src/assets/Violation16.svg | 13 -- report-react/src/report/ReportRequirement.tsx | 80 ++++++++++++ report-react/src/report/ReportRow.tsx | 49 ++------ report-react/src/util/UtilIssue.tsx | 63 ++++++++++ report-react/src/util/UtilIssueReact.tsx | 103 +++++++++++++++ 11 files changed, 374 insertions(+), 141 deletions(-) rename common/module/src/report/{ACReporterHTML.ts => ACReporterHTML.tsx} (95%) create mode 100644 report-react/src/FilterController.ts delete mode 100644 report-react/src/assets/NeedsReview16.svg delete mode 100644 report-react/src/assets/Recommendation16.svg delete mode 100644 report-react/src/assets/Violation16.svg create mode 100644 report-react/src/report/ReportRequirement.tsx create mode 100644 report-react/src/util/UtilIssue.tsx create mode 100644 report-react/src/util/UtilIssueReact.tsx diff --git a/common/module/src/report/ACReporterHTML.ts b/common/module/src/report/ACReporterHTML.tsx similarity index 95% rename from common/module/src/report/ACReporterHTML.ts rename to common/module/src/report/ACReporterHTML.tsx index 7c6fa3b27..519eb4433 100644 --- a/common/module/src/report/ACReporterHTML.ts +++ b/common/module/src/report/ACReporterHTML.tsx @@ -18,7 +18,7 @@ import { IConfigInternal } from "../config/IConfig"; import { Guideline } from "../engine/IGuideline"; import { CompressedReport, IBaselineReport } from "../engine/IReport"; import { GenSummReturn, IReporter, IReporterStored, ReporterManager } from "./ReporterManager"; -import { genReport } from "./genReport"; +import { genReport } from "../../../../accessibility-checker-extension/src/ts/util/htmlReport/genReport"; export class ACReporterHTML implements IReporter { public name(): string { diff --git a/report-react/src/FilterController.ts b/report-react/src/FilterController.ts new file mode 100644 index 000000000..96f5e6e9d --- /dev/null +++ b/report-react/src/FilterController.ts @@ -0,0 +1,19 @@ +export class FilterController { + private filters: Array<{ id: string; text: string; checked: boolean }> = [ + { id: '0', text: 'Violations', checked: true }, + { id: '1', text: 'Needs review', checked: true }, + { id: '2', text: 'Recommendations', checked: true }, + { id: '3', text: 'Hidden', checked: false }, + ]; + + getFilters() { + return this.filters; + } + + setFilters(updatedFilters: Array<{ id: string; text: string; checked: boolean }>) { + this.filters = updatedFilters; + } + } + + export const filterController = new FilterController(); + \ No newline at end of file diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx index 7ba374244..2db26c5a6 100644 --- a/report-react/src/SavedReport.tsx +++ b/report-react/src/SavedReport.tsx @@ -20,57 +20,37 @@ import ScoreCard from './ScoreCard'; import SummScoreCard from './SummScoreCard'; import ReportChecklist from './report/ReportChecklist'; import ReportRules from './report/ReportRules'; -import Violation16 from '../src/assets/Violation16.svg' -import NeedsReview16 from '../src/assets/NeedsReview16.svg'; -import Recommendation16 from '../src/assets/Recommendation16.svg'; -import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme, Tabs, TabList, TabPanel, Tab, TabPanels ,Dropdown} from '@carbon/react'; +import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme, Tabs, TabList, TabPanel, Tab, TabPanels ,Dropdown,MultiSelect} from '@carbon/react'; +import { UtilIssueReact } from "./util/UtilIssueReact"; +import { filterController } from "./FilterController"; +import { Violation16,NeedsReview16,Recommendation16 } from "./util/UtilIssueReact"; -// const Violation16 = -// -// -// -// - -// const NeedsReview16 = -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// - -// const Recommendation16 = -// -// -// i -// interface SavedReportProps { reportData: ISavedReportData | null } interface SavedReportState { - selectedItem: IReportItem | null - reportViewState:'Requirements'|'Rules'|'Element roles' + selectedItem: IReportItem | null; + reportViewState:'Requirements'|'Rules'|'Element roles'; + selectedItems: Array<{ id: string; text: string; checked: boolean }>; + } +const filterItems = [ + { id: '0', text: 'Violations' }, + { id: '1', text: 'Needs review' }, + { id: '2', text: 'Recommendations' }, + { id: '3', text: 'Hidden' }, +] +const viewItems = ["Element roles", "Requirements","Rules"]; + export class SavedReport extends React.Component { state: SavedReportState = { selectedItem: null, reportViewState: "Element roles", + selectedItems: filterController.getFilters().filter(item => item.id!=='3'), + } @@ -82,11 +62,20 @@ export class SavedReport extends React.Component) => { + const updatedFilters = filterController.getFilters().map(filter => ({ + ...filter, + checked: selectedItems.some(selected => selected.id === filter.id), + })); + filterController.setFilters(updatedFilters); - + this.setState({ + selectedItems: updatedFilters.filter(item => item.checked), + }); + }; render() { - const viewItems = ["Element roles", "Requirements","Rules"]; - + +console.log("data",this.props.reportData) if (!this.props.reportData) { return Report Error } @@ -156,6 +145,38 @@ export class SavedReport extends React.Component
+
+ (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={filterController.getFilters()} + initialSelectedItems={filterController.getFilters()} + onChange={(event: { selectedItems: Array<{ id: string; text: string }> }) => + this.handleFilterChange(event.selectedItems) + } + /> - +
+ + {this.state.reportViewState === "Requirements" && <> +
+ +
+ } + {this.state.reportViewState === "Rules" && <> +
+ +
+ } + {/* Requirements Rules @@ -189,7 +222,7 @@ export class SavedReport extends React.Component - + */}
diff --git a/report-react/src/ScoreCard.tsx b/report-react/src/ScoreCard.tsx index d0495032d..1fdc78936 100644 --- a/report-react/src/ScoreCard.tsx +++ b/report-react/src/ScoreCard.tsx @@ -14,22 +14,43 @@ limitations under the License. *****************************************************************************/ import React, { ReactNode } from "react"; +import { SelectableTile } from '@carbon/react'; +import { filterController } from "./FilterController"; import "./ScoreCard.scss"; interface ScoreCardProps { title: string - icon?: string + icon?: ReactNode count?: number children?: any } export default class ScoreCard extends React.Component { + handleTileClick = () => { + const filters = filterController.getFilters(); + + const updatedFilters = filters.map(filter => { + if (filter.text === this.props.title) { + return { ...filter, checked: !filter.checked }; + } + return filter; + }); + + filterController.setFilters(updatedFilters); + + }; render() { - return
-
{this.props.title} {this.props.title}/
+ return
+ filter.text ===this.props.title && filter.checked + )} + onChange={this.handleTileClick} + > +
{this.props.title} {this.props.icon}
{this.props.count}
{this.props.children}
+
} } diff --git a/report-react/src/assets/NeedsReview16.svg b/report-react/src/assets/NeedsReview16.svg deleted file mode 100644 index 60107684b..000000000 --- a/report-react/src/assets/NeedsReview16.svg +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - - - diff --git a/report-react/src/assets/Recommendation16.svg b/report-react/src/assets/Recommendation16.svg deleted file mode 100644 index 5e68da929..000000000 --- a/report-react/src/assets/Recommendation16.svg +++ /dev/null @@ -1,15 +0,0 @@ - - - - - - -i - diff --git a/report-react/src/assets/Violation16.svg b/report-react/src/assets/Violation16.svg deleted file mode 100644 index 4ce8e754d..000000000 --- a/report-react/src/assets/Violation16.svg +++ /dev/null @@ -1,13 +0,0 @@ - - - - - - - - diff --git a/report-react/src/report/ReportRequirement.tsx b/report-react/src/report/ReportRequirement.tsx new file mode 100644 index 000000000..9a74a9f2a --- /dev/null +++ b/report-react/src/report/ReportRequirement.tsx @@ -0,0 +1,80 @@ +/****************************************************************************** + 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 React from "react"; + + import { IReport, IReportItem, valueMap } from "../IReport"; + import ReportRow from "./ReportRow"; + import { Grid, Column } from "@carbon/react"; + + interface IReportReqState { + } + interface IReportReqProps { + report: IReport; + selectItem: (item: IReportItem) => void + } + + export default class ReportRequirement extends React.Component { + state: IReportReqState = {}; + + render() { + + let groupMap: { + [key: string]: { + title: string, + counts: { [key: string]: number } + items: IReportItem[] + } + } | null = {}; + for (const item of this.props.report.results) { + if (item.value[1] === "PASS") { + continue; + } + + if (!(item.ruleId in groupMap)) { + groupMap[item.ruleId] = { + // TODO: Change out for passive rule message + title: this.props.report.nls[item.ruleId][0] || item.ruleId, + counts: {}, + items: [] + } + } + let curGroup = groupMap[item.ruleId]; + curGroup.items.push(item); + let val = valueMap[item.value[0]][item.value[1]] || item.value[0] + "_" + item.value[1]; + curGroup.counts[val] = (curGroup.counts[val] || 0) + 1; + } + + let groups = []; + for (const ruleId in groupMap) { + groups.push(groupMap[ruleId]); + } + + return
+ + +
Issues
+ + +
Requirements
+ + + {groups.map(group => { + return ; + })} +
+ } + } \ No newline at end of file diff --git a/report-react/src/report/ReportRow.tsx b/report-react/src/report/ReportRow.tsx index 6226a1a4c..f4a73213b 100644 --- a/report-react/src/report/ReportRow.tsx +++ b/report-react/src/report/ReportRow.tsx @@ -17,46 +17,13 @@ import React, { RefObject } from "react"; import { IReportItem, valueMap, ICheckpoint, IReport } from "../IReport"; -import Violation16 from '../assets/Violation16.svg' -import NeedsReview16 from '../assets/NeedsReview16.svg'; -import Recommendation16 from '../assets/Recommendation16.svg'; 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/UtilIssueReact"; + -// const Violation16 = -// -// -// -// - -// const NeedsReview16 = -// -// -// -// -// -// -// -// -// -// -// -// -// -// -// - -// const Recommendation16 = -// -// -// i -// export interface IReportRowGroup { checkpoint?: ICheckpoint, @@ -146,9 +113,9 @@ export default class ReportRow extends React.Component {this.state.scrollTo &&
} {open ? : } - {vCount > 0 && <>{vCount} Violation } - {nrCount > 0 && <>{nrCount} Need review } - {rCount > 0 && <>{rCount} Recommendation} + {vCount > 0 && <>{vCount} {Violation16} } + {nrCount > 0 && <>{nrCount} {NeedsReview16} } + {rCount > 0 && <>{rCount} {Recommendation16}} {group.title.length === 0 ? "Page" : group.title} @@ -162,9 +129,9 @@ export default class ReportRow extends React.Component
- {val === "Violation" && Violation} - {val === "Needs review" && Need review} - {val === "Recommendation" && Recommendation} + {val === "Violation" && {Violation16}} + {val === "Needs review" && {NeedsReview16}} + {val === "Recommendation" && {Recommendation16}} {item.message} { this.props.selectItem(item); 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..9c11d8db7 --- /dev/null +++ b/report-react/src/util/UtilIssueReact.tsx @@ -0,0 +1,103 @@ +/****************************************************************************** + 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'; + +export type IssueValue = [ + "VIOLATION" | "RECOMMENDATION"| "INFORMATION", + "FAIL" | "POTENTIAL" | "MANUAL" | "PASS" +]; + +export const Violation16 = + + + + + +export const NeedsReview16 = + + + + + + + + + + + + + + + + +export const Recommendation16 = + + + i + + +const ViewOn16= + + + + + + +const ViewOff16= + + + + + + + + +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 From b678c890fd748c806241fdb2d34b76ee3be07584 Mon Sep 17 00:00:00 2001 From: nam-singh Date: Wed, 4 Sep 2024 19:21:26 +0530 Subject: [PATCH 03/29] changes --- report-react/public/index.html | 2 +- report-react/src/SavedReport.tsx | 35 ++++++++++------------ report-react/src/ScoreCard.tsx | 31 +++++++++---------- report-react/src/report/ReportElements.tsx | 1 + 4 files changed, 34 insertions(+), 35 deletions(-) diff --git a/report-react/public/index.html b/report-react/public/index.html index c96cff085..f20f2886e 100644 --- a/report-react/public/index.html +++ b/report-react/public/index.html @@ -10,7 +10,7 @@ IBM Equal Access Accessibility Checker Report - + diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx index 2db26c5a6..5f885c700 100644 --- a/report-react/src/SavedReport.tsx +++ b/report-react/src/SavedReport.tsx @@ -22,8 +22,8 @@ import ReportChecklist from './report/ReportChecklist'; import ReportRules from './report/ReportRules'; import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme, Tabs, TabList, TabPanel, Tab, TabPanels ,Dropdown,MultiSelect} from '@carbon/react'; import { UtilIssueReact } from "./util/UtilIssueReact"; -import { filterController } from "./FilterController"; import { Violation16,NeedsReview16,Recommendation16 } from "./util/UtilIssueReact"; +import ReportElements from "./report/ReportElements"; interface SavedReportProps { @@ -33,7 +33,7 @@ interface SavedReportProps { interface SavedReportState { selectedItem: IReportItem | null; reportViewState:'Requirements'|'Rules'|'Element roles'; - selectedItems: Array<{ id: string; text: string; checked: boolean }>; + selectedItems: Array<{ id: string; text: string }>; } const filterItems = [ @@ -49,7 +49,7 @@ export class SavedReport extends React.Component item.id!=='3'), + selectedItems: filterItems.filter(item => item.id!=='3'), } @@ -63,15 +63,8 @@ export class SavedReport extends React.Component) => { - const updatedFilters = filterController.getFilters().map(filter => ({ - ...filter, - checked: selectedItems.some(selected => selected.id === filter.id), - })); - filterController.setFilters(updatedFilters); - - this.setState({ - selectedItems: updatedFilters.filter(item => item.checked), - }); + this.setState({selectedItems}) + }; render() { @@ -171,11 +164,10 @@ console.log("data",this.props.reportData) } light={false} type="default" - selectedItems={filterController.getFilters()} - initialSelectedItems={filterController.getFilters()} - onChange={(event: { selectedItems: Array<{ id: string; text: string }> }) => - this.handleFilterChange(event.selectedItems) - } + selectedItems={this.state.selectedItems} + initialSelectedItems={this.state.selectedItems} + onChange={(event: { selectedItems: Array<{ id: string; text: string }> }) => this.handleFilterChange(event.selectedItems)} + />
+ {this.state.reportViewState === "Element roles" && <> +
+ +
+ } {this.state.reportViewState === "Requirements" && <> -
+
} {this.state.reportViewState === "Rules" && <> -
+
} diff --git a/report-react/src/ScoreCard.tsx b/report-react/src/ScoreCard.tsx index 1fdc78936..073e4764c 100644 --- a/report-react/src/ScoreCard.tsx +++ b/report-react/src/ScoreCard.tsx @@ -15,7 +15,7 @@ *****************************************************************************/ import React, { ReactNode } from "react"; import { SelectableTile } from '@carbon/react'; -import { filterController } from "./FilterController"; +// import { filterController } from "./FilterController"; import "./ScoreCard.scss"; interface ScoreCardProps { @@ -26,26 +26,27 @@ interface ScoreCardProps { } export default class ScoreCard extends React.Component { - handleTileClick = () => { - const filters = filterController.getFilters(); + // handleTileClick = () => { + // const filters = filterController.getFilters(); - const updatedFilters = filters.map(filter => { - if (filter.text === this.props.title) { - return { ...filter, checked: !filter.checked }; - } - return filter; - }); + // const updatedFilters = filters.map(filter => { + // if (filter.text === this.props.title) { + // return { ...filter, checked: !filter.checked }; + // } + // return filter; + // }); - filterController.setFilters(updatedFilters); + // filterController.setFilters(updatedFilters); - }; + // }; render() { return
- filter.text ===this.props.title && filter.checked - )} - onChange={this.handleTileClick} + filter.text ===this.props.title && filter.checked + // )} + // onChange={this.handleTileClick} >
{this.props.title} {this.props.icon}
{this.props.count}
diff --git a/report-react/src/report/ReportElements.tsx b/report-react/src/report/ReportElements.tsx index 37fa878ed..ca27cf06a 100644 --- a/report-react/src/report/ReportElements.tsx +++ b/report-react/src/report/ReportElements.tsx @@ -59,6 +59,7 @@ export default class ReportElements extends React.Component From 5b82a225305c451021147bd875324b0ed23f1526 Mon Sep 17 00:00:00 2001 From: nam-singh Date: Thu, 5 Sep 2024 19:01:43 +0530 Subject: [PATCH 04/29] correction in filter sort --- report-react/src/FilterController.ts | 19 ---- report-react/src/SavedReport.scss | 3 + report-react/src/SavedReport.tsx | 103 ++++++++++++--------- report-react/src/ScoreCard.tsx | 24 +---- report-react/src/report/ReportElements.tsx | 9 +- report-react/src/report/ReportRules.tsx | 5 + 6 files changed, 81 insertions(+), 82 deletions(-) delete mode 100644 report-react/src/FilterController.ts diff --git a/report-react/src/FilterController.ts b/report-react/src/FilterController.ts deleted file mode 100644 index 96f5e6e9d..000000000 --- a/report-react/src/FilterController.ts +++ /dev/null @@ -1,19 +0,0 @@ -export class FilterController { - private filters: Array<{ id: string; text: string; checked: boolean }> = [ - { id: '0', text: 'Violations', checked: true }, - { id: '1', text: 'Needs review', checked: true }, - { id: '2', text: 'Recommendations', checked: true }, - { id: '3', text: 'Hidden', checked: false }, - ]; - - getFilters() { - return this.filters; - } - - setFilters(updatedFilters: Array<{ id: string; text: string; checked: boolean }>) { - this.filters = updatedFilters; - } - } - - export const filterController = new FilterController(); - \ No newline at end of file diff --git a/report-react/src/SavedReport.scss b/report-react/src/SavedReport.scss index 8da192b16..71e8a8cdb 100644 --- a/report-react/src/SavedReport.scss +++ b/report-react/src/SavedReport.scss @@ -34,6 +34,9 @@ margin: 1rem 0rem 0rem -1rem; } } + .reportTreeGridEmptyText { + margin-top: 5rem; +} .cds--modal-content { padding: 1rem 1rem 0rem 1rem; diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx index 5f885c700..d995e8b70 100644 --- a/report-react/src/SavedReport.tsx +++ b/report-react/src/SavedReport.tsx @@ -20,7 +20,7 @@ import ScoreCard from './ScoreCard'; import SummScoreCard from './SummScoreCard'; import ReportChecklist from './report/ReportChecklist'; import ReportRules from './report/ReportRules'; -import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme, Tabs, TabList, TabPanel, Tab, TabPanels ,Dropdown,MultiSelect} from '@carbon/react'; +import { ComposedModal, ModalHeader, ModalBody, Grid, Column, Theme,Dropdown,MultiSelect} from '@carbon/react'; import { UtilIssueReact } from "./util/UtilIssueReact"; import { Violation16,NeedsReview16,Recommendation16 } from "./util/UtilIssueReact"; import ReportElements from "./report/ReportElements"; @@ -66,9 +66,17 @@ export class SavedReport extends React.Component{ + if(this.state.selectedItems.some((item)=>item.text===filterItem)){ + let updatedFilter=this.state.selectedItems.filter((item)=>item.text!==filterItem); + this.setState({selectedItems:updatedFilter}); + }else{ + let updatedFilter=filterItems.filter((item)=>item.text===filterItem)[0] + this.setState({selectedItems:[...this.state.selectedItems,updatedFilter]}) + } + } render() { -console.log("data",this.props.reportData) if (!this.props.reportData) { return Report Error } @@ -90,6 +98,24 @@ console.log("data",this.props.reportData) ++recommendation; } } + const selectedFilters = this.state.selectedItems.map(item => item.text); + + 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; + }) + }; + return
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 @@ -139,13 +166,30 @@ console.log("data",this.props.reportData)
+
+ { + // set state + this.setState({ reportViewState: evt.selectedItem }); + }} + /> +
+
(item ? item.text : '')} @@ -169,57 +213,30 @@ console.log("data",this.props.reportData) onChange={(event: { selectedItems: Array<{ id: string; text: string }> }) => this.handleFilterChange(event.selectedItems)} /> - { - // set state - this.setState({ reportViewState: evt.selectedItem }); - }} - />
+ +
+ {filteredReport.results.length>0 && <> {this.state.reportViewState === "Element roles" && <>
- +
} {this.state.reportViewState === "Requirements" && <>
- +
} {this.state.reportViewState === "Rules" && <>
- +
} - {/* - - Requirements - 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.tsx b/report-react/src/ScoreCard.tsx index 073e4764c..6bdce3ecc 100644 --- a/report-react/src/ScoreCard.tsx +++ b/report-react/src/ScoreCard.tsx @@ -15,7 +15,6 @@ *****************************************************************************/ import React, { ReactNode } from "react"; import { SelectableTile } from '@carbon/react'; -// import { filterController } from "./FilterController"; import "./ScoreCard.scss"; interface ScoreCardProps { @@ -23,30 +22,17 @@ interface ScoreCardProps { icon?: ReactNode count?: number children?: any + checked?:Boolean + handleCardClick?:(item:string)=>void } export default class ScoreCard extends React.Component { - // handleTileClick = () => { - // const filters = filterController.getFilters(); - - // const updatedFilters = filters.map(filter => { - // if (filter.text === this.props.title) { - // return { ...filter, checked: !filter.checked }; - // } - // return filter; - // }); - - // filterController.setFilters(updatedFilters); - - // }; - + render() { return
filter.text ===this.props.title && filter.checked - // )} - // onChange={this.handleTileClick} + selected={this.props.checked} onClick={() => this.props.handleCardClick && this.props.handleCardClick(this.props.title)} + >
{this.props.title} {this.props.icon}
{this.props.count}
diff --git a/report-react/src/report/ReportElements.tsx b/report-react/src/report/ReportElements.tsx index ca27cf06a..43a9fddf4 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
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
From 76e402aecd2d56d6d8eb79a984756adc45e26237 Mon Sep 17 00:00:00 2001 From: nam-singh Date: Thu, 5 Sep 2024 19:13:15 +0530 Subject: [PATCH 05/29] seprating images --- report-react/src/SavedReport.tsx | 2 +- report-react/src/report/ReportRequirement.tsx | 80 ------------------- report-react/src/report/ReportRow.tsx | 2 +- report-react/src/util/UtilImages.tsx | 54 +++++++++++++ report-react/src/util/UtilIssueReact.tsx | 55 +------------ 5 files changed, 57 insertions(+), 136 deletions(-) delete mode 100644 report-react/src/report/ReportRequirement.tsx create mode 100644 report-react/src/util/UtilImages.tsx diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx index d995e8b70..74a65cab5 100644 --- a/report-react/src/SavedReport.tsx +++ b/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/UtilIssueReact"; +import { Violation16,NeedsReview16,Recommendation16 } from "./util/UtilImages"; import ReportElements from "./report/ReportElements"; diff --git a/report-react/src/report/ReportRequirement.tsx b/report-react/src/report/ReportRequirement.tsx deleted file mode 100644 index 9a74a9f2a..000000000 --- a/report-react/src/report/ReportRequirement.tsx +++ /dev/null @@ -1,80 +0,0 @@ -/****************************************************************************** - 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 React from "react"; - - import { IReport, IReportItem, valueMap } from "../IReport"; - import ReportRow from "./ReportRow"; - import { Grid, Column } from "@carbon/react"; - - interface IReportReqState { - } - interface IReportReqProps { - report: IReport; - selectItem: (item: IReportItem) => void - } - - export default class ReportRequirement extends React.Component { - state: IReportReqState = {}; - - render() { - - let groupMap: { - [key: string]: { - title: string, - counts: { [key: string]: number } - items: IReportItem[] - } - } | null = {}; - for (const item of this.props.report.results) { - if (item.value[1] === "PASS") { - continue; - } - - if (!(item.ruleId in groupMap)) { - groupMap[item.ruleId] = { - // TODO: Change out for passive rule message - title: this.props.report.nls[item.ruleId][0] || item.ruleId, - counts: {}, - items: [] - } - } - let curGroup = groupMap[item.ruleId]; - curGroup.items.push(item); - let val = valueMap[item.value[0]][item.value[1]] || item.value[0] + "_" + item.value[1]; - curGroup.counts[val] = (curGroup.counts[val] || 0) + 1; - } - - let groups = []; - for (const ruleId in groupMap) { - groups.push(groupMap[ruleId]); - } - - return
- - -
Issues
- - -
Requirements
- - - {groups.map(group => { - return ; - })} -
- } - } \ No newline at end of file diff --git a/report-react/src/report/ReportRow.tsx b/report-react/src/report/ReportRow.tsx index f4a73213b..dfc2cf5ea 100644 --- a/report-react/src/report/ReportRow.tsx +++ b/report-react/src/report/ReportRow.tsx @@ -21,7 +21,7 @@ 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/UtilIssueReact"; +import { Violation16,NeedsReview16,Recommendation16 } from "../util/UtilImages"; diff --git a/report-react/src/util/UtilImages.tsx b/report-react/src/util/UtilImages.tsx new file mode 100644 index 000000000..368c99255 --- /dev/null +++ b/report-react/src/util/UtilImages.tsx @@ -0,0 +1,54 @@ +export const Violation16 = + + + + + +export const NeedsReview16 = + + + + + + + + + + + + + + + + +export const Recommendation16 = + + + i + + +export const ViewOn16= + + + + + + +export const ViewOff16= + + + + + + diff --git a/report-react/src/util/UtilIssueReact.tsx b/report-react/src/util/UtilIssueReact.tsx index 9c11d8db7..61f96aa55 100644 --- a/report-react/src/util/UtilIssueReact.tsx +++ b/report-react/src/util/UtilIssueReact.tsx @@ -15,66 +15,13 @@ *****************************************************************************/ 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 const Violation16 = - - - - - -export const NeedsReview16 = - - - - - - - - - - - - - - - - -export const Recommendation16 = - - - i - - -const ViewOn16= - - - - - - -const ViewOff16= - - - - - - export class UtilIssueReact { From 9ca8a13c7ed3c8b3999d25328903eac97259104e Mon Sep 17 00:00:00 2001 From: nam-singh Date: Thu, 5 Sep 2024 19:19:42 +0530 Subject: [PATCH 06/29] changes in utilimages --- report-react/src/util/UtilImages.tsx | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/report-react/src/util/UtilImages.tsx b/report-react/src/util/UtilImages.tsx index 368c99255..0a48206ba 100644 --- a/report-react/src/util/UtilImages.tsx +++ b/report-react/src/util/UtilImages.tsx @@ -1,3 +1,21 @@ +/****************************************************************************** + 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 = From fa3ef882b1d2da92e31bf8a78c909bbfd5da4396 Mon Sep 17 00:00:00 2001 From: nam-singh Date: Thu, 5 Sep 2024 19:52:12 +0530 Subject: [PATCH 07/29] correction in expression of elements --- report-react/src/report/ReportElements.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/report-react/src/report/ReportElements.tsx b/report-react/src/report/ReportElements.tsx index 43a9fddf4..a8d7fd71f 100644 --- a/report-react/src/report/ReportElements.tsx +++ b/report-react/src/report/ReportElements.tsx @@ -51,7 +51,7 @@ export default class ReportElements extends React.Component Date: Thu, 5 Sep 2024 20:40:01 +0530 Subject: [PATCH 08/29] commenting hidden filter --- report-react/src/SavedReport.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx index 74a65cab5..40fe5e288 100644 --- a/report-react/src/SavedReport.tsx +++ b/report-react/src/SavedReport.tsx @@ -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"]; From de9ef8d109304170ed3d98f69cbaac5dd29b7077 Mon Sep 17 00:00:00 2001 From: Tom Brunet Date: Thu, 5 Sep 2024 14:54:18 -0500 Subject: [PATCH 09/29] Update common/module/src/report/ACReporterHTML.tsx --- common/module/src/report/ACReporterHTML.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/common/module/src/report/ACReporterHTML.tsx b/common/module/src/report/ACReporterHTML.tsx index 519eb4433..7c6fa3b27 100644 --- a/common/module/src/report/ACReporterHTML.tsx +++ b/common/module/src/report/ACReporterHTML.tsx @@ -18,7 +18,7 @@ import { IConfigInternal } from "../config/IConfig"; import { Guideline } from "../engine/IGuideline"; import { CompressedReport, IBaselineReport } from "../engine/IReport"; import { GenSummReturn, IReporter, IReporterStored, ReporterManager } from "./ReporterManager"; -import { genReport } from "../../../../accessibility-checker-extension/src/ts/util/htmlReport/genReport"; +import { genReport } from "./genReport"; export class ACReporterHTML implements IReporter { public name(): string { From f16b80d279d55f590d42f356fec56589d4816a1a Mon Sep 17 00:00:00 2001 From: Tom Brunet Date: Thu, 5 Sep 2024 15:05:35 -0500 Subject: [PATCH 10/29] Rename ACReporterHTML.tsx to ACReporterHTML.ts --- .../module/src/report/{ACReporterHTML.tsx => ACReporterHTML.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename common/module/src/report/{ACReporterHTML.tsx => ACReporterHTML.ts} (100%) diff --git a/common/module/src/report/ACReporterHTML.tsx b/common/module/src/report/ACReporterHTML.ts similarity index 100% rename from common/module/src/report/ACReporterHTML.tsx rename to common/module/src/report/ACReporterHTML.ts From cd242531773e7181f95a0a0ba1652a7a9e695c7c Mon Sep 17 00:00:00 2001 From: nam-singh Date: Mon, 9 Sep 2024 21:31:25 +0530 Subject: [PATCH 11/29] changes for hidden filter --- .../src/ts/devtools/devtoolsController.ts | 4 +++ report-react/public/index.html | 2 +- report-react/src/IReport.tsx | 1 + report-react/src/SavedReport.scss | 10 ++++++ report-react/src/SavedReport.tsx | 31 ++++++++++++++----- report-react/src/report/ReportElements.tsx | 2 +- report-react/src/report/ReportRow.tsx | 10 +++--- report-react/src/report/report.scss | 13 ++++---- 8 files changed, 53 insertions(+), 20 deletions(-) diff --git a/accessibility-checker-extension/src/ts/devtools/devtoolsController.ts b/accessibility-checker-extension/src/ts/devtools/devtoolsController.ts index 32331bdee..ea14b33ad 100644 --- a/accessibility-checker-extension/src/ts/devtools/devtoolsController.ts +++ b/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: [] } } diff --git a/report-react/public/index.html b/report-react/public/index.html index f20f2886e..c96cff085 100644 --- a/report-react/public/index.html +++ b/report-react/public/index.html @@ -10,7 +10,7 @@ IBM Equal Access Accessibility Checker Report - + diff --git a/report-react/src/IReport.tsx b/report-react/src/IReport.tsx index f59960676..acf6daf7b 100644 --- a/report-react/src/IReport.tsx +++ b/report-react/src/IReport.tsx @@ -33,6 +33,7 @@ export interface IReport { } passUniqueElements?: string[] testedUniqueElements?: number + ignored?:string[] } export interface IReportItem { diff --git a/report-react/src/SavedReport.scss b/report-react/src/SavedReport.scss index 71e8a8cdb..43c4933e0 100644 --- a/report-react/src/SavedReport.scss +++ b/report-react/src/SavedReport.scss @@ -207,4 +207,14 @@ } } } + .viewMulti { + float:right; + width: 230px; + background-color: #f4f4f4; + .cds--list-box { + max-height: 2rem; + border: solid #a8a8a8 1px; + } + } + } \ No newline at end of file diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx index 40fe5e288..d35a8b0e5 100644 --- a/report-react/src/SavedReport.tsx +++ b/report-react/src/SavedReport.tsx @@ -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.ComponentReport Error } @@ -90,26 +99,34 @@ export class SavedReport extends React.Component 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; } } const selectedFilters = this.state.selectedItems.map(item => item.text); + + 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") { + const isHidden = this.props.reportData?.report?.ignored && this.props.reportData?.report?.ignored.some(ignoredIssue => issueBaselineMatch(issue as any, ignoredIssue)); + if (selectedFilters.includes("Hidden") && isHidden) { + return true ; + } + if (selectedFilters.includes("Violations") && issue.value[0] === "VIOLATION" && issue.value[1] === "FAIL" && !isHidden) { return true; } - if (selectedFilters.includes("Needs review") && issue.value[0] === "VIOLATION" && (issue.value[1] === "POTENTIAL" || issue.value[1] === "MANUAL")) { + if (selectedFilters.includes("Needs review") && issue.value[0] === "VIOLATION" && (issue.value[1] === "POTENTIAL" || issue.value[1] === "MANUAL") && !isHidden) { return true; } - if (selectedFilters.includes("Recommendations") && issue.value[0] === "RECOMMENDATION") { + if (selectedFilters.includes("Recommendations") && issue.value[0] === "RECOMMENDATION" && !isHidden) { return true; } return false; diff --git a/report-react/src/report/ReportElements.tsx b/report-react/src/report/ReportElements.tsx index a8d7fd71f..8007aa1cc 100644 --- a/report-react/src/report/ReportElements.tsx +++ b/report-react/src/report/ReportElements.tsx @@ -75,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 dfc2cf5ea..bcf634879 100644 --- a/report-react/src/report/ReportRow.tsx +++ b/report-react/src/report/ReportRow.tsx @@ -125,10 +125,10 @@ export default class ReportRow extends React.Component {group.items.map(item => { let val = valueMap[item.value[0]][item.value[1]]; - return ( - - -
+ return ( + + + ) diff --git a/report-react/src/report/report.scss b/report-react/src/report/report.scss index ff8b6a79c..a24a28c43 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; } } @@ -51,7 +53,7 @@ } .itemMessage { - margin-left: 5px; + margin-left: 2rem; text-indent: -22px; img, svg { @@ -68,7 +70,6 @@ } .helpLink { - color: #000000; font-size: 12px; text-decoration: underline; svg { From b4d1cee4c56217be21ad6fe97692bc75c7e5c343 Mon Sep 17 00:00:00 2001 From: nam-singh Date: Tue, 10 Sep 2024 20:05:16 +0530 Subject: [PATCH 12/29] changes for hidden icon --- report-react/public/index.html | 2 +- report-react/src/IReport.tsx | 3 +- report-react/src/SavedReport.tsx | 102 +++++++++++++++----------- report-react/src/report/ReportRow.tsx | 16 ++-- report-react/src/report/report.scss | 5 +- 5 files changed, 74 insertions(+), 54 deletions(-) diff --git a/report-react/public/index.html b/report-react/public/index.html index c96cff085..f20f2886e 100644 --- a/report-react/public/index.html +++ b/report-react/public/index.html @@ -10,7 +10,7 @@ IBM Equal Access Accessibility Checker Report - + diff --git a/report-react/src/IReport.tsx b/report-react/src/IReport.tsx index acf6daf7b..cf82acd19 100644 --- a/report-react/src/IReport.tsx +++ b/report-react/src/IReport.tsx @@ -46,7 +46,8 @@ export interface IReportItem { value: string[], message: string, snippet: string, - help: string + help: string, + isHidden?:boolean, } export interface ICheckpoint { diff --git a/report-react/src/SavedReport.tsx b/report-react/src/SavedReport.tsx index d35a8b0e5..8ab64622c 100644 --- a/report-react/src/SavedReport.tsx +++ b/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"; @@ -98,6 +98,7 @@ export class SavedReport extends React.Component