Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Solve issue #3940: The dropdown submenu at notebook page is not keyboard accessible #4732

Merged
merged 3 commits into from
Jun 7, 2020
Merged

Solve issue #3940: The dropdown submenu at notebook page is not keyboard accessible #4732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
7a0c4ae
Solve issue #3940
Jun 13, 2019
7a7118b
Merge branch 'master' into issue-3940
taohan16 Jun 27, 2019
2363c3e
Update menubar.js
taohan16 Jun 27, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
9 changes: 8 additions & 1 deletion notebook/static/acc_overwrite.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -51,4 +51,11 @@
// background-color: @navbar-default-link-hover-bg;
}
}
}
}

.menu_focus_highlight{
a:focus {
outline: -webkit-focus-ring-color auto 5px;
}
}

3 changes: 2 additions & 1 deletion notebook/static/notebook/js/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -45,7 +45,8 @@ requirejs([
'notebook/js/about',
'notebook/js/searchandreplace',
'notebook/js/clipboard',
'bidi/bidi'
'bidi/bidi',
'notebook/js/celltoolbarpresets/tags'
], function(
$,
contents_service,
Expand Down
12 changes: 12 additions & 0 deletions notebook/static/notebook/js/menubar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -152,12 +152,24 @@ define([
this.events.trigger('resize-header.Page');
};

(function($){
$(document).ready(function(){
$('ul.dropdown-menu [data-toggle=dropdown]').on('click', function(event) {
event.preventDefault();
event.stopPropagation();
$(this).parent().siblings().removeClass('open');
$(this).parent().toggleClass('open');
});
});
})(jQuery);

MenuBar.prototype.bind_events = function () {
/**
* File
*/
var that = this;


this.element.find('#open_notebook').click(function () {
var parent = utils.url_path_split(that.notebook.notebook_path)[0];
window.open(
Expand Down
7 changes: 7 additions & 0 deletions notebook/static/notebook/less/menubar.less
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,7 @@


#menubar {

.border-box-sizing();
margin-top: 1px;

Expand Down Expand Up @@ -44,6 +47,8 @@
}
}

ul.dropdown-menu:focus

[dir="rtl"] ul.dropdown-menu {
text-align: right;
left : auto;
Expand Down Expand Up @@ -86,6 +91,8 @@ ul#help_menu li a{
}
}



// Make sub menus work in BS3.
// Credit: http://www.bootply.com/86684
.dropdown-submenu {
Expand Down
75 changes: 38 additions & 37 deletions notebook/templates/notebook.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,11 +77,12 @@
<span id="notification_area"></span>
<div class="navbar-collapse collapse">
<ul class="nav navbar-nav">
<li class="dropdown"><a href="#" id="filelink" aria-haspopup="true" aria-controls="file_menu class="dropdown-toggle" data-toggle="dropdown">{% trans %}File{% endtrans %}</a>
<li class="dropdown"><a href="#" class="dropdown-toggle" id="filelink" data-toggle="dropdown" aria-haspopup="true" aria-controls="file_menu">{% trans %}File{% endtrans %}</a>
<ul id="file_menu" class="dropdown-menu" role="menu" aria-labelledby="filelink">
<li id="new_notebook" class="dropdown-submenu" role="none">
<a href="#" role="menuitem">{% trans %}New Notebook{% endtrans %}<span class="sr-only">{% trans %}Toggle Dropdown{% endtrans %}</span></a>
<ul class="dropdown-menu" id="menu-new-notebook-submenu"></ul>
<li id="new_notebook" class="menu_focus_highlight dropdown dropdown-submenu" role="none">
<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>
<ul class="dropdown-menu" id="menu-new-notebook-submenu" role="menu">
</ul>
</li>
<li id="open_notebook" role="none"
title="{% trans %}Opens a new window with the Dashboard view{% endtrans %}">
Expand All @@ -98,7 +99,7 @@
<li id="save_checkpoint" role="none"><a href="#" role="menuitem">{% trans %}Save and Checkpoint{% endtrans %}</a></li>
<!-- <hr/> -->
<li class="divider" role="none"></li>
<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>
<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>
<ul class="dropdown-menu">
<li><a href="#"></a></li>
<li><a href="#"></a></li>
Expand All @@ -109,7 +110,7 @@
</li>
<li class="divider" role="none"></li>
<li id="print_preview" role="none"><a href="#" role="menuitem">{% trans %}Print Preview{% endtrans %}</a></li>
<li class="dropdown-submenu" role="none"><a href="#" role="menuitem">{% trans %}Download as{% endtrans %}<span class="sr-only">{% trans %}Toggle Dropdown{% endtrans %}</span></a>
<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>
<ul id="download_menu" class="dropdown-menu">
{% for exporter in get_frontend_exporters() %}
<li id="download_{{ exporter.name }}">
Expand Down Expand Up @@ -174,8 +175,8 @@
title="{% trans %}Show/Hide line numbers in cells{% endtrans %}">
<a href="#" role="menuitem">{% trans %}Toggle Line Numbers{% endtrans %}</a>
</li>
<li id="menu-cell-toolbar" class="dropdown-submenu" role="none">
<a href="#" role="menuitem">{% trans %}Cell Toolbar{% endtrans %}</a>
<li id="menu-cell-toolbar" 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 %}Cell Toolbar{% endtrans %}</a>
<ul class="dropdown-menu" id="menu-cell-toolbar-submenu"></ul>
</li>
</ul>
Expand All @@ -190,26 +191,26 @@
<a href="#" role="menuitem">{% trans %}Insert Cell Below{% endtrans %}</a></li>
</ul>
</li>
<li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">{% trans %}Cell{% endtrans %}</a>
<ul id="cell_menu" class="dropdown-menu">
<li id="run_cell" title="{% trans %}Run this cell, and move cursor to the next one{% endtrans %}">
<a href="#">{% trans %}Run Cells{% endtrans %}</a></li>
<li id="run_cell_select_below" title="{% trans %}Run this cell, select below{% endtrans %}">
<a href="#">{% trans %}Run Cells and Select Below{% endtrans %}</a></li>
<li id="run_cell_insert_below" title="{% trans %}Run this cell, insert below{% endtrans %}">
<a href="#">{% trans %}Run Cells and Insert Below{% endtrans %}</a></li>
<li id="run_all_cells" title="{% trans %}Run all cells in the notebook{% endtrans %}">
<a href="#">{% trans %}Run All{% endtrans %}</a></li>
<li id="run_all_cells_above" title="{% trans %}Run all cells above (but not including) this cell{% endtrans %}">
<a href="#">{% trans %}Run All Above{% endtrans %}</a></li>
<li id="run_all_cells_below" title="{% trans %}Run this cell and all cells below it{% endtrans %}">
<a href="#">{% trans %}Run All Below{% endtrans %}</a></li>
<li class="divider"></li>
<li id="change_cell_type" class="dropdown-submenu"
<li class="dropdown"><a href="#" class="dropdown-toggle" id="celllink" data-toggle="dropdown" aria-haspopup="true" aria-controls="cell_menu">{% trans %}Cell{% endtrans %}</a>
<ul id="cell_menu" class="dropdown-menu" role="menu" aria-labelledby="celllink">
<li id="run_cell" role="none" title="{% trans %}Run this cell, and move cursor to the next one{% endtrans %}">
<a role="menuitem" href="#">{% trans %}Run Cells{% endtrans %}</a></li>
<li id="run_cell_select_below" role="none" title="{% trans %}Run this cell, select below{% endtrans %}">
<a href="#" role="menuitem">{% trans %}Run Cells and Select Below{% endtrans %}</a></li>
<li id="run_cell_insert_below" role="none" title="{% trans %}Run this cell, insert below{% endtrans %}">
<a href="#" role="menuitem">{% trans %}Run Cells and Insert Below{% endtrans %}</a></li>
<li id="run_all_cells" role="none" title="{% trans %}Run all cells in the notebook{% endtrans %}">
<a href="#" role="menuitem">{% trans %}Run All{% endtrans %}</a></li>
<li id="run_all_cells_above" role="none" title="{% trans %}Run all cells above (but not including) this cell{% endtrans %}">
<a href="#" role="menuitem">{% trans %}Run All Above{% endtrans %}</a></li>
<li id="run_all_cells_below" role="none" title="{% trans %}Run this cell and all cells below it{% endtrans %}">
<a href="#" role="menuitem">{% trans %}Run All Below{% endtrans %}</a></li>
<li class="divider" role="none"></li>
<li id="change_cell_type" class="menu_focus_highlight dropdown-submenu" role="none"
title="{% trans %}All cells in the notebook have a cell type. By default, new cells are created as 'Code' cells{% endtrans %}">
<a href="#">{% trans %}Cell Type{% endtrans %}</a>
<ul class="dropdown-menu">
<li id="to_code"
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">{% trans %}Cell Type{% endtrans %}</a>
<ul class="dropdown-menu" role="menu">
<li id="to_code" role="none"
title="{% trans %}Contents will be sent to the kernel for execution, and output will display in the footer of cell{% endtrans %}">
<a href="#">Code</a></li>
<li id="to_markdown"
Expand All @@ -220,10 +221,10 @@
<a href="#">{% trans %}Raw NBConvert{% endtrans %}</a></li>
</ul>
</li>
<li class="divider"></li>
<li id="current_outputs" class="dropdown-submenu"><a href="#">{% trans %}Current Outputs{% endtrans %}</a>
<ul class="dropdown-menu">
<li id="toggle_current_output"
<li class="divider" role="none"></li>
<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>
<ul class="dropdown-menu" role="menu">
<li id="toggle_current_output" role="none"
title="{% trans %}Hide/Show the output of the current cell{% endtrans %}">
<a href="#">{% trans %}Toggle{% endtrans %}</a>
</li>
Expand All @@ -237,9 +238,9 @@
</li>
</ul>
</li>
<li id="all_outputs" class="dropdown-submenu"><a href="#">{% trans %}All Output{% endtrans %}</a>
<ul class="dropdown-menu">
<li id="toggle_all_output"
<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>
<ul class="dropdown-menu" role="menu">
<li id="toggle_all_output" role="none"
title="{% trans %}Hide/Show the output of all cells{% endtrans %}">
<a href="#">{% trans %}Toggle{% endtrans %}</a>
</li>
Expand Down Expand Up @@ -281,9 +282,9 @@
title="Shutdown the Kernel">
<a href="#">{% trans %}Shutdown{% endtrans %}</a>
</li>
<li class="divider"></li>
<li id="menu-change-kernel" class="dropdown-submenu">
<a href="#">{% trans %}Change kernel{% endtrans %}</a>
<li class="divider" role="none"></li>
<li id="menu-change-kernel" class="menu_focus_highlight dropdown-submenu" role="menuitem">
<a href="#" role="menuitem" aria-haspopup="true" aria-expanded="false" class="dropdown-toggle" data-toggle="dropdown">{% trans %}Change kernel{% endtrans %}</a>
<ul class="dropdown-menu" id="menu-change-kernel-submenu"></ul>
</li>
</ul>
Expand Down