Skip to content

Commit d230897

Browse files
author
Derek DeVries
committed
update admin cog colors and accessibility in styleguide
fixes cnvs-7005 test plan styleguide - admin toolbar cog and content cogs are accessible quizzes index - toolbar cog button is accessible - settings cogs on quizzes are accessible quizzes show - toolbar cog button is accessible Change-Id: Iae22c076e023dc50d8bb24c8f9dc050bc48b743a Reviewed-on: https://gerrit.instructure.com/22671 Tested-by: Jenkins <jenkins@instructure.com> QA-Review: Myller de Araujo <myller@instructure.com> Reviewed-by: Stanley Stuart <stanley@instructure.com> Product-Review: Derek DeVries <ddevries@instructure.com>
1 parent b18d89c commit d230897

7 files changed

Lines changed: 118 additions & 81 deletions

File tree

‎app/stylesheets/utilities/_admin_links.scss‎

Lines changed: 30 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -13,14 +13,21 @@ Cogs, *AKA admin links*, are generally floated to the right, make sure it's the
1313
1414
```html
1515
<div>
16-
<a class="al-trigger btn">
17-
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
16+
<a class="al-trigger btn" role="button" aria-haspopup="true" aria-owns="toolbar-1" tabindex="-1">
17+
<i class="icon-settings"></i>
18+
<i class="icon-mini-arrow-down"></i>
1819
<span class="screenreader-only">Settings</span>
1920
</a>
20-
<ul class="al-options">
21-
<li><a href="#" class="icon-edit">Edit</a></li>
22-
<li><a href="#" class="icon-trash">Delete</a></li>
23-
<li><a href="#" class="icon-lock">Lock</a></li>
21+
<ul id="toolbar-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="toolbar-2">
22+
<li role="presentation">
23+
<a href="#" class="icon-edit" id="toolbar-2" tabindex="-1" role="menuitem">Edit</a>
24+
</li>
25+
<li role="presentation">
26+
<a href="#" class="icon-trash" id="toolbar-3" tabindex="-1" role="menuitem">Delete</a>
27+
</li>
28+
<li role="presentation">
29+
<a href="#" class="icon-lock" id="toolbar-4" tabindex="-1" role="menuitem">Lock</a>
30+
</li>
2431
</ul>
2532
</div>
2633
```
@@ -29,13 +36,19 @@ Cogs, *AKA admin links*, are generally floated to the right, make sure it's the
2936
3037
```html
3138
<div>
32-
<a class="al-trigger">
33-
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
39+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" tabindex="-1">
40+
<i class="icon-settings"></i>
41+
<i class="icon-mini-arrow-down"></i>
42+
<span class="screenreader-only">Settings</span>
3443
</a>
35-
<ul class="al-options">
36-
<li><a href="#" class="icon-plus">Add</a></li>
37-
<li><a href="#" class="icon-edit" title="Edit">Edit</a></li>
38-
<li><a href="#" class="icon-trash" title="Delete this module">Delete</a></li>
44+
45+
<ul id="content-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="content-2">
46+
<li role="presentation">
47+
<a href="#" class="icon-edit" id="content-2" tabindex="-1" role="menuitem" title="Edit">Edit</a>
48+
</li>
49+
<li role="presentation">
50+
<a href="#" class="icon-trash" id="content-3" tabindex="-1" role="menuitem" title="Delete this module">Delete</a>
51+
</li>
3952
</ul>
4053
</div>
4154
```
@@ -79,22 +92,23 @@ Cogs, *AKA admin links*, are generally floated to the right, make sure it's the
7992
}
8093

8194
.al-trigger-gray, .al-trigger-gray:hover {
82-
color: #000;
83-
@include opacity(0.6);
95+
color: #bbb;
8496
}
8597

8698
.admin-link-hover-area:hover .al-trigger,
8799
.admin-link-hover-area.active .al-trigger,
88100
.al-trigger.ui-state-active,
89101
.al-trigger:focus,
90-
.al-trigger:hover{
91-
@include opacity(1);
102+
.al-trigger:hover {
103+
color: #4d4d4d;
104+
text-decoration: none;
92105
}
93106

94107
.al-trigger {
95108
padding: 4px;
96109
cursor: pointer;
97110
white-space: nowrap;
111+
text-decoration: none;
98112
}
99113

100114
.al-hover-container .al-trigger {

‎app/stylesheets/utilities/_buttons.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,7 @@ The publish button has two states on click (publish and published) and a hover s
4242
}
4343
.btn-publish {
4444
i:before {
45-
color: #b4b8bb;
45+
color: #bbb;
4646
}
4747
}
4848

@@ -69,7 +69,7 @@ The publish button has two states on click (publish and published) and a hover s
6969

7070
.publish-icon {
7171
display: inline-block;
72-
color: #b4b8bb;
72+
color: #bbb;
7373
cursor: pointer;
7474

7575
&.publish-icon-unpublish {

‎app/stylesheets/utilities/_item-groups-condensed.scss‎

Lines changed: 15 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ color with a dashed line between groups.
3737
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
3838
</span>
3939
40-
<a class="al-trigger">
40+
<a class="al-trigger al-trigger-gray">
4141
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
4242
</a>
4343
<ul class="al-options">
@@ -63,7 +63,7 @@ color with a dashed line between groups.
6363
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
6464
</span>
6565
66-
<a class="al-trigger">
66+
<a class="al-trigger al-trigger-gray">
6767
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
6868
</a>
6969
<ul class="al-options">
@@ -89,7 +89,7 @@ color with a dashed line between groups.
8989
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
9090
</span>
9191
92-
<a class="al-trigger">
92+
<a class="al-trigger al-trigger-gray">
9393
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
9494
</a>
9595
<ul class="al-options">
@@ -126,12 +126,19 @@ color with a dashed line between groups.
126126
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
127127
</span>
128128
129-
<a class="al-trigger">
130-
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
129+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" tabindex="-1">
130+
<i class="icon-settings"></i>
131+
<i class="icon-mini-arrow-down"></i>
132+
<span class="screenreader-only">Settings</span>
131133
</a>
132-
<ul class="al-options">
133-
<li><a href="#">Edit</a></li>
134-
<li><a href="#">Delete</a></li>
134+
135+
<ul id="content-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="content-2">
136+
<li role="presentation">
137+
<a href="#" class="icon-edit" id="content-2" tabindex="-1" role="menuitem" title="Edit">Edit</a>
138+
</li>
139+
<li role="presentation">
140+
<a href="#" class="icon-trash" id="content-3" tabindex="-1" role="menuitem" title="Delete this module">Delete</a>
141+
</li>
135142
</ul>
136143
</div>
137144
</div>

‎app/stylesheets/utilities/_item-groups.scss‎

Lines changed: 36 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -31,12 +31,19 @@ is for items that are not draggable.
3131
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
3232
</span>
3333
34-
<a class="al-trigger">
35-
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
34+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" tabindex="-1">
35+
<i class="icon-settings"></i>
36+
<i class="icon-mini-arrow-down"></i>
37+
<span class="screenreader-only">Settings</span>
3638
</a>
37-
<ul class="al-options">
38-
<li><a href="#">Edit</a></li>
39-
<li><a href="#">Delete</a></li>
39+
40+
<ul id="content-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="content-2">
41+
<li role="presentation">
42+
<a href="#" class="icon-edit" id="content-2" tabindex="-1" role="menuitem" title="Edit">Edit</a>
43+
</li>
44+
<li role="presentation">
45+
<a href="#" class="icon-trash" id="content-3" tabindex="-1" role="menuitem" title="Delete this module">Delete</a>
46+
</li>
4047
</ul>
4148
</div>
4249
</div>
@@ -57,12 +64,19 @@ is for items that are not draggable.
5764
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
5865
</span>
5966
60-
<a class="al-trigger">
61-
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
67+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" tabindex="-1">
68+
<i class="icon-settings"></i>
69+
<i class="icon-mini-arrow-down"></i>
70+
<span class="screenreader-only">Settings</span>
6271
</a>
63-
<ul class="al-options">
64-
<li><a href="#">Edit</a></li>
65-
<li><a href="#">Delete</a></li>
72+
73+
<ul id="content-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="content-2">
74+
<li role="presentation">
75+
<a href="#" class="icon-edit" id="content-2" tabindex="-1" role="menuitem" title="Edit">Edit</a>
76+
</li>
77+
<li role="presentation">
78+
<a href="#" class="icon-trash" id="content-3" tabindex="-1" role="menuitem" title="Delete this module">Delete</a>
79+
</li>
6680
</ul>
6781
</div>
6882
</div>
@@ -89,12 +103,19 @@ is for items that are not draggable.
89103
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
90104
</span>
91105
92-
<a class="al-trigger">
93-
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
106+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" tabindex="-1">
107+
<i class="icon-settings"></i>
108+
<i class="icon-mini-arrow-down"></i>
109+
<span class="screenreader-only">Settings</span>
94110
</a>
95-
<ul class="al-options">
96-
<li><a href="#">Edit</a></li>
97-
<li><a href="#">Delete</a></li>
111+
112+
<ul id="content-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="content-2">
113+
<li role="presentation">
114+
<a href="#" class="icon-edit" id="content-2" tabindex="-1" role="menuitem" title="Edit">Edit</a>
115+
</li>
116+
<li role="presentation">
117+
<a href="#" class="icon-trash" id="content-3" tabindex="-1" role="menuitem" title="Delete this module">Delete</a>
118+
</li>
98119
</ul>
99120
</div>
100121
</div>
@@ -225,15 +246,6 @@ is for items that are not draggable.
225246
right: 3px;
226247
top: 10px;
227248

228-
a.al-trigger {
229-
color: #b4b8bb;
230-
text-decoration: none;
231-
}
232-
a.al-trigger:hover {
233-
color: #4d4d4d;
234-
text-decoration: none;
235-
}
236-
237249
.publish-icon {
238250
margin-right: 22px;
239251

‎app/views/jst/quizzes/IndexView.handlebars‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -10,23 +10,24 @@
1010
{{#t "links.create_new_quiz"}}New Quiz{{/t}}
1111
</a>
1212

13-
<a class="al-trigger btn">
14-
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
13+
<a class="al-trigger btn" role="button" aria-haspopup="true" aria-owns="toolbar-1" tabindex="-1">
14+
<i class="icon-settings"></i>
15+
<i class="icon-mini-arrow-down"></i>
1516
<span class="screenreader-only">{{#t "links.settings"}}Settings{{/t}}</span>
1617
</a>
1718

18-
<ul class="al-options">
19+
<ul id="toolbar-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false">
1920
{{#ifAll permissions.manage flags.question_banks}}
20-
<li>
21-
<a href="{{urls.question_banks_url}}" class="icon-question">
21+
<li role="presentation">
22+
<a href="{{urls.question_banks_url}}" class="icon-question" tabindex="-1" role="menuitem">
2223
{{#t "links.manage_question_banks"}}Manage Question Banks{{/t}}
2324
</a>
2425
</li>
2526
{{/ifAll}}
2627

2728
{{#ifAll permissions.manage flags.publish_multiple}}
28-
<li>
29-
<a href="#" class="publish_multiple_quizzes_link icon-unpublished">
29+
<li role="presentation">
30+
<a href="#" class="publish_multiple_quizzes_link icon-unpublished" tabindex="-1" role="menuitem">
3031
{{#t "links.publish_multiple_quizzes"}}Publish Multiple Quizzes{{/t}}
3132
</a>
3233
</li>

‎app/views/jst/quizzes/QuizItemView.handlebars‎

Lines changed: 10 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -32,15 +32,18 @@
3232
<div class="ig-admin">
3333
<span data-view="publish-icon" class="publish-icon"></span>
3434

35-
<a class="al-trigger">
36-
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
35+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="ui-id-{{id}}-1" tabindex="-1">
36+
<i class="icon-settings"></i>
37+
<i class="icon-mini-arrow-down"></i>
38+
<span class="screenreader-only">{{#t "settings"}}Settings{{/t}}</span>
3739
</a>
38-
<ul class="al-options">
39-
<li>
40-
<a href="{{edit_url}}" class="icon-edit" title='{{#t "title_edit"}}Edit Quiz{{/t}}'>{{#t "links.edit"}}Edit{{/t}}</a>
40+
41+
<ul id="ui-id-{{id}}-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false" aria-activedescendant="ui-id-{{id}}-2">
42+
<li role="presentation">
43+
<a href="{{edit_url}}" id="ui-id-{{id}}-2" class="icon-edit" tabindex="-1" role="menuitem" title='{{#t "title_edit"}}Edit Quiz{{/t}}'>{{#t "links.edit"}}Edit{{/t}}</a>
4144
</li>
42-
<li>
43-
<a href="{{url}}" class="delete-item icon-trash" title='{{#t "title_delete"}}Delete Quiz{{/t}}'>{{#t "links.delete"}}Delete{{/t}}</a>
45+
<li role="presentation">
46+
<a href="{{url}}" id="ui-id-{{id}}-3" class="delete-item icon-trash" tabindex="-1" role="menuitem" title='{{#t "title_delete"}}Delete Quiz{{/t}}'>{{#t "links.delete"}}Delete{{/t}}</a>
4447
</li>
4548
</ul>
4649
</div>

‎app/views/quizzes/show.html.erb‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -92,15 +92,15 @@
9292
</a>
9393
<% end %>
9494

95-
<a class="al-trigger btn">
96-
<span class="screenreader-only"><%= t(:manage, "Manage") %></span>
95+
<a class="al-trigger btn" role="button" aria-haspopup="true" aria-owns="toolbar-1" tabindex="-1">
9796
<i class="icon-settings"></i>
9897
<i class="icon-mini-arrow-down"></i>
98+
<span class="screenreader-only"><%= t(:manage, "Manage") %></span>
9999
</a>
100-
<ul class="al-options">
100+
<ul id="toolbar-1" class="al-options" role="menu" tabindex="0" aria-hidden="true" aria-expanded="false">
101101
<% if can_do(@quiz, @current_user, :update) && @assignment %>
102-
<li>
103-
<a href="#" rel="<%= context_url(@context, :context_assignment_rubric_url, @assignment.id) %>" class="show_rubric_link">
102+
<li role="presentation">
103+
<a href="#" rel="<%= context_url(@context, :context_assignment_rubric_url, @assignment.id) %>" class="show_rubric_link" tabindex="-1" role="menuitem">
104104
<i class="icon-rubric"></i>
105105
<%= t('links.show_assignment_rubric', "Show Rubric") %>
106106
</a>
@@ -109,8 +109,8 @@
109109
<% end %>
110110

111111
<% if can_do(@quiz, @current_user, :update) && !needs_unpublished_warning? %>
112-
<li>
113-
<a href="<%= polymorphic_path([@context, @quiz, :take], :preview => 1) %>" class="preview_link" data-method="post">
112+
<li role="presentation">
113+
<a href="<%= polymorphic_path([@context, @quiz, :take], :preview => 1) %>" class="preview_link" data-method="post" tabindex="-1" role="menuitem">
114114
<i class="icon-quiz"></i>
115115
<%= t('links.preview', "Preview") %>
116116
</a>
@@ -133,26 +133,26 @@
133133
</label>
134134
</div>
135135
<% end %>
136-
<li>
137-
<a href="#" id="let_students_take_this_quiz_button">
136+
<li role="presentation">
137+
<a href="#" id="let_students_take_this_quiz_button" tabindex="-1" role="menuitem">
138138
<i class="icon-unlock"></i> <%= @quiz.survey? ? t('buttons.unlock_survey', "Let Students Take this Survey Now") : t('buttons.unlock_quiz', "Let Students Take this Quiz Now") %>
139139
</a>
140140
</li>
141141
<% else %>
142142
<% form_for @quiz, :url => context_url(@context, :context_quiz_url, @quiz.id), :html => { :id => 'quiz_lock_form' } do |f| %>
143143
<%= hidden_field_tag 'quiz[locked]', true %>
144144
<% end %>
145-
<li>
146-
<a href="#" id="lock_this_quiz_now_link">
145+
<li role="presentation">
146+
<a href="#" id="lock_this_quiz_now_link" tabindex="-1" role="menuitem">
147147
<i class="icon-lock"></i> <%= @quiz.survey? ? t('buttons.lock_survey', "Lock this Survey Now") : t('buttons.lock_quiz', "Lock this Quiz Now") %>
148148
</a>
149149
</li>
150150
<% end %>
151151
<% end %>
152152

153153
<% if (can_do(@quiz, @current_user, :grade) || can_do(@quiz, @current_user, :review_grades)) && @quiz.available? %>
154-
<li>
155-
<a href="#" class="quiz_details_link">
154+
<li role="presentation">
155+
<a href="#" class="quiz_details_link" tabindex="-1" role="menuitem">
156156
<% if @any_submissions_pending_review %>
157157
<i class="icon-warning"></i>
158158
<% end %>
@@ -166,15 +166,15 @@
166166
<% end %>
167167

168168
<% if can_do(@quiz, @current_user, :grade) && can_do(@context, @current_user, :send_messages) && @quiz.available? && !@quiz.anonymous_submissions? && @quiz.graded? %>
169-
<li>
170-
<a href="#" class="message_students_link">
169+
<li role="presentation">
170+
<a href="#" class="message_students_link" tabindex="-1" role="menuitem">
171171
<i class="icon-email"></i> <%= t('links.message_students_who', "Message Students Who...") %>
172172
</a>
173173
</li>
174174
<% end %>
175175

176-
<li>
177-
<a href="<%= context_url(@context, :context_quiz_url, @quiz) %>" class="delete_quiz_link">
176+
<li role="presentation">
177+
<a href="<%= context_url(@context, :context_quiz_url, @quiz) %>" class="delete_quiz_link" tabindex="-1" role="menuitem">
178178
<i class="icon-trash"></i> <%= t('titles.delete', "Delete") %>
179179
</a>
180180
</li>

0 commit comments

Comments
 (0)