TO show tooltips via keyboard forDuplicate,View,Rename, Download, Shutdown, Edit,Move, Delete buttons. (#4729)

Co-authored-by: Norah Abanumay <[email protected]>

Author: joshuazeltser

notebook/static/tree/less/tree.less

@@ -67,6 +67,8 @@ ul.breadcrumb {
 .dynamic-buttons {
     padding-top: @dashboard_tb_pad - 1px;
     display: inline-block;
+    width: 400px;
+
 }
 
 .list_toolbar [class*="span"] {
@@ -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;
+}

notebook/templates/tree.html

@@ -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">
@@ -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 %}