forked from wet-boew/GCWeb
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
300 lines (252 loc) · 20 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
---
{
"title": "GCWeb theme - Meta information",
"language": "en",
"altLangPrefix": "index",
"breadcrumb": [
{ "title": "GCWeb home", "link": "../index-en.html" }
],
"secondlevel": false,
"dateModified": "2019-09-12",
"share": "true"
}
---
<p>On this page:</p>
<ul>
<li><a href="#menuCDN">Menu CDN</a></li>
<li><a href="#gcweb-v5">GCWeb Canada.ca theme) visual update - V5</a></li>
<li><a href="#evaluation">Evaluation and report</a></li>
<li><a href="#special-notes">Special notes</a></li>
<li><a href="#static-header-footer">Static header and footer</a></li>
<li><a href="#customGCWebVariant">Customizing GCWeb for your implementation variant</a></li>
<li><a href="#testCases">Test cases</a></li>
<li><a href="implementing.html">Implementing GCWeb</a></li>
<li><a href="release/index-en.html">Version history (Release notes)</a></li>
</ul>
<h2 id="menuCDN">Menu CDN</h2>
<p>Principal publisher udpate those following HTML fragment file every time there is a change to Canada.ca top menu.</p>
<ul>
<li>English: <a href="https://cdn.canada.ca/gcweb-cdn-live/sitemenu/sitemenu-v5-en.html">https://cdn.canada.ca/gcweb-cdn-live/sitemenu/sitemenu-v5-en.html</a></li>
<li>French: <a href="https://cdn.canada.ca/gcweb-cdn-live/sitemenu/sitemenu-v5-fr.html">https://cdn.canada.ca/gcweb-cdn-live/sitemenu/sitemenu-v5-fr.html</a></li>
</ul>
<h2 id="static-header-footer">Static header and footer</h2>
<p>Static HTML header and footer that you can just copy and paste in your project, with slight modifications e.g. metadata.</p>
<table class="table table-bordered table-hover">
<thead>
<tr>
<td></td>
<th>Bootstrap 3</th>
<th>Bootstrap 4 (experimental)</th>
</tr>
</thead>
<tbody>
<tr>
<th>Example</th>
<td>
<ul class="mrgn-bttm-0">
<li><a href="static-header-footer/bootstrap-3.html">English</a></li>
</ul>
</td>
<td>
<ul class="mrgn-bttm-0">
<li><a href="static-header-footer/bootstrap-4.html">English</a></li>
</ul>
</td>
</tr>
<tr>
<th>Header</th>
<td><a href="https://github.com/wet-boew/GCWeb/blob/master/site/pages/gcweb-theme/static-header-footer/bootstrap-3.html#L1-L89" rel="external">Source code, line 1 to 89</a></td>
<td><a href="https://github.com/wet-boew/GCWeb/blob/master/site/pages/gcweb-theme/static-header-footer/bootstrap-4.html#L1-L66" rel="external">Source code, line 1 to 66</a></td>
</tr>
<tr>
<th>Footer</th>
<td><a href="https://github.com/wet-boew/GCWeb/blob/master/site/pages/gcweb-theme/static-header-footer/bootstrap-3.html#L187-L233" rel="external">Source code, line 187 to 233</a></td>
<td><a href="https://github.com/wet-boew/GCWeb/blob/master/site/pages/gcweb-theme/static-header-footer/bootstrap-4.html#L84-L122" rel="external">Source code, line 84 to 122</a></td>
</tr>
<tr>
<th>Notes</th>
<td>
<ul>
<li>Includes WET scripts</li>
<li>Includes GCWeb styles</li>
<li>Needs to have assets paths updated to fit your folder structure</li>
</ul>
</td>
<td>
<ul>
<li>Does not include WET scripts</li>
<li>Does not include GCWeb styles</li>
<li>Does not include the menu</li>
<li>Relies on an experimental stylesheet for a Canada.ca look</li>
</ul>
</td>
</tr>
<tr>
<th>Special assets</th>
<td><a href="https://github.com/wet-boew/GCWeb/archive/v5.1.zip" rel="external">Download GCWeb</a></td>
<td><a href="https://github.com/wet-boew/GCWeb/blob/master/site/pages/gcweb-theme/static-header-footer/site-assets/x-bootstrap-4.css" rel="external">Download experimental CSS</a></td>
</tr>
</tbody>
</table>
<h2 id="gcweb-v5">GCWeb Canada.ca theme) visual update - V5</h2>
<p>The GCWeb v5 (Canada.ca theme) visual update are supporting the Canada.ca Content and Information Architecture Specification 2.0.</p>
<ul>
<li><a href="v5-migration.html">Migration instruction</a> (from v4.0.29 to v5)
<ul>
<li>Change: Page footer</li>
<li>Change: Page header Structure</li>
<li>Change: Menu</li>
<li>Change: Home Page</li>
<li>Change: How to identify navigation pages (Themes, topics,...)</li>
</ul>
</li>
<li>New features (for web publisher):
<ul>
<li><a href="v5-migration.html#pg-dblspcd">Double space for list</a></li>
<li><a href="v5-migration.html#pg-list">Responsive list</a></li>
<li><a href="v5-migration.html#pg-linkfigure">Linked figure design pattern</a></li>
<li><a href="../templates/content-en.html#cnt-wdth-lmtd">Content block with a limited width</a></li>
<li><a href="../templates/content-en.html#call-to-action">Call to action button</a></li>
</ul>
</li>
<li>Demos (Where you can see all the area where a change apply):
<ul>
<li><a href="../templates/home/home-en.html">Home page</a></li>
<li><a href="../templates/content-limit-en.html">Content page - Limited width content</a></li>
<li><a href="../templates/content-en.html">Content page</a></li>
<li><a href="../templates/theme-en.html">Theme template</a></li>
</ul>
</li>
<li>Workaround for implementer:
<ul>
<li>See the section bellow <a href="#temp-avoid-visual">Temporary avoiding the visual difference</a></li>
<li><a href="../templates/content-gcweb-4-0-29-font-style-en.html">Content page - GCWeb 4.0.29 font style</a></li>
</ul>
</li>
<li><a href="temp-v5issue.html">Temporary internal list of issues and todo</a></li>
</ul>
<h3>Noticable visual difference with no markup change</h3>
<p>This is a list of perceptible changes that would be visually noticiable if only the GCWeb javascript and CSS are replaced without doing any markup change as identified by the migration instruction.</p>
<ul>
<li><strong>Language Toggle link:</strong> Font changed</li>
<li><strong>Breadcrumbs:</strong> Font changed</li>
<li><strong>Breadcrumbs:</strong> arrow replaced with chevron</li>
<li><strong>Search box:</strong> Larger, white background replaces grey, closer to menu</li>
<li><strong>Menu:</strong> Font changed</li>
<li><strong>Header:</strong> White background replaces light grey</li>
<li><strong><code><h1></code>:</strong> Larger font</li>
<li><strong>Text:</strong> Font larger</li>
<li><strong>Social Media Strip:</strong> Lowered</li>
<li><strong><code><h2></code>:</strong> Smaller font</li>
<li><strong><code><p></code>:</strong> Larger font</li>
</ul>
<h3 id="temp-avoid-visual">Temporary avoiding the visual difference</h3>
<p>The increased font size and the new line-height might impact some visual design. Mostly the one where it was thighly designed for desktop first, like some campaign pages.</p>
<p>Here a list of design items to look at:</p>
<ul>
<li>Pages where the number of characted (like in a title) are closely counted to ensure it fit in a specific container, like to remain in one single line. For example the title of a feature tile.</li>
<li>Pages where there is textual content inside a column of a width of 1 and 2. Textual content inside a column of width of 3 might or might not cause issue. Those cases might require you to re-think how to present the information.</li>
<li>Pages where datatables was intentionally skrinked in order to fit all columns inside the extra-large view port (desktop). For example a datatable with 10 columns or more in a report.</li>
</ul>
<p>The visual difference is avoided for:</p>
<ul>
<li>Form content inside a form</li>
<li>Button (exception of the new call to action button)</li>
<li>Content inside a container with the CSS class <code>force-style-gcweb-4-0-29</code></li>
</ul>
<p>Here a working example: <a href="../templates/content-gcweb-4-0-29-font-style-en.html">Content page - GCWeb 4.0.29 font style</a></p>
<h3>Reference and notes</h3>
<ul>
<li>The menu was designed similary like the menu design pattern from WAI-ARIA 1.1</li>
<li>The double role on list item in the menu was added as suggested by the W3C validator because the <code>role=none</code> are not widely supported yet.</li>
<li>Originally the attribute <code>aria-haspopup</code> was set with the value <code>menu</code>. But in order to pass the whatwg validation, when the markup are validated as output by the server, as a best practice because w3c , the value of aria-haspopup was change to true. As per the WAI-ARIA 1.1 spec. the value <code>true</code> is equivalent to setting the value <code>menu</code> - <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup">https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup</a> (Note the validation, as per WCAG 2.0 and WCAG 2.1 should be done after all JS has run and the DOM is mark "ready". Also the DOM markup should validate after any DOM manipulation that are happing in the page)</li>
<li>The menu item focus are managed by using a Roving tabindex. - <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex">https://www.w3.org/TR/wai-aria-practices-1.1/#kbd_roving_tabindex</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#menubutton">WAI-ARIA Practices 1.1 - 3.15 Menu Button</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/#menu">WAI-ARIA Practices 1.1 - 3.14 Menu or Menu bar</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html">WAI-ARIA Practices 1.1 - Editor Menubar Example</a></li>
<li><a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/menu-button/menu-button-actions.html">WAI-ARIA Practices 1.1 - Action Menu button using <code>element.focus()</code></a></li>
</ul>
<h2 id="evaluation">Evaluation and report</h2>
<ul>
<li>February 20, 2019: <a href="test-menu.html" hreflang="fr">Test on the menu component</a> (French only)</li>
<li>November 16, 2018: <a href="evaluation-report/2-wetplugin-gcweb2.html">2 - Regression user acceptance testing of WET plugin for GCWeb theme version 2</a></li>
<li>November 14, 2018: <a href="evaluation-report/1-accessibility.html">1 - Accessibility assesment of GCWeb theme version 2</a></li>
<li>October 22-26, 2018: Partial screen reader compatibility test has been made to the new menu, but for a different markup compared to the one published as Oct 31. From that test, the recommendation was to replace the button text "top menu" by "main menu".</li>
</ul>
<h2 id="special-notes">Special notes</h2>
<h3 id="fontawesome">Adding Font Awesome icons</h3>
<h4>Requirement</h4>
<p>Based on the discussion <a href="https://github.com/wet-boew/wet-boew/issues/7879">FontAwesome</a> originally opened February 2017.</p>
<h4>Background</h4>
<p>Adding Font Awesome to GCWeb should allow its icons to be relied upon for any Canada.ca content. This can allow for richer content than what's available from GlyphIcons.</p>
<p>The preferred means of installing FontAwesome is to use the style sheet link as described on the Font Awesome <a href="https://fontawesome.com/start">Start using FontAwesome</a> page.</p>
<p>The style sheet link includes a hash for the integrity check. </p>
<p>Font Awesome's privacy policy notes that it tracks use of the CDN including what fonts are downloaded and when, with no personally identifidable data tracked.</p>
<p><a href="https://fontawesome.com/privacy#cdns">Font Awesome collects data about use of its content delivery networks</a>.</p>
<h3 id="antialiasing">Use of font smoothing anti-aliasing</h3>
<h4>Requirement</h4>
<p>Configure the font smoothing anti-aliasing CSS for GCWeb theme v5.</p>
<h4>Background</h4>
<p><time datetime="2018-11-02">November 2<sup>nd</sup>, 2018</time></p>
<p>It is explicitly said that anti-aliasing CSS is not in a standard track and it is recommended to avoid. Currently that feature is only limited to webkit browser and FF by applying some prefix vendor.</p>
<p>It was an experimental feature that was removed from an old CSS W3C editor draft. It is only supported by Chrome browser. That feature wasn't consistently supported by Chrome. Considering the published article referenced by Mozila that support to avoid font smoothing and it's removal from the old editor draft specification, the wet-boew team lead consider that feature at risk and recommend to avoid it. At the time of publishing this, no extensive research was made to find an alternative solution that would meet the above requirement.</p>
<ul>
<li><q>Though present in early (2002) drafts of CSS3 Fonts, font-smooth has been removed from this specification and is currently not on the standard track.</q> - <a href="https://caniuse.com/#search=font-smoothing">https://caniuse.com/#search=font-smoothing</a></li>
<li><q>This feature is non-standard and is not on a standards track. Do not use it on production sites facing the Web: it will not work for every user. There may also be large incompatibilities between implementations and the behavior may change in the future.</q> - <a href="https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth">https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth</a></li>
<li>Outdated working draft - W3C CSS font - <a href="https://www.w3.org/TR/WD-font/#font-smooth">https://www.w3.org/TR/WD-font/#font-smooth</a></li>
<li>See also: <a href="https://usabilitypost.com/2012/11/05/stop-fixing-font-smoothing/">Please Stop "Fixing" Font Smoothing – UsabilityPost</a></li>
<li>See also: <a href="https://www.zachleat.com/web/font-smooth/">Laissez-faire font smoothing and anti-aliasing</a></li>
</ul>
<p>The above article makes reference that playing with the anti-aliasing feature make the font more blury for use, so less readable.</p>
<h4>Rational / Justification</h4>
<p><time datetime="2018-11-16">November 16, 2018</time></p>
<blockquote>
<p>[...] we seem to be unsure if there is actually a technical or other issue with implementing the font smoothing for various browsers. Right now there are two calls to font smoothing - code for smoothing which is for several browsers (Chrome, etc), and then code for the Mozilla specific smoothing for Firefox.</p>
<p>We would like to pursue this because the smoothed fonts are what we've been showing everyone in for approval, and it’s what we’ve been testing positively with users (across many browsers).</p>
<p>We should also mention that the majority of our users see the site in Chrome so we want to give them the best experience possible.</p>
<p>Not having the font smoothing available to EI users does not cause them any harm.</p>
<p>We would like to pursue the implementation in a way that could be done immediately, but we understand it may need to be implemented differently long-term.</p>
<footer>
<p>by <cite>@jmealing</cite> on behalf of Treasury Board Secretariat</p>
</footer>
</blockquote>
<h3 id="menu-ariaexpanded">The use of <code>[aria-expanded]</code> in the menu</h3>
<p>The menu was designed as per the <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#menu">WAI-ARIA Practice 1.1 for the Menu or Menu bar</a>. In the section <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties-12">WAI-ARIA roles states and properties</a> the fifth bullet items say the element with the role <code>menuitem</code> has the <code>aria-expanded</code> state. The use of that state is illustrated by the WAI-ARIA Practice 1.1 <a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html">menu bar example 2</a>.</p>
<p>It was noted that as per the description of the <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded"><code>aria-expanded</code> attribute in WAI-ARIA 1.1 spec</a> it don't allow to have the attribute <code>aria-expanded</code> set on element with the role <code>menuitem</code>.</p>
<p>However, a research revealed the WAI-ARIA specification 1.2 (working draft) have an updated definition for <code>aria-expanded</code>. It now allow to use that state on on element with the role <code>menuitem</code>. Here some reference:</p>
<ul>
<li><a href="https://www.w3.org/TR/wai-aria-1.2/#aria-expanded">W3C Working Draft - Accessible Rich Internet Application (WAI-ARIA) 1.2 - <code>aria-expanded</code> (state)</a></li>
<li><a href="https://github.com/w3c/aria/issues/454">w3c/aria github issue #454 - ARIA 1.1: aria-expanded is not supported on menuitem roles</a></li>
<li><a href="https://github.com/w3c/aria-practices/issues/630">w3c/aria-practices github issue #630 - For Navigation Menubar Example, aria-expanded should go on menu, not menuitem</a></li>
</ul>
<h3>Use of Google API</h3>
<p>GCWeb was already leveraging Google API to retreive jQuery library and now with the new look it leverage Google API to retreive two fonts, Lato and Noto.</p>
<p>Here an excerpt of the answer we got from TBS on the usage of Google API for GCWeb.</p>
<p><time datetime="2018-12-12">December 12 2018</time></p>
<blockquote>
<p>I don’t see an issue with this at all. It looks to be just a public open source API, so I would just go ahead and consume it. If you already have another Google API you’re consuming, you’ll likely even be able to use the same key.</p>
<p>If you’re encountering questions and resistance, feel free to loop me in. Whenever you’re using a 3rd party API, latency and reliability is obviously a consideration. I would just ensure you think through the various failure scenarios to understand what happens to your website if the API is down, unreachable because of GC network outage, or if there are delays in the API responding.</p>
<footer>
<p>By <cite>Shan Gu</cite> on behalf of Treasury Board Secretariat</p>
</footer>
</blockquote>
<h3>Technical note about the design of the menu</h3>
<ul>
<li>The orientation of the sperator before the most requested sub-menu change from vertical to horizontal in tablet/mobile view</li>
<li>The most requested sub-menu has an attribute to indicate the JS plugin that sub-menu need to remain expanded in medium and large device. <code>data-keep-expanded="md-min"</code></li>
<li>The use of the <code>aria-controls</code> on menu item that open sub-menu might not required. Before to take a decision, we should do more testing to confirm the useless of that property on sub-menu items. Comments received from one user testing with a screen reader has recommended to remove it for the menu button.</li>
<li><code>role=none</code>: As per WAI-ARIA 1.1 practice, there example use the <code>role=none</code> for each list item. The W3C validator has recommended to use both role "none" and "presentation" because the role "none" is not yet widely supported. The use of the role "none" currently (2018-12-28) trigger an error by the validator.nu but not by the W3C validator. The issue is the validator.nu don't support yet WAI-ARIA 1.1 and because of that we would only keep one role <code>role=presentation</code> instead of having a dual role. The list item role should be updated once the role "none" would be widely supported.</li>
<li><code>aria-haspopup=menu</code>: As per WAI-ARIA 1.1, the <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-haspopup">aria-haspopup</a> property can have multiple value other than "true". The value set to "true" is the same as being set to "menu". Ideally, the menu design would use aria-haspopop=menu instead of aria-haspopup=true because it is more explicit. The validator.nu trigger an error when the aria-haspopup is set to menu instead of true because it don't support WAI-ARIA 1.1. The anchor and the button with the attribute aria-haspopup should be updated once validator.nu support WAI-ARIA 1.1. Using "menu" instead of "true" shouldn't impact assisstive technology that only support WAI-ARIA 1.0</li>
</ul>
<h2 id="customGCWebVariant">Customizing GCWeb for your implementation variant</h2>
<p>The build script of GCWeb has been adapted to allow implementation variant to include their specific CSS with the gcweb CSS in a way that reduce potential git conflict when updating to the latest version of gcweb.</p>
<ul>
<li>Create a fork or an clone of GCWeb project.</li>
<li>Custom Style: Copy and rename the folder <code>src/variant-default</code> for <code>src/variant</code>. The custom SCSS added in <code>variant</code> would not conflict when updating your GCWeb version.</li>
<li>Custom plugin: Follow the wet-boew plugin guidance/structure and add your code in <code>src/plugin</code> folder.</li>
<li>Building: Use the GCWeb build system, all your custom CSS and custom plugin for your variant would be packaged together with GCWeb compiled files.</li>
</ul>
<h2 id="testCases">Test cases</h2>
<ul>
<li><a href="test-case-1.html">From examples - test cases</a></li>
</ul>