Update and-or.css

[Christopher-O]

updated line/border from background-image to border-image in order for line to show up better in high contrast mode.

[duboisp]

as discussed,

• [x] Create a page with the French translation of the working example
• [ ] Produce an accessbility assessment and upload it to the project experimental folder.
• [x] Seperate the Working example vs the Guidance.
• [ ] Cross-link all the project pages and documents to ensure we can find all the information published via our GCWeb website.

After we will work togeter to move out this experimentation into the stable space in the GCWeb product. Thanks

[Garneauma]

Pre-approved upon successful review and completion of all work items.

[Christopher-O]

Waiting for @duboisp for conversion of WCAG accessibility points to HTML, unsure exactly what this task entails "Cross-link all the project pages and documents to ensure we can find all the information published via our GCWeb website." @Garneauma could you please advise?

[duboisp]

Comment regarding the adaptive style for the high contrast mode,

@media (prefers-contrast: more) {

I tested that CSS and my testing showed it acceptable in our currently supported browser list.

The supported browser are:

• Chrome (Desktop and mobile)
• Safari (Desktop and mobile)
• Edge (Desktop only)

Here my test result in high contrast mode:

---

Windows Chrome: work as expected

---

Windows Edge: work as expected

Same visual as Windows Chrome

---

Windows Firefox dev: It is broken, the user can not clearly read the conjunction word "and" and "or" because there is a vertical black bar in the middle

---

MacOS Big Sur Chrome: Don't work as expected, but the text is readable, the white border gradient only affect the circle around the word, not the word itself.

---

MacOS Big Sur Safari: Don't work as expected, but the text is readable, the white border gradient only affect the circle around the word, not the word itself.

Same visual as MacOS Big Sur Chrome

---

Here what it look like in normal mode

---

[duboisp]

@ouafaaetta as discussed, please submit a request change to the little update required in the accessibility report in JSON-LD. Thanks

[duboisp]

Completed the review and local testing, everything look good. There is a few typo change to apply prior to merge.

Note that some additional change would be required, post merge like:

• Use jekyll front-matter to link the other page language
• Adding the 2 HTML placeholder page to render the accessibility assessment in an HTML format.
• Producing the index.json-ld file for documentation by leveraging the documentation provided.

[Christopher-O]

Changes in the PR

• 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

Impact for department

• No change from a departmental perspective

Impact for the public

• 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)