Enhance Calendar Date screen reader UX (#2040)

Author: gerardo-rodriguez

.changeset/dry-kangaroos-try.md

@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Enhance Calendar Date screen reader UX

src/components/calendar-date/calendar-date.twig

@@ -1,21 +1,31 @@
-{% set datetime = datetime|default('now') %}
-{% set days = days|default(1) %}
+{% set _datetime = datetime|default('now') %}
 {% set _note %}{% block note %}{{ note }}{% endblock %}{% endset %}
 
-<time class="c-calendar-date c-calendar-date--{{ datetime|date('F')|lower }}{% if class %} {{ class }}{% endif %}"
-  datetime="{{ datetime|date('Y-m-d') }}"
+<div
+  class="c-calendar-date c-calendar-date--{{ _datetime|date('F')|lower }}{% if class %} {{ class }}{% endif %}"
 >
-  <span class="c-calendar-date__header">
-    {{ datetime|date('M') }}
+  {# The abbreviated month is aria-hidden as it's only presentational #}
+  <span class="c-calendar-date__header" aria-hidden="true">
+    {{ _datetime|date('M') }}
   </span>
+
   <span class="c-calendar-date__main">
-    <span class="c-calendar-date__day">
-      {{ datetime|date('j') }}
-    </span>
+    <time class="c-calendar-date__day" datetime="{{ _datetime|date('Y-m-d') }}">
+      {# The day of the month is aria-hidden as it's only presentational #}
+      <span aria-hidden="true">{{ _datetime|date('j') }}</span>
+      {# The full date is accessible to screen readers to provide full context #}
+      <span class="u-hidden-visually">{{ _datetime|date('F j, o') }}</span>
+    </time>
+
     {% if _note %}
       <span class="c-calendar-date__note">
         {{ _note }}
       </span>
+    {% else %}
+      {#
+        A default visually hidden note to provide extra context for screen reader users.
+      #}
+      <span class="u-hidden-visually">Single-day event</span>
     {% endif %}
   </span>
-</time>
+</div>

src/components/media-summary/demo/event.twig

@@ -1,5 +1,5 @@
 {% embed '@cloudfour/components/media-summary/media-summary.twig' with {
-  heading: "Smashing Magazine",
+  heading: "SmashingConf New York",
   href: "https://cloudfour.com",
   reverse_markup: true,
 } only %}