Skip to content

Commit 7670057

Browse files
author
Robert Schindler
committed
Made side menu accessible to assistive technologies
1 parent 5908433 commit 7670057

File tree

4 files changed

+54
-34
lines changed

4 files changed

+54
-34
lines changed

‎components/package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@
2424
"@yarn_components/jquery-ui": "components/jqueryui#*",
2525
"@yarn_components/jquery.hotkeys": "jeresig/jquery.hotkeys#master",
2626
"@yarn_components/justgage": "toorshia/justgage#*",
27-
"@yarn_components/metisMenu": "onokumus/metisMenu#~1.1.3",
27+
"@yarn_components/metisMenu": "onokumus/metisMenu#~3.0.4",
2828
"@yarn_components/mocha": "mochajs/mocha#~1.17.1",
2929
"@yarn_components/moment": "moment/moment#^2.9.0",
3030
"@yarn_components/morrisjs": "morrisjs/morris.js#~0.5.1",

‎dojo/static/dojo/css/dojo.css‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1018,23 +1018,20 @@ div.custom-search-form {
10181018
left: 100%;
10191019
top: 0;
10201020
min-width: 200px;
1021-
display: none;
1022-
border-radius: 4px;
1023-
}
1024-
1025-
#side-menu li:hover > ul,
1026-
#side-menu li:hover > ul.collapse {
1027-
display: block !important;
10281021
height: auto !important;
1022+
display: none;
10291023
z-index: 10000;
10301024
background-color: #fff;
10311025
background-clip: padding-box;
1032-
visibility: visible;
10331026
border: 1px solid rgba(0, 0, 0, .15);
10341027
border-left-width: 0;
10351028
border-radius: 4px;
10361029
box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
1037-
border-radius: 4px;
1030+
}
1031+
1032+
#side-menu > li.mm-active ul,
1033+
#side-menu > li:hover ul {
1034+
display: block !important;
10381035
}
10391036

10401037
body.min #page-wrapper {

‎dojo/static/dojo/js/index.js‎

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -77,13 +77,11 @@ function sidebar() { // minimize side nav bar
7777
width = '175px';
7878
fontSize = '14px';
7979
speed = 100;
80-
$('a#minimize-menu').attr('title', 'Collapse Menu');
8180
}
8281
else {
8382
action = 'min';
8483
remove = 'max';
8584
$.cookie('dojo-sidebar', 'min', {expires: 10000, path: '/'});
86-
$('a#minimize-menu').attr('title', 'Expand Menu')
8785
}
8886

8987
$('body').switchClass(remove, action);

‎dojo/templates/base.html‎

Lines changed: 47 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -86,7 +86,7 @@
8686
<!-- /input-group -->
8787
</li>
8888
<li class="dropdown">
89-
<a class="dropdown-toggle dropdown-toggle-h{% alert_count %}" data-toggle="dropdown" href="#">
89+
<a class="dropdown-toggle dropdown-toggle-h{% alert_count %}" data-toggle="dropdown" href="#" aria-label="{% alert_count %} Alerts">
9090
<i class="fa fa-bell fa-fw"></i><span
9191
id="alert_count" class="badge badge-count badge-count{% alert_count %}">{% alert_count %}</span>
9292
<i class="fa fa-caret-down"></i>
@@ -97,7 +97,7 @@
9797
</li>
9898
{% endif %}
9999
<li class="dropdown">
100-
<a class="dropdown-toggle" data-toggle="dropdown" href="#">
100+
<a class="dropdown-toggle" data-toggle="dropdown" href="#" aria-label="User Menu">
101101
<i class="fa fa-user fa-fw"></i> <i class="fa fa-caret-down"></i>
102102
</a>
103103
<ul class="dropdown-menu dropdown-user">
@@ -131,15 +131,18 @@
131131

132132
{% if request.user.is_staff %}
133133
<li>
134-
<a href="{% url 'dashboard' %}"><i class="fa fa-dashboard fa-fw"></i> <span>Dashboard</span></a>
134+
<a href="{% url 'dashboard' %}" aria-label="Dashboard"><i class="fa fa-dashboard fa-fw"></i><span>Dashboard</span></a>
135135
</li>
136136
{% endif %}
137137
<li>
138138
{% if request.user.is_staff %}
139-
<a href="#"><i class="fa fa-list fa-fw"></i> <span>Products</span>
140-
<span class="glyphicon arrow"></span></a>
139+
<a href="#" aria-expanded="false" aria-label="Products">
140+
<i class="fa fa-list fa-fw"></i>
141+
<span>Products</span>
142+
<span class="glyphicon arrow"></span>
143+
</a>
141144
{% elif request.user.is_authenticated %}
142-
<a href="{% url 'product' %}" title="Product Listing"><i class="fa fa-list fa-fw"></i> <span>Products</span></a>
145+
<a href="{% url 'product' %}" title="Products" aria-label="Products"><i class="fa fa-list fa-fw"></i><span>Products</span></a>
143146
{% endif %}
144147
{% if request.user.is_staff %}
145148
<ul class="nav nav-second-level">
@@ -161,8 +164,11 @@
161164
</li>
162165
{% if request.user.is_staff %}
163166
<li>
164-
<a href="#"><i class="fa fa-inbox fa-fw"></i> <span>Engagements</span><span
165-
class="glyphicon arrow"></span></a>
167+
<a href="#" aria-expanded="false" aria-label="Engagements">
168+
<i class="fa fa-inbox fa-fw"></i>
169+
<span>Engagements</span>
170+
<span class="glyphicon arrow"></span>
171+
</a>
166172
<ul class="nav nav-second-level">
167173
<li>
168174
<a href="{% url 'engagement' %}">All Engagements</a>
@@ -177,8 +183,11 @@
177183
<!-- /.nav-second-level -->
178184
</li>
179185
<li>
180-
<a href="#"><i class="fa fa-bug fa-fw"></i> <span>Findings</span><span
181-
class="glyphicon arrow"></span></a>
186+
<a href="#" aria-expanded="false" aria-label="Findings">
187+
<i class="fa fa-bug fa-fw"></i>
188+
<span>Findings</span>
189+
<span class="glyphicon arrow"></span>
190+
</a>
182191
<ul class="nav nav-second-level">
183192
<li>
184193
<a href="{% url 'open_findings' %}">Open Findings</a>
@@ -199,8 +208,11 @@
199208
<!-- /.nav-second-level -->
200209
</li>
201210
<li>
202-
<a href="#"><i class="fa fa-sitemap fa-fw"></i> <span>Endpoints</span><span
203-
class="glyphicon arrow"></span></a>
211+
<a href="#" aria-expanded="false" aria-label="Endpoints">
212+
<i class="fa fa-sitemap fa-fw"></i>
213+
<span>Endpoints</span>
214+
<span class="glyphicon arrow"></span>
215+
</a>
204216
<ul class="nav nav-second-level">
205217
<li>
206218
<a href="{% url 'endpoints' %}">All Endpoints</a>
@@ -215,17 +227,23 @@
215227
{% endif %}
216228
{% if request.user.is_authenticated %}
217229
<li>
218-
<a href="{% url 'reports' %}"><i class="fa fa-file-text-o fa-fw"></i> <span>Reports</span><span
219-
class="glyphicon arrow"></span></a>
230+
<a href="#" aria-expanded="false" aria-label="Reports">
231+
<i class="fa fa-file-text-o fa-fw"></i>
232+
<span>Reports</span>
233+
<span class="glyphicon arrow"></span>
234+
</a>
220235
<ul class="nav nav-second-level">
221236
<li><a href="{% url 'reports' %}"> All Reports </a></li>
222237
<li><a href="{% url 'report_builder' %}"> Report Builder </a></li>
223238
</ul>
224239
<!-- /.nav-second-level -->
225240
</li>
226241
<li>
227-
<a href="/metrics"><i class="fa fa-bar-chart fa-fw"></i> <span>Metrics</span><span
228-
class="glyphicon arrow"></span></a>
242+
<a href="#" aria-expanded="false" aria-label="Metrics">
243+
<i class="fa fa-bar-chart fa-fw"></i>
244+
<span>Metrics</span>
245+
<span class="glyphicon arrow"></span>
246+
</a>
229247
<ul class="nav nav-second-level">
230248
<li><a href="{% url 'critical_product_metrics' %}"> Critical Product Metrics </a></li>
231249
<li><a href="{% url 'metrics_product_type' %}"> Product Type Metrics </a></li>
@@ -242,17 +260,24 @@
242260
{% endif %}
243261
{% if request.user.is_staff %}
244262
<li>
245-
<a href="{% url 'users' %}"><i class="fa fa-user fa-fw"></i> <span>Users</span></a>
263+
<a href="{% url 'users' %}" aria-disabled="true" aria-expanded="false" aria-label="Users">
264+
<i class="fa fa-user fa-fw"></i>
265+
<span>Users</span>
266+
</a>
246267
</li>
247268
{% endif %}
248269
{% if request.user.is_staff %}
249270
<li>
250-
<a href="{% url 'engagement_calendar' %}"><i class="fa fa-calendar fa-fw"></i>
251-
<span>Calendar</span></a>
271+
<a href="{% url 'engagement_calendar' %}" aria-disabled="true" aria-expanded="false" aria-label="Calendar">
272+
<i class="fa fa-calendar fa-fw"></i>
273+
<span>Calendar</span>
274+
</a>
252275
</li>
253276
<li>
254-
<a href="{% url 'jira' %}"><i class="fa fa-cog fa-fw"></i>
255-
<span>Configuration</span></a>
277+
<a href="#" aria-expanded="false" aria-label="Configuration">
278+
<i class="fa fa-cog fa-fw"></i>
279+
<span>Configuration</span>
280+
</a>
256281
<ul class="nav nav-second-level">
257282
<li><a href="{% url 'cred' %}">Credential Manager </a></li>
258283
{% if "enable_jira"|get_system_setting %}
@@ -272,7 +297,7 @@
272297
{% endblock %}
273298

274299
<li id="min-menu">
275-
<a href="#" id="minimize-menu">
300+
<a href="#" id="minimize-menu" title="Expand/Collapse Menu" aria-label="Expand/Collapse Menu">
276301
<i id="nav-minimize-menu-li" class="fa fa-arrow-circle-right fa-fw"></i>
277302
<span>Collapse Menu</span>
278303
</a>

0 commit comments

Comments
 (0)