diff --git a/_data/sites.json b/_data/sites.json index ecc85d20d8..271d7e2735 100644 --- a/_data/sites.json +++ b/_data/sites.json @@ -1020,6 +1020,16 @@ "title": "Évaluation de l'accessibilité #2 - Test d'utilisabilité de l'ARC", "language": "fr", "path": "reports/a11y-3-fr.html" + }, + { + "title": "Accessibility assessment #3 - Page feedback tool", + "language": "en", + "path": "reports/a11y-4-en.html" + }, + { + "title": "Évaluation de l'accessibilité #3 - Outil de rétroaction sur la page", + "language": "fr", + "path": "reports/a11y-4-fr.html" } ] }, diff --git a/_data/templates.json b/_data/templates.json index 2dafa55cac..cdeeaf22e2 100644 --- a/_data/templates.json +++ b/_data/templates.json @@ -1086,7 +1086,7 @@ "en": "News templates samples", "fr": "Exemple de page générique." }, - "modified": "2025-02-21", + "modified": "2025-04-16", "componentName": "news", "status": "stable", "pages": { diff --git a/common/list/_lists.scss b/common/list/_lists.scss index add43a44bc..3f04ee7107 100644 --- a/common/list/_lists.scss +++ b/common/list/_lists.scss @@ -182,7 +182,7 @@ div.list-advanced.square>ul, ul.square { ul.compact { li { - font-size: $small-size; + font-size: 17px; line-height: 1.5em; } } diff --git a/common/scaffolding/_base.scss b/common/scaffolding/_base.scss new file mode 100644 index 0000000000..02d1582990 --- /dev/null +++ b/common/scaffolding/_base.scss @@ -0,0 +1,75 @@ +/* + * + * + * @title: Scaffolding + * + */ + + +/* Headings */ + +h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 +{ + @include defaults-alternative-font-family(); + font-variant-ligatures: no-common-ligatures; + font-weight: $bold-weight; +} + +.h3, +.h4, +.h5, +.h6 { + border: 0; +} + +h1, .h1 { + line-height: 1.17; + margin-bottom: .2em; + margin-top: 1em; + padding-bottom: 4px; +} + +h2, .h2 { + line-height: 1.23; +} + +h3, .h3 { + line-height: 1.37; +} + +h4, .h4, h5, .h5 { + line-height: 1.33; +} + +h6, .h6 { + line-height: 1.45; +} + + +/* Forms */ + +// scss-lint:disable QualifyingElement +input[placeholder], +[placeholder], +*[placeholder] { + color: $input-color-placeholder; +} + +legend { + font-size: 1.2em; + line-height: 1.65em; +} + +/* Other */ + +output { + font-size: 1em; +} + +pre { + font-size: 1rem; +} + +blockquote { + font-size: 1em; +} diff --git a/common/scaffolding/_screen-sm-max.scss b/common/scaffolding/_screen-sm-max.scss new file mode 100644 index 0000000000..9de81795d3 --- /dev/null +++ b/common/scaffolding/_screen-sm-max.scss @@ -0,0 +1,48 @@ +/* +* +* Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) +* wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html +* +* @title: Scaffolding - Small view and under (screen only) +* @desc: Variable $screen-sm-max <= 991 px +* +*/ + + +// Heading font-sizes +h1, +.h1 { + font-size: 2.3125rem; // expected 37px; + line-height: 1.19; + margin-top: 1.265rem; // expected ~26px; +} + +h2, +.h2 { + font-size: 2.1875rem; // expected 35px; + line-height: 1.25; +} + +h3, +.h3 { + font-size: 1.625rem; // expected 26px; + line-height: 1.23; +} + +h4, +.h4 { + font-size: 1.375rem; // expected 22px; + line-height: 1.33; +} + +h5, +.h5 { + font-size: 1.25rem; // expected 20px; + line-height: 1.27; +} + +h6, +.h6 { + font-size: 1.125rem; // expected 18px; + line-height: 1.40; +} diff --git a/common/scaffolding/_screen-xs-max.scss b/common/scaffolding/_screen-xs-max.scss new file mode 100644 index 0000000000..6541a6d114 --- /dev/null +++ b/common/scaffolding/_screen-xs-max.scss @@ -0,0 +1,14 @@ +/* +* +* Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) +* wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html +* +* @title: Scaffolding +* @desc: Variable $screen-sm-max <= 767 px +* +*/ + +main { + font-size: 1.125rem; + line-height: 1.55; +} diff --git a/common/text-level-modifiers/_base.scss b/common/text-level-modifiers/_base.scss index d057dd8896..d96ca9607e 100644 --- a/common/text-level-modifiers/_base.scss +++ b/common/text-level-modifiers/_base.scss @@ -8,3 +8,7 @@ .fnt-hdng { @include defaults-alternative-font-family(); } + +.lead { + font-size: 1.2em; +} diff --git a/components/gc-features/_base.scss b/components/gc-features/_base.scss index 3551fb9e0e..91a3096505 100644 --- a/components/gc-features/_base.scss +++ b/components/gc-features/_base.scss @@ -8,14 +8,22 @@ */ .gc-features { + margin-bottom: $space-md; - @include subcomponent; + h3, h4, h5, h6 { + font-size: $font-size-h5; + margin-bottom: 5px; + margin-top: 23px; // same as h5 + } - margin-bottom: $space-md; + p { + font-size: 17px; + line-height: 1.5em; + } img { width: 100%; - } + } .well { border-radius: 0; diff --git a/components/gc-features/_screen-sm-max.scss b/components/gc-features/_screen-sm-max.scss index da246ccde0..0d0a581a9c 100644 --- a/components/gc-features/_screen-sm-max.scss +++ b/components/gc-features/_screen-sm-max.scss @@ -5,5 +5,7 @@ */ .gc-features { - @include subcomponent-small-devices; + p { + font-size: 17px; + } } diff --git a/components/gc-most-requested/_base.scss b/components/gc-most-requested/_base.scss index ec1ca88804..b3010ec0c8 100644 --- a/components/gc-most-requested/_base.scss +++ b/components/gc-most-requested/_base.scss @@ -9,14 +9,14 @@ padding: 24px 0 12px; h2 { - font-size: $font-size-h4; + font-size: 22px; margin-top: 0; } ul { li { font-family: "Lato", sans-serif; - font-size: 19px; + font-size: 18px; font-weight: $bold-weight; line-height: 1.8em; } diff --git a/components/gc-most-requested/_screen-md-min.scss b/components/gc-most-requested/_screen-md-min.scss index 0c9f64df79..7be7197507 100644 --- a/components/gc-most-requested/_screen-md-min.scss +++ b/components/gc-most-requested/_screen-md-min.scss @@ -17,7 +17,6 @@ li { display: inline-block; - font-size: $small-size; line-height: 1.25em; margin-bottom: 10px; padding-left: 1.15em; diff --git a/components/gc-srvinfo/_base.scss b/components/gc-srvinfo/_base.scss index 4d5ef176e1..a7ab3d3d13 100644 --- a/components/gc-srvinfo/_base.scss +++ b/components/gc-srvinfo/_base.scss @@ -8,5 +8,18 @@ */ .gc-srvinfo, .gc-drmt { - @include subcomponent; + h2 { + font-size: 1.8125rem; + } + + h3, h4, h5, h6 { + font-size: 20px; + margin-bottom: 5px; + margin-top: 23px; + } + + p { + font-size: 18px; + line-height: 1.5; + } } diff --git a/components/gc-srvinfo/_screen-sm-max.scss b/components/gc-srvinfo/_screen-sm-max.scss deleted file mode 100644 index cd60a0d3d5..0000000000 --- a/components/gc-srvinfo/_screen-sm-max.scss +++ /dev/null @@ -1,10 +0,0 @@ -/* - WET-BOEW - @title: Small view and under (screen only) - @desc: Variable $screen-sm-max <= 991 px - */ - -// Service and information component -.gc-srvinfo, .gc-drmt { - @include subcomponent-small-devices; -} diff --git a/components/gc-subway/_screen-md-min.scss b/components/gc-subway/_screen-md-min.scss index 56363cf6ab..4e6797e9c4 100644 --- a/components/gc-subway/_screen-md-min.scss +++ b/components/gc-subway/_screen-md-min.scss @@ -22,9 +22,7 @@ } hgroup { - left: -.5em; - position: absolute; - top: -2em; + margin-left: -14px; h1 { clip: rect(1px, 1px, 1px, 1px); diff --git a/sites/_variables.scss b/sites/_variables.scss index 3e085c72a9..304516696c 100644 --- a/sites/_variables.scss +++ b/sites/_variables.scss @@ -8,15 +8,15 @@ $wbGray: #e1e4e7; $button-blue: #284162; $wbGrayLight: #eaebed; $accent-blue: #26374a; -$border-red: #af3c43; +$border-red: #a62a1e; $active-blue: #243850; $search-gray: #e0e0e0; $profile-gray: #eaebed; $gray-light: #6f6f6f; // Light grey colour (Bootstrap override). // Brand variables - Main page title -$main-page-title-rule-width: 71px; -$main-page-title-rule-thickness: .18em; +$main-page-title-rule-width: 72px; +$main-page-title-rule-thickness: 6px; $main-page-title-rule-color: $border-red; // Colours for the alert styles @@ -37,12 +37,12 @@ $padding-base-vertical: 10px; $padding-base-horizontal: 14px; /* Headings font-sizes */ -$font-size-h1: 1.9em; // expected 38px; -$font-size-h2: 1.8em; // expected 36px; -$font-size-h3: 1.2em; // expected 24px; -$font-size-h4: 1.1em; // expected 22px; -$font-size-h5: 1em; // expected 20px; -$font-size-h6: .95em; // expected 19px; +$font-size-h1: 2.5625rem; // expected 41px; +$font-size-h2: 2.4375rem; // expected 39px; +$font-size-h3: 1.8125rem; // expected 29px; +$font-size-h4: 1.6875rem; // expected 27px; +$font-size-h5: 1.5rem; // expected 24px; +$font-size-h6: 1.375rem; // expected 22px; /* Small font-size */ $small-size: 87%; diff --git a/sites/baseline/_forms.scss b/sites/baseline/_forms.scss index e252d86594..7211e69409 100644 --- a/sites/baseline/_forms.scss +++ b/sites/baseline/_forms.scss @@ -7,13 +7,6 @@ * */ -// scss-lint:disable QualifyingElement -input[placeholder], -[placeholder], -*[placeholder] { - color: $input-color-placeholder; -} - // Increase likelihood of side-by-side input/button having same height .input-group { .form-control, @@ -29,15 +22,12 @@ input[placeholder], * - Fieldflow is brought to speed with the visual update with a clearly defined temporary class .gc-font-2019, but the class can be tried out on other forms */ :not(#wb-srch) form, .checkbox, .checkbox-inline, .radio, .radio-inline, form .btn:not(.btn-call-to-action) { - font-size: 16px; - line-height: 23px; + font-size: 1rem; + line-height: 1.4375; } form .btn:not(.btn-call-to-action), .form-control { padding: 6px 12px; } -legend { - line-height: 1.65em; -} // Apply the new font size to form, for early adopter .gc-font-2019 { diff --git a/sites/baseline/_heading-screen-sm-max.scss b/sites/baseline/_heading-screen-sm-max.scss deleted file mode 100644 index f0d3afe58f..0000000000 --- a/sites/baseline/_heading-screen-sm-max.scss +++ /dev/null @@ -1,17 +0,0 @@ -/* - WET-BOEW - @title: Small view and under (screen only) - @desc: Variable $screen-sm-max <= 991 px - */ - -// Heading font-sizes -h1, -.h1 { - font-size: 1.7em; // expected 34px; - margin-top: .75em; // expected ~26px; -} - -h2, -.h2 { - font-size: 1.6em; // expected 342x; -} diff --git a/sites/baseline/_heading.scss b/sites/baseline/_heading.scss deleted file mode 100644 index ff887e4b43..0000000000 --- a/sites/baseline/_heading.scss +++ /dev/null @@ -1,35 +0,0 @@ -/* - * - * Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW) - * wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html - * - * @title: Heading - * - */ - -h1 { - margin-bottom: .2em; - margin-top: 1em; - padding-bottom: .2em; -} - -// Common heading style -h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 -{ - @include defaults-alternative-font-family(); - font-variant-ligatures: no-common-ligatures; - font-weight: $bold-weight; -} - -.h3, -.h4, -.h5, -.h6 { - border: 0; -} - -// Heading font-sizes -h6, -.h6 { - font-weight: 400; -} diff --git a/sites/baseline/_mixins.scss b/sites/baseline/_mixins.scss index e8c3a4f394..06a331db78 100644 --- a/sites/baseline/_mixins.scss +++ b/sites/baseline/_mixins.scss @@ -22,25 +22,3 @@ @mixin defaults-alternative-font-family() { font-family: Lato, sans-serif; } - -/* Sub-component: Increase text size for small devices like mobile */ -@mixin subcomponent() { - p { - font-size: 17px; - line-height: 1.5em; - } - - // Override sizing - h3, h4, h5, h6 { - font-size: $font-size-h5; - margin-bottom: 5px; - margin-top: 23px; // same as h5 - } -} - -/* Sub-component: Increase text size for small devices like mobile */ -@mixin subcomponent-small-devices() { - p { - font-size: 19px; - } -} diff --git a/sites/baseline/_scaffolding.scss b/sites/baseline/_scaffolding.scss index 8c1c19c273..044cb637c5 100644 --- a/sites/baseline/_scaffolding.scss +++ b/sites/baseline/_scaffolding.scss @@ -17,13 +17,18 @@ // html { -webkit-font-smoothing: antialiased; + font-size: unset; text-rendering: optimizeLegibility; } +body { + font-size: unset; +} + // TODO: The font-size to be applied to the HTML element, not to the main element. main { - font-size: 20px; - line-height: 1.65em; + font-size: 1.25rem; + line-height: 1.6; h1, h2, h3, h4, h5, h6, p { @extend %gcweb-scaffolding-word-break-break-word; diff --git a/sites/footers/_screen-sm-max.scss b/sites/footers/_screen-sm-max.scss index 62d73c997c..512c8d2eaa 100644 --- a/sites/footers/_screen-sm-max.scss +++ b/sites/footers/_screen-sm-max.scss @@ -11,7 +11,7 @@ display: block; &:not(:last-child) { - margin-bottom: .75em; + margin-bottom: 1.5em; } &::before { diff --git a/sites/header/_base.scss b/sites/header/_base.scss index a9b7080ec0..7230dfd5a6 100644 --- a/sites/header/_base.scss +++ b/sites/header/_base.scss @@ -8,6 +8,6 @@ margin-top: 5px; + .container { - font-size: 20px; + font-size: 1.25rem; } } diff --git a/sites/language/_language-bar.scss b/sites/language/_language-bar.scss index ccf68faa3a..34fbed1f51 100644 --- a/sites/language/_language-bar.scss +++ b/sites/language/_language-bar.scss @@ -3,6 +3,12 @@ li { padding-right: 0; } + + abbr { + font-family: $font-family-base; + font-size: 1.125rem; + text-decoration: none; + } } [dir=rtl] { diff --git a/sites/theme.scss b/sites/theme.scss index 75d5e77e06..b7a664d168 100644 --- a/sites/theme.scss +++ b/sites/theme.scss @@ -30,15 +30,13 @@ @import "fonts/base"; @import "baseline/font"; @import "bootstrap-sass/assets/stylesheets/bootstrap/scaffolding"; -@import "baseline/scaffolding"; @import "bootstrap-sass/assets/stylesheets/bootstrap/type"; @import "wet-boew/src/base/bootstrap-overrides/core-heading"; -@import "baseline/heading"; @import "../common/list/lists"; @import "wet-boew/src/base/bootstrap-overrides/core"; @import "wet-boew/src/base/details/base"; +@import "baseline/scaffolding"; @import "baseline/details"; -@import "baseline/type"; @import "bootstrap-sass/assets/stylesheets/bootstrap/code"; @import "bootstrap-sass/assets/stylesheets/bootstrap/grid"; @import "bootstrap-sass/assets/stylesheets/bootstrap/tables"; @@ -50,6 +48,7 @@ @import "bootstrap-sass/assets/stylesheets/bootstrap/buttons"; @import "wet-boew/src/base/bootstrap-overrides/core-button"; @import "baseline/buttons"; +@import "../common/scaffolding/base"; @import "baseline/obselete"; @@ -141,6 +140,7 @@ @import "wet-boew/src/plugins/menu/base"; @import "wet-boew/src/plugins/multimedia/base"; @import "../components/baseline/wb-mltmd"; +@import "../wet-boew/formvalid/base"; @import "wet-boew/src/plugins/overlay/base"; @import "../components/baseline/overlay"; @import "wet-boew/src/plugins/prettify/base"; @@ -242,6 +242,7 @@ @import "banner/screen-xs-max"; @import "baseline/lists/screen-xs-max"; + @import "../common/scaffolding/screen-xs-max"; @import "gcweb-menu/screen-xs-max"; @import "page-details/screen-xs-max"; @@ -260,7 +261,7 @@ @import "wet-boew/src/base/views/screen-sm-max"; @import "banner/screen-sm-max"; - @import "baseline/heading-screen-sm-max"; + @import "../common/scaffolding/screen-sm-max"; @import "gcweb-menu/screen-sm-max"; @import "authentication/screen-sm-max"; @import "footers/screen-sm-max"; @@ -272,7 +273,6 @@ @import "../components/gc-table/screen-sm-max"; // Provisional CSS for GC table @import "../components/gc-chckbxrdio/screen-sm-max"; @import "wet-boew/src/plugins/tabs/screen-sm-max"; - @import "../components/gc-srvinfo/screen-sm-max"; @import "../templates/home/screen-sm-max"; @import "../templates/institutional-landing/screen-sm-max"; diff --git a/templates/application/_base.scss b/templates/application/_base.scss index c1b83d9850..d840caf40f 100644 --- a/templates/application/_base.scss +++ b/templates/application/_base.scss @@ -37,6 +37,7 @@ h2 { border: none; + font-size: $font-size-h4; margin: 10px 0 8px; a { diff --git a/templates/home/_base.scss b/templates/home/_base.scss index 36936955fe..2634ccb98d 100644 --- a/templates/home/_base.scss +++ b/templates/home/_base.scss @@ -65,6 +65,13 @@ } } + /* Home page Services and information */ + .gc-srvinfo { + p { + font-size: 17px; + } + } + /* Home page your gov * * Reference in: diff --git a/templates/news/deprecated/news_v3-en.html b/templates/news/deprecated/news_v4-en.html similarity index 97% rename from templates/news/deprecated/news_v3-en.html rename to templates/news/deprecated/news_v4-en.html index ce07db8f2e..c7068bd29e 100644 --- a/templates/news/deprecated/news_v3-en.html +++ b/templates/news/deprecated/news_v4-en.html @@ -2,9 +2,9 @@ { "title": "News", "language": "en", - "altLangPage": "news_v3-fr.html", + "altLangPage": "news-fr.html", "secondlevel": false, - "dateModified": "2024-09-13", + "dateModified": "2025-02-21", "share": "true", "pageType": "news" } @@ -410,7 +410,13 @@

Resources

-

To access all articles, please visit the advanced search.

+

Perform an advanced search

+

While using basic HTML visit:

+ +

Search results

@@ -443,8 +449,7 @@

Search results

+

All news products

- -

To access all articles, please visit the advanced search.

diff --git a/templates/news/deprecated/news_v3-fr.html b/templates/news/deprecated/news_v4-fr.html similarity index 96% rename from templates/news/deprecated/news_v3-fr.html rename to templates/news/deprecated/news_v4-fr.html index 742bb9e90d..23115b1d72 100644 --- a/templates/news/deprecated/news_v3-fr.html +++ b/templates/news/deprecated/news_v4-fr.html @@ -2,9 +2,9 @@ { "title": "Nouvelles", "language": "fr", - "altLangPage": "news_v3-en.html", + "altLangPage": "news-en.html", "secondlevel": false, - "dateModified": "2024-09-13", + "dateModified": "2025-02-21", "share": "true", "pageType": "news" } @@ -410,7 +410,13 @@

Ressources

-

Pour accéder à tous les articles, visitez la page de recherche avancée.

+

Recherche – Nouvelles récentes

+

En utilisant le HTML de base, consultez :

+ +

Search results

@@ -443,8 +449,7 @@

Search results

+

Toutes les nouvelles

- -

Pour accéder à tous les articles, visitez la page de recherche avancée.

diff --git a/templates/news/index.json-ld b/templates/news/index.json-ld index 88f51dcb3c..ac837815e7 100644 --- a/templates/news/index.json-ld +++ b/templates/news/index.json-ld @@ -14,7 +14,7 @@ "en": "News templates samples", "fr": "Exemple de page générique." }, - "modified": "2025-02-21", + "modified": "2025-04-16", "componentName": "news", "status": "stable", "pages": { diff --git a/templates/news/news-doc-en.html b/templates/news/news-doc-en.html index 1a6e017a58..e0a266fd13 100644 --- a/templates/news/news-doc-en.html +++ b/templates/news/news-doc-en.html @@ -3,7 +3,7 @@ description: Documentation and working examples for the News template. language: en altLangPage: news-doc-fr.html -dateModified: 2025-02-21 +dateModified: 2025-04-16 share: true --- @@ -15,13 +15,13 @@
Type
Canada.ca template
Last review
-
2024-12-19
+
2025-04-16
Conforming to
Content and IA spec 3.0
Specification
News pages - Canada.ca mandatory template
Template version
-
Version 4.0
+
Version 4.0.1
Available instances
https://www.canada.ca/en/news.html
https://www.canada.ca/fr/nouvelles.html
@@ -32,6 +32,12 @@

Working example

List of changes