Skip to content

Commit a90121c

Browse files
taohan16韩韬
taohan16
and
韩韬
authored
Solve issue #3940: The dropdown submenu at notebook page is not keyboard accessible (#4732)
* Solve issue #3940 * Update menubar.js Co-authored-by: 韩韬 <[email protected]>
1 parent ea0ac90 commit a90121c

File tree

5 files changed

+67
-39
lines changed

5 files changed

+67
-39
lines changed

‎notebook/static/acc_overwrite.less‎

Lines changed: 8 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -51,4 +51,11 @@
5151
// background-color: @navbar-default-link-hover-bg;
5252
}
5353
}
54-
}
54+
}
55+
56+
.menu_focus_highlight{
57+
a:focus {
58+
outline: -webkit-focus-ring-color auto 5px;
59+
}
60+
}
61+

‎notebook/static/notebook/js/main.js‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,8 @@ requirejs([
5252
'notebook/js/about',
5353
'notebook/js/searchandreplace',
5454
'notebook/js/clipboard',
55-
'bidi/bidi'
55+
'bidi/bidi',
56+
'notebook/js/celltoolbarpresets/tags'
5657
], function(
5758
$,
5859
contents_service,

‎notebook/static/notebook/js/menubar.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -152,12 +152,24 @@ define([
152152
this.events.trigger('resize-header.Page');
153153
};
154154

155+
(function($){
156+
$(document).ready(function(){
157+
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
158+
event.preventDefault();
159+
event.stopPropagation();
160+
$(this).parent().siblings().removeClass('open');
161+
$(this).parent().toggleClass('open');
162+
});
163+
});
164+
})(jQuery);
165+
155166
MenuBar.prototype.bind_events = function () {
156167
/**
157168
* File
158169
*/
159170
var that = this;
160171

172+
161173
this.element.find('#open_notebook').click(function () {
162174
var parent = utils.url_path_split(that.notebook.notebook_path)[0];
163175
window.open(

‎notebook/static/notebook/less/menubar.less‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,7 @@
1+
2+
13
#menubar {
4+
25
.border-box-sizing();
36
margin-top: 1px;
47

@@ -44,6 +47,8 @@
4447
}
4548
}
4649

50+
ul.dropdown-menu:focus
51+
4752
[dir="rtl"] ul.dropdown-menu {
4853
text-align: right;
4954
left : auto;
@@ -86,6 +91,8 @@ ul#help_menu li a{
8691
}
8792
}
8893

94+
95+
8996
// Make sub menus work in BS3.
9097
// Credit: http://www.bootply.com/86684
9198
.dropdown-submenu {

‎notebook/templates/notebook.html‎

Lines changed: 38 additions & 37 deletions
Original file line numberDiff line numberDiff line change
@@ -77,11 +77,12 @@
7777
<span id="notification_area"></span>
7878
<div class="navbar-collapse collapse">
7979
<ul class="nav navbar-nav">
80-
<li class="dropdown"><a href="#" id="filelink" aria-haspopup="true" aria-controls="file_menu class="dropdown-toggle" data-toggle="dropdown">{% trans %}File{% endtrans %}</a>
80+
<li class="dropdown"><a href="#" class="dropdown-toggle" id="filelink" data-toggle="dropdown" aria-haspopup="true" aria-controls="file_menu">{% trans %}File{% endtrans %}</a>
8181
<ul id="file_menu" class="dropdown-menu" role="menu" aria-labelledby="filelink">
82-
<li id="new_notebook" class="dropdown-submenu" role="none">
83-
<a href="#" role="menuitem">{% trans %}New Notebook{% endtrans %}<span class="sr-only">{% trans %}Toggle Dropdown{% endtrans %}</span></a>
84-
<ul class="dropdown-menu" id="menu-new-notebook-submenu"></ul>
82+
<li id="new_notebook" class="menu_focus_highlight dropdown dropdown-submenu" role="none">
83+
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">{% trans %}New Notebook{% endtrans %}<span class="sr-only">Dropdown</span></a>
84+
<ul class="dropdown-menu" id="menu-new-notebook-submenu" role="menu">
85+
</ul>
8586
</li>
8687
<li id="open_notebook" role="none"
8788
title="{% trans %}Opens a new window with the Dashboard view{% endtrans %}">
@@ -98,7 +99,7 @@
9899
<li id="save_checkpoint" role="none"><a href="#" role="menuitem">{% trans %}Save and Checkpoint{% endtrans %}</a></li>
99100
<!-- <hr/> -->
100101
<li class="divider" role="none"></li>
101-
<li id="restore_checkpoint" class="dropdown-submenu" role="none"><a href="#" role="menuitem">{% trans %}Revert to Checkpoint{% endtrans %}<span class="sr-only">{% trans %}Toggle Dropdown{% endtrans %}</span></a>
102+
<li id="restore_checkpoint" class="menu_focus_highlight dropdown-submenu" role="none"><a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">{% trans %}Revert to Checkpoint{% endtrans %}<span class="sr-only">Dropdown</span></a>
102103
<ul class="dropdown-menu">
103104
<li><a href="#"></a></li>
104105
<li><a href="#"></a></li>
@@ -109,7 +110,7 @@
109110
</li>
110111
<li class="divider" role="none"></li>
111112
<li id="print_preview" role="none"><a href="#" role="menuitem">{% trans %}Print Preview{% endtrans %}</a></li>
112-
<li class="dropdown-submenu" role="none"><a href="#" role="menuitem">{% trans %}Download as{% endtrans %}<span class="sr-only">{% trans %}Toggle Dropdown{% endtrans %}</span></a>
113+
<li class="dropdown-submenu menu_focus_highlight" role="none"><a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">{% trans %}Download as{% endtrans %}<span class="sr-only">Dropdown</span></a>
113114
<ul id="download_menu" class="dropdown-menu">
114115
{% for exporter in get_frontend_exporters() %}
115116
<li id="download_{{ exporter.name }}">
@@ -174,8 +175,8 @@
174175
title="{% trans %}Show/Hide line numbers in cells{% endtrans %}">
175176
<a href="#" role="menuitem">{% trans %}Toggle Line Numbers{% endtrans %}</a>
176177
</li>
177-
<li id="menu-cell-toolbar" class="dropdown-submenu" role="none">
178-
<a href="#" role="menuitem">{% trans %}Cell Toolbar{% endtrans %}</a>
178+
<li id="menu-cell-toolbar" class="menu_focus_highlight dropdown-submenu" role="none">
179+
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">{% trans %}Cell Toolbar{% endtrans %}</a>
179180
<ul class="dropdown-menu" id="menu-cell-toolbar-submenu"></ul>
180181
</li>
181182
</ul>
@@ -190,26 +191,26 @@
190191
<a href="#" role="menuitem">{% trans %}Insert Cell Below{% endtrans %}</a></li>
191192
</ul>
192193
</li>
193-
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">{% trans %}Cell{% endtrans %}</a>
194-
<ul id="cell_menu" class="dropdown-menu">
195-
<li id="run_cell" title="{% trans %}Run this cell, and move cursor to the next one{% endtrans %}">
196-
<a href="#">{% trans %}Run Cells{% endtrans %}</a></li>
197-
<li id="run_cell_select_below" title="{% trans %}Run this cell, select below{% endtrans %}">
198-
<a href="#">{% trans %}Run Cells and Select Below{% endtrans %}</a></li>
199-
<li id="run_cell_insert_below" title="{% trans %}Run this cell, insert below{% endtrans %}">
200-
<a href="#">{% trans %}Run Cells and Insert Below{% endtrans %}</a></li>
201-
<li id="run_all_cells" title="{% trans %}Run all cells in the notebook{% endtrans %}">
202-
<a href="#">{% trans %}Run All{% endtrans %}</a></li>
203-
<li id="run_all_cells_above" title="{% trans %}Run all cells above (but not including) this cell{% endtrans %}">
204-
<a href="#">{% trans %}Run All Above{% endtrans %}</a></li>
205-
<li id="run_all_cells_below" title="{% trans %}Run this cell and all cells below it{% endtrans %}">
206-
<a href="#">{% trans %}Run All Below{% endtrans %}</a></li>
207-
<li class="divider"></li>
208-
<li id="change_cell_type" class="dropdown-submenu"
194+
<li class="dropdown"><a href="#" class="dropdown-toggle" id="celllink" data-toggle="dropdown" aria-haspopup="true" aria-controls="cell_menu">{% trans %}Cell{% endtrans %}</a>
195+
<ul id="cell_menu" class="dropdown-menu" role="menu" aria-labelledby="celllink">
196+
<li id="run_cell" role="none" title="{% trans %}Run this cell, and move cursor to the next one{% endtrans %}">
197+
<a role="menuitem" href="#">{% trans %}Run Cells{% endtrans %}</a></li>
198+
<li id="run_cell_select_below" role="none" title="{% trans %}Run this cell, select below{% endtrans %}">
199+
<a href="#" role="menuitem">{% trans %}Run Cells and Select Below{% endtrans %}</a></li>
200+
<li id="run_cell_insert_below" role="none" title="{% trans %}Run this cell, insert below{% endtrans %}">
201+
<a href="#" role="menuitem">{% trans %}Run Cells and Insert Below{% endtrans %}</a></li>
202+
<li id="run_all_cells" role="none" title="{% trans %}Run all cells in the notebook{% endtrans %}">
203+
<a href="#" role="menuitem">{% trans %}Run All{% endtrans %}</a></li>
204+
<li id="run_all_cells_above" role="none" title="{% trans %}Run all cells above (but not including) this cell{% endtrans %}">
205+
<a href="#" role="menuitem">{% trans %}Run All Above{% endtrans %}</a></li>
206+
<li id="run_all_cells_below" role="none" title="{% trans %}Run this cell and all cells below it{% endtrans %}">
207+
<a href="#" role="menuitem">{% trans %}Run All Below{% endtrans %}</a></li>
208+
<li class="divider" role="none"></li>
209+
<li id="change_cell_type" class="menu_focus_highlight dropdown-submenu" role="none"
209210
title="{% trans %}All cells in the notebook have a cell type. By default, new cells are created as 'Code' cells{% endtrans %}">
210-
<a href="#">{% trans %}Cell Type{% endtrans %}</a>
211-
<ul class="dropdown-menu">
212-
<li id="to_code"
211+
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">{% trans %}Cell Type{% endtrans %}</a>
212+
<ul class="dropdown-menu" role="menu">
213+
<li id="to_code" role="none"
213214
title="{% trans %}Contents will be sent to the kernel for execution, and output will display in the footer of cell{% endtrans %}">
214215
<a href="#">Code</a></li>
215216
<li id="to_markdown"
@@ -220,10 +221,10 @@
220221
<a href="#">{% trans %}Raw NBConvert{% endtrans %}</a></li>
221222
</ul>
222223
</li>
223-
<li class="divider"></li>
224-
<li id="current_outputs" class="dropdown-submenu"><a href="#">{% trans %}Current Outputs{% endtrans %}</a>
225-
<ul class="dropdown-menu">
226-
<li id="toggle_current_output"
224+
<li class="divider" role="none"></li>
225+
<li id="current_outputs" class="menu_focus_highlight dropdown-submenu" role="none"><a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">{% trans %}Current Outputs{% endtrans %}</a>
226+
<ul class="dropdown-menu" role="menu">
227+
<li id="toggle_current_output" role="none"
227228
title="{% trans %}Hide/Show the output of the current cell{% endtrans %}">
228229
<a href="#">{% trans %}Toggle{% endtrans %}</a>
229230
</li>
@@ -237,9 +238,9 @@
237238
</li>
238239
</ul>
239240
</li>
240-
<li id="all_outputs" class="dropdown-submenu"><a href="#">{% trans %}All Output{% endtrans %}</a>
241-
<ul class="dropdown-menu">
242-
<li id="toggle_all_output"
241+
<li id="all_outputs" class="menu_focus_highlight dropdown-submenu" role="none"><a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">{% trans %}All Output{% endtrans %}</a>
242+
<ul class="dropdown-menu" role="menu">
243+
<li id="toggle_all_output" role="none"
243244
title="{% trans %}Hide/Show the output of all cells{% endtrans %}">
244245
<a href="#">{% trans %}Toggle{% endtrans %}</a>
245246
</li>
@@ -281,9 +282,9 @@
281282
title="Shutdown the Kernel">
282283
<a href="#">{% trans %}Shutdown{% endtrans %}</a>
283284
</li>
284-
<li class="divider"></li>
285-
<li id="menu-change-kernel" class="dropdown-submenu">
286-
<a href="#">{% trans %}Change kernel{% endtrans %}</a>
285+
<li class="divider" role="none"></li>
286+
<li id="menu-change-kernel" class="menu_focus_highlight dropdown-submenu" role="menuitem">
287+
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">{% trans %}Change kernel{% endtrans %}</a>
287288
<ul class="dropdown-menu" id="menu-change-kernel-submenu"></ul>
288289
</li>
289290
</ul>

0 commit comments

Comments
 (0)