Make sure design system examples reflect templates changes

Author: NicolaSaunders

design-system-templates/base.html.twig

@@ -68,7 +68,7 @@
             {% block breadcrumbs %}
             {% endblock %}
 
-            <main id="main">
+            <main id="main" {% block extra_main_attributes %}{% endblock %}>
                 {% block content %}
                 {% endblock %}
             </main>

design-system-templates/components/activity.html.twig

@@ -37,7 +37,7 @@
                     </div>
                 </li>
                 <li>
-                    <div class="card card--event workshop" data-component="card">
+                    <div class="card card--event workshop" data-component="card" data-anchor="no">
                         <div class="card__text">
                             <h3 class="card__heading"><a href="path/to/page" class="card__link">How do you want to pay?</a></h3>
                             <p class="txt-pluto with-icon--before"><img class="icon" src="/dist/assets/svg/calendar.svg" width="15" height="15" alt aria-hidden="true" /> <time datetime="2020-11-15">15 November 2020</time></p>
@@ -46,7 +46,7 @@
                     </div>
                 </li>
                 <li>
-                    <div class="card card--event talk" data-component="card">
+                    <div class="card card--event talk" data-component="card" data-anchor="no">
                         <div class="card__text">
                             <h3 class="card__heading"><a href="path/to/page" class="card__link">Cognitive AI - mimicking how we think</a></h3>
                             <p class="txt-pluto with-icon--before"><img class="icon" src="/dist/assets/svg/calendar.svg" width="15" height="15" alt aria-hidden="true" /> <time datetime="2020-12-20">20 December 2020</time></p>

design-system-templates/components/card-link-multiple.html.twig

@@ -1,5 +1,5 @@
 <div class="event-list">
-	<div class="card card--event meeting" data-component="card">
+	<div class="card card--event meeting" data-component="card" data-anchor="no">
 		<div class="card__text">
 			<div class="l-sidebar">
 				<div>

design-system-templates/components/collapsible-containers.html.twig

@@ -1,4 +1,4 @@
-<div class="component--collapsibles" data-component="collapsibles">
+<div class="component--collapsibles" data-component="collapsibles" data-anchor="no">
 	<div>
 		<h3 data-heading="collapsibles">AI KR (Artificial Intelligence Knowledge Representation) <span>Community group</span></h3>
 		<div>

design-system-templates/components/evangelists.html.twig

@@ -1,4 +1,4 @@
-<div class="component component--evangelists">
+<div class="component component--evangelists" data-anchor="no">
 	<div class="component--evangelists__text">
 		<h2 class="txt-earth">Need more information tailored to your organisation?</h2>
 		<p>Our Evangelists understand that every organisation is different! They represent W3C in various locations and are an extension of W3C's Business Development Team. They are responsible for identifying and recruiting new W3C Members, running local events, promoting W3C Training and fostering Sponsorship.</p>

design-system-templates/components/group-list.html.twig

@@ -1,4 +1,4 @@
-<div class="u-full-width component component--group-list">
+<div class="u-full-width component component--group-list" data-anchor="no">
 	<div class="l-center">
 		<div class="component--group-list__intro">
 			<h2>Active groups</h2>

design-system-templates/components/listings-events.html.twig

@@ -1,6 +1,6 @@
 <div class="event-list">
 
-	<article class="card card--event meeting" data-component="card" aria-labelledby="event-1-date event-1-title">
+	<article class="card card--event meeting" data-component="card" data-anchor="no" aria-labelledby="event-1-date event-1-title">
 		<div class="card__text">
 			<div class="l-sidebar">
 				<div>
@@ -26,7 +26,7 @@
 		</div>
 	</article>
 
-	<article class="card card--event workshop" data-component="card" aria-labelledby="event-2-date event-2-title">
+	<article class="card card--event workshop" data-component="card" data-anchor="no" aria-labelledby="event-2-date event-2-title">
 		<div class="card__text">
 			<div class="l-sidebar">
 				<div>
@@ -57,7 +57,7 @@
 		</div>
 	</article>
 
-	<article class="card card--event talk" data-component="card" aria-labelledby="event-3-date event-3-title">
+	<article class="card card--event talk" data-component="card" data-anchor="no" aria-labelledby="event-3-date event-3-title">
 		<div class="card__text">
 			<div class="l-sidebar">
 				<div>
@@ -88,7 +88,7 @@
 		</div>
 	</article>
 
-	<article class="l-sidebar card card--event conference" data-component="card" aria-labelledby="event-4-date event-4-title">
+	<article class="l-sidebar card card--event conference" data-component="card" data-anchor="no" aria-labelledby="event-4-date event-4-title">
 		<div>
 			<div class="not-sidebar card__text">
 				<div class="l-sidebar">

design-system-templates/components/listings-people.html.twig

@@ -1,4 +1,4 @@
-<div class="people-list">
+<div class="people-list" data-anchor="no">
 
 	<div class="l-sidebar card--user">
 		<div>

design-system-templates/components/members.html.twig

@@ -1,4 +1,4 @@
-<div class="component component--members u-full-width">
+<div class="component component--members u-full-width" data-anchor="no">
 	<div class="l-center">
 		<h2 class="visuallyhidden">W3C Members</h2>
 		<p>20 member organizations are involved in the web payment ecosystem, including:</p>

design-system-templates/components/notes.html.twig

@@ -1,19 +1,19 @@
-<div class="l-box note note--info" role="status">
-    <h2 class="txt-saturn">Informative note heading</h2>
+<div class="l-box note note--info" role="status" aria-labelledby="unique-id-1" tabindex="-1" data-anchor="no">
+    <h2 id="unique-id-1" class="txt-saturn">Informative note heading</h2>
     <p>Group calendering is currently in beta-test. We encourage everyone to use it and report feedback and issues to its <a href="#1">dedicated GitHub repository</a>.</p>
 </div>
 
-<div class="l-box note note--success" role="status">
-    <h2 class="txt-saturn">Success note heading</h2>
+<div class="l-box note note--success" role="status" aria-labelledby="unique-id-2" tabindex="-1" data-anchor="no">
+    <h2 id="unique-id-2" class="txt-saturn">Success note heading</h2>
     <p>Main profile successfully updated.</p>
 </div>
 
-<div class="l-box note note--warning" role="status">
-    <h2 class="txt-saturn">Warning note heading</h2>
+<div class="l-box note note--warning" role="status" aria-labelledby="unique-id-3" tabindex="-1" data-anchor="no">
+    <h2 id="unique-id-3" class="txt-saturn">Warning note heading</h2>
     <p>We could not detect your affiliation based on your email address. Please select your affiliation below or <a href="#2">go back to use your corporate email address.</a></p>
 </div>
 
-<div class="l-box note note--error" role="alert">
-    <h2 class="txt-saturn">Error note heading</h2>
+<div class="l-box note note--error" role="alert" aria-labelledby="unique-id-4" tabindex="-1" data-anchor="no">
+    <h2 id="unique-id-4" class="txt-saturn">Error note heading</h2>
     <p>There has been an error.</p>
 </div>