Merge branch 'main' into feature/indent-description-list-dd

assets-src/js/main/flashes.js

@@ -27,7 +27,8 @@ const flashes = (function () {
         }
 
         html += '<div class="l-box note note--' + type + '" role="' + (type === 'error' ? 'alert' : 'status')
-            + '" aria-labelledby="' + type + '-summary-title" tabindex="-1" data-component = "' + type + '-summary" >';
+            + '" aria-labelledby="' + type + '-summary-title" tabindex="-1" ' +
+            'data-component = "' + type + '-summary" data-anchor="no">';
         html += '<h2 id="' + type + '-summary-title" class="txt-saturn">' + flashes['title-' + type] + '</h2>';
         html += '<ul class="clean-list" role="list">';
         for (let i in flashes[type]) {

assets-src/js/main/heading-anchors.js

@@ -1,18 +1,13 @@
 /**
  * Add anchor links to any H2 - H6 within the <main> element that:
+ * - have an id
  * - are not children of a <nav> element
  * - do not have an ancestor with the data-anchor="no" attribute, with
  * the `hidden` attribute or with the .visuallyhidden class
  * - do not themselves have the data-anchor="no" attribute, the `hidden`
  * attribute or the .visuallyhidden class
  *
- * If a heading does not already possess an ID, use regular expressions on
- * the textContent of the heading to generate a string that is valid to
- * use for both the heading ID and the anchor href. Supports non-Latin
- * scripts by matching any Unicode letter - \p{L} - or number - \p{N}. The
- * u flag enables Unicode matching, to support characters from any script.
- *
- * Otherwise, generate the anchor using the existing heading ID value.
+ * Generate the anchor using the existing heading ID value.
  */
 
 import {translate} from './translations';
@@ -24,7 +19,7 @@ let headingAnchors = function () {
 	// Only add heading anchor links on "full" sites
 	if (languageCode === 'en' || languageCode === 'ja' || languageCode === 'zh-hans') {
 
-		let headingsArray= Array.from(document.querySelectorAll('main h2, main h3, main h4, main h5, main h6'));
+		let headingsArray= Array.from(document.querySelectorAll('main h2[id], main h3[id], main h4[id], main h5[id], main h6[id]'));
 
 		if (headingsArray.length > 0) {
 
@@ -52,31 +47,13 @@ let headingAnchors = function () {
 				targetedHeadings.forEach(function(heading) {
 
 					let anchor = document.createElement('a');
-					let anchorHref;
-
-					// If the heading already has an ID, use this for constructing the anchor
-					if (heading.getAttribute('id')) {
-						anchorHref = heading.id;
-					} else {
-						// If the heading does not already have an ID, generate anchor href from the heading text. Steps are:
-						// - Remove leading/trailing spaces
-						// - Use RegEx to remove invalid characters but keep all Unicode letters/numbers
-						// - Use RegEx to replace spaces with hyphens
-						// - convert to lowercase as per URL policy
-						anchorHref = heading.textContent
-							.trim()
-							.replace(/[^\p{L}\p{N}\s-]/gu, '')
-							.replace(/\s+/g, '-')
-							.toLowerCase();
-						heading.id = anchorHref;
-					}
-
-					anchor.setAttribute('href', '#' + anchorHref);
+
+					anchor.setAttribute('href', '#' + heading.id);
 					anchor.setAttribute('class', 'heading-anchor');
 					anchor.innerHTML = '<span aria-hidden="true">&sect;</span>'
 						+'<span class="visuallyhidden">'
 						+ translate.translate('anchor', languageCode) + '</span>';
-					heading.textContent += '\xa0';
+					heading.append('\xa0');
 					heading.appendChild(anchor);
 
 				});
@@ -88,4 +65,4 @@ let headingAnchors = function () {
 
 }
 
-export {headingAnchors};
+export {headingAnchors};

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>

design-system-templates/example-pages/profile.html.twig

@@ -18,7 +18,7 @@
 
         <nav id="profile-nav" aria-label="Details">
             <div class="profile-nav__inner">
-                <ul class="clean-list" role="list">
+                <ul>
                     <li><a href="#" aria-current="true">Overview</a></li>
                     <li><a href="path/to/page">Edit profile</a></li>
                     <li><a href="path/to/page">Calendar</a></li>
@@ -39,4 +39,4 @@
 {% endblock %}
 
 {% block scripts %}
-{% endblock %}
+{% endblock %}

docs/scripts/heading-anchors.md

@@ -1,12 +1,12 @@
 # Heading anchors
 
-This script is part of `main.js`/`main.min.js`. To help linking to specific parts of pages, this script automatically creates and appends a visible anchor link to the end of any H2-H6 heading within the `<main>` element, with the following exclusions:
+This script is part of `main.js`/`main.min.js`. To help linking to specific parts of pages, this script automatically creates and appends a visible anchor link to the end of any H2-H6 heading that have an `id` attribute within the `<main>` element, with the following exclusions:
 
 - where the heading is a child of a `<nav>` element
 - where the heading carries the attribute `data-anchor="no"`, the `hidden` attribute or the `.visuallyhidden` class
 - where a heading has an ancestor carrying the attribute `data-anchor="no"`, the `hidden` attribute or the `.visuallyhidden` class
 
-If a heading already has an `id` attribute, this is used when creating the `href` for the `<a>`. Otherwise, the script parses the text content of the heading to create both the heading `id` and the anchor `href`.
+The `id` attribute is used when creating the `href` for the `<a>`.
 
 To override the default behaviour of the script and prevent the addition of anchor links to headings, modify the HTML markup to apply the `data-anchor="no"` attribute to an individual heading (or to a parent container, if targeting a group of headings).
 
@@ -18,4 +18,4 @@ The `data-anchor="no"` attribute has been added directly to the markup to overri
 - [collapsible containers](../components/collapsible-containers.md)
 - [evangelists](../components/evangelists.md)
 - [group list](../components/group-list.md)
-- [notes](../components/notes.md)
+- [notes](../components/notes.md)

public/dist/assets/js/main.js

@@ -887,7 +887,7 @@ const flashes = function () {
     if (type.startsWith('title-') || type === 'length' || !flashes.hasOwnProperty(type)) {
       continue;
     }
-    html += '<div class="l-box note note--' + type + '" role="' + (type === 'error' ? 'alert' : 'status') + '" aria-labelledby="' + type + '-summary-title" tabindex="-1" data-component = "' + type + '-summary" >';
+    html += '<div class="l-box note note--' + type + '" role="' + (type === 'error' ? 'alert' : 'status') + '" aria-labelledby="' + type + '-summary-title" tabindex="-1" ' + 'data-component = "' + type + '-summary" data-anchor="no">';
     html += '<h2 id="' + type + '-summary-title" class="txt-saturn">' + flashes['title-' + type] + '</h2>';
     html += '<ul class="clean-list" role="list">';
     for (let i in flashes[type]) {
@@ -916,19 +916,14 @@ __webpack_require__.r(__webpack_exports__);
 /* harmony import */ var _translations__WEBPACK_IMPORTED_MODULE_0__ = __webpack_require__(3);
 /**
  * Add anchor links to any H2 - H6 within the <main> element that:
+ * - have an id
  * - are not children of a <nav> element
  * - do not have an ancestor with the data-anchor="no" attribute, with
  * the `hidden` attribute or with the .visuallyhidden class
  * - do not themselves have the data-anchor="no" attribute, the `hidden`
  * attribute or the .visuallyhidden class
  *
- * If a heading does not already possess an ID, use regular expressions on
- * the textContent of the heading to generate a string that is valid to
- * use for both the heading ID and the anchor href. Supports non-Latin
- * scripts by matching any Unicode letter - \p{L} - or number - \p{N}. The
- * u flag enables Unicode matching, to support characters from any script.
- *
- * Otherwise, generate the anchor using the existing heading ID value.
+ * Generate the anchor using the existing heading ID value.
  */
 
 
@@ -937,7 +932,7 @@ let headingAnchors = function () {
 
   // Only add heading anchor links on "full" sites
   if (languageCode === 'en' || languageCode === 'ja' || languageCode === 'zh-hans') {
-    let headingsArray = Array.from(document.querySelectorAll('main h2, main h3, main h4, main h5, main h6'));
+    let headingsArray = Array.from(document.querySelectorAll('main h2[id], main h3[id], main h4[id], main h5[id], main h6[id]'));
     if (headingsArray.length > 0) {
       // Filter out headings that:
       // - Are not children of <nav>
@@ -960,24 +955,10 @@ let headingAnchors = function () {
       if (targetedHeadings.length > 0) {
         targetedHeadings.forEach(function (heading) {
           let anchor = document.createElement('a');
-          let anchorHref;
-
-          // If the heading already has an ID, use this for constructing the anchor
-          if (heading.getAttribute('id')) {
-            anchorHref = heading.id;
-          } else {
-            // If the heading does not already have an ID, generate anchor href from the heading text. Steps are:
-            // - Remove leading/trailing spaces
-            // - Use RegEx to remove invalid characters but keep all Unicode letters/numbers
-            // - Use RegEx to replace spaces with hyphens
-            // - convert to lowercase as per URL policy
-            anchorHref = heading.textContent.trim().replace(/[^\p{L}\p{N}\s-]/gu, '').replace(/\s+/g, '-').toLowerCase();
-            heading.id = anchorHref;
-          }
-          anchor.setAttribute('href', '#' + anchorHref);
+          anchor.setAttribute('href', '#' + heading.id);
           anchor.setAttribute('class', 'heading-anchor');
           anchor.innerHTML = '<span aria-hidden="true">&sect;</span>' + '<span class="visuallyhidden">' + _translations__WEBPACK_IMPORTED_MODULE_0__.translate.translate('anchor', languageCode) + '</span>';
-          heading.textContent += '\xa0';
+          heading.append('\xa0');
           heading.appendChild(anchor);
         });
       }

public/dist/assets/styles/core.css

@@ -4055,11 +4055,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;
 }
 
 /*------------------------------------*\
@@ -4963,8 +4963,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;
@@ -4980,15 +4980,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;
@@ -5000,9 +5004,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;
@@ -5013,11 +5014,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;
 }
 

templates/components/evangelists.html.twig

@@ -1,8 +1,8 @@
-<div class="component component--evangelists" data-anchor="no">
+<div class="component component--evangelists">
 	{% if (title is defined and title) or (introduction is defined and introduction) %}
 	<div class="component--evangelists__text">
 		{% if (title is defined and title) %}
-		<h2 class="txt-earth">{{ title }}</h2>
+		<h2 class="txt-earth" id="contact">{{ title }}</h2>
 		{% endif %}
 		{% if (introduction is defined and introduction) %}
 		{{ introduction|raw }}

templates/components/groups_list.html.twig

@@ -1,9 +1,9 @@
-<div class="u-full-width component component--group-list" data-anchor="no">
+<div class="u-full-width component component--group-list">
     <div class="l-center">
         {% if (list_title is defined and list_title) or (list_introduction is defined and list_introduction)  %}
         <div class="component--group-list__intro">
             {% if (list_title is defined and list_title) %}
-            <h2>{{ list_title }}</h2>
+            <h2 id="groups">{{ list_title }}</h2>
             {% endif %}
             {% if (list_introduction is defined and list_introduction) %}
             <p>{{ list_introduction }}</p>

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

templates/components/listings/publications/tr_card.html.twig

@@ -1,6 +1,6 @@
 <div class="tr-list__item">
     <div class="tr-list__item__header">
-        <h3>
+        <h3 data-anchor="no">
             <a href="{{ spec.latestVersionUri }}">{{ spec.title }}</a>
         </h3>
         {% block maturity %}{% endblock %}
@@ -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 -%}