From 27f02c2dc956a9ce1302d57b3737b0f5c7ad29d8 Mon Sep 17 00:00:00 2001
From: "Tada, Tadashi" <t@tdtds.jp>
Date: Fri, 30 Apr 2021 17:23:48 +0900
Subject: [PATCH] improve accessibility

* add 'aria-label' into some elements without the label
* add 'aris-label' into some visual elements
* replace some 'a' elements have a button action to 'button'
---
 app/assets/javascripts/bootstrap-timepicker.js |  4 ++--
 app/views/admin/get_all_users.html.erb         |  2 +-
 app/views/admin/get_user.html.erb              |  2 +-
 app/views/dashboard/home.html.erb              | 12 ++++++------
 app/views/layouts/shared/_header.html.erb      |  8 ++++----
 app/views/layouts/shared/_messages.html.erb    |  6 +++---
 6 files changed, 17 insertions(+), 17 deletions(-)

diff --git a/app/assets/javascripts/bootstrap-timepicker.js b/app/assets/javascripts/bootstrap-timepicker.js
index 9d984e0..789473d 100755
--- a/app/assets/javascripts/bootstrap-timepicker.js
+++ b/app/assets/javascripts/bootstrap-timepicker.js
@@ -745,14 +745,14 @@
                 case 'modal':
                     template = '<div class="bootstrap-timepicker modal hide fade in" style="top: 30%; margin-top: 0; width: 200px; margin-left: -100px;" data-backdrop="'+ (this.modalBackdrop ? 'true' : 'false') +'">'+
                                    '<div class="modal-header">'+
-                                       '<a href="#" class="close" data-dismiss="modal">×</a>'+
+                                       '<a href="#" class="close" aria-label="dismiss" data-dismiss="modal">×</a>'+
                                        '<h4>Pick a Time</h4>'+
                                    '</div>'+
                                    '<div class="modal-content">'+
                                         templateContent +
                                    '</div>'+
                                    '<div class="modal-footer">'+
-                                       '<a href="#" class="btn btn-primary" data-dismiss="modal">Ok</a>'+
+                                       '<a href="#" class="btn btn-primary" aria-label=dismiss" data-dismiss="modal">Ok</a>'+
                                    '</div>'+
                                '</div>';
 
diff --git a/app/views/admin/get_all_users.html.erb b/app/views/admin/get_all_users.html.erb
index 8f3bf5d..bf092ea 100755
--- a/app/views/admin/get_all_users.html.erb
+++ b/app/views/admin/get_all_users.html.erb
@@ -26,7 +26,7 @@
               <%= u.email%>
             </td>
             <td>
-              <%= u.admin ? %{<span class="fs1" aria-hidden="true" data-icon="&#xe0fe;"}.html_safe : nil %>
+              <%= u.admin ? %{<span class="fs1" aria-label="check" data-icon="&#xe0fe;"}.html_safe : nil %>
             </td>
             <td>
               <%= link_to "Edit", "#", {:onClick => "javascript:openEditModal(#{u.id});", :role => "button", :style => "width:70px", :class => "btn btn-inverse", "data-toggle" => "modal"}%>
diff --git a/app/views/admin/get_user.html.erb b/app/views/admin/get_user.html.erb
index bce0e23..5ee2432 100755
--- a/app/views/admin/get_user.html.erb
+++ b/app/views/admin/get_user.html.erb
@@ -1,6 +1,6 @@
 <!-- Begin Modal -->
     <div class="modal-header">
-      <button type="button" class="close" data-dismiss="modal" aria-hidden="true">
+      <button type="button" class="close" data-dismiss="modal" aria-label="dismiss">
         ×
       </button>
       <h4 id="myModalLabel1">
diff --git a/app/views/dashboard/home.html.erb b/app/views/dashboard/home.html.erb
index b103978..c923c49 100644
--- a/app/views/dashboard/home.html.erb
+++ b/app/views/dashboard/home.html.erb
@@ -10,12 +10,12 @@
             <!-- Begin Title Buttons-->
             <div class="tools pull-right">
               <div class="btn-group">
-                <a id="change_to_bar_graph" class="btn btn-small">
-                  <span data-icon="&#xe14b;"></span>
-                </a>
-                <a id="change_to_pie_charts" class="btn btn-small">
-                  <span data-icon="&#xe096;"></span>
-                </a>
+                <button id="change_to_bar_graph" class="btn btn-small">
+                  <span aria-label="change to bar graph" data-icon="&#xe14b;"></span>
+                </button>
+                <button id="change_to_pie_charts" class="btn btn-small">
+                  <span aria-label="change to pie charts" data-icon="&#xe096;"></span>
+                </button>
               </div>
             </div>
             <!-- End Title Buttons-->
diff --git a/app/views/layouts/shared/_header.html.erb b/app/views/layouts/shared/_header.html.erb
index 371f8aa..24b39ca 100755
--- a/app/views/layouts/shared/_header.html.erb
+++ b/app/views/layouts/shared/_header.html.erb
@@ -3,14 +3,14 @@
       
       <span style="color:#eee;margin-left:10px;">
         Font Size:
-        <a data-no-turbolink='true' href="/dashboard/home?font=8pt" style="font-size:10pt;color:#eee;">A</a>
-        <a data-no-turbolink='true' href="/dashboard/home?font=200%25" style="font-size:18pt;color:#eee;">A</a>
+        <a data-no-turbolink='true' href="/dashboard/home?font=8pt" style="font-size:10pt;color:#eee" aria-label="small font">A</a>
+        <a data-no-turbolink='true' href="/dashboard/home?font=200%25" style="font-size:18pt;color:#eee;" aria-label="large font">A</a>
       </span>
       
       <div class="user-profile">
-        <a data-toggle="dropdown" class="dropdown-toggle">
+        <button data-toggle="dropdown" class="dropdown-toggle">
           <img src=" <%= image_path('profile_color.jpg')%>"  alt="profile">
-        </a>
+        </button>
         <span class="caret"></span>
         <ul class="dropdown-menu pull-right">
           <li>
diff --git a/app/views/layouts/shared/_messages.html.erb b/app/views/layouts/shared/_messages.html.erb
index 08ef212..6ca5542 100755
--- a/app/views/layouts/shared/_messages.html.erb
+++ b/app/views/layouts/shared/_messages.html.erb
@@ -2,17 +2,17 @@
   <% name = name.to_sym %>
   <% if name == :error %>
     <div class="alert alert-error">
-      <a class="close" data-dismiss="alert" href="#">×</a>
+      <a class="close" aria-label="dismiss" data-dismiss="alert" href="#">×</a>
           <%= content_tag :div, msg, :id => "flash_notice" %>
     </div>
   <% elsif name == :success %>
     <div class="alert alert-success">
-      <a class="close" data-dismiss="alert" href="#">×</a>
+      <a class="close" aria-label="dismiss" data-dismiss="alert" href="#">×</a>
           <%= content_tag :div, msg, :id => "flash_notice" %>
     </div>
   <% elsif name == :info %>
     <div class="alert alert-info">
-      <a class="close" data-dismiss="alert" href="#">×</a>
+      <a class="close" aria-label="dismiss" data-dismiss="alert" href="#">×</a>
         <%= content_tag :div, msg, :id => "flash_notice" %>
     </div>
   <% end %>