From 57eaa7c8036a99435710db7f87c3478a203f6ef2 Mon Sep 17 00:00:00 2001 From: Brahim Mahadi Wachilli Date: Tue, 23 Jan 2024 12:01:35 -0500 Subject: [PATCH] WCAG upgrade: GC Custom Responsive Table --- .../gc-custom-responsive-table/_base.scss | 77 +++ .../_screen-sm-min.scss | 24 + .../crd-table-en.html | 183 ++++++++ .../crd-table-fr.html | 183 ++++++++ .../gc-custom-responsive-table/index.json-ld | 46 ++ .../reports/a11y-7-en.html | 11 + .../reports/a11y-7-fr.html | 11 + .../reports/a11y-7.json | 441 ++++++++++++++++++ 8 files changed, 976 insertions(+) create mode 100644 components/gc-custom-responsive-table/_base.scss create mode 100644 components/gc-custom-responsive-table/_screen-sm-min.scss create mode 100644 components/gc-custom-responsive-table/crd-table-en.html create mode 100644 components/gc-custom-responsive-table/crd-table-fr.html create mode 100644 components/gc-custom-responsive-table/index.json-ld create mode 100644 components/gc-custom-responsive-table/reports/a11y-7-en.html create mode 100644 components/gc-custom-responsive-table/reports/a11y-7-fr.html create mode 100644 components/gc-custom-responsive-table/reports/a11y-7.json diff --git a/components/gc-custom-responsive-table/_base.scss b/components/gc-custom-responsive-table/_base.scss new file mode 100644 index 0000000000..fae2a284a4 --- /dev/null +++ b/components/gc-custom-responsive-table/_base.scss @@ -0,0 +1,77 @@ +/* +* Custom responsive table styles +*/ + +/* +* Custom filtered table +*/ +table { + &.nws-tbl.crd-tbl { + + td { + display: block; + } + + .nws-tbl-ttl.crd-tbl-ttl, + .nws-tbl-desc.crd-tbl-desc { + margin-top: 15px; + } + + .nws-tbl-date.crd-tbl-date, + .nws-tbl-dept.crd-tbl-dept, + .nws-tbl-type.crd-tbl-type { + color: #555; + letter-spacing: .01em; + } + + tbody { + + tr { + background-color: $body-bg; + } + } + + > tbody > tr > td, + > tbody > tr > th, + > tfoot > tr > td, + > tfoot > tr > th, + > thead > tr > td, + > thead > tr > th { + border-top: 0; + padding-bottom: 0; + padding-top: 0; + } + } +} + +// Custom responsive table formatting (extended) +.nws-tbl.crd-tbl .tp-rail { + display:inline-block; +} +.nws-tbl.crd-tbl details summary, .nws-tbl.crd-tbl details[open] { + border: 0; +} +.nws-tbl.crd-tbl .one-dot { + -moz-border-radius: 50%; + -webkit-border-radius: 50%; + background: #000; + border-radius: 50%; + display: inline-block; + height: .5em; + vertical-align: middle; + width: .5em; +} +.nws-tbl.crd-tbl .tp-rail.commit { + font-size: 1.15em; + font-weight: 600; + max-width: 67%; + min-width: 67%; +} +.largeview .nws-tbl.crd-tbl .tp-rail.commit, .xlargeview .nws-tbl.crd-tbl .tp-rail.commit { + max-width: 71%; + min-width: 71%; +} + +table.dataTable.nws-tbl.crd-tbl .label.label-success { + padding: .6em .6em .3em; +} diff --git a/components/gc-custom-responsive-table/_screen-sm-min.scss b/components/gc-custom-responsive-table/_screen-sm-min.scss new file mode 100644 index 0000000000..3ee680cf6b --- /dev/null +++ b/components/gc-custom-responsive-table/_screen-sm-min.scss @@ -0,0 +1,24 @@ +/* + WET-BOEW + @title: Small view and over (screen only) + */ +table { + + &.nws-tbl.crd-tbl { + + td { + display: inline; + margin-top: 10px; + } + + .nws-tbl-dept.crd-tbl-dept, + .nws-tbl-type.crd-tbl-type { + border-left: solid 1px #666; + } + + .nws-tbl-ttl.crd-tbl-ttl, + .nws-tbl-desc.crd-tbl-desc { + display: block; + } + } +} diff --git a/components/gc-custom-responsive-table/crd-table-en.html b/components/gc-custom-responsive-table/crd-table-en.html new file mode 100644 index 0000000000..25a5ee08ac --- /dev/null +++ b/components/gc-custom-responsive-table/crd-table-en.html @@ -0,0 +1,183 @@ +--- +{ + "title": "Custom responsive table", + "language": "en", + "altLangPage": "crd-table-fr.html", + "dateModified": "2023-12-12" +} +--- +
+
+
+

Filter Options

 +

Use filters to below options to change the focus of your results in following data table

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ +
+
+
+
+
+

Resources

+ +
+
+
+ + + + + + + + + + + + + + +
TitlePublication dateDepartmentNews TypeSummaryLocationForSubjectMinister
+
+
diff --git a/components/gc-custom-responsive-table/crd-table-fr.html b/components/gc-custom-responsive-table/crd-table-fr.html new file mode 100644 index 0000000000..e00e987bb0 --- /dev/null +++ b/components/gc-custom-responsive-table/crd-table-fr.html @@ -0,0 +1,183 @@ +--- +{ + "title": "Tableau réactif personnalisé", + "language": "fr", + "altLangPage": "crd-table-en.html", + "dateModified": "2023-12-12" +} +--- +
+
+
+

Filter Options

 +

Use filters to below options to change the focus of your results in following data table

+
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+ + +
+
+
+ +
+
+ +
+
+
+
+
+

Resources

+ +
+
+
+ + + + + + + + + + + + + + +
TitlePublication dateDepartmentNews TypeSummaryLocationForSubjectMinister
+
+
diff --git a/components/gc-custom-responsive-table/index.json-ld b/components/gc-custom-responsive-table/index.json-ld new file mode 100644 index 0000000000..49b6874214 --- /dev/null +++ b/components/gc-custom-responsive-table/index.json-ld @@ -0,0 +1,46 @@ +{ + "@context": { + "@version": 1.1, + "dct": "http://purl.org/dc/terms/", + "title": { "@id": "dct:title", "@container": "@language" }, + "description": { "@id": "dct:description", "@container": "@language" }, + "modified": "dct:modified" + }, + "title": { + "en": "Custom responsive table", + "fr": "Tableau réactif personnalisé" + }, + "description": { + "en": "Working example of the custom responsive table", + "fr": "Exemple fonctionnel de la table réactive personnalisée" + }, + "modified": "2023-12-19", + "componentName": "gc-custom-responsive-table", + "status": "stable", + "pages": { + "examples": [ + { + "title": "Custom responsive table", + "language": "en", + "path": "crd-table-en.html" + }, + { + "title": "Tableau réactif personnalisé", + "language": "fr", + "path": "crd-table-fr.html" + } + ], + "reports": [ + { + "title": "Accessibility assessment #7 - Custom responsive table", + "language": "en", + "path": "reports/a11y-7-en.html" + }, + { + "title": "Assessment d'accessibilité #7 - Tableau réactif personnalisé", + "language": "fr", + "path": "reports/a11y-7-fr.html" + } + ] + } +} diff --git a/components/gc-custom-responsive-table/reports/a11y-7-en.html b/components/gc-custom-responsive-table/reports/a11y-7-en.html new file mode 100644 index 0000000000..b4e1b4cfbb --- /dev/null +++ b/components/gc-custom-responsive-table/reports/a11y-7-en.html @@ -0,0 +1,11 @@ +--- +{ + "title": "Accessibility assessment #7 - Custom responsive table", + "language": "en", + "description": "Evaluation of the custom responsive table page whose purpose is to test all GC custom responsive related elements, if they are aligned with our design and are compliant to our accessibility guideline when used as is without any special customization.", + "altLangPage": "a11y-7-fr.html", + "dateModified": "2023-12-19", + "layout": "assessment_wrote_en-en", + "reportURL": "a11y-7.json" +} +--- diff --git a/components/gc-custom-responsive-table/reports/a11y-7-fr.html b/components/gc-custom-responsive-table/reports/a11y-7-fr.html new file mode 100644 index 0000000000..f646054733 --- /dev/null +++ b/components/gc-custom-responsive-table/reports/a11y-7-fr.html @@ -0,0 +1,11 @@ +--- +{ + "title": "Assessment d'accessibilité #7 - Tableau réactif personnalisé", + "language": "fr", + "description": "Évaluation de la page du tableau réactif personnalisé dont le but est de tester tous les éléments réactifs personnalisés du GC, s'ils sont alignés avec notre conception et sont conformes à nos lignes directrices en matière d'accessibilité lorsqu'ils sont utilisés tels quels sans aucune personnalisation particulière.", + "altLangPage": "a11y-7-en.html", + "dateModified": "2023-12-19", + "layout": "assessment_wrote_en-fr", + "reportURL": "a11y-7.json" +} +--- diff --git a/components/gc-custom-responsive-table/reports/a11y-7.json b/components/gc-custom-responsive-table/reports/a11y-7.json new file mode 100644 index 0000000000..80eac12297 --- /dev/null +++ b/components/gc-custom-responsive-table/reports/a11y-7.json @@ -0,0 +1,441 @@ +{ + "@context": "https://wet-boew.github.io/vocab/context/2023/assessment-report-en.json-ld", + + "@type": [ "earl:Assertion", "acr:AssessmentReport" ], + + "earl:subject": { + "@id": "_:subject", + "dct:references": "https://wet-boew.github.io/GCWeb/components/gc-custom-responsive-table/crd-table-en.html", + "@type": [ + "earl:TestSubject", + "schema:WebPage" + ], + "dct:description": "Evaluation of the custom responsive table page whose purpose is to test all GC custom responsive related elements, if they are aligned with our design and are compliant to our accessibility guideline when used as is without any special customization.", + "earl:pointer": { + "@type": "oa:CssSelector", + "@value": "crd-table" + } + }, + + "earl:assertedBy": { + "foaf:name": "Service Canada - Principal Publisher", + "foaf:homepage": "https://github.com/ServiceCanada", + "@type": ["earl:Assertor", "foaf:Organization"], + "earl:mainAssertor": { + "foaf:name": "Brahim Mahadi Wachilli (Github: @BrahimMahadi)", + "foaf:homepage": "https://github.com/BrahimMahadi", + "@type": ["earl:Assertor", "foaf:Person"] + } + }, + + "dct:date": "2023-12-19", + "dct:description": "Analyzing and exploring the subject and produce an evaluation of all WCAG 2.1 SC at level AA.", + "acr:involvesExpertise": [], + + "dct:source": "act:rulesets/wcag2x/wcag21_all_levelAA.json", + "acr:standard": "https://www.w3.org/TR/WCAG21", + "acr:conformanceOption": "act:standard/profiles/wcag#levelAA", + + "earl:result": [ + { + "earl:test": "WCAG21:non-text-content", + "earl:outcome": "earl:passed", + "earl:subject": "_:subject", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:audio-only-and-video-only-prerecorded", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:captions-prerecorded", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:audio-description-or-media-alternative-prerecorded", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:captions-live", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:audio-description-prerecorded", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:info-and-relationships", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:meaningful-sequence", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:sensory-characteristics", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:orientation", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:identify-input-purpose", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:use-of-color", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:audio-control", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:contrast-minimum", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:resize-text", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:image-of-text", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:reflow", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:non-text-contrast", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:text-spacing", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:content-on-hover-or-focus", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:keyboard", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:no-keyboard-trap", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:character-key-shortcuts", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:timing-adjustable", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:pause-stop-hide", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:three-flashes-or-below-threshold", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:bypass-blocks", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:page-titled", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:focus-order", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:link-purpose-in-context", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:multiple-ways", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:headings-and-labels", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:focus-visible", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:pointer-gestures", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:pointer-cancellation", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:label-in-name", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:motion-actuation", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:language-of-page", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:language-of-parts", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:on-focus", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:on-input", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:consistent-navigation", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:consistent-identification", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:error-identification", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:labels-or-instructions", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:error-suggestion", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:error-prevention-legal-financial-data)", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:parsing", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:name-role-value", + "earl:subject": "_:subject", + "earl:outcome": "earl:passed", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + }, + { + "earl:test": "WCAG21:status-messages", + "earl:subject": "_:subject", + "earl:outcome": "earl:inapplicable", + "dct:description": "", + "earl:mode": "earl:unknownMode", + "@type": ["earl:TestResult", "earl:Assertion"] + } + ] +}