Merge pull request #4206 from radinamatic/a11y-icons

Make font icons accessible all around
learningequality · Sep 1, 2015 · b5165c3 · b5165c3
2 parents fcd8d15 + 57a3568
commit b5165c3
Show file tree

Hide file tree

Showing 12 changed files with 38 additions and 25 deletions.
diff --git a/kalite/control_panel/templates/control_panel/base.html b/kalite/control_panel/templates/control_panel/base.html
@@ -58,7 +58,8 @@
                 {% if facility or device %}</a>
                 {% elif own_device_is_trusted %}
                 <a class="edit-link" href="{% url 'zone_form' zone_id=zone_id %}">
-                    <span class="glyphicon glyphicon-pencil" title="{% trans 'Edit' %}"></span>
+                    <span aria-hidden="true"><i class="glyphicon glyphicon-pencil" title="{% trans 'Edit' %}"></i></span>
+                    <span class="sr-only">{% trans 'Edit' %}</span>
                 </a>
                 {% endif %}
             </li>
@@ -74,8 +75,9 @@
                 {% else %}
                 {{ facility.name }}
                 <a class="edit-link edit-facility" href="{% url 'facility_form' zone_id=zone_id facility_id=facility.id %}">
-                <span class="glyphicon glyphicon-pencil" title="{% trans 'Edit' %}"></span>
-              </a>
+                    <span aria-hidden="true"><i class="glyphicon glyphicon-pencil" title="{% trans 'Edit' %}"></i></span>
+                    <span class="sr-only">{% trans 'Edit' %}</span>
+                </a>
                 {% endif %}
             </li>
             {% endif %}

diff --git a/kalite/control_panel/templates/control_panel/device_management.html b/kalite/control_panel/templates/control_panel/device_management.html
@@ -115,10 +115,10 @@ <h3>
                     {% else %}
                         <h3>
                             {% if sync_job.last_run_successful %}
-                                <span class="glyphicon glyphicon-ok-circle text-success"></span>
+                                <span aria-hidden="true"><i class="glyphicon glyphicon-ok-circle text-success"></i></span>
                                 {% trans "The last sync completed successfully" %}
                             {% else %}
-                                <span class="glyphicon glyphicon-remove-circle text-danger"></span>
+                                <span aria-hidden="true"><i class="glyphicon glyphicon-remove-circle text-danger"></i></span>
                                 {% trans "There was an error during the last sync" %}
                             {% endif %}
                             <small class="toggle-sync-details"><a><span class="show-detail-text">{% trans "show details" %}</span> <span class="caret-indicator caret"></span></a></small>

diff --git a/kalite/control_panel/templates/control_panel/partials/_coaches_table.html b/kalite/control_panel/templates/control_panel/partials/_coaches_table.html
@@ -9,7 +9,8 @@
             <div class="col-md-12">
                 <h2>{% trans "Coaches" %} 
                 <small>
-                    <span class="help-tooltip glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title='{% trans "Coaches assist learners to learn, and can be teachers, parents, or fellow students." %}'></span>
+                    <span class="help-tooltip glyphicon glyphicon-question-sign" aria-hidden="true" data-toggle="tooltip" data-placement="right" title='{% trans "Coaches assist learners to learn, and can be teachers, parents, or fellow students." %}'></span>
+                    <!---TODO - Radina: implement accessible tooltip. -->
                 </small>
             </div>
         </div>
@@ -54,7 +55,8 @@ <h2>{% trans "Coaches" %}
                                 </td>
                                 <td>
                                     <a title="{% blocktrans with coachname=coach|format_name:"last_first" %}Edit user info for coach {{ coachname }}{% endblocktrans %}" href="{% url 'edit_facility_user' facility_user_id=coach.id %}?facility={{ facility_id }}&next={{ request.get_full_path|urlencode }}">
-                                        <span class="glyphicon glyphicon-pencil"></span>
+                                        <span aria-hidden="true"><i class="glyphicon glyphicon-pencil"></i></span>
+                                        <span class="sr-only">{% blocktrans with coachname=coach|format_name:"last_first" %}Edit user info for coach {{ coachname }}{% endblocktrans %}</span>
                                     </a>
                                 </td>
                                 <td>{{ coach.total_logins }}</td>
@@ -76,7 +78,7 @@ <h2>{% trans "Coaches" %}
         <div class="row table-bottom-options">
             <div class="col-sm-4 col-xs-12">
                 <p class="add-new-table-item">
-                    <a href="{% url  'add_facility_teacher' %}?facility={{ facility_id }}"><span class="glyphicon glyphicon-plus-sign"></span> {% trans 'Add a new coach.' %}</a>
+                    <a href="{% url  'add_facility_teacher' %}?facility={{ facility_id }}"><span aria-hidden="true"><i class="glyphicon glyphicon-plus-sign"></i></span> {% trans 'Add a new coach.' %}</a>
                 </p>
             </div>
             <div class="col-sm-4 col-xs-12">

diff --git a/kalite/control_panel/templates/control_panel/partials/_device_table.html b/kalite/control_panel/templates/control_panel/partials/_device_table.html
@@ -8,6 +8,7 @@ <h2>
             {% trans "Devices" %}
             <small>
                 <span class="help-tooltip glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title='{% trans "A device is a KA Lite installation." %} {% trans "Devices in the same sharing network sync user data with each other." %}'></span>
+                <!---TODO - Radina: implement accessible tooltip. -->
             </small>
         </h2>
     </div>

diff --git a/kalite/control_panel/templates/control_panel/partials/_facility_table.html b/kalite/control_panel/templates/control_panel/partials/_facility_table.html
@@ -7,6 +7,7 @@ <h2>
             {% trans "Facilities" %}
             <small>
                 <span class="help-tooltip glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title='{% trans "A facility is a physical location where learners learn." %}'></span>
+                <!---TODO - Radina: implement accessible tooltip. -->
             </small>
             {% if missing_meta %}
             <small>
@@ -59,7 +60,8 @@ <h2>
                                 <td>
                                     {% if request.is_django_user %}
                                     <a class="facility-delete-link" href="#">
-                                        <span class="glyphicon glyphicon-trash" title="{% trans 'Delete facility' %}" value="{% url 'facility_delete' facility_id=facility.id %}"></span>
+                                        <span aria-hidden="true"><i class="glyphicon glyphicon-trash" title="{% trans 'Delete facility' %}" value="{% url 'facility_delete' facility_id=facility.id %}"></i></span>
+                                        <span class="sr-only">{% trans 'Delete facility' %}</span>
                                     </a>
                                     {% endif %}
                                 </td>
@@ -76,7 +78,7 @@ <h2>
     <div class="col-sm-4 col-xs-12">
         <p class="add-new-table-item">
             <a class="create-facility" href="{% url 'add_facility' zone_id=zone_id %}">
-                <span class="glyphicon glyphicon-plus-sign"></span>
+                <span aria-hidden="true"><i class="glyphicon glyphicon-plus-sign"></i></span>
                 {% trans 'Add a new facility' %}...
             </a>
         </p>

diff --git a/kalite/control_panel/templates/control_panel/partials/_groups_table.html b/kalite/control_panel/templates/control_panel/partials/_groups_table.html
@@ -15,6 +15,7 @@ <h2>
                 {% trans "Learner Groups" %}
                 <small>
                     <span class="help-tooltip glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title="{% blocktrans %}A 'group' is set of learners, such as a classroom of students or all students in one grade.{% endblocktrans %} {% trans 'Add learners by selecting a group.' %}"></span>
+                    <!---TODO - Radina: implement accessible tooltip. -->
                 </small>
             </h2>
             {% if not groups %}
@@ -63,7 +64,8 @@ <h2>
                                     <td>
                                         {% if group.id %}
                                         <a href="{% url 'group_edit' group_id=group.id %}?facility={{ facility_id }}&next={{ request.get_full_path|urlencode }}" title="{% trans 'Edit group' %}">
-                                            <span class="glyphicon glyphicon-pencil"></span>
+                                            <span aria-hidden="true"><i class="glyphicon glyphicon-pencil"></i></span>
+                                            <span class="sr-only">{% trans 'Edit group' %}</span>
                                         </a>
                                         {% else %}
                                         N/A
@@ -102,7 +104,7 @@ <h2>
                 <div class="col-sm-4 col-xs-12">
                     <p class="add-new-table-item">
                         <a href="{% url 'add_group' %}?facility={{ facility_id }}&next={{ request.get_full_path|urlencode }}">
-                            <span class="glyphicon glyphicon-plus-sign"></span> {% trans 'Add a new group.' %}
+                            <span aria-hidden="true"><i class="glyphicon glyphicon-plus-sign"></i></span> {% trans 'Add a new group.' %}
                         </a>
                     </p>
                 </div>

diff --git a/kalite/control_panel/templates/control_panel/partials/_students_table.html b/kalite/control_panel/templates/control_panel/partials/_students_table.html
@@ -10,6 +10,7 @@ <h2>
             {% trans "Learners" %}
             <small>
                 <span class="help-tooltip glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title='{% trans "This report contains information about recent learner activity." %}'></span>
+                <!---TODO - Radina: implement accessible tooltip. -->
             </small>
         </h2>
     </div>
@@ -67,7 +68,8 @@ <h2>
                                 </td>
                                 <td>
                                     <a class="edit-student" title="{% blocktrans with studentname=student|format_name:"last_first" %}Edit learner {{ studentname }}{% endblocktrans %}" href="{% url 'edit_facility_user' facility_user_id=student.id %}?facility={{ facility_id }}&next={{ request.get_full_path|urlencode }}">
-                                        <span class="glyphicon glyphicon-pencil"></span>
+                                        <span aria-hidden="true"><i class="glyphicon glyphicon-pencil"></i></span>
+                                        <span class="sr-only">{% blocktrans with studentname=student|format_name:"last_first" %}Edit learner {{ studentname }}{% endblocktrans %}</span>
                                     </a>
                                 </td>
 
@@ -113,7 +115,7 @@ <h2>
     <div class="col-sm-4 col-xs-12">
         <p class="add-new-table-item">
             <a class="create-student" href="{% url 'add_facility_student' %}?facility={{ facility_id }}&group={{ group_id }}&next={{ request.get_full_path|urlencode }}">
-                <span class="glyphicon glyphicon-plus-sign"></span> {% trans 'Add a new learner.' %}
+                <span aria-hidden="true"><i class="glyphicon glyphicon-plus-sign"></i></span> {% trans 'Add a new learner.' %}
             </a>
         </p>
     </div>

diff --git a/kalite/distributed/static/js/distributed/content/hbtemplates/content-wrapper.handlebars b/kalite/distributed/static/js/distributed/content/hbtemplates/content-wrapper.handlebars
@@ -49,7 +49,8 @@
                             <div class="col-xs-4">
                                 <a href="/learn/{{ path }}" title="{{description}}" class="btn btn-success btn-related-content">
                                     <div class="related-content-header">
-                                        <span class="icon-{{ kind }}"></span>
+                                        <span aria-hidden="true"><i class="icon-{{ kind }}"></i></span>
+                                        <span class="sr-only">{{ kind }}</span>
                                         <span class="related-content-title">{{ title }}</span>
                                     </div>
                                     <div class="related-content-body">

diff --git a/kalite/distributed/static/js/distributed/search/hbtemplates/search-bar.handlebars b/kalite/distributed/static/js/distributed/search/hbtemplates/search-bar.handlebars
@@ -1,6 +1,6 @@
 <form class="navbar-form" action="{{ search_url }}" method="get" id="search-box" role="search">
   <div class="input-group">
     <input type="text" name="query" id="search" class="form-control" placeholder="{{_ "Topic, video, exercise..." }}" aria-label="{{_ 'Search for' }}" />
-    <button id="search-button" class="btn btn-default" type="submit" aria-label="{{_ 'Submit' }}"><i class="glyphicon glyphicon-search" aria-hidden="true"></i></button>
+    <button id="search-button" class="btn btn-default" type="submit" aria-label="{{_ 'Submit' }}"><span aria-hidden="true"><i class="glyphicon glyphicon-search"></i></span></button>
   </div>
 </form>
diff --git a/kalite/distributed/templates/distributed/base_manage.html b/kalite/distributed/templates/distributed/base_manage.html
@@ -14,13 +14,13 @@
         <ul class="nav nav-tabs">
             <div class="mobile-manage-nav">
             {% if request.session.facility_user.facility.id %}
-                <li class="teacher-only users {% block user_active %}{% endblock user_active %}"><a href="{% url 'facility_management' zone_id=None facility_id=request.session.facility_user.facility.id %}" title="{% trans 'Manage Users' %}"><div><i class="icon icon-uniE606"></i><br/>{% trans "Users" %}</div></a></li>
+                <li class="teacher-only users {% block user_active %}{% endblock user_active %}"><a href="{% url 'facility_management' zone_id=None facility_id=request.session.facility_user.facility.id %}" title="{% trans 'Manage Users' %}"><div><span aria-hidden="true"><i class="icon icon-uniE606"></i></span><br/>{% trans "Users" %}</div></a></li>
             {% endif %}
-                <li class="facility {% block facility_active %}{% endblock facility_active %}"><a href="{% url 'zone_management' zone_id=None %}" title="{% trans 'Manage Facilities' %}"><div><i class="icon icon-uniE603"></i><br/>{% trans "Facilities" %}</div></a></li>         
+                <li class="facility {% block facility_active %}{% endblock facility_active %}"><a href="{% url 'zone_management' zone_id=None %}" title="{% trans 'Manage Facilities' %}"><div><span aria-hidden="true"><i class="icon icon-uniE603"></i></span><br/>{% trans "Facilities" %}</div></a></li>
             </div>
             <div class="mobile-manage-nav">
-                <li class="video {% block video_active %}{% endblock video_active %}"><a href="{% url 'update_videos' %}" title="{% trans 'Update this server with new videos and languages' %}"><div><i class="icon icon-uniE610"></i><br/>{% trans "Videos" %}</div></a></li>
-                <li class="languages {% block languages_active %}{% endblock languages_active %}"><a href="{% url 'update_languages' %}"><div><i class="icon icon-uniE600"></i><br/>{% trans "Language" %}</div></a></li>
+                <li class="video {% block video_active %}{% endblock video_active %}"><a href="{% url 'update_videos' %}" title="{% trans 'Update this server with new videos and languages' %}"><div><span aria-hidden="true"><i class="icon icon-uniE610"></i></span><br/>{% trans "Videos" %}</div></a></li>
+                <li class="languages {% block languages_active %}{% endblock languages_active %}"><a href="{% url 'update_languages' %}"><div><span aria-hidden="true"><i class="icon icon-uniE600"></i></span><br/>{% trans "Language" %}</div></a></li>
             </div>
 
         {% block inline-btn %}

diff --git a/kalite/distributed/templates/distributed/base_teach.html b/kalite/distributed/templates/distributed/base_teach.html
@@ -16,23 +16,23 @@
     <ul>
         <div class="mobile-nav">
             <li class="reports {% block reports_active %}{% endblock reports_active %}">
-                <a href="{% url 'coach_reports' zone_id=zone_id %}" title="{% trans 'Track the progress of your learners' %}"><div class=""><span class="icon icon-uniE605"></span><br/>{% trans "Reports" %}</div></a>
+                <a href="{% url 'coach_reports' zone_id=zone_id %}" title="{% trans 'Track the progress of your learners' %}"><div class=""><span aria-hidden="true"><i class="icon icon-uniE605"></i></span><br/>{% trans "Reports" %}</div></a>
             </li>
             <li class="playlist {% block playlist_active %}{% endblock playlist_active %}">
-                <a class="link-width" href="{% url 'assign_playlists' %}" title="{% trans 'Assign playlists to learner groups' %}"><div><span class="icon icon-uniE604"></span><br/>{% trans "Playlists" %}</div></a>
+                <a class="link-width" href="{% url 'assign_playlists' %}" title="{% trans 'Assign playlists to learner groups' %}"><div><span aria-hidden="true"><i class="icon icon-uniE604"></i></span><br/>{% trans "Playlists" %}</div></a>
             </li>
         </div>
         <div class="mobile-nav">
             <li class="exams {% block exams-active %}{% endblock exams-active %}">
-                <a href="{% url 'test_list' %}" title="{% trans 'See list of available tests.' %}"><div><span class="icon icon-uniE602"></span><br/>{% trans "Tests" %}</div></a>
+                <a href="{% url 'test_list' %}" title="{% trans 'See list of available tests.' %}"><div><span aria-hidden="true"><i class="icon icon-uniE602"></i></span><br/>{% trans "Tests" %}</div></a>
             </li>
             <li class="teacher-only units {% block current_unit_active %}{% endblock current_unit_active %}">
                 <a href="{% url 'current_unit' %}" id="nav_current_unit" title="{% trans 'See list of current units for the facilities.' %}"><div style="position: relative; top: 56px;">{% trans "Units" %}</div></a>
             </li>
         </div>  
         <!-- Jessica: Commenting out for now to put learn back in 1st level navbar
         <li class="learn {% block learn_subnav_active %}{% endblock learn_subnav_active %}">
-            <a href="{% url 'learn' %}" title="{% trans 'KA Lite Home' %}"><div><span class="icon icon-uniE601"></span><br/>{% trans "Learn" %}</div></a>
+            <a href="{% url 'learn' %}" title="{% trans 'KA Lite Home' %}"><div><span aria-hidden="true"><i class="icon icon-uniE601"></i></span><br/>{% trans "Learn" %}</div></a>
         </li> -->
     </ul>
 </div>

diff --git a/kalite/playlist/templates/playlist/assign_playlists.html b/kalite/playlist/templates/playlist/assign_playlists.html
@@ -38,7 +38,8 @@ <h2>
           {% trans "Assign Playlists" %}
           <small>
                 <span class="help-tooltip glyphicon glyphicon-question-sign" data-toggle="tooltip" data-placement="right" title='{% trans "To assign a playlist to a group, drag that group and drop it onto the playlist." %}'></span>
-            </small>
+                <!---TODO - Radina: implement accessible tooltip. -->
+          </small>
         </h2>
       </div>