Skip to content

Tooltips visible through keyboard navigation for specified buttons: issue #3964 #4729

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

Merged
merged 2 commits into from
Jun 7, 2020
+69 −9
Merged

Tooltips visible through keyboard navigation for specified buttons: issue #3964 #4729

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
9ba4e08
TO show tooltips via keyboard forDuplicate,View,Rename, Download, Shu…
Jun 17, 2019
16e38e6
Merge branch 'master' into issue-3964
joshuazeltser 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
47 changes: 47 additions & 0 deletions notebook/static/tree/less/tree.less
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,6 +67,8 @@ ul.breadcrumb {
.dynamic-buttons {
padding-top: @dashboard_tb_pad - 1px;
display: inline-block;
width: 400px;

}

.list_toolbar [class*="span"] {
Expand Down Expand Up @@ -410,3 +412,48 @@ ul#new-menu {
display: inline-block;
padding-top: @dashboard_tb_pad;
}

//TO show tooltips via keyboard for"Duplicate","View","Rename", "Download", "Shutdown", "Edit","Move", "Delete" buttons.

.visually-hidden {
clip-path: inset(100%);
clip: rect(1px, 1px, 1px, 1px);
height: 1px;
overflow: hidden;
position: absolute;
white-space: nowrap;
width: 1px;
}

button:focus + [role="tooltip"] {
visibility: visible;
opacity: 1;
}

.button-and-tooltip {
position: relative;
display: inline-block;
}

[role="tooltip"] {
/* Position the tooltip */
position: absolute;
top:70%;
display:inline;
//--------------
visibility: hidden;
width: 100px;
background-color: #F0EFEF;
color: #080808;
text-align: center;
padding: 3px;
outline-color: grey;
outline-offset: -2px;
outline-style: auto;
outline-width:1px;
z-index: 1;
opacity: 0;
transition: opacity .6s;
margin: 3px;
font-size:10px;
}
31 changes: 22 additions & 9 deletions notebook/templates/tree.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -41,14 +41,24 @@
{% trans %}Select items to perform actions on them.{% endtrans %}
</div>
<div class="dynamic-buttons">
<button title="{% trans %}Duplicate selected{% endtrans %}" aria-label="{% trans %}Duplicate{% endtrans %}" class="duplicate-button btn btn-default btn-xs">{% trans %}Duplicate{% endtrans %}</button>
<button title="{% trans %}Rename selected{% endtrans %}" aria-label="{% trans %}Rename{% endtrans %}" class="rename-button btn btn-default btn-xs">{% trans %}Rename{% endtrans %}</button>
<button title="{% trans %}Move selected{% endtrans %}" aria-label="{% trans %}Move{% endtrans %}" class="move-button btn btn-default btn-xs">{% trans %}Move{% endtrans %}</button>
<button title="{% trans %}Download selected{% endtrans %}" aria-label="{% trans %}Download{% endtrans %}" class="download-button btn btn-default btn-xs">{% trans %}Download{% endtrans %}</button>
<button title="{% trans %}Shutdown selected notebook(s){% endtrans %}" aria-label="{% trans %}Shutdown{% endtrans %}" class="shutdown-button btn btn-default btn-xs btn-warning">{% trans %}Shutdown{% endtrans %}</button>
<button title="{% trans %}View selected{% endtrans %}" aria-label="{% trans %}View{% endtrans %}" class="view-button btn btn-default btn-xs">{% trans %}View{% endtrans %}</button>
<button title="{% trans %}Edit selected{% endtrans %}" aria-label="{% trans %}Edit{% endtrans %}" class="edit-button btn btn-default btn-xs">{% trans %}Edit{% endtrans %}</button>
<button title="{% trans %}Delete selected{% endtrans %}" aria-label="{% trans %}Delete selected{% endtrans %}" class="delete-button btn btn-default btn-xs btn-danger"><i class="fa fa-trash"></i></button>
<button title="{% trans %}Duplicate selected{% endtrans %}" aria-label="{% trans %}Duplicate selected{% endtrans %}" class="duplicate-button btn btn-default btn-xs" aria-describedby="tooltip1">{% trans %}Duplicate{% endtrans %} </button>
<div role="tooltip" id="tooltip1" >{% trans %}Duplicate selected{% endtrans %}</div>
<button title="{% trans %}Rename selected{% endtrans %}" aria-label="{% trans %}Rename selected{% endtrans %}" class="rename-button btn btn-default btn-xs" aria-describedby="tooltip2">{% trans %}Rename{% endtrans %}</button>
<div role="tooltip" id="tooltip2" >{% trans %}Rename selected{% endtrans %}</div>
<button title="{% trans %}Move selected{% endtrans %}" aria-label="{% trans %}Move selected{% endtrans %}" class="move-button btn btn-default btn-xs" aria-describedby="tooltip3">{% trans %}Move{% endtrans %}</button>
<div role="tooltip" id="tooltip3" >{% trans %}Move selected{% endtrans %}</div>
<button title="{% trans %}Download selected{% endtrans %}" aria-label="{% trans %}Download selected{% endtrans %}" class="download-button btn btn-default btn-xs" aria-describedby="tooltip4">{% trans %}Download{% endtrans %}</button>
<div role="tooltip" id="tooltip4" >{% trans %}Download selected{% endtrans %}</div>
<button title="{% trans %}Shutdown selected notebook(s){% endtrans %}" aria-label="{% trans %}Shutdown selected notebook(s){% endtrans %}" class="shutdown-button btn btn-default btn-xs btn-warning" aria-describedby="tooltip5">{% trans %}Shutdown{% endtrans %}</button>
<div role="tooltip" id="tooltip5" >{% trans %}Shutdown selected notebook(s){% endtrans %}</div>
<button title="{% trans %}View selected{% endtrans %}" aria-label="{% trans %}View selected{% endtrans %}" class="view-button btn btn-default btn-xs" aria-describedby="tooltip6">{% trans %}View{% endtrans %}</button>
<div role="tooltip" id="tooltip6" >{% trans %}View selected{% endtrans %}</div>
<button title="{% trans %}Edit selected{% endtrans %}" aria-label="{% trans %}Edit selected{% endtrans %}" class="edit-button btn btn-default btn-xs" aria-describedby="tooltip7">{% trans %}Edit{% endtrans %}</button>
<div role="tooltip" id="tooltip7" >{% trans %}Edit selected{% endtrans %}</div>
<button title="{% trans %}Delete selected{% endtrans %}" aria-label="{% trans %}Delete selected{% endtrans %}" class="delete-button btn btn-default btn-xs btn-danger" aria-describedby="tooltip8">
<i class="fa fa-trash"></i>
</button>
<div role="tooltip" id="tooltip8" >{% trans %}Delete selected{% endtrans %}</div>
</div>
</div>
<div class="col-sm-4 no-padding tree-buttons">
Expand Down Expand Up @@ -205,7 +215,10 @@

{% block script %}
{{super()}}

<script type="text/javascript">
('#element').tooltip('enable')
</script>

<script src="{{ static_url("tree/js/main.min.js") }}" type="text/javascript" charset="utf-8"></script>

{% endblock %}