Merge pull request #415 from zendesk/emma/votes-question-heading-level

[A11y] Make "Was this article helpful?" a `h2`
zendesk · Aug 25, 2023 · 180a5aa · 180a5aa
2 parents 93a6b03 + bb5db8f
commit 180a5aa
Show file tree

Hide file tree

Showing 3 changed files with 12 additions and 1 deletion.
diff --git a/style.css b/style.css
@@ -1856,6 +1856,11 @@ ul {
   padding: 30px 0;
   text-align: center;
 }
+.article-votes-question {
+  font-size: 15px;
+  font-weight: normal;
+  margin-bottom: 0;
+}
 .article-vote {
   margin: 10px 5px;
   min-width: 90px;

diff --git a/styles/_article.scss b/styles/_article.scss
@@ -159,6 +159,12 @@
     border-top: 1px solid $low-contrast-border-color;
     padding: 30px 0;
     text-align: center;
+
+    &-question { // Explicit values for rendering h2 like a span for accessibility.
+      font-size: $font-size-base;
+      font-weight: normal;
+      margin-bottom: 0;
+    }
   }
 
   &-vote {

diff --git a/templates/article_page.hbs b/templates/article_page.hbs
@@ -148,7 +148,7 @@
         </div>
         {{#with article}}
           <div class="article-votes">
-            <span class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</span>
+            <h2 class="article-votes-question" id="article-votes-label">{{t 'was_this_article_helpful'}}</h2>
             <div class="article-votes-controls" role="group" aria-labelledby="article-votes-label">
               {{vote 'up' class='button article-vote article-vote-up' selected_class="button-primary"}}
               {{vote 'down' class='button article-vote article-vote-down' selected_class="button-primary"}}