improve accessibility of wiki show and new wiki (publiclab#7989)

alvesitalo · Oct 14, 2020 · 5e5afdb · 5e5afdb
1 parent fdbed48
commit 5e5afdb
Show file tree

Hide file tree

Showing 5 changed files with 12 additions and 12 deletions.
diff --git a/app/views/editor/_editor.html.erb b/app/views/editor/_editor.html.erb
@@ -1,7 +1,7 @@
 <%= render :partial => "editor/toolbar" %>
 
 <div class="form-group dropzone">
-  <textarea name="body" tabindex="2" class="form-control" id="text-input" rows="20" cols="60"><% if @node && @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
+  <textarea aria-label="Wiki Text" name="body" tabindex="2" class="form-control" id="text-input" rows="20" cols="60"><% if @node && @node.latest && @node.latest.body %><%= @node.latest.body %><% else %><%= params[:body] %><% end %></textarea>
   <div id="imagebar">
     <div style="display:none;" id="create_progress" class="progress progress-striped active pull-right">
       <div id="create_progress-bar" class="progress-bar" style="width: 0%;"></div>
@@ -14,18 +14,18 @@
 
       <span id="create_prompt" class="prompt">
         <span style="padding-right:4px;float:left;" class="d-md-none d-lg-block">
-          Drag and drop to add an image or file, or 
+          Drag and drop to add an image or file, or
         </span>
 
         <!-- http://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button -->
         <label class="" for="fileinput">
           <input id="fileinput" type="file" name="image[photo]" style="display:none;" />
           <a class="d-none d-md-inline">choose one</a>
           <span class="d-md-none">
-            <i class="fa fa-upload"></i> 
+            <i class="fa fa-upload"></i>
             <a>Upload image</a>
           </span>
-        </label> 
+        </label>
       </span>
 
     </p>

diff --git a/app/views/editor/_main_image.html.erb b/app/views/editor/_main_image.html.erb
@@ -16,18 +16,18 @@
   <div class="side-dropzone" id="side-dropzone">
     <p class="prompt">
       <span class="d-md-none d-lg-block">
-        Drag and drop to add an image, or 
+        Drag and drop to add an image, or
       </span>
 
       <!-- http://stackoverflow.com/questions/11235206/twitter-bootstrap-form-file-element-upload-button -->
       <label style="cursor:pointer;" for="side-fileinput">
         <input id="side-fileinput" type="file" name="image[photo]" style="display:none;" />
         <a class="d-none d-md-block">choose one</a>
         <span class="d-md-none">
-          <i class="fa fa-upload"></i> 
+          <i class="fa fa-upload"></i>
           <a>Upload image</a>
         </span>
-      </label> 
+      </label>
 
     </p>
     <br class="d-md-none d-lg-block" />

diff --git a/app/views/editor/_toolbar.html.erb b/app/views/editor/_toolbar.html.erb
@@ -7,7 +7,7 @@
   </div>
 
   <div class="btn-group mr-2">
-    <a data-toggle="tooltip" title="Make a link" data-placement="bottom" class="btn btn-outline-secondary btn-sm" href="javascript:void(0)" onClick="$E.link()"><i class="fa fa-link"></i></a>
+    <a aria-label="Make a link" data-toggle="tooltip" title="Make a link" data-placement="bottom" class="btn btn-outline-secondary btn-sm" href="javascript:void(0)" onClick="$E.link()"><i class="fa fa-link"></i></a>
   </div>
 
   <div class="dropdown mr-2">
@@ -30,7 +30,7 @@
   </div>
 
   <div class="btn-group">
-    <a data-toggle="tooltip" title="Help" data-placement="bottom" class="btn btn-outline-secondary btn-sm" target="_blank" href="/wiki/authoring-help"><i class="fa fa-question-circle" ></i></a>
+    <a aria-label="Help" data-toggle="tooltip" title="Help" data-placement="bottom" class="btn btn-outline-secondary btn-sm" target="_blank" href="/wiki/authoring-help"><i class="fa fa-question-circle" ></i></a>
   </div>
 
 </div>
diff --git a/app/views/wiki/_header.html.erb b/app/views/wiki/_header.html.erb
@@ -33,8 +33,8 @@
       <span class="d-none d-lg-inline">
         <span rel="tooltip" title="The number of authors for this page." data-placement="top"><i style="color:#888;" class="fa fa-user"></i> <%= number_with_delimiter(@node.authors.length) %></span>  |
         <a rel="tooltip" title="View all revisions for this page." data-placement="top" href="/wiki/revisions/<%= @node.slug_from_path %>"><i style="color:#888;" class="fa fa-history"></i> <%= @node.revisions.length %></a> |
-        <a href="/talk/<%= @node.slug_from_path %>" rel="tooltip" title="Practice in a realtime doc." data-placement="top"><i class="fa fa-comment"></i></a> |
-        <a href="/n/<%= @node.id %>"><i style="color:#888;" 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="Practice in a realtime doc" href="/talk/<%= @node.slug_from_path %>" rel="tooltip" title="Practice in a realtime doc." data-placement="top"><i class="fa fa-comment"></i></a> |
+        <a aria-label="Link to wiki" href="/n/<%= @node.id %>"><i style="color:#888;" class="fa fa-link"></i></a> <span class="d-none d-xl-inline"><a href="/n/<%= @node.id %>">#<%= @node.id %></a></span>
       </span>
     </div>
   </div>

diff --git a/app/views/wiki/edit.html.erb b/app/views/wiki/edit.html.erb
@@ -57,7 +57,7 @@
           <input class="form-control" id="taginput" type="hidden" name="tags" value="<%= params[:tags] %>" />
 
           <div class="form-group">
-            <input tabindex="1" name="title" type="text" class="form-control" id="title" value="<% if @node && @node.latest %><%= @node.latest.title %><% else %><%= params[:title] %><% end %>">
+            <input aria-label="Wiki Title" tabindex="1" name="title" type="text" class="form-control" id="title" value="<% if @node && @node.latest %><%= @node.latest.title %><% else %><%= params[:title] %><% end %>">
           </div>
 
           <script>