Skip to content

Commit 4884ce1

Browse files
bluej100bluej100
committed
admin-links accessibility
fixes CNVS-6657 test plan: * open a discussion * verify that the "gear menus" for topics and messages can be navigated with keyboard or screenreader using the up and down arrows * verify that the gear menus do not open when tabbing past * verify that tabbing from within the gear menu brings you to the next logical element * verify that opening a gear menu with the mouse does not scroll the page * verify that selecting "Go to Parent" or "Go to Topic" focuses the parent entry or topic * verify that repeatedly selecting "Go to Topic" returns to the topic each time * verify that the admin-links styleguide examples direct authors to use href="#" instead of tabindex="-1" on .al-trigger elements * verify that the admin-links styleguide examples direct authors to provide screenreader text for .al-trigger * verify that the discussion topic page handles resizing your browser to a narrow width Change-Id: I4ad2ccf7f377e6b366712b19927248086d6f8370 Reviewed-on: https://gerrit.instructure.com/23186 Tested-by: Jenkins <jenkins@instructure.com> Reviewed-by: Jon Willesen <jonw@instructure.com> QA-Review: Clare Strong <clare@instructure.com> Product-Review: Braden Anderson <banderson@instructure.com>
1 parent 8dcc790 commit 4884ce1

25 files changed

Lines changed: 66 additions & 38 deletions

‎app/coffeescripts/behaviors/admin-links.coffee‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,10 @@ define [
77
# when the button is clicked, see _admin_links.scss for markup
88
$(document).on 'click keydown', '.al-trigger', (event) ->
99
$trigger = $(this)
10-
return $trigger.click() if event.keyCode or event.which
10+
return if (key = event.keyCode) && key != 38 && key != 40
11+
if event.keyCode or event.which
12+
event.preventDefault()
13+
return $trigger.click()
1114

1215
unless $trigger.data('kyleMenu')
1316
event.preventDefault()

‎app/coffeescripts/bundles/discussion.coffee‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -138,6 +138,12 @@ require [
138138

139139
##
140140
# routes
141+
router.route 'topic', 'topic', ->
142+
$container.scrollTop $('#discussion_topic')
143+
setTimeout ->
144+
$('#discussion_topic').focus()
145+
$container.one "scroll", -> router.navigate('')
146+
, 10
141147
router.route 'entry-:id', 'id', entriesView.goToEntry
142148
router.route 'page-:page', 'page', (page) ->
143149
entriesView.render page

‎app/coffeescripts/views/DiscussionTopic/EntriesView.coffee‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -98,6 +98,7 @@ define [
9898
@$window.scrollTo $el, 200,
9999
offset: -150
100100
onAfter: =>
101+
$el.focus()
101102
# pretty blinking
102103
setTimeout (-> $el.addClass 'highlight' ), 200
103104
setTimeout (-> $el.removeClass 'highlight' ), 400

‎app/coffeescripts/views/DiscussionTopic/EntryView.coffee‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -56,6 +56,9 @@ define [
5656

5757
className: 'entry'
5858

59+
attributes:
60+
tabindex: -1
61+
5962
initialize: ->
6063
super
6164
@constructor.instances[@cid] = this

‎app/stylesheets/discussions.scss‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -602,13 +602,22 @@ body.with-right-side.with-left-side {
602602
.toolbarView {
603603
background: white;
604604
min-height: 50px;
605+
.admin-links {
606+
text-align: left;
607+
}
605608
.al-trigger {
606609
margin-left: 4px;
607610
}
608611
.headerBar {
609612
padding: 10px 10px 6px 14px;
610613
border-bottom: solid 1px $border;
611614
min-height: 33px;
615+
overflow: visible;
616+
}
617+
.headerBar:after {
618+
clear: both;
619+
content: "";
620+
display: block;
612621
}
613622
.sticky {
614623
position: fixed;

‎app/stylesheets/utilities/_admin_links.scss‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,7 @@ 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" role="button" aria-haspopup="true" aria-owns="toolbar-1" tabindex="-1">
16+
<a class="al-trigger btn" role="button" aria-haspopup="true" aria-owns="toolbar-1" href="#">
1717
<i class="icon-settings"></i>
1818
<i class="icon-mini-arrow-down"></i>
1919
<span class="screenreader-only">Settings</span>
@@ -36,7 +36,7 @@ Cogs, *AKA admin links*, are generally floated to the right, make sure it's the
3636
3737
```html
3838
<div>
39-
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" tabindex="-1">
39+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" href="#">
4040
<i class="icon-settings"></i>
4141
<i class="icon-mini-arrow-down"></i>
4242
<span class="screenreader-only">Settings</span>

‎app/stylesheets/utilities/_header_bar.scss‎

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -28,7 +28,7 @@
2828
<div class="header-bar-right">
2929
<a href="#" class="btn">Preview</a>
3030
<a href="#" class="btn btn-primary">Add Module</a>
31-
<a class="al-trigger btn">
31+
<a class="al-trigger btn" href="#">
3232
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
3333
<span class="screenreader-only">Settings</span>
3434
</a>
@@ -55,7 +55,7 @@
5555
</div>
5656
<div class="header-group-right">
5757
<a href="#" class="btn"><i class="icon-edit"></i> Edit</a>
58-
<a class="al-trigger btn">
58+
<a class="al-trigger btn" href="#">
5959
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
6060
<span class="screenreader-only">Settings</span>
6161
</a>
@@ -87,7 +87,7 @@
8787
</div>
8888
<div class="span4 align-right">
8989
<a class="btn btn-primary"><i class="icon-add"></i> Add People</a>
90-
<a class="al-trigger btn">
90+
<a class="al-trigger btn" href="#">
9191
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
9292
<span class="screenreader-only">Settings</span>
9393
</a>

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

Lines changed: 7 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -37,8 +37,9 @@ 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 al-trigger-gray">
40+
<a class="al-trigger al-trigger-gray" href="#">
4141
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
42+
<span class="screenreader-only"><%= t('manage', 'Manage') %></span>
4243
</a>
4344
<ul class="al-options">
4445
<li><a href="#">Edit</a></li>
@@ -63,8 +64,9 @@ color with a dashed line between groups.
6364
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
6465
</span>
6566
66-
<a class="al-trigger al-trigger-gray">
67+
<a class="al-trigger al-trigger-gray" href="#">
6768
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
69+
<span class="screenreader-only"><%= t('manage', 'Manage') %></span>
6870
</a>
6971
<ul class="al-options">
7072
<li><a href="#">Edit</a></li>
@@ -89,8 +91,9 @@ color with a dashed line between groups.
8991
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
9092
</span>
9193
92-
<a class="al-trigger al-trigger-gray">
94+
<a class="al-trigger al-trigger-gray" href="#">
9395
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
96+
<span class="screenreader-only"><%= t('manage', 'Manage') %></span>
9497
</a>
9598
<ul class="al-options">
9699
<li><a href="#">Edit</a></li>
@@ -126,7 +129,7 @@ color with a dashed line between groups.
126129
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
127130
</span>
128131
129-
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" tabindex="-1">
132+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" href="#">
130133
<i class="icon-settings"></i>
131134
<i class="icon-mini-arrow-down"></i>
132135
<span class="screenreader-only">Settings</span>

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -31,7 +31,7 @@ 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 al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" tabindex="-1">
34+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" href="#">
3535
<i class="icon-settings"></i>
3636
<i class="icon-mini-arrow-down"></i>
3737
<span class="screenreader-only">Settings</span>
@@ -64,7 +64,7 @@ is for items that are not draggable.
6464
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
6565
</span>
6666
67-
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" tabindex="-1">
67+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" href="#">
6868
<i class="icon-settings"></i>
6969
<i class="icon-mini-arrow-down"></i>
7070
<span class="screenreader-only">Settings</span>
@@ -103,7 +103,7 @@ is for items that are not draggable.
103103
<i class="icon-publish"></i><span class="publish-text">&nbsp;Published</span>
104104
</span>
105105
106-
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" tabindex="-1">
106+
<a class="al-trigger al-trigger-gray" role="button" aria-haspopup="true" aria-owns="content-1" href="#">
107107
<i class="icon-settings"></i>
108108
<i class="icon-mini-arrow-down"></i>
109109
<span class="screenreader-only">Settings</span>

‎app/views/context_modules/_context_module.html.erb‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,10 @@
2424
<% if editable %>
2525
<li class="context-module-toolbar-item">
2626
<div class="admin-links">
27-
<a class="al-trigger" aria-haspopup="true" aria-owns="ui-id-1" tabindex="0"><i class="icon-settings"></i><i class="icon-mini-arrow-down"></i></a>
27+
<a class="al-trigger" aria-haspopup="true" aria-owns="ui-id-1" href="#">
28+
<i class="icon-settings"></i><i class="icon-mini-arrow-down"></i>
29+
<span class="screenreader-only"><%= t('manage', 'Manage') %></span>
30+
</a>
2831
<ul class="al-options">
2932
<li>
3033
<a href="#" rel="<%= context_url(@context, :context_url) %>/modules/<%= context_module ? context_module.id : "{{ id }}" %>/items" class="add_module_item_link icon-plus"><%= t('links.add_item', %{Add Content}) %></a>

0 commit comments

Comments
 (0)