forked from wet-boew/GCWeb
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathv5-migration.html
653 lines (567 loc) · 35.1 KB
/
v5-migration.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
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
---
{
"title": "Migration instruction - GCWeb theme V5",
"language": "en",
"languagetoggle": "false",
"breadcrumbs": [
{ "title": "GCWeb home", "link": "index-en.html" },
{ "title": "Theme meta", "link": "docs/index.html" }
],
"secondlevel": false,
"dateModified": "2018-11-02",
"share": "true"
}
---
<div class="wb-prettify all-pre hide"></div>
<p>On this page:</p>
<ul>
<li><a href="#pg-footer">Page footer</a></li>
<li><a href="#pg-header">Page header</a></li>
<li><a href="#pg-menu">Menu</a></li>
<li><a href="#pg-home">Home Page</a></li>
<li><a href="#pg-spcd-2">Double space for list</a></li>
<li><a href="#pg-list">Responsive list</a></li>
<li><a href="#pg-linkfigure">Linked figure design pattern</a></li>
<li><a href="#content-limit">Limited width content</a></li>
<li><a href="#pg-type">Navigation pages, Theme, Topic, Home,...</a></li>
<li><a href="#call-to-action">Call to action button</a></li>
<li><a href="#otherDiff">Other notable difference</a></li>
</ul>
<p><strong>Note for implementer that has used the GCWeb developer build on or before January 30, 2019</strong>. (This is not applicable for implemeter that has use the official GCWeb v5 release.) The top menu is now identified by using the CSS class <code>gcweb-menu</code> instead of <code>gcweb-v2</code>.</p>
<h2 id="pg-footer">Page footer</h2>
<h3>How to update</h3>
<ul>
<li>Wrap the first navigation with a "div.landscape"</li>
<li>Cleanup: Remove the aria role "contentinfo" on the footer element</li>
<li>Cleanup: Remove the aria role "navigation" on the nav element</li>
</ul>
<h3>Migration notes</h3>
<ul>
<li>The new look would be only effective after the markup change is completed</li>
<li>If the markup change is not completed, the original style will continue to be applied</li>
</ul>
<h3>Markup before</h3>
<pre><code><footer role="contentinfo" id="wb-info">
<nav role="navigation" class="container wb-navcurr">
<h2 class="wb-inv">[[{i18n "tmpl-about-government"]]}</h2>
[[footercontent]]
</nav>
[[footerbrand]]
</footer></code></pre>
<h3>Updated markup</h3>
<pre><code><footer id="wb-info">
<div class="landscape">
<nav class="container wb-navcurr">
<h2 class="wb-inv">[[{i18n "tmpl-about-government"]]}</h2>
[[footercontent]]
</nav>
</div>
[[footerbrand]]
</footer></code></pre>
<h2 id="pg-header">Page header</h2>
<h3>How to update</h3>
<ul>
<li>Change the CSS class on the top left FIP and on the Search section</li>
<li>Remove the "mobile menu" div placeholder.</li>
<li>Update the JS</li>
<li>Update the markup for the menu, the new menu are independent from the previous one</li>
<li>Minor markup update for the language section.</li>
<li>Update the attribute on the input search field.</li>
</ul>
<h3>Migration notes</h3>
<ul>
<li>The home page need to include an additional CSS class in order to style the menu differently. Like to add the CSS class "home" to the "<code><body></code>" element.</li>
<li>The color for the search button would be automated updated when the new style is applied.</li>
<li>Menu, see the following section for more details
<ul>
<li>The new menu style is applied when the CSS class <code>gcweb-menu</code> is applied to the navigation section of the main menu.
<ul>
<li>You will notice the "border-top" is added at the top of the menu.</li>
<li>You will notice the new styling for the menu button.</li>
<li>This new menu require to update theme.min.js</li>
<li>It don't use the menu plugin in WET.</li>
</ul>
</li>
</ul>
</li>
<li>Main body remove the unnecessary aria role [role=main] set on the <main> element.</li>
<li>Review the text for skip link, they were a change a year ago to change 'Skip: "About this site"' for 'Skip: "About government"'. In French it is from 'Passer à « À propos de ce site »' for 'Passer à « Au sujet du gouvernement »'</li>
</ul>
<h3>Markup before</h3>
<pre><code><header role="banner">
<div id="wb-bnr" class="container">
<section id="wb-lng" class="visible-md visible-lg text-right">
<h2 class="wb-inv">Language selection</h2>
<div class="row">
<div class="col-md-12">
<ul class="list-inline margin-bottom-none">
[[List of available language]]
</ul>
</div>
</div>
</section>
<div class="row">
<div class="brand col-xs-8 col-sm-9 col-md-6">
<a href="https://www.canada.ca/en.html"><img src="./GCWeb/assets/sig-blk-en.svg" alt=""><span class="wb-inv"> Government of Canada / <span lang="fr">Gouvernement du Canada</span></span></a>
</div>
<section class="wb-mb-links col-xs-4 col-sm-3 visible-sm visible-xs" id="wb-glb-mn">
<h2>Search and menus</h2>
<ul class="list-inline text-right chvrn">
<li><a href="#mb-pnl" title="Search and menus" aria-controls="mb-pnl" class="overlay-lnk" role="button"><span class="glyphicon glyphicon-search"><span class="glyphicon glyphicon-th-list"><span class="wb-inv">Search and menus</span></span></span></a></li>
</ul>
<div id="mb-pnl"></div>
</section>
<section id="wb-srch" class="col-xs-6 text-right visible-md visible-lg">
<h2>Search</h2>
<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
<div class="form-group">
[[Custom block as per your search implementation]]
<label for="wb-srch-q" class="wb-inv">Search website</label>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="27" maxlength="150" placeholder="Search Canada.ca" />
<datalist id="wb-srch-q-ac">
<!--[if lte IE 9]><select><![endif]-->
<!--[if lte IE 9]></select><![endif]-->
</datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
</div>
</form>
</section>
</div>
</div>
[[ Menu]]
<nav role="navigation" id="wb-bc" property="breadcrumb">
<h2>You are here:</h2>
<div class="container">
<div class="row">
<ol class="breadcrumb">
[[ Breadcrumb items]]
</ol>
</div>
</div>
</nav>
</header></code></pre>
<h3>Updated markup</h3>
<ul>
<li>Removal of CSS visibility class to #wb-lng</li>
<li>Removal of the CSS grid (div.row and div.col-md-12) in #wb-lng</li>
<li>Remove unnecessary role (banner, navigation)</li>
<li>Search and menus section (.wb-mb-links) was removed</li>
<li>Column definition (CSS class) was updated on the top left brand logo</li>
<li>Removal of the <code>div.row</code> wrapping the breadcrumb ordered list</li>
<li>Major remake of the Menu. The menu bar (mega menu) has changed to a menu button (top menu).</li>
<li>On the input search field, change the attribute maxlength to "170"</li>
<li>On the input search field, change the attribute size to "34"</li>
<li>The label for the search input field has changed to be same as the placeholder text.</li>
<li>The IE 9 conditional comment inside the datalist element was removed because IE 9 is not supported</li>
<li>The CSS class <code>wb-inv</code> are removed from the breadcrumb. It's not required because it's default style is the same as applying the CSS class <code>wb-inv</code>.</li>
<li>The submit button surrounding HTML remain the same as before.</li>
<li>The label and the placeholder of the input are now the same exact text. "Search Canada.ca" and "Rechercher dans Canada.ca"</li>
</ul>
<pre><code><header>
<div id="wb-bnr" class="container">
<section id="wb-lng" class="text-right">
<h2 class="wb-inv">Language selection</h2>
<ul class="list-inline margin-bottom-none">
[[List of available language]]
</ul>
</section>
<div class="row">
<div class="brand col-xs-5 col-md-4">
<a href="https://www.canada.ca/en.html"><img src="./GCWeb/assets/sig-blk-en.svg" alt=""><span class="wb-inv"> Government of Canada / <span lang="fr">Gouvernement du Canada</span></span></a>
</div>
<section id="wb-srch" class="col-lg-8 text-right visible-md visible-lg">
<h2>Search</h2>
<form action="#" method="post" name="cse-search-box" role="search" class="form-inline">
<div class="form-group">
[[Custom block as per your search implementation]]
<label for="wb-srch-q" class="wb-inv">Search Canada.ca</label>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Search Canada.ca" />
<datalist id="wb-srch-q-ac">
</datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Search</span></button>
</div>
</form>
</section>
</div>
</div>
[[ Menu]]
<nav id="wb-bc" property="breadcrumb">
<h2>You are here:</h2>
<div class="container">
<ol class="breadcrumb">
[[ Breadcrumb items]]
</ol>
</div>
</nav>
</header></code></pre>
<h2 id="#pg-menu">Menu</h2>
<h3>How to update</h3>
<ul>
<li>An initial menu with the content and the markup would be available</li>
<li>The following is to provide guidance on how it can be updated</li>
</ul>
<h3>Migration notes</h3>
<ul>
<li>The new markup are provided in the following section.</li>
</ul>
<h3>Technical notes</h3>
<ul>
<li>The menu was designed similary like the menu design pattern from WAI-ARIA 1.1. See the technical notes in the gcweb theme meta 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>
<p>There is a confusion in the WAI-ARIA practice 1.1 vs WAI-ARIA 1.1 spec.</p>
<ul>
<li>
<p>it's said: WAI-ARIA practice <a href="https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties-12">https://www.w3.org/TR/wai-aria-practices-1.1/#wai-aria-roles-states-and-properties-12</a></p>
<p><q>5th bullet items that the [role=menuitem] has the [aria-expanded] state</q></p>
</li>
<li>
<p>it's said: <a href="https://www.w3.org/TR/wai-aria-1.1/#aria-expanded">https://www.w3.org/TR/wai-aria-1.1/#aria-expanded</a></p>
<p><q>That states is only applicable (Inherits into Roles) for [role=menu] and [role=menubar]. This don't include [role=menuitem]</q></p>
</li>
<li>
<p>it's illustrated: <a href="https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html">https://www.w3.org/TR/wai-aria-practices-1.1/examples/menubar/menubar-2/menubar-2.html</a></p>
<p><q>That the item with the [role=menuitem] has the [aria-expanded] state.</q></p>
</li>
</ul>
<p>So, we need to check the mailing list and the bug list to know if that was notified to W3C WAI group. If not we need to notify them.</p>
<p>For now, we implement the pattern as illustrated by WAI-ARIA Practice 1.1.</p>
</li>
</ul>
<h3>Menu markup before</h3>
<pre><code><nav role="navigation" id="wb-sm" data-ajax-replace="./ajax/sitemenu-en.html" data-trgt="mb-pnl" class="wb-menu visible-md visible-lg" typeof="SiteNavigationElement">
<div class="container nvbar">
<h2>Topics menu</h2>
<div class="row">
<ul class="list-inline menu">
<li><a href="https://www.canada.ca/en/services/jobs.html">Jobs</a></li>
<li><a href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration</a></li>
<li><a href="https://travel.gc.ca/">Travel</a></li>
<li><a href="https://www.canada.ca/en/services/business.html">Business</a></li>
<li><a href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
<li><a href="https://www.canada.ca/en/services/health.html">Health</a></li>
<li><a href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
<li><a href="https://www.canada.ca/en/services.html">More services</a></li>
</ul>
</div>
</div>
</nav></code></pre>
<h3>Hardcoded menu item baseline markup</h3>
<ul>
<li>The id "wb-sm" removed.</li>
<li>The class attribute on the <nav> element is replaced by a new CSS class</li>
<li>The CSS class "nvbar" removed from the inner <div></li>
<li>Complete new markup for menu item (Details in following section)</li>
<li>There is some translation string and markup variation between language for the button. It's the invisible complementary text.</li>
</ul>
<pre><code><nav class="gcweb-menu" typeof="SiteNavigationElement">
<div class="container">
<h2 class="wb-inv">Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical">
[[ Menu items ]]
</ul>
</div>
</nav></code></pre>
<h3>French version</h3>
<pre><code><nav class="gcweb-menu" typeof="SiteNavigationElement">
<div class="container">
<h2 class="wb-inv">Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false">Menu<span class="wb-inv"> principal</span> <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical">
[[ Menu items ]]
</ul>
</div>
</nav></code></pre>
<h3>Fetching the menu item baseline markup</h3>
<ul>
<li>All the items for the hardcoded menu applies.</li>
<li>The CDN / central link where all the menu is centrally managed are going to be provided by the Principal Publisher.</li>
<li>The unordered list <code><ul></code> is intentionally empty</li>
<li>Change the value of the attribute <code>data-ajax-append</code> to match the URL of your menu</li>
<li>The menu support the following fetch method:
<ul>
<li><code>[data-ajax-append]</code></li>
<li><code>[data-ajax-prepend]</code></li>
<li><code>[data-wb-ajax]</code></li>
<li><code>[data-ajax-replace]</code></li>
</ul>
</li>
<li>In the following working example, you can see a list of the top menu items which represents each theme.</li>
</ul>
<pre><code><nav class="gcweb-menu" typeof="SiteNavigationElement">
<div class="container">
<h2 class="wb-inv">Menu</h2>
<button aria-haspopup="true" type="button"><span class="wb-inv">Main </span>Menu <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" <strong>data-ajax-replace="../ajax/sitemenu-v5-en.html"</strong>>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/jobs.html">Jobs and the workplace</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration and citizenship</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://travel.gc.ca/">Travel and tourism</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/business.html">Business and industry</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/benefits.html">Benefits</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/health.html">Health</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/taxes.html">Taxes</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/environment.html">Environment and natural resources</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/defence.html">National security and defence</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/culture.html">Culture, history and sport</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/policing.html">Policing, justice and emergencies</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/transport.html">Transport and infrastructure</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://international.gc.ca/world-monde/index.aspx?lang=eng">Canada and the world</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/finance.html">Money and finances</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/science.html">Science and innovation</a></li>
</ul>
</div>
</nav></code></pre>
<h3>French version</h3>
<pre><code><nav class="gcweb-menu" typeof="SiteNavigationElement">
<div class="container">
<h2 class="wb-inv">Menu</h2>
<button type="button" aria-haspopup="true" aria-expanded="false">Menu<span class="wb-inv"> principal</span> <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul role="menu" aria-orientation="vertical" <strong>data-ajax-replace="../ajax/sitemenu-v5-fr.html"</strong>>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/jobs.html">Emplois et milieu de travail</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration et citoyenneté</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://voyage.gc.ca/">Voyage et tourisme</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/entreprises.html">Entreprises et industrie</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/benefits.html">Prestations</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/sante.html">Santé</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/impots.html">Impôts</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/environnement.html">Environnement et ressources naturelles</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/defense.html">Sécurité nationale et défense</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/culture.html">Culture, histoire et sport</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/police.html">Services de police, justice et urgences</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/transport.html">Transport et infrastructure</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://international.gc.ca/world-monde/index.aspx?lang=fra">Canada et le monde</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/finance.html">Argent et finances</a></li>
<li role="presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/science.html">Science et innovation</a></li>
</ul>
</div>
</nav></code></pre>
<h3>Menu items template</h3>
<ul>
<li>There is one menu item per theme, repeat the following pattern for each theme.</li>
<li>Each theme title that is linked to the actual theme has an adaptable text between "medium to over" view compare to "small and under" view. See the following example.</li>
<li>The label [[ Most requested text ]] are "En demande" in French</li>
<li>The [[Theme linked title]] include markup to display a special short title in extra small and small view port. It's behaviour are described in the following sub-section</li>
<li>This template can be use for the HTML fragment to fetch all menu items.</li>
</ul>
<pre><code><li role="presentation">
<a role="menuitem" aria-haspopup="true" aria-expanded="false" href="#">[[Theme title]]</a>
<ul role="menu" aria-orientation="vertical">
<li role="presentation">
<a role="menuitem" href="https://www.canada.ca/[[path to the theme]]">[[Theme linked title]]</a>
</li>
<li role="separator"></li>
[[ For each sub menu for that theme ]]
<li role="presentation"><a role="menuitem" href="[[Link to the page associated with this menu item ]]">[[ Menu item text ]]</a></li>
[[ End for each ]]
<li role="separator" aria-orientation="vertical"></li>
<li role="presentation">
<a data-keep-expanded="md-min" href="#" role="menuitem" aria-haspopup="true" aria-expanded="true">[[ Most requested text ]]</a>
<ul role="menu" aria-orientation="vertical">
[[ For each most requested item for that theme ]]
<li role="presentation"><a role="menuitem" href="[[Link to the page associated with this menu item ]]">[[ Menu item text ]]</a></li>
[[ End for each ]]
</ul>
</li>
</ul>
</li></code></pre>
<h4>Theme linked title</h4>
<p>Behaviour:</p>
<ul>
<li>Provide a short title in mobile, but keep the long title in tablet and desktop view (medium and upper)</li>
<li>The short title finish with ": home" text. French equivalent hasn't been provided yet.</li>
<li>Try to reuse the same word of the title when only the short title is displayed.</li>
</ul>
<h5>Example 1</h5>
<p>Reuse some wording</p>
<dl class="dl-horizontal">
<dt>Title</dt>
<dd>Immigration and citizenship</dd>
<dt>Short title</dt>
<dd>Immigration: home</dd>
<dt>Code sample</dt>
<dd><pre><code>Immigration<span class="hidden-xs hidden-sm"> and citizenship</span><span class="visible-xs-inline visible-sm-inline">: home</span></code></pre></dd>
</dl>
<h5>Example 2</h5>
<p>Append ":home" at the end</p>
<dl class="dl-horizontal">
<dt>Title</dt>
<dd>Benefits</dd>
<dt>Short title</dt>
<dd>Benefits: home</dd>
<dt>Code sample</dt>
<dd><pre><code>Benefits<span class="visible-xs-inline visible-sm-inline">: home</span></code></pre></dd>
</dl>
<h5>Example 3</h5>
<p>Provide short title that is not the first capitalized word.</p>
<dl class="dl-horizontal">
<dt>Title</dt>
<dd>National security and defence</dd>
<dt>Short title</dt>
<dd>Defence: home</dd>
<dt>Code sample</dt>
<dd><pre><code><span class="hidden-xs hidden-sm">National security and defence</span><span class="visible-xs-inline visible-sm-inline">Defence: home</span></code></pre></dd>
</dl>
<h2 id="pg-home">Home Page</h2>
<h3>Note to designer</h3>
<ul>
<li>Both promotion at the bottom would need to be updated to correspond to current one.</li>
<li>The promotion markup follow a new design pattern for linked figure.</li>
<li>New/added:
<ul>
<li>Double spacing list for ordered and unordered list: ".lst-spcd-2"</li>
<li>Responsive list by applying the CSS class ".list-responsive" on "ol,ul" forth column in large and extra large view; two column for medium and small view; one column for extra small view;</li>
<li>Styling for linked figure</li>
</ul>
</li>
<li>The home page top banner background image can be updated through CSS by changing the URL or by replacing the image file "assets/bkg-home-banner.jpg". Idem for the "Your government" section.</li>
</ul>
<h3>How to update</h3>
<ul>
<li>Remove the [role=main] set on the <main> element</li>
<li>Remove the CSS class "container" on the main element, "container" css class would be manually added in the content.</li>
<li>Add the CSS class "home" to the body element</li>
</ul>
<h3>Migration notes</h3>
<ul>
<li>Add the CSS class "home" to the body element</li>
<li>Add the CSS class "page-type-nav" to the body element</li>
<li>Remove the promotional "<aside>" that was prior the main element.</li>
<li>Ensure the <h1> element are included in the editable area. That element is moved inside nested <div> element in the main section.</li>
<li>Remove the CSS class "container" on the main element, "container" css class would be manually added in the content.</li>
<li>The home page style define the following not re-usable style:
<ul>
<li><code>.home-banner</code>: Set background style, like an image, around the heading level 1</li>
<li><code>.home-most-requested</code>: Set font-size, non-standard, to the most requested list item</li>
<li><code>.home-your-gov</code>: Set a floating background image for the your government section</li>
</ul>
</li>
</ul>
<h3>Updated markup</h3>
<p>See the new markup here:</p>
<ul>
<li><a href="https://github.com/wet-boew/GCWeb/blob/master/site/pages/home-en.hbs">https://github.com/wet-boew/GCWeb/blob/master/site/pages/home-en.hbs</a></li>
<li><a href="https://github.com/wet-boew/GCWeb/blob/master/site/pages/home-fr.hbs">https://github.com/wet-boew/GCWeb/blob/master/site/pages/home-fr.hbs</a></li>
</ul>
<h2 id="pg-spcd-2">Double space for list</h2>
<p>Double spacing list for ordered and unordered list is now available. It can be applied by using the CSS class ".lst-spcd-2".</p>
<p>Note: This feature was introduced with his re-design and are currently only for this theme.</p>
<h2 id="pg-list">Responsive list</h2>
<p>Responsive list by applying the CSS class ".list-responsive" on "ol,ul".</p>
<p>The behavior is:</p>
<ul>
<li>The list is rendered in forth column in large and extra large view.</li>
<li>The list is rendered in two column for medium and small view.</li>
<li>The list is rendered in one column for extra small view.</li>
</ul>
<p>Tips: If some of your items in your list are rendered in two line or more, use the WET equal height plugin (wb-eqht) on the "ol,ul" element.</p>
<p>Note: This feature was introduced with his re-design and are currently only for this theme.</p>
<h2 id="pg-linkfigure">Linked figure design pattern</h2>
<p>This pattern is to have the whole figure to be a clickable area, but to only style the figcaption as a link. The focus visible area is the whole figure.</p>
<h3>How to use it</h3>
<ul>
<li>Wrap an anchor on a figure element</li>
<li>Add the CSS class ".figcaption" to the anchor</li>
<li>The <figcaption> as a child to the <figure> element are required.</li>
<li>This style must not be used if the figcaption are missing from the figure element.</li>
</ul>
<p>Minimal example:</p>
<pre><code><a class="figcaption" href="#">
<figure>
<figcaption>A figure caption linked</figcaption>
[[ content ]]
</figure>
</a></code></pre>
<p>Example with the home page use case:</p>
<pre><code><a class="figcaption" href="#">
<figure class="well well-sm brdr-rds-0">
<img class="img-responsive full-width" src="[[assets]]/img/520x200.png" alt=""/>
<figcaption class="h5">A figure caption linked</figcaption>
<p>Short description or intro linked paragraph that correspond to this figure</p>
</figure>
</a></code></pre>
<h2 id="content-limit">Limited width content</h2>
<p>With this new look, new generic pages created should limit the width of paragraph and list. Further guidance are going to be provided by the Content and IA spec.</p>
<p>To enable that design, the implementer can add the following CSS class <code>.cnt-wdth-lmtd</code> to the <code><body></code> element of the page where the width of paragraph and list item need to be limited. Also, this can be set by adding the CSS class name <code>.cnt-wdth-lmtd</code> to a sectioning element <code><section class="cnt-wdth-lmtd">...<section></code> inside the main content of your page.</p>
<h2 id="pg-type">Navigation pages, Theme, Topic, Home,...</h2>
<p>Navigation page need to be identified by adding a global class. Before it was <code>.secondary</code> which are now deprecated because of the ambuiguity of it's purpose. It don't represent secondary content, but it was representing navigational page type. So the new name is now <code>.page-type-nav</code> which make it clear it's purpose.</p>
<p>The following change apply for any navigation page identified by the content and IA spec such:</p>
<ul>
<li>Home page</li>
<li>Topic page</li>
<li>Theme page</li>
<li>...</li>
</ul>
<h3>Changes:</h3>
<ul>
<li>
<p><code>.secondary</code> for <code>.page-type-nav</code>.</p>
<p><small>The older CSS class would still work, but it should be updated</small></p>
</li>
<li>
<p>Remove the custom CSS class set on in-page section header and on dormat link header. Now the customize sizing are managed by adding the CSS class <code>.page-type-nav</code></p>
<ul>
<li>For dormat link: <code><h3 class="h5">...</h3></code> are changed to: <code><h3>...</h3></code>. Using the class "h5" on dormat link are deprecated for navigation page type.</li>
<li>For section title: remain <code><h2>...</h2></code> but it will render with a new font-size</li>
</ul>
</li>
</ul>
<h2 id="call-to-action">Call to action button</h2>
<p>This is a new button style <code>.btn-call-to-action</code> to define the main call of action button/link on a page.</p>
<p>Working example and documentation: <a href="../templates/content-en.html#call-to-action">Content page</a></p>
<p>To be confirmed by guidance from the Content and IA spec. This changes might require you to replace existing <code>.btn-primary</code> CSS class by <code>.btn-call-to-action</code> for button/link representing the main call to action for a page.</p>
<h2 id="otherDiff">Other notable difference</h2>
<p>Here a list of difference that we have noted when you are going to apply this new design</p>
<h3>Difference if there no markup change - Incomplete</h3>
<p>Note: as Nov 2, we didn't compared both version, like how the previous markup (from GCWeb 4.0.29) would be different from this new design</p>
<ul>
<li>Breadcrumb: You will notice the breadcrumb are moved 15 pixel right and 15 pixel left. We expected that change would have minor/trivial impact on the user. If needed, a solution can be provided but migth require some additional markup change for implementor.</li>
<li>For implementation that didn't moved the date modified under the "Report a problem" row as per C&IA v1.5.1, there will be a larger top margin at the bottom of each pages.</li>
</ul>
<h3>Change or review to makes when applying this design -</h3>
<p>Note: Other requirement might get added, at this time of implementing this new look in GCWeb github repos it wasn't fully compliant to Content and IA spec 1.5.1.</p>
<p>Some of the items bellow might be related to being conform to Content and IA spec 1.5.1 or to ensure previous change made to GCWeb are applied. Those change might not neccessary directly applicable with applying the new look.</p>
<ul>
<li>Review the text for skip link, they were a change a year ago to change 'Skip: "About this site"' for 'Skip: "About government"'. In French it is from 'Passer à « À propos de ce site »' for 'Passer à « Au sujet du gouvernement »'</li>
<li>(Under review - See item 33) The size of the heading of any dormat link need to be updated to a size comparable to an heading level 6. Implementer would need to edit each dormat link and change the current CSS class <code>h5</code> for the CSS class <code>h6</code>.</li>
<li>Ensure the date modified is after the "Report a probleme" instead of being before. The top margin was added to that field.</li>
</ul>
<h4>Page details section (before the end of the main)</h4>
<p>History:</p>
<ul>
<li>Major - visual update v5 - Move of the date modified after button as per the Content and IA spec.</li>
<li>Major - visual update v5 - Include the CSS class container (only for the home page) when the CSS class container is not added to the main element.</li>
<li>Minor - v.4.0.28 - April 27, 2018 - Removal of the Privacy statement</li>
<li>Major - v.4.0.27 - December 14, 2017: Markup restructuration - Grid cell are now independant from the interactive elements to display the report a problem inline form.</li>
<li>Major - v.4.0.22 - August 9, 2016: Markup restructuration - Feedback link was change into an inline report a problem form.</li>
<li>Initial markup - v4.0.0 - Date modified followed by feedback form link.</li>
</ul>
<p>Lastest markup:</p>
<pre><code><div class="pagedetails">
<div class="row">
<div class="col-sm-6 col-md-5 col-lg-4">
<details class="brdr-0">
<summary class="btn btn-default text-center">Report a problem on this page</summary>
<div class="well row">
<!-- Report a probleme inline form code here -->
</div>
</details>
</div>
<!-- Share button -->
<div class="wb-share col-sm-4 col-md-3 col-sm-offset-2 col-md-offset-4 col-lg-offset-5" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div>
<!-- END Share button -->
</div>
<dl id="wb-dtmd">
<dt>Date modified: </dt>
<dd><time property="dateModified">YYYY-MM-DD</time></dd>
</dl>
</div></code></pre>
<p>Some rules:</p>
<ul>
<li>If the main element don't have the "container" CSS class, page details need to have that class set in order to keep it's content centered. Like for the home page with the visual update v5.</li>
<li>If the page can be shared, the share button is added</li>
</ul>