improve accessibility of notes show and comment modal (#7975)

publiclab · Jun 2, 2020 · 352d08e · 352d08e
1 parent 4cc367d
commit 352d08e
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 16 deletions.
diff --git a/app/views/comments/_edit.html.erb b/app/views/comments/_edit.html.erb
@@ -13,7 +13,7 @@
     <% end %>
 
     <div id="c<%= comment.id%>div" class="form-group">
-      <textarea onFocus="editing=true" name="body" class="form-control" id="c<%= comment.id%>text" rows="6" cols="40" placeholder="<%= placeholder %>"><%= !(comment.is_a?Answer) ? comment.comment : comment.content %></textarea>
+      <textarea aria-label="Edit Comment" onFocus="editing=true" name="body" class="form-control" id="c<%= comment.id%>text" rows="6" cols="40" placeholder="<%= placeholder %>"><%= !(comment.is_a?Answer) ? comment.comment : comment.content %></textarea>
 
       <div id="imagebar">
         <div id="c<%= comment.id%>progress" style="display:none;" class="progress progress-striped active pull-right">

diff --git a/app/views/comments/_form.html.erb b/app/views/comments/_form.html.erb
@@ -44,7 +44,7 @@
             <% end %>
           </div>
         <% end %>
-        <textarea style="border: 1px solid #bbb;border-bottom-left-radius: 0;border-bottom-right-radius: 0;border-bottom: 0;padding: 10px;" onFocus="editing=true" name="body" class="form-control" id="text-input" rows="6" cols="40" placeholder="<%= placeholder %>"><%= body %></textarea>
+        <textarea aria-label="Comment Text" style="border: 1px solid #bbb;border-bottom-left-radius: 0;border-bottom-right-radius: 0;border-bottom: 0;padding: 10px;" onFocus="editing=true" name="body" class="form-control" id="text-input" rows="6" cols="40" placeholder="<%= placeholder %>"><%= body %></textarea>
         <div id="imagebar">
 
           <div id="create_progress" style="display:none;" class="progress float-right">
@@ -62,8 +62,7 @@
               </span>
 
               <!-- http://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button -->
-              <label id="input_label" class="" for="fileinput">
-                <input id="fileinput" type="file" name="image[photo]" style="display:none;" />
+                <input aria-label="Choose File" id="fileinput" type="file" name="image[photo]" style="display:none;" />
                 <a onClick="handleClick()" class="d-none d-md-inline text-underline">choose one</a>
                 <span class="d-md-none">
                   <i class="fa fa-upload"></i>
@@ -119,7 +118,7 @@
 
             <span style="color:#888;"> &nbsp;
               <br class="d-md-none" /><%= raw translation('comments._form.logged_in', :username => current_user.username) %> &nbsp;
-              <a target="_blank" href="/wiki/authoring-help#Formatting"><i class="fa fa-question-circle"></i></a> &nbsp;
+              <a aria-label="Authoring Help" target="_blank" href="/wiki/authoring-help#Formatting"><i class="fa fa-question-circle"></i></a> &nbsp;
               <a onClick="changeNotificationIcon('#who-is-notified-form', '#bell')"><i id="bell" class="fa fa-bell-o"></i></a>
             </span>
           </div>

diff --git a/app/views/notes/_comment.html.erb b/app/views/notes/_comment.html.erb
@@ -18,7 +18,7 @@
     <div class="navbar-text float-left">
       <% if comment.author %>
         <% if comment.author && comment.author.photo_file_name %>
-          <img style="width:32px;margin-right:6px;" class="rounded-circle" src="<%= comment.author.photo_path(:thumb) %>" />
+          <img alt="Comment Author Profile Picture" style="width:32px;margin-right:6px;" class="rounded-circle" src="<%= comment.author.photo_path(:thumb) %>" />
         <% else %>
           <div style="vertical-align:middle;display:inline-block;height:32px;width:32px;margin-right:6px;background:#ccc;" class="rounded-circle"></div>
         <% end %>
@@ -53,21 +53,21 @@
         <i data-toggle="tooltip" title="This comment was posted by email." class="fa fa-envelope"></i>
       <% end %>
       <% if current_user && comment.uid == current_user.uid %>
-        <a class="btn btn-outline-secondary btn-sm" id="edit-comment-btn" href="javascript:void(0)" onClick="$('#c<%= comment.cid %>edit').toggle();$('#c<%= comment.cid %>show').toggle();setInit(<%= comment.cid %>);">
+        <a aria-label="Edit comment" class="btn btn-outline-secondary btn-sm" id="edit-comment-btn" href="javascript:void(0)" onClick="$('#c<%= comment.cid %>edit').toggle();$('#c<%= comment.cid %>show').toggle();setInit(<%= comment.cid %>);">
           <i class="fa fa-pencil"></i>
         </a>
       <% end %>
       <% if current_user &. can_moderate? %>
-        <a rel="tooltip" title="Mark as spam" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" data-confirm="Are you sure? The user will no longer be able to log in or publish, and their content will be hidden except comments." href="/admin/mark_comment_spam/<%= comment.id %>">
+        <a aria-label="Mark as spam" rel="tooltip" title="Mark as spam" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" data-confirm="Are you sure? The user will no longer be able to log in or publish, and their content will be hidden except comments." href="/admin/mark_comment_spam/<%= comment.id %>">
           <i class="fa fa-ban"></i>
         </a>
       <% else %>
-        <a rel="tooltip" title="Flag as spam" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" href="mailto:moderators@publiclab.org?subject=Reporting%20spam%20on%20Public%20Lab&body=Hi,%20I%20found%20this%20comment%20that%20looks%20like%20spam%20or%20needs%20to%20be%20moderated:%20https://publiclab.org/<%= comment.parent.path %>#c<%= comment.cid %>%20by%20https://publiclab.org/profile/<% if comment.author %><%= comment.author.name %><% end %>%20Thanks!">
+        <a aria-label="Flag as spam" rel="tooltip" title="Flag as spam" class="btn btn-sm btn-outline-secondary btn-flag-spam-<%= comment.id %>" href="mailto:moderators@publiclab.org?subject=Reporting%20spam%20on%20Public%20Lab&body=Hi,%20I%20found%20this%20comment%20that%20looks%20like%20spam%20or%20needs%20to%20be%20moderated:%20https://publiclab.org/<%= comment.parent.path %>#c<%= comment.cid %>%20by%20https://publiclab.org/profile/<% if comment.author %><%= comment.author.name %><% end %>%20Thanks!">
           <i class="fa fa-flag"></i>
         </a>
       <% end %>
       <% if logged_in_as(['admin', 'moderator']) || (current_user && (comment.uid == current_user.uid || comment.parent.uid == current_user.uid)) %>
-        <a rel="tooltip" title="Delete comment" class="btn btn-outline-secondary btn-sm" id="c<%= comment.cid %>delete-btn">
+        <a aria-label="Delete comment" rel="tooltip" title="Delete comment" class="btn btn-outline-secondary btn-sm" id="c<%= comment.cid %>delete-btn">
           <i class='icon fa fa-trash'></i>
         </a>
       <% end %>
@@ -82,7 +82,7 @@
               <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
               <% str = "/comment/like?comment_id=#{comment.cid}&user_id=#{current_user.uid}&emoji_type=#{capitalized_emoji_name}" %>
               <%= link_to str, data: { method: "post", remote: true }, style: "padding: 0;" do %>
-                <img class="emoji" height="20" width="20" src="<%= emoji_image_map[e] %>">
+                <img alt="React to post" class="emoji" height="20" width="20" src="<%= emoji_image_map[e] %>">
               <% end %>
               <% end %>
         <% end %>
@@ -178,8 +178,8 @@
       <% capitalized_emoji_name = e.split("-").map(&:capitalize).join %>
       <% str = "#{comment.id}-emoji-button-#{e}" %>
       <% display = (emoji_like_map.has_key? capitalized_emoji_name) ? "display: flex;" : "display: none;" %>
-      <button id="<%= str %>" style="border: 0;background: #f1f8ff;border-radius: 0;border-right: 1px solid #e7e7e7;<%= display %>" type="button" class="btn btn-outline-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="<%= user_reactions_map[capitalized_emoji_name] %>">
-        <img height="20" width="20" src="<%= emoji_image_map[e] %>">
+      <button aria-label="Reaction" id="<%= str %>" style="border: 0;background: #f1f8ff;border-radius: 0;border-right: 1px solid #e7e7e7;<%= display %>" type="button" class="btn btn-outline-secondary btn-sm" data-toggle="tooltip" data-placement="bottom" title="<%= user_reactions_map[capitalized_emoji_name] %>">
+        <img alt="<%= str %>" height="20" width="20" src="<%= emoji_image_map[e] %>">
         <div style="margin-left: 6px;font-size: 14px;"><%= emoji_like_map[capitalized_emoji_name] %></div>
       </button>
     <% end %>

diff --git a/app/views/notes/show.html.erb b/app/views/notes/show.html.erb
@@ -32,7 +32,7 @@
               <a href="/profile/<%= coauthor.username %>">
                 <%= coauthor.username%></a> <%= coauthor.new_contributor %>
               <%= ',' if i < @node.coauthors.length-1 %><% end %><% end %>
-              <% if current_user && current_user.id == @node.uid %><a onClick="promptTag('with:')" href="#"><i style="color:#aaa;" class="fa fa-pencil"></i></a><% end %> |
+              <% if current_user && current_user.id == @node.uid %><a aria-label="Add Coauthor" onClick="promptTag('with:')" href="#"><i style="color:#aaa;" class="fa fa-pencil"></i></a><% end %> |
 
       <span class="d-none d-lg-inline">
         <%= @node.created_at.to_s(:long) %>
@@ -42,10 +42,10 @@
       </span>
       <a class="d-lg-none collapse-btn" data-toggle="collapse" href="#collapse-info" role="button" aria-expanded="false" aria-controls="collapse-info" id="collapse-button">...</a>
       <span class="collapse collapse-info" id="collapse-info">
-        | <a href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
+        | <a aria-label="Link to note" href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
       </span>
       <span class="d-none d-lg-inline d-print-none">
-        | <a href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
+        | <a aria-label="Link to note" href="/n/<%= @node.id %>"><i class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
       </span>
     </span>