Patch - update CSS for high contrast (#2413)

2021-05-conjunction: CSS fix to support high contrast
2021-05-steps: Fix Firefox print CSS

* update CSS for high contrast

Added new exception to remove line separator  for side by side designs in high contrast mode for firefox as cannot resolve gradient pattern issue (going through text)

* Update index.html

* Update print spacing for lists

Added media print CSS to avoid page split and cutoff of parts of steps.

* Update meta.md

* Update meta.md

* Update meta.md

* Update meta.md

* Update index.html

méli-mélo/2021-05-conjunction/and-or.css

@@ -120,6 +120,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   [class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child):after {
     border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
   }
+	@-moz-document url-prefix() {
+       [class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
+    }
 }
 [class*=cnjnctn-type-].cnjnctn-xs > [class*=cnjnctn-col]:not(:first-child) {
   margin-left: 1.4em;
@@ -183,6 +188,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   @media (prefers-contrast: more) {
     [class*=cnjnctn-type-].cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):after {
       border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+    }
+	  @-moz-document url-prefix() {
+      [class*=cnjnctn-type-].cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
     }
   }
   .cnjnctn-type-and.cnjnctn-sm > [class*=cnjnctn-col]:not(:first-child):before {
@@ -228,6 +238,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   @media (prefers-contrast: more) {
     [class*=cnjnctn-type-].cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):after {
       border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+    }
+	  @-moz-document url-prefix() {
+      [class*=cnjnctn-type-].cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
     }
   }
   .cnjnctn-type-and.cnjnctn-md > [class*=cnjnctn-col]:not(:first-child):before {
@@ -273,6 +288,11 @@ html:lang(fr) .cnjnctn-type-or > [class*=cnjnctn-col]:not(:first-child):before {
   @media (prefers-contrast: more) {
     [class*=cnjnctn-type-].cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):after {
       border-image: linear-gradient(to bottom, #ffffff 0.3em, #ffffff 0.3em, transparent 0.3em, transparent 2.35em, #ffffff 2.35em, #ffffff 2.35em) 1 100%;
+    }
+	  @-moz-document url-prefix() {
+      [class*=cnjnctn-type-].cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):after {
+        border-left: none;
+      }
     }
   }
   .cnjnctn-type-and.cnjnctn-lg > [class*=cnjnctn-col]:not(:first-child):before {

méli-mélo/2021-05-conjunction/index.html

@@ -18,27 +18,23 @@ <h2 class="h5">Table of content</h2>
 </nav>
 
 <h2>GCWeb implementation plan</h2>
+
+{% assign implPlan = site.pages | where: "output", "false" | where: "componentName", "2021-05-conjunction" | first %}
+
 <ul>
-	<li>2021-06 - Engage with TBS to show them this design pattern</li>
-  <li>2021-06 - Provide UX research and analysis to describe how pattern helps usability</li>
-	<li>2021-10 - Review and identify requirement to make this functionality enterprise ready</li>
-	<li>2021-11 - Produce accessibility and usability report on its usage on Canada.ca</li>
-	<li>2022-02 - Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.</li>
-	<li>2022-05 - updated to focus more on using as list items (with or without headers)</li>
-	<li>2022-09 - updated CSS to allow nested decision points</li>
-	<li>2022-11 - updated CSS to allow no border on always stacked items</li>
-	<li>2023-07 - updated CRA to allow no border on all resolutions when stacked</li>
-	<li>2023-08 - allow for zoom text resolution of 200%
-    <li>2023-10 - have this feature as provisional/stable feature in GCWeb and get TBS to publish guidance on how to use it.</li>
-	<li>2024-04 - updated to fix design when text is smaller, make border visible in high contrast mode</li>
+{% for deliverable in implPlan.implementationPlan %}
+	<li>{{ deliverable.due }} - {{ deliverable.what }}</li>
+{% endfor %}
 </ul>
 
 <p>Todo and for future consideration</p>
 <ul>
-	<li>>Finalize documentation and examples to be merged into GCWeb library.</li>
+{% for todo in implPlan.todos %}
+	<li>{{ todo }}</li>
+{% endfor %}
 </ul>
 
-<p>Lead: CRA - Christopher Oakes (@christopher-o)</p>
+<p>Sponsor: {{ implPlan.sponsor }}</p>
   <ul class="list-inline">
     <li><a class="btn btn-primary" href="conjunction-doc-en.html">Documentation</a></li>
     <li><a class="btn btn-primary" href="https://github.com/wet-boew/GCWeb/issues/new?title=Conjunction">Questions or comments?</a></li>

méli-mélo/2021-05-conjunction/meta.md

@@ -6,14 +6,18 @@ feature: méli-mélo
   title:
     "@id": dct:title
     "@container": "@language"
-  description: dct:description
+  description:
+    "@id": dct:description
+    "@container": "@language"
   modified: dct:modified
 
 title:
   en: Conjunctions (and/or)
   fr: Conjonction (et/ou)
-description: Conjunctions for stacked or side by side decision points, and/or
-modified: 2024-05-30
+description:
+  en: Conjunctions for stacked or side by side decision points, and/or
+  fr: Conjonctions pour des points de décision empilés ou côte à côte, et/ou
+modified: 2024-08-07
 componentName: 2021-05-conjunction
 sponsor: CRA - Christopher Oakes (@christopher-o)
 
@@ -30,22 +34,39 @@ implementationPlan:
   - due: 2021-06
     what: Engage with TBS to show them this design pattern
   - due: 2021-06
-    what: Provide UX research and analysis to describe how pattern helps usability</li>
+    what: Provide UX research and analysis to describe how pattern helps usability
   - due: 2021-10
     what: Review and identify requirement to make this functionality enterprise ready
   - due: 2021-11
     what: Produce accessibility and usability report on its usage on Canada.ca
   - due: 2022-02
     what: Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.
+  - due: 2022-05
+    what: updated to focus more on using as list items (with or without headers)
+  - due: 2022-09
+    what: updated CSS to allow nested decision points
+  - due: 2022-11
+    what: updated CSS to allow no border on always stacked items
+  - due: 2023-07
+    what: updated CRA to allow no border on all resolutions when stacked
+  - due: 2023-08
+    what: allow for zoom text resolution of 200%
+  - due: 2023-10
+    what: have this feature as provisional/stable feature in GCWeb and get TBS to publish guidance on how to use it.
+  - due: 2024-04
+    what: updated to fix design when text is smaller, make border visible in high contrast mode
 
 todos:
-  - Review code and governance to balance optimal accessibility and ease of implimentation by users.
+  - Finalize design
 
 changes:
   - date: 2024-06-20
     description: Changed border to appear in high contrast. Changed font size of CSS generated text to em value for better scalability between parent font sizes. Increased miminum height of side by side pattern to create consistant border above and below CSS text design. Updated governance towards stabilization.
     departmentImpact: No change from a departmental perspective.
     publicImpact: Allows border to be shown in high contrast (could require additional adjustment for FF and MacOS browsers). Fixed issue of using design in font sizes other than 20px (GCWeb standard)
-
+  - date: 2024-08-07
+    description: Change was to remove the side-by-side line separator in Firefox (but keep the shape and text) when in High contrast mode. The previous pattern had the line separator "cut" through the words (and/or) which could make it slightly illegible.
+    departmentImpact: There is minimal impact, as we do not normally use Firefox as a browser, nor does the majority of users use high contrast mode on their devices.
+    publicImpact: Only those who use high contrast mode with the Firefox browser, and will be a slight improvement on readability of the text.
 output: false
 ---

méli-mélo/2021-05-steps/meta.md

@@ -52,6 +52,9 @@ changes:
     description: Reduced excessive spacing for small amount of content. Removed background color for default list steps number (except in striped mode) as was not showing up properly in high contrast mode. Updated governance towards stabilization.
     departmentImpact: No change from a departmental perspective.
     publicImpact: Created a cleaner look for items using list steps with a smaller amount of content. Made the numbers more visible for edge case scenarios of print and high contrast.
-
+  - date: 2024-08-07
+    description: Fixed issue with printing pages as some text would be cut off 
+    departmentImpact: No change from a departmental perspective.
+    publicImpact: Improved look of print document
 output: false
 ---

méli-mélo/2021-05-steps/steps.css

@@ -111,3 +111,11 @@ ol.lst-stps.stps-strpd:not(.ld-zr) > li:before, ol.lst-stps.stps-strpd:not(.ld-z
     padding-left: 3em;
   }
 }
+@media print {
+	ol.lst-stps>li {
+		-webkit-break-inside: avoid;
+		-moz-break-inside: avoid;
+		break-inside: avoid;
+		padding-top:1em;
+	}
+}