Merge branch 'main' into rm-dist

jean-gui · jean-gui · commit 50435dd33e20 · 2024-11-15T14:37:29.000+01:00
# Conflicts:
#	public/dist/assets/js/multiselect.js
#	public/dist/assets/js/multiselect.min.js
#	public/dist/assets/js/slider.js
#	public/dist/assets/js/slider.min.js
#	public/dist/assets/styles/core.css
#	public/dist/assets/styles/core.min.css
diff --git a/assets-src/js/multiselect-module.js b/assets-src/js/multiselect-module.js
@@ -193,7 +193,7 @@ const MultiselectButtons = function (selectEl, params) {
     ulCombo.setAttribute('aria-multiselectable', 'true');
     ulCombo.id = baseId + '-listbox';
     ulCombo.setAttribute('aria-labelledby', baseId + '-label');
-    ulCombo.classList.add('combo-menu');
+    ulCombo.classList.add('combo-menu', 'clean-list');
 
     div.appendChild(divComboBox);
     div.appendChild(ulCombo);
diff --git a/assets-src/js/slider.js b/assets-src/js/slider.js
@@ -66,7 +66,7 @@ let contentSlider = (function () {
 				function createControls() {
 
 					let controls = document.createElement('ul');
-					controls.setAttribute('class', 'slider-controls');
+					controls.setAttribute('class', 'clean-list slider-controls');
 					controls.setAttribute('aria-label', controlsDescription);
 					controls.innerHTML = '<li><button class="button button--ghost js-previous with-icon--larger" aria-label="' + previousSlide + '" style="padding:0.4375rem;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/><path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></button></li>'
 						+ '<li style="margin-top:0;margin-inline-start:0.25rem;"><button class="button button--ghost js-next with-icon--larger" aria-label="' + nextSlide + '" style="padding:0.4375rem;"><svg xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 320 512" class="icon icon--larger" focusable="false" aria-hidden="true" width="1em" height="1em"><path class="chevron-left" d="M34.52 239.03L228.87 44.69c9.37-9.37 24.57-9.37 33.94 0l22.67 22.67c9.36 9.36 9.37 24.52.04 33.9L131.49 256l154.02 154.75c9.34 9.38 9.32 24.54-.04 33.9l-22.67 22.67c-9.37 9.37-24.57 9.37-33.94 0L34.52 272.97c-9.37-9.37-9.37-24.57 0-33.94z"/><path class="chevron-right" d="M285.476 272.971L91.132 467.314c-9.373 9.373-24.569 9.373-33.941 0l-22.667-22.667c-9.357-9.357-9.375-24.522-.04-33.901L188.505 256 34.484 101.255c-9.335-9.379-9.317-24.544.04-33.901l22.667-22.667c9.373-9.373 24.569-9.373 33.941 0L285.475 239.03c9.373 9.372 9.373 24.568.001 33.941z"/></svg></button></li>';
diff --git a/assets-src/styles/sass/30-base/_lists.scss b/assets-src/styles/sass/30-base/_lists.scss
@@ -55,6 +55,10 @@ dl {
 		font-weight: bold;
 	}
 
+    dd {
+        margin-inline-start: rem(40);
+    }
+
 	dd + dt {
 		margin-block-start: 0.5em;
 	}
@@ -110,6 +114,7 @@ dl.grid {
 		dd {
 			grid-column-start: 2;
 			grid-column-end: 3;
+            margin-inline-start: 0;
 		}
 	}
 }
diff --git a/assets-src/styles/sass/50-core-components/_evangelists.scss b/assets-src/styles/sass/50-core-components/_evangelists.scss
@@ -45,6 +45,10 @@
 		padding-right: rem(24);
 	}
 
+    .l-box {
+        padding: rem(24);
+    }
+
 	li + li {
 		border-top: solid 1px #649bc5;
 	}
diff --git a/assets-src/styles/sass/50-core-components/_family-series-list.scss b/assets-src/styles/sass/50-core-components/_family-series-list.scss
@@ -3,9 +3,9 @@
 \*------------------------------------*/
 
 .family-grouping {
-    padding-top: rem(40);
+    padding-block-start: rem(28);
 }
 
 .family-grouping h2 + * {
-    margin-top: 1rem;
+    margin-block-start: 1rem;
 }
diff --git a/assets-src/styles/sass/80-templates/_technical-reports.scss b/assets-src/styles/sass/80-templates/_technical-reports.scss
@@ -9,8 +9,8 @@
 
 	.hero {
 		background-color: $white;
-		margin-bottom: rem(20);
-		padding-bottom: rem(40);
+		margin-block-end: rem(20);
+		padding-block-end: 0;
 
 		.l-box {
 			background-color: #f3f3f6;
@@ -31,14 +31,20 @@
 		background-color: $white;
 	}
 
+    // Close visual gap between end of visible text and CSS-inserted colon caused by visuallyhidden <span>
+    // Only works while there is a single visuallyhidden <span> as the last child in the <dt>
+    .translation-list dt:has(span.visuallyhidden)::after {
+        margin-inline-start: rem(-4);
+    }
 }
 
 .tr-list {
 	.tr-list__item {
 		@include stack(0.5em);
 		@include txt-pluto;
-		padding-bottom: rem(24);
-		padding-top: rem(24);
+		border-block-end: 1px solid $twiki-gray;
+		padding-block-end: rem(8);
+		padding-block-start: rem(20);
 
 		> * {
 			max-width: rem(820);
@@ -49,21 +55,17 @@
 		@include txt-mars;
 	}
 
-	.tr-list__item + .tr-list__item {
-		border-top: 1px solid $twiki-gray;
-	}
-
 	.tr-list__item__header {
 		@include stack;
 		align-items: flex-start;
 
 		h3 {
-			margin-bottom: 0;
-			margin-top: rem(5);
+			margin-block-end: 0;
+			margin-block-start: rem(5);
 		}
 
 		h3 + * {
-			margin-top: 0;
+			margin-block-start: 0;
 			order: -1;
 		}
 	}
diff --git a/design-system-templates/components/tr-search-results-family.html.twig b/design-system-templates/components/tr-search-results-family.html.twig
@@ -55,7 +55,7 @@
                 <dd>Michael Cooper</dd>
             </div>
             <div class="translation-list">
-                <dt>2 translations for Accessible Rich Internet Applications (WAI-ARIA) 1.0</dt>
+                <dt>Translations <span class="visuallyhidden">for Accessible Rich Internet Applications (WAI-ARIA) 1.0</span></dt>
                 <dd><a hreflang="ja" href="path/to/page"><span lang="ja">日本語</span></a></dd>
                 <dd><a hreflang="hu-HU" href="path/to/page"><span lang="hu-HU">Magyar</span></a></dd>
             </div>
diff --git a/design-system-templates/components/tr-search-results-item-standard.html.twig b/design-system-templates/components/tr-search-results-item-standard.html.twig
@@ -18,7 +18,7 @@
                 <dd>Michael Cooper</dd>
             </div>
             <div class="translation-list">
-                <dt>2 translations for Accessible Rich Internet Applications (WAI-ARIA) 1.0</dt>
+                <dt>Translations <span class="visuallyhidden">for Accessible Rich Internet Applications (WAI-ARIA) 1.0</span></dt>
                 <dd><a hreflang="ja" href="path/to/page"><span lang="ja">日本語</span></a></dd>
                 <dd><a hreflang="hu-HU" href="path/to/page"><span lang="hu-HU">Magyar</span></a></dd>
             </div>
diff --git a/templates/components/listings/people/user.html.twig b/templates/components/listings/people/user.html.twig
@@ -1,8 +1,8 @@
 <div class="l-sidebar card--user">
-    <div id="{{ user.login }}">
+    <div>
         <div class="not-sidebar">
             <div>
-                <{{ heading|default('h3') }} class="{{ heading_class|default('txt-mars') }}">
+                <{{ heading|default('h3') }} id="{{ user.login }}" class="{{ heading_class|default('txt-mars') }}" data-anchor="no">
                     {% block name %}
                         {% block given %}{{ user.given }}{% endblock%}
                         {% block family %}{{ user.family }}{% endblock %}
diff --git a/templates/components/listings/publications/tr_card.html.twig b/templates/components/listings/publications/tr_card.html.twig
@@ -30,7 +30,7 @@
     {% block translations %}
     {% if spec.translations and spec.translations.translations|length > 0 %}
         <div class="translation-list">
-            <dt>{{ spec.translations.translations|length }} translation{% if spec.translations.translations|length > 1 %}s{% endif %} for {{ spec.title }}</dt>
+            <dt>Translation{% if spec.translations.translations|length > 1 %}s{% endif %} <span class="visuallyhidden">for {{ spec.title }}</span></dt>
             {% for t in spec.translations.translations|sort((a,b) => a.language <=> b.language) -%}
             <dd><a hreflang="{{ t.language|locale_to_bcp47 }}" href="{{ t.uri }}"><span lang="{{ t.language|locale_to_bcp47 }}">{{ t.language|locale_name(t.language) }}</span></a></dd>
             {% endfor -%}
diff --git a/templates/components/styles/hero.html.twig b/templates/components/styles/hero.html.twig
@@ -8,7 +8,7 @@
                         {% if page.localized is defined and page.localized|length > 0 %}
                             {{ include('@W3CWebsiteTemplates/components/styles/page_translations--hero.html.twig') }}
                         {% endif %}
-                        <p class="lead">{{ page.pageLead }}</p>
+                        <p class="lead">{{ page.pageLead|raw }}</p>
                     {% endblock %}
                 </div>
                 {% if page.heroIllustration is defined and page.heroIllustration %}

Original file line number	Diff line number	Diff line change
`@@ -55,6 +55,10 @@ dl {`
`55`	`55`	`font-weight: bold;`
`56`	`56`	`}`
`57`	`57`
	`58`	`+ dd {`
	`59`	`+ margin-inline-start: rem(40);`
	`60`	`+ }`
	`61`	`+`
`58`	`62`	`dd + dt {`
`59`	`63`	`margin-block-start: 0.5em;`
`60`	`64`	`}`
`@@ -110,6 +114,7 @@ dl.grid {`
`110`	`114`	`dd {`
`111`	`115`	`grid-column-start: 2;`
`112`	`116`	`grid-column-end: 3;`
	`117`	`+ margin-inline-start: 0;`
`113`	`118`	`}`
`114`	`119`	`}`
`115`	`120`	`}`
Original file line number	Diff line number	Diff line change
`@@ -45,6 +45,10 @@`
`45`	`45`	`padding-right: rem(24);`
`46`	`46`	`}`
`47`	`47`
	`48`	`+ .l-box {`
	`49`	`+ padding: rem(24);`
	`50`	`+ }`
	`51`	`+`
`48`	`52`	`li + li {`
`49`	`53`	`border-top: solid 1px #649bc5;`
`50`	`54`	`}`
Original file line number	Diff line number	Diff line change
`@@ -3,9 +3,9 @@`
`3`	`3`	`\------------------------------------/`
`4`	`4`
`5`	`5`	`.family-grouping {`
`6`		`- padding-top: rem(40);`
	`6`	`+ padding-block-start: rem(28);`
`7`	`7`	`}`
`8`	`8`
`9`	`9`	`.family-grouping h2 + * {`
`10`		`- margin-top: 1rem;`
	`10`	`+ margin-block-start: 1rem;`
`11`	`11`	`}`