From ce199d04ed06a7cad4156953810fb32044544e87 Mon Sep 17 00:00:00 2001
From: Paul Hebert <paul@cloudfour.com>
Date: Thu, 9 Sep 2021 12:16:30 -0700
Subject: [PATCH] Use aria-labelledby to add accessible names to articles

---
 .changeset/rude-pears-breathe.md    |  5 +++++
 src/components/comment/comment.twig | 29 +++++++++++++++--------------
 2 files changed, 20 insertions(+), 14 deletions(-)
 create mode 100644 .changeset/rude-pears-breathe.md

diff --git a/.changeset/rude-pears-breathe.md b/.changeset/rude-pears-breathe.md
new file mode 100644
index 000000000..6afba3bb8
--- /dev/null
+++ b/.changeset/rude-pears-breathe.md
@@ -0,0 +1,5 @@
+---
+'@cloudfour/patterns': patch
+---
+
+Add accessible names to comments
diff --git a/src/components/comment/comment.twig b/src/components/comment/comment.twig
index 2ca92afe1..09ac577e1 100644
--- a/src/components/comment/comment.twig
+++ b/src/components/comment/comment.twig
@@ -12,22 +12,23 @@
 <article
   class="c-comment {{_comment_modifiers}}"
   id="comment-{{comment.ID}}"
+  aria-labelledby="comment-heading-{{comment.ID}}"
 >
-<header class="c-comment__header">
-  {% block header_content %}
-    <h{{_heading_depth}} class="c-comment__heading">
-      {% block heading_content %}
-        {% block author_title %}
-          {{comment.author.name}}
-        {% endblock %}
+  <header class="c-comment__header">
+    {% block header_content %}
+      <h{{_heading_depth}} class="c-comment__heading" id="comment-heading-{{comment.ID}}">
+        {% block heading_content %}
+          {% block author_title %}
+            {{comment.author.name}}
+          {% endblock %}
 
-        <span class="u-hidden-visually">
-          {% if comment.is_child %}replied{% else %}said{% endif %}:
-        </span>
-      {% endblock %}
-    </h{{_heading_depth}}>
-  {% endblock %}
-</header>
+          <span class="u-hidden-visually">
+            {% if comment.is_child %}replied{% else %}said{% endif %}:
+          </span>
+        {% endblock %}
+      </h{{_heading_depth}}>
+    {% endblock %}
+  </header>
   <div class="c-comment__object">
     {% include '@cloudfour/components/avatar/avatar.twig' with {
       src: comment.avatar,