Merge pull request #116 from w3c/hotfix/#410-event-labelling

Hotfix/#410 event labelling
w3c · Aug 1, 2023 · 7f23f8a · 7f23f8a
2 parents 4467975 + 95c3755
commit 7f23f8a
Show file tree

Hide file tree

Showing 6 changed files with 45 additions and 24 deletions.
diff --git a/design-system-templates/components/listings-events.html.twig b/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-title event-1-date">
+	<article class="card card--event meeting" data-component="card" aria-labelledby="event-1-date event-1-title">
 		<div class="card__text">
 			<div class="l-sidebar">
 				<div>
@@ -11,10 +11,10 @@
 					<div class="sidebar">
 						<div class="date-location">
 							<div>
-								<img src="/dist/assets/svg/calendar.svg" width="18" height="20" alt aria-hidden="true" />
+								<img src="/dist/assets/svg/calendar.svg" width="18" height="20" alt aria-hidden="true">
 							</div>
 							<div>
-								<p class="date-orig" id="event-1-date"><time datetime="2021-01-28T18:00Z">28 January 2021, 18:00 - 19:30 UTC</time></p>
+								<p class="date-orig"><time datetime="2021-01-28T18:00Z"><span id="event-1-date">28 January 2021</span>, 18:00 - 19:30 UTC</time></p>
 								<p>Online</p>
 							</div>
 						</div>
@@ -26,7 +26,7 @@
 		</div>
 	</article>
 
-	<article class="card card--event workshop" data-component="card" aria-labelledby="event-2-title event-2-date">
+	<article class="card card--event workshop" data-component="card" aria-labelledby="event-2-date event-2-title">
 		<div class="card__text">
 			<div class="l-sidebar">
 				<div>
@@ -37,10 +37,10 @@
 					<div class="sidebar">
 						<div class="date-location">
 							<div>
-								<img src="/dist/assets/svg/calendar.svg" width="18" height="20" alt aria-hidden="true" />
+								<img src="/dist/assets/svg/calendar.svg" width="18" height="20" alt aria-hidden="true">
 							</div>
 							<div>
-								<p class="date-orig" id="event-2-date"><time datetime="2021-01-28T18:00Z">28 January 2021, 18:00 - 19:30 UTC</time></p>
+                                <p class="date-orig"><time datetime="2021-01-28T18:00Z"><span id="event-2-date">28 January 2021</span>, 18:00 - 19:30 UTC</time></p>
 								<p>Online</p>
 							</div>
 						</div>
@@ -57,7 +57,7 @@
 		</div>
 	</article>
 
-	<article class="card card--event talk" data-component="card" aria-labelledby="event-3-title event-3-date">
+	<article class="card card--event talk" data-component="card" aria-labelledby="event-3-date event-3-title">
 		<div class="card__text">
 			<div class="l-sidebar">
 				<div>
@@ -68,10 +68,10 @@
 					<div class="sidebar">
 						<div class="date-location">
 							<div>
-								<img src="/dist/assets/svg/calendar.svg" width="18" height="20" alt aria-hidden="true" />
+								<img src="/dist/assets/svg/calendar.svg" width="18" height="20" alt aria-hidden="true">
 							</div>
 							<div>
-								<p class="date-orig" id="event-3-date"><time datetime="2021-01-28T18:00Z">28 January 2021, 18:00 - 19:30 UTC</time></p>
+                                <p class="date-orig"><time datetime="2021-01-28T18:00Z"><span id="event-3-date">28 January 2021</span>, 18:00 - 19:30 UTC</time></p>
 								<p>Online</p>
 							</div>
 						</div>
@@ -88,7 +88,7 @@
 		</div>
 	</article>
 
-	<article class="l-sidebar card card--event conference" data-component="card" aria-labelledby="event-4-title event-4-date">
+	<article class="l-sidebar card card--event conference" data-component="card" aria-labelledby="event-4-date event-4-title">
 		<div>
 			<div class="not-sidebar card__text">
 				<div class="l-sidebar">
@@ -100,10 +100,10 @@
 						<div class="sidebar">
 							<div class="date-location">
 								<div>
-									<img src="/dist/assets/svg/calendar.svg" width="18px" height="20px" alt aria-hidden="true" />
+									<img src="/dist/assets/svg/calendar.svg" width="18px" height="20px" alt aria-hidden="true">
 								</div>
 								<div>
-									<p class="date-orig" id="event-4-date"><time datetime="2021-01-28T18:00Z">28 January 2021, 18:00 - 19:30 UTC</time></p>
+                                    <p class="date-orig"><time datetime="2021-01-28T18:00Z"><span id="event-4-date">28 January 2021</span>, 18:00 - 19:30 UTC</time></p>
 									<p>NEC Birmingham, U.K.</p>
 								</div>
 							</div>

diff --git a/src/Twig/TwigExtension.php b/src/Twig/TwigExtension.php
@@ -196,7 +196,8 @@ public function dateRange(
         DateTimeInterface $originalEnd,
         string $tz,
         string $locale,
-        bool $utc = false
+        bool $utc = false,
+        string $id = null
     ): string {
         if ($locale == 'en') {
             $locale = 'en-GB';
@@ -232,7 +233,9 @@ public function dateRange(
                 'end_date'   => $endDate,
                 'end_time'   => $endTime,
                 'timezone'   => $timezone,
-                'same_day'   => $sameDay
+                'same_day'   => $sameDay,
+                'with_id'    => $id != null,
+                'id'         => $id
             ],
             'w3c_website_templates_bundle'
         );

diff --git a/templates/components/listings/events/entry.html.twig b/templates/components/listings/events/entry.html.twig
@@ -26,7 +26,7 @@
                             </div>
                             <div>
                                 <p class="date-orig">
-                                    {% block event_dates %}{{ date_range(entry.start, entry.end, entry.tz, site.locale)|raw }}{% endblock %}
+                                    {% block event_dates %}{{ date_range(entry.start, entry.end, entry.tz, site.locale, false, 'event-' ~ index ~ '-date')|raw }}{% endblock %}
                                 </p>
                                 {% block event_location %}
                                     {% if entry.location %}

diff --git a/translations/w3c_website_templates_bundle+intl-icu.en.yaml b/translations/w3c_website_templates_bundle+intl-icu.en.yaml
@@ -195,9 +195,15 @@ notes:
 events:
     # same_day = 1 when start_date == end_date
     date_range: >-
-        {same_day, select,
-            1  {<time datetime="{iso_start}">{start_date}, {start_time}</time>–<time datetime="{iso_end}">{end_time}</time> {timezone}}
-            other {<time datetime="{iso_start}">{start_date}, {start_time}</time> – <time datetime="{iso_end}">{end_date}, {end_time}</time> {timezone}}
+        {with_id, select,
+            1   {{same_day, select,
+                1  {<time datetime="{iso_start}"><span id="{id}">{start_date}</span>, {start_time}</time>–<time datetime="{iso_end}">{end_time}</time> {timezone}}
+                other {<time datetime="{iso_start}"><span id={id}>{start_date}</span>, {start_time}</time> – <time datetime="{iso_end}">{end_date}, {end_time}</time> {timezone}}
+            }}
+            other   {{same_day, select,
+                1  {<time datetime="{iso_start}">{start_date}, {start_time}</time>–<time datetime="{iso_end}">{end_time}</time> {timezone}}
+                other {<time datetime="{iso_start}">{start_date}, {start_time}</time> – <time datetime="{iso_end}">{end_date}, {end_time}</time> {timezone}}
+            }}
         }
     add_to_calendar: Add to calendar
     event_details: Event details

diff --git a/translations/w3c_website_templates_bundle+intl-icu.ja.yaml b/translations/w3c_website_templates_bundle+intl-icu.ja.yaml
@@ -178,9 +178,15 @@ notes:
 events:
     # same_day = 1 when start_date == end_date
     date_range: >-
-        {same_day, select,
-            1  {{start_date}, {start_time} - {end_time} <b>{timezone}</b>}
-            other {{start_date}, {start_time} - {end_date}, {end_time} <b>{timezone}</b>}
+        {with_id, select,
+            1   {{same_day, select,
+                1  {<time datetime="{iso_start}"><span id="{id}">{start_date}</span>, {start_time}</time>–<time datetime="{iso_end}">{end_time}</time> {timezone}}
+                other {<time datetime="{iso_start}"><span id={id}>{start_date}</span>, {start_time}</time> – <time datetime="{iso_end}">{end_date}, {end_time}</time> {timezone}}
+            }}
+            other   {{same_day, select,
+                1  {<time datetime="{iso_start}">{start_date}, {start_time}</time>–<time datetime="{iso_end}">{end_time}</time> {timezone}}
+                other {<time datetime="{iso_start}">{start_date}, {start_time}</time> – <time datetime="{iso_end}">{end_date}, {end_time}</time> {timezone}}
+            }}
         }
     add_to_calendar: __events.add_to_calendar
     event_details: __events.event_details

diff --git a/translations/w3c_website_templates_bundle+intl-icu.zh-hans.yaml b/translations/w3c_website_templates_bundle+intl-icu.zh-hans.yaml
@@ -191,9 +191,15 @@ notes:
 events:
     # same_day = 1 when start_date == end_date
     date_range: >-
-        {same_day, select,
-            1  {{start_date}, {start_time} - {end_time} <b>{timezone}</b>}
-            other {{start_date}, {start_time} - {end_date}, {end_time} <b>{timezone}</b>}
+        {with_id, select,
+            1   {{same_day, select,
+                1  {<time datetime="{iso_start}"><span id="{id}">{start_date}</span>, {start_time}</time>–<time datetime="{iso_end}">{end_time}</time> {timezone}}
+                other {<time datetime="{iso_start}"><span id={id}>{start_date}</span>, {start_time}</time> – <time datetime="{iso_end}">{end_date}, {end_time}</time> {timezone}}
+            }}
+            other   {{same_day, select,
+                1  {<time datetime="{iso_start}">{start_date}, {start_time}</time>–<time datetime="{iso_end}">{end_time}</time> {timezone}}
+                other {<time datetime="{iso_start}">{start_date}, {start_time}</time> – <time datetime="{iso_end}">{end_date}, {end_time}</time> {timezone}}
+            }}
         }
     add_to_calendar: 添加到日历
     event_details: 事件详情