Make TR listing easier to visually scan

- Remove number from contextual text, as it seems of minimal benefit to people
- Visually hide contextual text in TR translations <dt>, leaving it available for screen reader users
- Add CSS to compensate for blank inline space created by visuallyhidden text

Author: NicolaSaunders

assets-src/styles/sass/80-templates/_technical-reports.scss

@@ -31,6 +31,11 @@
 		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 {

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">/span> 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

@@ -4933,6 +4933,9 @@ 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;

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