Temporary issue and todo list - GCWeb theme V5

Open item (23 of 102)

• [No active item]

Wait for something...

• [No active item]

Might be still in-scope of the new look or to be fixed later (13 issues)

• Item 41 (High) - This is high priority for other that are implementing the new look, this issue is to ensure the latest version of the menu is published on the CDN at a stable location and are made available for other implementation.
• Item 51 (Medium) - Request to modify the Service initiation template. To be done after at the same time of making GCWeb template conforming to content and IA spec 1.5 or if the new page type structure work is completed and well defined.
• Item 53 (Medium) - This require to modify the Act profile and Regulation profile template. To be done after at the same time of making GCWeb template conforming to content and IA spec 1.5 or if the new page type structure work is completed and well defined.
• Item 55 (Medium) - This require to modify the Campaing page example 1 and 2 template. To be done after at the same time of making GCWeb template conforming to content and IA spec 1.5 or if the new page type structure work is completed and well defined.
• Item 64 (Low) - Apply new font to button and submit button. To be done later when more test case is created. Forcing the style to submit button are now out of scope.
• Item 66 (Low) - Apply new font to form and button. To be done later when more test case is created.
• Item 86 (Medium) - The same issue happen with the WET-BOEW theme when the page is resized to it's minimal width. Fixing that would require further investigation and it is not related at the new look.
• Item 91 (Low) - Documenting the multi-page navigation would be done post launch.
• Item 94 (Medium) - This is a new requirement. It would be applied at a later date
• Item 95 (High) - More testing should be planned and executed prior to apply globally the limited content width.
• Item 96 (High) - This is a new requirement.

To be fixed/addressed later on (9 issues)

• Item 3 (Low) - Need to re-test and be reproducible, might not be an issue anymore
• Item 8 (Low) - Still a weird issue that are happening on that device, but it might related to the use of datatable which have a large width and the media query. More testing need to be done. Don't see that issue on desktop when reducing the browser width.
• Item 61 (Medium) - Styling differently the first h2 in the main contain could be quite chanlanging. Need to create a few test case, see comments bellow.
• Item 12 (Low) - This issue is specific to IE11 and the wet-boew theme have the same issue. So a fix must be made upstream instead. This might be related to the use of fix font size instead of relative font-size.
• Item 13 (Low) - Need to re-test and be reproducible, might not be an issue anymore or this scenario are realy specific to FF when it is use in a special way.
• Item 38 (Low) - It will be a nice feature to have, but not part of the requirement.
• Item 43 (High/Medium) - That issue need to be fixed upstream or it's going to be fixed when the new font size would be also applied to forms.
• Item 46 (Medium) - This is just a group of reported issue identify from item 47 to 61 inclusivly.
• Item 62 (Low) - This would require more testing from various device and from various internet speed.

Fixed or commented issues

• Item 73. Fixed May 14 2019 - Was priority Medium - The menu behaviours is now compatible with touch screen.
• Item 74. Fixed May 14 2019 - Was priority Medium - Minimal instruction are now inserted with JS.
• Item 102. Fixed January 25 - Fix the button size overwride in forms and for the force-style-gcweb-4-0-29
• Item 101. Fixed January 23 - The max-size of the filter input was set for the data table.
• Item 100. Fixed January 23 - Added a CSS for the multimedia player controls to keep the separator beside the times.
• Item 99. Fixed January 21 - The font-size for the data table filter control was set to 17px, the same size as used for the doormat link.
• Item 98. Fixed January 21 - The print stylesheet was update to remove the "menu" button.
• Item 97. Fixed January 18 - A special line height was set for description in the services and information component. and the spacing the "your government" section was adjusted.
• Item 92. Fixed January 17 - Spacing in the banner, promos and for the most requested section was adjusted in the home page.
• Item 93. Fixed January 17 - The spacing for the doormat title in the "Services and information" component was adjusted and applied globably
• Item 87. Fixed January 16 - Search input size was ajusted to fit better when the page width is at its minimal width size. A right border was added too.
• Item 90. Fixed January 16 - A reduced relative font-size was applied to toc. Also we discover the CSS class .gc-stp-stp seems to not be used.
• Item 85. Fixed January 16 - Template was updated with the latest markup
• Item 88. Fixed January 16 - Tested the multimedia player and the youtube player, the overlay look centered.
• Item 84. Fixed January 16 - New font-size are applied.
• Item 89. Fixed January 15 - Line height for legend element was updated
• Item 81. Fixed December 29 - The menu item was translated
• Item 83. Fixed December 29 - The "Jobs bank" menu item was removed in both language
• Item 82. Fixed December 29 - The markup for the menu was cleaned and rational that was inline was added to the gcweb theme meta page.
• Item 79. Fixed December 28 - The French link of the menu item was updated
• Item 1. Fixed December 28 - Menu item content was updated as specified by a email correspondance
• Item 80. Fixed December 27 - New themed style added and documented in the home page meta-info
• Item 75. Fixed December 20 - aria-controls was removed and the associated id because it's useless now
• Item 72. Fixed December 20 - Border was added to the menu.
• Item 71. Fixed December 20 - The default hard-code English and French menu are render in the correct language.
• Item 70. Fixed December 20 - Add CSS to always display the menu in Basic HTML mode. The default menu markup was updated to remove the tabindex attribute in order to make the item focusable.
• Item 76. Fixed December 18 - Change the font size. Here the adjusted size. Note: h6 size was reduced in the case where the google font are not loaded for reason X and ensure it differentiate with the body text. We specified the doormat heading is the same as h5 style.
  • Desktop view:
    • h1: Lato, 38px, bold, with a red rule below
    • h2: Lato, 36px, bold
    • h3: Lato, 24px, bold
    • h4: Lato, 22px, bold
    • h5: Lato, 20px, bold
    • h6: Lato, 19px, plain text
    • body: Noto, 20px, plain text
    • doormat heading: Same as h5
    • doormat description: Noto, 19px, plain text
  • Smaller devices view:
    • h1: Lato, 34px, bold, with a red rule below
    • h2: Lato, 32px, bold
    • h3: Lato, 24px, bold
    • h4: Lato, 22px, bold
    • h5: Lato, 20px, bold
    • h6: Lato, 19px, plain text
    • body: Noto, 20px, plain text
    • doormat heading: Same as h5
    • doormat description: Noto, 20px, plain text
• Item 78. Fixed December 17 - Published an excerpt of the answer.
• Item 77. Fixed December 14 - Symbole of GoC SVG image, based on the ones provided, was submited to TBS for their review and approval. gc-proto#1
• Item 69. Fixed December 4 - Moved down the Glyphicon of one additional pixel to perceive it aligned with accompagning text.
• Item 11. Comments November 11 - That item it is just a comments/opinion, TBS testing didn't reported that as an error so we can assume that was the intend.
• Item 68. Fixed November 30 - Blockquote font size was set to 1em.
• Item 65. Comment November 30 - Fixed a small issue with font-size on button, it's now reset to old size only when button are in a form, this was creating some conflic with some WET plugin.
• Item 65. Completed November 29 - Documentation, working example and instruction was added
• Item 67. Fixed November 29 - Each page have an hard coded inline copy of the top menu items (themes).
• Item 65. Partially fix on November 28 - The new CSS was added force-style-gcweb-4-0-29, it still need to be documented.
• Item 66. Temporyfix implemented on November 28 - The content of a form are excluded from the new font style. it still need to be documented.
• Item 60. Fixed on November 27
• Item 63. Fixed on November 26
• Item 60. Comment on November 26 - What this means exactly? "Set no common ligatures for all headers/Lato fonts"
• Item 61. Comment on November 26 - We would need to develop a few test cases because it might hard to target the first h2 because publisher use different implement in the content area. Like "h1 ~ h2:nth-of-type(1)"; "h1 ~ div:nth-of-type(1) h2:nth-of-type(1)"; "h1 ~ section:nth-of-type(1) h2:nth-of-type(1)". But those selector can be very unstable. Like "h1, h2, section>h2" OR the first h2 is an alert box??. Those special test case need to be reviewed and tested before.
• Item 60. Comment on November 26 - For the default limited width, as discussed, that would happend when new pages would automatically include the content limited width special class. We are not going to enforce that behaviour on any existing content. Only newly created content should contain that class, and the publisher would be able to remove it. Minimize the risk of breaking the layout of existing content. If that need to be enforced by default and the feature removed upon request, then we would need a massive list of test case to ensure the stability of that new feature.
• Item 5. Fixed on November 22 - The max width of the input was adjusted for extra small view port. An optimal value was set to avoid the search button being under the search input field. Idem for the extra-extra small view port.
• Item 30. Fixed on November 22
• Item 50. Fixed on November 22 - The size of the first paragraph, following the h1 was set to match the default paragraph font-size. Those page are now marked as navigation page type.
• Item 52. Fixed on November 22 - Added content width limited
• Item 54. Fixed on November 22 - Marked as navigation page type and added content width limited
• Item 56. Fixed on November 22 - Marked as navigation page type
• Item 57, 58, 59. Fixed on November 22 - Added content width limited
• Item 60. Partially fixed on November 22 - Breadcrumb spacing is fix and also it's left/right margin. Submit button wont be styled, by default as the call-to-action button - See Item 64.
• Item 49. Fixed on November 20, 2018 - All fixed and note that all button font-familly was set to Lato in order to be consitent with that component.
• Item 48. Fixed on November 20, 2018
• Item 47. Fixed on November 19, 2018 - All fix, except no change was made to the font size because the font-smoothing was added as per fixing Item 23.
• Item 23. Fixed on November 19, 2018 - See justification here: index.html#antialiasing
• Item 32. Completed on November 16, 2018 - See the evaluation here: evaluation-report/2-wetplugin-gcweb2.html
• Item 34. Completed on November 16, 2018 - See the gcweb theme summary page
• Item 45. Fixed on November 16, 2018 - Changed the line-height for the multimedia play overlay
• Item 41. Partially fix on November 14, 2018 - See item 44
• Item 42. Completed on Nomber 14, 2018 - WCAG assesment is available here: evaluation-report/1-accessibility.html
• Item 44: Fixed on November 14, 2018 - The home page banner background image was updated a the main banner background is expected to be on the CDN at: https://cdn.canada.ca/gcweb-cdn-live/bkg-home-banner.jpg. That is why the fall-back image is not in-full quality.
• Item 36. Fixed on November 13, 2018 - The base padding on button was re-ajusted to ensure the minimal target size is 44 by 44 CSS pixel
• Item 37. Comment on November 13, 2018 - In order to meet "SC 1.4.12: Text spacing" and "SC 1.4.11. Non-text contrast" would require an extensive search in WET-BOEW and GCWeb. For text spacing a quick check reveal that several component overwride text spacing in various and inconsistant way. For Non-text Contrast a quick review of the understanding reveal that default bootstrap style, each component and each plugin would need to be reviewed to ensure their conformity. A considerable effort for analysing, implementing and testing are going to be required in order to meet those success criteria and to ensure consistance. Like to ensure the style of all input control are done the same way.
• Item 37. Partially fixed on November 13, 2018 - Search input placeholder text is now the same as the input label in order to meet SC 2.5.3: Label in Name.
• Item 40. Completed on November 13, 2018 - Moving the menuitem to be fetch instead of being hardcode fixed the majority of reported issue by whatwg validator and the aria attribute "aria-haspopup" value was changed to "true" instead of "menu".
• Item 39. Completed on November 9, 2018 - Menu item are now loaded via an Ajaxed file. The alternative solution of having all the menu item directly coded in the page work too.
• Item 9. Unable to reproduce on November 9, 2018 - Unable to reproduce that issue
• Item 4. Fixed on November 9, 2018 - Also it meets SC 1.4.13 of WCAG 2.1 Level AA. And preventing auto-closing/auto-open if the time of hovering is less than 350 milisecond. Fixed an issue about SC 1.4.4. Ensuring the menu separator orientation are properly adjusted for the keyboard nav with the most requested menu item. Removed global initial set for the "tabindex" on each menu item.
• Item 35. Fixed on November 9, 2018 - New CSS class added with working example and documentation. See the migration instruction for more details.
• Item 28. Not reproducible November 8, 2018 - Not able to reproduce that issue, it might got indirectly fixed by another fixed issue.
• Item 11. Comment on November 8, 2018 - The spacing are going to be confirmed by TBS if it is wrong.
• Item 31. Won't fix November 8, 2018 - That change are now scoped out because first that requirement don't belong to this new look and second, significant effort might be needed to resolve it.
• Item 23. Won't fix November 8, 2018 - Unless if we receive an official directive, this item would not be fixed
• Item 17, 18, 22, 24, 25, 26, 27, 33. Fixed on November 7, 2018 - Font size was adusted according to the specification sent by email. The "Theme, Home, Topic" is know as "secondary" content, but it might need to be reviewed to "page-type-nav" as that is more significative.
• Item 1. Partially fixed on November 5, 2018 - Short title for mobile was added in English, but we don't have yet the short menu item title for the French content.
• Item 33. Parially fixed on November 5, 2018 - The doormats heading size was put as the same as the heading level 5 (h5). Should we scope/wrap all those component with an unique CSS class in order to control more precisely their styling? That is not how it is currently done.
• Item 2. Fixed on November 2, 2018 - See Item 14
• Item 10. Fixed on November 2, 2018 - See Item 19
• Item 14. Fixed on November 2, 2018 - Keyboard navigation now take in considerate the orientation of menu separator.
• Item 15. Fixed on November 2, 2018 - Size for h6 was changed for 17px.
• Item 16. Fixed on November 2, 2018 - The inner box size are not set to 75% in small and medium view
• Item 17. Fixed on November 2, 2018 - The font-size for the items under most requested was adjusted.
• Item 18. Fixed on November 2, 2018 - The CSS class .h6 was applied for each dormat link title and the initiative item title.
• Item 19. Fixed on November 2, 2018 - A large margin bottom was added to the "Focus on" section.
• Item 20. Fixed on November 2, 2018 - Yes the image wasn't tall enought, I croped the image to a size 465x750 and now it scale and take the full height.
• Item 21. Fixed on November 2, 2018 - To note that in the Content and IA spec, figure 1 is outdated as per this requirement. See location of the illustrated date modified.
• Item 22. Fixed on November 2, 2018 - (Going to be fix later) We will apply a temporary an automated solution only for WMS, but for implementer outside WMS, this update will require a markup change for all Topic pages/Institutional/Theme pages. etc... because the dormat link size was set to the same height of an heading level 5, now if the requirement is to have it at 17px, that means they need to match the size of heading level 6 (.h6).

• Item 23. Comment on November 2, 2018 - Before to use it, I recommend to look at it further. 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. I didn't deeply research, but I can easily assume that if that feature was drop it is because maybe a similar effect can be acheived by using another methodoly. My recommendation before to set that CSS is to do a little bit more research and try to find out if there alternative solution that would be cross-browser compatible.

  See:

  • 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. - https://caniuse.com/#search=font-smoothing
  • 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. - https://developer.mozilla.org/en-US/docs/Web/CSS/font-smooth
  • Outdated working draft - W3C CSS font - https://www.w3.org/TR/WD-font/#font-smooth
  • See also: Please Stop "Fixing" Font Smoothing – UsabilityPost
  • See also: Laissez-faire font smoothing and anti-aliasing

  The see also article make reference that playing with the anti-aliasing feature make the font more blury for use, so less readable.

  Recommendation: Won't fix unless if we have a confirmation this is an essential feature.

• Item 24. Comment on November 2, 2018 - Please provide the full list of the new font-size, that for each heading level, to use on small and extra small view.

  Currently it is set:

  • h1: 38px
  • h2: 37px
  • h3: 28px
  • h4: 23px
  • h5: 20px
  • h6: 17px
• Item 28. Comment on November 2, 2018 - Can you re-test and provide more info on this issue, I know they were an issue for the menu width for the demo page limited width content, but that was fixed by Item 6 and 7.
• Item 29. Fixed on November 2, 2018
• Item 6. Fixed on October 31, 2018
• Item 7. Fixed on October 31, 2018

Reported issue list

• Fixed - Item 1. Content: Ensure the text for each first link change properly in mobile vs deskop. That is the first menu item in the popup side panel. (Menu level 2)
• Fixed - Item 2. UX: On desktop, when the user click on the right arrow from an sub-menu item, excluding the first link, it go inside the first item in the "most requested" sub-sub-menu. This need to be documented and described better
• Item 3. Bug: Trivial/Minor. In FF only when we are in mobile mode. When navigation with a combinaison of keyboard and mouse, then we click on an menu item with the mouse, then the new page it show, then we use the "back" button of the browser. The focus are lost in FF. This is not happening in IE11. As FF for mobile have a low market share and this bug is only related to FF and this bug was only tested in desktop by trying to emulate mobile That is the reason it is a trivial priority bug.
• Fixed - Item 4. Bug: The first menu item don't open on mouse hover. To reproduce: 1. Load the page; 2. Mouse hover the menu button; 3. Move the mouse gently to the first immediate menu item; 4. it's expected the sub menu will open; 5. The sub menu don't open; 6. If you hover any subsequent top menu item (like the following one) and then go back to the first menu item, the sub-menu open as it should be.
• Fixed - Item 5. UI: On mobile mode (small view and bellow) the search button appear bellow the search field. It might be expected to always appear beside the search input field.
• Fixed - Item 6. Bug: On the "Content limited width" page, the forced width conflict with the menu. The width should be changed for "max-width" and the effect should be limited to the content inside the main element.
• Fixed - Item 7. Bug: On the "Content limited width" page, the hidden top skip link are not centered, but left aligned. Idem for when that page is in "Basic HTML mode", all the warning message are left aligned. It might be related to the other bug related ot the "Content limited width"
• Item 8. Bug: On the main index page of GCWEb (/themes-dist/GCWeb/index-en.html) Using Chrome for mobile with a Samsung Galaxy S7 phone: An expanded menu item can't be collapsed. The most requested sub-menu should be collapsed by default in mobile, but it is expanded. That means the JS that colapse the most-requested menu do not fired correctly. However, there is no issue when mobile is emulated through desktop.
• Unreproducible Item 9. ~Style: There is some blue mouse hover that appear, idem for when the link is mark as visited. I briefly saw that issue in IE11 but it need to be investigated more.
• Fixed - Item 10. UI ~Bug: Inconsistent spacing between section. There is almost no space when you look at the right floating image after the section "On Focus" followed by the section "Your government". Suggestion to increase the spacing.
• Comment - Item 11. ~Style: There is a large spacing between the main menu and the h1 of a content page in large/extra large view.
• Item 12. Bug: The text can't be enlarged at 200% in IE11, but it work in FF. I got the same behaviour with WET theme and with the previous GCWeb theme.

• Item 13.

  • Home page : https://wet-boew.github.io/themes-dist/GCWeb/home-en.html
  • Page d’accueil : https://wet-boew.github.io/themes-dist/GCWeb/home-fr.html

  The issue is encountered in the Firefox browser. The pages will lose the focus when I am using alternatively between the mouse and the keyboard navigation at the same time. For example: I load a page in the browser then navigate by keyboard and switch to the mouse. There is no problem but when I switch back to the keyboard the focus will be lost on the menubar (neither submenu). I will have nowhere to go unless I am refreshing the page. Good news is everything works fine in the IE.

• Fixed - Item 14.

  • Content limited width : https://wet-boew.github.io/themes-dist/GCWeb/content-limit-en.html
  • Contenue de largeur limité : https://wet-boew.github.io/themes-dist/GCWeb/content-limit-fr.html

  This issues are about the submenu in the menuitem when i navigate the menu by keyboard interaction. I am not able to switch back and forth between the “Most requested” and each “item” in the submenu by using the Right Arrow and Left Arrow. Even though, the “Most requested” and “item” in the submenu are the same level. I can only use the Up Arrow and Down Arrow to navigate from the top to the bottom and vice vesa.

  (Note that if the focus is either on any “item” in the submenu or on the “Most requested” then I hit Left Arrow that brings me back to the menuitem)

• Fixed - Item 15. Home page: red line under Canada.ca is supposed to be 4px thick
• Fixed - Item 16. Home page: Tablet view - there's a point where the Canada.ca banner is cutting too small and the header is smaller than the body copy - it should still be running more or less full width.
• Fixed - Item 17. Home page: Most requested font size - 16px in WET, should be 17px
• Fixed - Item 18. Home page: Doormat font size - 20px in WET, should be 17px
• Fixed - Item 19. Home page: Missing spacing between end of "Focus on" doormats and "Your government" section.
• Fixed - Item 20. Home page: On tablet view, the "Your government image" should run to the top and bottom edge, not create a gap, is this because the image provided is not tall enough?
• Fixed - Item 21. Home page: Date modified goes under Report a problem, as per latest spec
• Fixed - Item 22. Topic pages/Institutional/Theme pages, etc: Doormat font size – 20px in WET, should be 17px
• Fixed - Item 23. General fonts and such: Seems like anti-aliasing isn’t on – there are various settings in https://gc-proto.github.io/design-refresh/tests/cleanup4/css/desktop-mm.css related to that...like -webkit-font-smoothing: antialiased;
• Comments - Item 24. The particularly important ones: We had headers/doormat paragraph change size for mobile to make them larger and easier to use:
  • Item 25: Right now on mobile the most requested is so small it’s difficult to use, it's supposed to scale up to 19px on mobile
  • Item 26: Doormat text is supposed to scale up to 19px on mobile
  • Item 27: Headers also have font size changes specified when on mobile.
• Comment - Item 28: Also on pages other than the homepage, the menu opens really wide before you select a theme.
• Fixed - Item 29: Typo: was "The official website of the Governement of Canada"; should be: "The official website of the Government of Canada", There in not "e" between "n" and "m" in "Government"
• Fixed Item 30: In GCWeb for maintenance - Remove any reference to "focuson" (files and i18n data) because that information wont be re-use.
• Won't fix Item 31: Format the date modified like "{Full month} {Day number}, {4 digit year}". The previous date format would need to be set to the datetime attribute of the current <time> element.
• Completed Item 32: Identify any potential conflict between this redesign and other WET plugin in this theme. Full list of plugins with this themes available : GCWeb - WET Plugin demos
• Fixed - Item 33: Font size on the home page doormats. The link should be 21px in the prototype, and the description text 19px. In the WET version the description is larger than the heading, which makes it seems like something's wrong.
• Done - Item 34: Do a comparaison between the GCWeb markup as released with v4.0.29 vs only the new CSS+JS applied with this new look. Add new item/issue here for each noticable difference.
• Fixed Item 35: Add the "call-to-action" lime-green button. Wait for TBS confirmation is we are going to change the btn-primary or if we are going to create a new one.
• Fixed Item 36: Change the minimum size of the search button and the input search field to meet WCAG 2.1 2.5.5 Target Size (Level AAA)
• Partially fixed/Comment Item 37: Look at changes required to meet WCAG 2.1 for the following item
  • 1.4.11: Non-text Contrast
  • 1.4.12: Text spacing
  • Fixed 1.4.13: Content on Hover or Focus
  • Fixed 2.5.3: Label in Name
  • Fixed 2.5.5: Targe Size
• Item 38: Add keyboard shorcut nav, like focusing on menu item that match the keystrok. (Then SC 2.1.4 apply)
• Fixed Item 39: Optimize the Menu caching and loading by using an AJAX call. This solution would also provide a way for implementer to insert the menu provided by the canada.ca content delivery network.
• Fixed Item 40: Ensure the server served content for the gcweb theme validate against W3C and Whatwg validator
• Item 41: Define CDN URL for the home page banner background image (see item 44) and for the new menu. A permanent path is needed for the following selector:
  • .home .home-banner { background-image:url(/content/dam/servcan/bkg-home-banner.jpg); }
  • .home .home-your-gov { background-image:url(/content/dam/servcan/bkg-home-yourgov.jpg); }
  • #wb-info .landscape { background-image:url(/content/dam/servcan/landscape.png); }
  • Main menu English: ./ajax/sitemenu-v5-en.html
  • Main menu French: ./ajax/sitemenu-v5-fr.html
• Completed Item 42: Do a WCAG assesment.
• Item 43: Fix WCAG SC 1.4.4 Resize text issue with the select element. This issue need to be fixed upstream in wet-boew main project. Related to github issue #7884
• Fixed Item 44: Update the home page banner background image
• Fixed Item 45: Fix the vertical position of the play button in the multimedia player
• Item 46: Apply various changes requested by email
  • Fixed Item 47: Home page

    Changing font-size if no font smoothing

    • Most Requested links are supposed to be "Lato"
    • On mobile devices, the "Canada.ca" should run edge to edge. (img attached of what it should look like in mobile, and then on tablet)
    • Government initiatives: font size in promos should be the same as doormats, right now they set with a small tag which is incorrect.
    • Government initiatives: need a bit of right and left margin/padding to avoid tight text against the well (img attached of what it should look like)
  • Fixed Item 48: Content page - limited width:
    • We know you've set the max-width: 70ch, but when we look on several of our browsers and count the characters it's going to 86. Could we please set the max-width: 65ch to make things a bit tighter.
    • Can we make sure the spacing from the top of a list is the same as the bottom of the list when it is followed by a paragraph? The margin/padding at the end of a list should be larger to match the space at the top. (img attached)
  • Fixed Item 49: Content page:
    • The call-to-action button should not be bold, and it should be set to "Lato".
    • Heading 6 should be in "Lato" as well (same font size, no bold)
  • Fixed Item 50: Institution and Institution arm’s length page/Organizational page:
    • Doormat headers and text size should match theme page
    • Bullet sizing and spacing size should match theme page
    • News paragraph text size should be the size doormat text
    • (Intro paragraph correctly stays the large paragraph style)
  • Item 51: Service initiation templates and Service initiation template: single step page:
    • Colour for active page selection is now: #333
    • Remove right column content (Guides and help, Contact, etc)
    • Add char width restriction to these pages
  • Fixed Item 52: Institutional service performance reporting page:
    • Add char width restriction to this page
  • Item 53: Act profile page and Regulation profile page:
    • “Learn more about…” doormat headers and text size should match theme page
    • Add char width restriction to this page within the tabs
  • Fixed Item 54: GC/Audience page:
    • Doormat headers and text size should match theme page
    • (Intro paragraph correctly stays the large paragraph style)
  • Item 55: Campaign page example 1 and 2:
    • Doormat headers and text size should match theme page
    • (Intro paragraph correctly stays the large paragraph style)
  • Fixed Item 56: Event page:
    • Doormat headers and text size should match theme page
  • Fixed Item 57: Long index page:
    • Add char width restriction to this page
  • Fixed Item 58: Feedback form page:
    • Add char width restriction to this page
  • Fixed Item 59: Components page:
    • Add char width restriction to this page
  • Comment Item 60: General:
    • Additional space needed between "Menu" button and the breadcrumb trail (img attached)
    • Submit buttons should be styled the same as the "call to action". See Item 64.
    • Set no common ligatures for all headers/Lato fonts [Clarification (Nov 27): add the CSS font-variant-ligatures: no-common-ligatures; to heading elements]
    • The char max-width should be the default for any pages that have paragraphs currently running the full width
  • Comment Item 61: Special CSS style consideration for defined content-width restriction pages:
    • When a page has the <body class=”cnt-wdth-lmtd”> we’d like all the h2s, except the first child (the first h2 on the page), to have additional spacing at the top (all other h2s below). See example here of what that looks like: https://gc-proto.github.io/student-loans/scenarioA/services/benefits/student-aid/repay-student-loan.html
• Item 62 I remarked a font blinking on page force reload. I think it is cause by the delay to download and apply the google font at the current page. So it need to be investigated but for people with slow internet connection might perceive a font blinking. It is just blinking once so it don't necessary fail SC 2.3.1.
• Fixed Item 63 Set a max-width for heading for pages with content width limited. The value are the following:
  • h2 - 33ch
  • h3 - 50ch
  • h4 - 59ch
  • h5 - 65ch
  • h6 - 65ch
  • li - 63ch
• Item 64 Set the submit buttons style the same as the "call to action". It will be preferable to get a confirmation if we force that style to any submit button, even if they already have a style like "btn-primary" on it.

  Styling by default any submit button might had a huge impact on overall form. Additional test case is required showing all the various way a submit button can be used. The current issue is the new margin specified with the "call-to-action" button style conflict how the margin is done for other "input/select/..." forms elements

  • Get a confirmation if that style must overwrite any existing style
  • Create a series of test cases
  • Adjust the style for a smooth migration

  Here the CSS when we all the test case would be ready:

  // File: src/buttons/_base.scss
  .btn, button[type=submit].btn, input[type=submit].btn {
  	font-family: Lato, sans-serif; // same font as %defaults-alternative-font-family
  	font-size: 1.1em;
  	margin-bottom: 25px;
  	margin-top: 15px;
  	padding: .5em 1em;
  }
  
  input[type=submit].btn {
  	padding-bottom: 2em;
  }
  
  /* Call-to-action button style - new with GCWeb v2 */
  .btn-call-to-action, button[type=submit].btn, input[type=submit].btn {
  	@include button-variant( #fff, #318000, #458259 );
  	text-shadow: 1px 2px #333;
  }

  Code for content-en.html file

  <h3>Submit button</h3>
  <p>Submit button are now enforced with the "Call to action" button style</p>
  <div class="row">
  	<div class="col-sm-6">
  		<h3>With a <code>&lt;button&gt;</code> element</h3>
  		<button class="btn" type="submit">[Submit (with btn class)]</button>
  		<pre><code>&lt;button class="btn" type="submit"&gt;[Submit (with btn class)]&lt;/button&gt;</code></pre>
  		<button type="submit">[Submit (no CSS class)]</button>
  		<pre><code>&lt;button type="submit"&gt;[Submit (no CSS class)]&lt;/button&gt;</code></pre>
  		<button class="btn btn-primary" type="submit">[Submit (primary class)]</button>
  		<pre><code>&lt;button class="btn btn-primary" type="submit"&gt;[Submit (primary class)]&lt;/button&gt;</code></pre>
  	</div>
  	<div class="col-sm-6">
  		<h3>With a <code>&lt;input /&gt;</code> element</h3>
  		<input class="btn" type="submit" value="[Submit (with btn class)]" />
  		<pre><code>&lt;input class="btn" type="submit" value="[Submit (with btn class)]" /&gt;</code></pre>
  		<input type="submit" value="[Submit (no CSS class)]" />
  		<pre><code>&lt;input type="submit" value="[Submit (no CSS class)]" /&gt;</code></pre>
  		<input class="btn btn-primary" type="submit" value="[Submit (primary class)]" />
  		<pre><code>&lt;input class="btn btn-primary" type="submit" value="[Submit (primary class)]" /&gt;</code></pre>
  	</div>
  </div>

  Code for content-fr.html file

  <h3>Bouton de soumission</h3>
  <p>Le style des boutons de soumission sont mise en force avec le style du bouton d'appel à l'action.</p>
  <div class="row">
  	<div class="col-sm-6">
  		<h3>With a <code>&lt;button&gt;</code> element</h3>
  		<button class="btn" type="submit">[Soumission (avec la classe CSS btn)]</button>
  		<pre><code>&lt;button class="btn" type="submit"&gt;[Soumission (avec la classe CSS btn)]&lt;/button&gt;</code></pre>
  		<button type="submit">[Soumission (sans classe CSS)]</button>
  		<pre><code>&lt;button type="submit"&gt;[Soumission (sans classe CSS)]&lt;/button&gt;</code></pre>
  		<button class="btn btn-primary" type="submit">[Soumission (primary classe CSS)]</button>
  		<pre><code>&lt;button class="btn btn-primary" type="submit"&gt;[Soumission (primary classe CSS)]&lt;/button&gt;</code></pre>
  	</div>
  	<div class="col-sm-6">
  		<h3>With a <code>&lt;input /&gt;</code> element</h3>
  		<input class="btn" type="submit" value="[Soumission (avec la classe CSS btn)]" />
  		<pre><code>&lt;input class="btn" type="submit" value="[Soumission (avec la classe CSS btn)]" /&gt;</code></pre>
  		<input type="submit" value="[Soumission (sans classe CSS)]" />
  		<pre><code>&lt;input type="submit" value="[Soumission (sans classe CSS)]" /&gt;</code></pre>
  		<input class="btn btn-primary" type="submit" value="[Soumission (primary classe CSS)]" />
  		<pre><code>&lt;input class="btn btn-primary" type="submit" value="[Soumission (primary classe CSS)]" /&gt;</code></pre>
  	</div>
  </div>

• Fixed Item 65 Add and documents a new CSS class to undo the new font-style in order to let implementer to adapt their content to the new font.
• Item 66 Apply the new font style to form and to all buttons. Remove the style as temporary measure because label didn't aligned well with their input controler, idem for check box of an input type checkbox/radio.
• Fixed Item 67 Improve the SEO for the menu button. Add at least, in each page, the top menu item (themes)
• Fixed Item 68 Font size of blockquote content didn't match the new default text-size.
• Fixed Item 69 Adjust the pause icon of the carousel to be middle aligned with the text "Pause"
• Fixed Item 70 Menu - Open the menu on basic HTML mode
• Fixed Item 71 Menu - English page contains the French menu in Basic mode, vice-versa in the French page
• Fixed Item 72 Menu - Add border - At the top of the right menu, at the left at at the bottom of the first level of menu item.
• Item 73 Menu - Remove the menu opening via mouse-over on table and desktop and keep the menu open until the user focus out or click outside the menu area.
• Item 74 Menu - Draft menu navigation instruction about the vertical separator. also mention the most request is always expanded in tablet/desktop mode
• Fixed Item 75 Menu - It was recommended to remove the aria-control because it became too verbose for screen user
• Fixed Item 76 Font - Change the font size.
  • Desktop view:
    • h1: Lato, 38px, bold, with a red rule below
    • h2: Lato, 36px, bold
    • h3: Lato, 24px, bold
    • h4: Lato, 22px, bold
    • h5: Lato, 20px, bold
    • h6: Lato, 20px, plain text
    • body: Noto, 20px, plain text
    • doormat description: Noto, 19px, plain text
  • Smaller devices view:
    • h1: Lato, 34px, bold, with a red rule below
    • h2: Lato, 32px, bold
    • h3: Lato, 24px, bold
    • h4: Lato, 22px, bold
    • h5: Lato, 20px, bold
    • h6: Lato, 20px, plain text
    • body: Noto, 20px, plain text
    • doormat description: Noto, 20px, plain text
• Fixed Item 77 SVG image - Optimize the new svg image submited by PR#1460
• Fixed Item 78 Published TBS answer about the use of Google API for the new font.
• Fixed Item 79 Fix link (in French) in the top menu. See sitemenu.hbs
• Fixed Item 80 Add new style for the home page promo. The promo banner would have an opactity set to 90%.
  • Sky (blue)
    • Promo banner: #355688
    • Banner inner box: #26374a
    • Site title and promo color: #fff
  • Earth (brown)
    • Promo banner: #5c3e18
    • Banner inner box: #2b1900
    • Site title and promo color: #fff
  • Vegetation (green)
    • Promo banner: #295e01
    • Banner inner box: #1a3902
    • Site title and promo color: #fff
  • Night (black)
    • Promo banner: #000
    • Banner inner box: #0d0c0b
    • Site title and promo color: #fff
  • Forest (brown-yellow)
    • Promo banner: #745001
    • Banner inner box: #5a3700
    • Site title and promo color: #fff
  • Autumn (orange)
    • Promo banner: #7a3900
    • Banner inner box: #4a1a00
    • Site title and promo color: #fff
• Fixed Item 81 Menu - The following need to be translated:
  • Employment Insurance and leave
  • https://international.gc.ca/world-monde/study_work_travel-etude_travail_voyage/index.aspx?lang=eng">Study, work and travel worldwide
• Fixed Item 82 Menu - Cleanup the markup
• Fixed Item 83 Menu - Remove "Job bank" item
• Fixed Item 84 Font size - Apply the latest provided font-size
  • Desktop:
    • h1: lato, 38px, bold, with a red rule below
    • h2: lato, 36px, bold
    • h2 (home page only): lato, 24px, bold
    • h3: lato, 24px, bold
    • h4: lato, 22px, bold
    • h5: lato, 20px, bold
    • h6: lato, 19px, plain text (normal)
    • body: noto sans, 20px, plain text (normal)
    • doormat description: noto sans, 17px, plain text (normal)
    • doormat headers: lato, 20px, bold
  • Smaller devices:
    • h1: lato, 34px, bold, with a red rule below
    • h2: lato, 32px, bold
    • h2 (home page only): lato, 24px, bold
    • h3: lato, 24px, bold
    • h4: lato, 22px, bold
    • h5: lato, 20px, bold
    • h6: lato, 19px, plain text (normal)
    • body: noto sans, 20px, plain text (normal)
    • doormat description: noto sans, 19px, plain text (normal)
    • doormat headers: lato, 20px, bold
• Fixed Item 85 Update pages with gc-srvinfo component (topic/home/theme) with the latest markup.
• Item 86 On iPhone device - Carousel display issue. The navigation bar (arrows) goes over the slide title
• Item 87 On iPhone device - Top search bar overflow to the right and the search button are render bellow it.
• Fixed Item 88 Multimedia player - Small device and desktop - Review how overlay (with the pause button) are still rendered in the middle and centered.
• Fixed Item 89 Form validation - Error label that are appearing when validating checkboxes overlay the legend text. Form validation. How to reproduce: 1. Go in the form validation example page. 2. Click on submit to trigger the form validation plugin. 3. See the error label are over the legend text. - There probably a fix for it in the PR #8397
• Fixed Item 90 The new font-size conflict for the in-page navigation. Suggest to use a font-size of 17px instead of 20px. ul.toc { font-size:17px }
• Item 91 Document the API for the "Multi-page" navigation (Step-by-step) and remove the used CSS class "gc-stp-stp" because implementer has used a combination of CSS like "mrgn-tp-md mrgn-bttm-lg brdr-bttm" instead.
• Fixed Item 92 From a comparaison between the gc-proto and gc-web example, the following ajustment was suggested for the home page: Reduce the spacing (top and bottom) for the home page banner, reduce the spacing (top and bottom) for the promos text and reduce the spacing (top and bottom) for the most requested section
• Fixed Item 93 From a comparaison between the gc-proto and gc-web example, the following ajustment was suggested for the Services and information component: reducing the spacing for doormats titles.
• Item 94 Heading size in for alert component. The undesirable effect is on the form validation, the h2 inside the alert-error are big. It was at a similar size before. TBS suggeste to have it the same style as an h3 or h5 by default. The scope would need to be clarified to know if that overwrite is applied to all heading size and to all type of alert.

• Item 95 Apply content limited widht by default to all pages. Then overwride the following default spacing because they were removed as per github issue #1486:

  • p, ul, ol, dl { margin-bottom: 27.5px; }
  • li { margin-bottom: 10px; }
  • .lst-spcd > li { margin-bottom: 20px; }
  • .lst-spcd-2 { > li { margin-bottom: 40px; } }
  • .lst-spcd-2 { ul, ol { margin-top: 40px; } }

  Then do a test to ensure the margin overwride still work as expected.

• Item 96 Home page feature style. Modify the "Governement initiative" style to match up the doormat link style. The same style must be applied to all contextual feature.
• Fixed Item 97 Reduce the line-height spacing for doormat link and add more space at the bottom of hte link in the "Your government" section in the home page.
• Fixed Item 98 Remove the "menu" in the printable version of the page
• Fixed Item 99 The data table filtering interface render into two row instead of one for the pattern when there is filters on the left. Like the last working example in the enhanced table working example.
• Fixed Item 100 Multimedia player used in 4 a column width, the times lapse controls are rendered into 3 lines instead of two. The separator is alone on its own line.
• Fixed Item 101 Data table, in Firefox, the filter bar in the french version render on two line when the table width is set to 8 colonnes.
• Fixed Item 102 The CSS class .btn-lg don't work, that CSS are overwritten.