feat: aria descriptions on vote controls

zendesk · Dec 13, 2022 · 6500305 · 6500305
1 parent 5414f38
commit 6500305
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 8 deletions.
diff --git a/templates/article_page.hbs b/templates/article_page.hbs
@@ -220,7 +220,7 @@
                           <img src="{{author.avatar_url}}" alt="" class="user-avatar"/>
                         </div>
                         <div class="comment-meta">
-                          <span title="{{author.name}}">
+                          <span title="{{author.name}}" id="{{anchor}}-author">
                             {{#link 'user_profile' id=author.id}}
                               {{author.name}}
                             {{/link}}
@@ -282,18 +282,18 @@
                         </div>
                       </div>
 
-                      <section class="comment-body">{{body}}</section>
+                      <section class="comment-body" id="{{anchor}}-body">{{body}}</section>
                     </div>
 
                     <div class="comment-actions-container">
                       <div class="comment-vote vote" role="group">
-                        {{#vote 'up' role='radio' class='vote-up' selected_class='vote-voted'}}
+                        {{#vote 'up' role='radio' class='vote-up' selected_class='vote-voted' aria-describedby=(concat anchor "-author " anchor "-body")}}
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
                           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"/>
                         </svg>
                         {{/vote}}
                         {{vote 'sum' class='vote-sum'}}
-                        {{#vote 'down' role='radio' class='vote-down' selected_class='vote-voted'}}
+                        {{#vote 'down' role='radio' class='vote-down' selected_class='vote-voted' aria-describedby=(concat anchor "-author " anchor "-body")}}
                         <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
                           <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"/>
                         </svg>

diff --git a/templates/community_post_page.hbs b/templates/community_post_page.hbs
@@ -226,7 +226,7 @@
                     <img src="{{author.avatar_url}}" alt="" class="user-avatar"/>
                   </div>
                   <div class="comment-meta">
-                    <span title="{{author.name}}">
+                    <span title="{{author.name}}" id="{{anchor}}-author">
                       {{#link 'user_profile' id=author.id}}
                         {{author.name}}
                       {{/link}}
@@ -289,19 +289,19 @@
                   </div>
                 </div>
 
-                <section class="comment-body">{{body}}</section>
+                <section class="comment-body" id="{{anchor}}-body">{{body}}</section>
               </div>
 
               <div class="comment-actions-container">
                 {{#unless official}}
                   <div class="comment-vote vote" role="group">
-                    {{#vote 'up' role='radio' class='vote-up' selected_class='vote-voted'}}
+                    {{#vote 'up' role='radio' class='vote-up' selected_class='vote-voted' aria-describedby=(concat anchor "-author " anchor "-body")}}
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
                       <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"/>
                     </svg>
                     {{/vote}}
                     {{vote 'sum' class='vote-sum'}}
-                    {{#vote 'down' role='radio' class='vote-down' selected_class='vote-voted'}}
+                    {{#vote 'down' role='radio' class='vote-down' selected_class='vote-voted' aria-describedby=(concat anchor "-author " anchor "-body")}}
                     <svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" focusable="false" viewBox="0 0 16 16">
                       <path fill="none" stroke="currentColor" stroke-linecap="round" stroke-width="2" d="M4 6.5l3.6 3.6c.2.2.5.2.7 0L12 6.5"/>
                     </svg>