Merge pull request #155 from w3c/feature/review-tr-styles

Feature/review tr styles

Author: deniak

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;
 }

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;
 		}
 	}

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>

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>

public/dist/assets/styles/core.css

@@ -4089,11 +4089,11 @@ input[type=search] {
     #Family/Series list
 \*------------------------------------*/
 .family-grouping {
-  padding-top: 2.5rem;
+  padding-block-start: 1.75rem;
 }
 
 .family-grouping h2 + * {
-  margin-top: 1rem;
+  margin-block-start: 1rem;
 }
 
 /*------------------------------------*\
@@ -5004,8 +5004,8 @@ input[type=search] {
 }
 .technical-reports .hero {
   background-color: #fff;
-  margin-bottom: 1.25rem;
-  padding-bottom: 2.5rem;
+  margin-block-end: 1.25rem;
+  padding-block-end: 0;
 }
 .technical-reports .hero .l-box {
   background-color: #f3f3f6;
@@ -5021,15 +5021,19 @@ input[type=search] {
 .technical-reports .radio-item label::before {
   background-color: #fff;
 }
+.technical-reports .translation-list dt:has(span.visuallyhidden, span.skip-link)::after {
+  margin-inline-start: -0.25rem;
+}
 
 .tr-list .tr-list__item {
   display: flex;
   flex-direction: column;
   justify-content: flex-start;
   font-size: 0.9375rem;
   line-height: 1.5;
-  padding-bottom: 1.5rem;
-  padding-top: 1.5rem;
+  border-block-end: 1px solid #bdbdbd;
+  padding-block-end: 0.5rem;
+  padding-block-start: 1.25rem;
 }
 .tr-list .tr-list__item > * + * {
   margin-top: 0.5em;
@@ -5041,9 +5045,6 @@ input[type=search] {
   font-size: 1.5rem;
   line-height: 1.4;
 }
-.tr-list .tr-list__item + .tr-list__item {
-  border-top: 1px solid #bdbdbd;
-}
 .tr-list .tr-list__item__header {
   display: flex;
   flex-direction: column;
@@ -5054,11 +5055,11 @@ input[type=search] {
   margin-top: 1em;
 }
 .tr-list .tr-list__item__header h3 {
-  margin-bottom: 0;
-  margin-top: 0.3125rem;
+  margin-block-end: 0;
+  margin-block-start: 0.3125rem;
 }
 .tr-list .tr-list__item__header h3 + * {
-  margin-top: 0;
+  margin-block-start: 0;
   order: -1;
 }
 

public/dist/assets/styles/core.min.css

@@ -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 -%}