From 59918ccc775998cd588c6a5fc044a7b101408529 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?C=C3=A9dric=20Krier?= <ced@b2ck.com>
Date: Thu, 22 Mar 2018 16:58:40 +0100
Subject: [PATCH] Replace tooltip by title and aria-label

As we display only text, it is more efficient to use title attribute. But we
must also set aria-label because not all screen readers read the title.
We add also the missing tooltip on some buttons.

issue6828
review41201002
---
 src/common.js    |  2 --
 src/screen.js    | 23 +++++++++-------
 src/tab.js       | 15 +++--------
 src/view/form.js | 69 +++++++++++++++++++++++++++++++++---------------
 src/view/tree.js |  2 --
 5 files changed, 64 insertions(+), 47 deletions(-)

diff --git a/src/common.js b/src/common.js
index 387658d64c..ff5db2e1b4 100644
--- a/src/common.js
+++ b/src/common.js
@@ -803,10 +803,8 @@
                         tip = Sao.i18n.gettext('By: ') +
                             users.join(Sao.i18n.gettext(', '));
                     }
-                    counter.data('toggle', 'tooltip');
                     counter.text(users.length || '');
                     counter.attr('title', tip);
-                    counter.tooltip();
                 }.bind(this));
             }
 
diff --git a/src/screen.js b/src/screen.js
index 09f05cf98b..fd0c6d2011 100644
--- a/src/screen.js
+++ b/src/screen.js
@@ -45,7 +45,8 @@
             var but_submit = jQuery('<button/>', {
                 'type': 'submit',
                 'class': 'btn btn-default',
-                'aria-label': Sao.i18n.gettext('Search')
+                'aria-label': Sao.i18n.gettext("Search"),
+                'title': Sao.i18n.gettext("Search"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-search'
             }));
@@ -55,7 +56,8 @@
                 'class': 'btn btn-default dropdown-toggle',
                 'data-toggle': 'dropdown',
                 'aria-expanded': false,
-                'aria-label': Sao.i18n.gettext('Bookmarks'),
+                'aria-label': Sao.i18n.gettext("Bookmarks"),
+                'title': Sao.i18n.gettext("Bookmarks"),
                 'id': 'bookmarks'
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-bookmark',
@@ -115,7 +117,8 @@
             this.but_prev = jQuery('<button/>', {
                 type: 'button',
                 'class': 'btn btn-default',
-                'aria-label': Sao.i18n.gettext('Previous')
+                'aria-label': Sao.i18n.gettext("Previous"),
+                'title': Sao.i18n.gettext("Previous"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-menu-left',
                 'aria-hidden': true
@@ -124,7 +127,8 @@
             this.but_next = jQuery('<button/>', {
                 type: 'button',
                 'class': 'btn btn-default',
-                'aria-label': Sao.i18n.gettext('Next')
+                'aria-label': Sao.i18n.gettext("Next"),
+                'title': Sao.i18n.gettext("Next"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-menu-right',
                 'aria-hidden': true
@@ -201,17 +205,18 @@
         },
         set_star: function(star) {
             var glyphicon = this.but_star.children('span.glyphicon');
+            var title;
             if (star) {
                 glyphicon.removeClass('glyphicon-star-empty');
                 glyphicon.addClass('glyphicon-star');
-                this.but_star.attr('aria-label',
-                        Sao.i18n.gettext('Remove this bookmark'));
+                title = Sao.i18n.gettext("Remove this bookmark");
             } else {
                 glyphicon.removeClass('glyphicon-star');
                 glyphicon.addClass('glyphicon-star-empty');
-                this.but_star.attr('aria-label',
-                       Sao.i18n.gettext('Bookmark this filter'));
+                title = Sao.i18n.gettext('Bookmark this filter');
             }
+            this.but_star.attr('title', title);
+            this.but_star.attr('aria-label', title);
         },
         get_star: function() {
             var glyphicon = this.but_star.children('span.glyphicon');
@@ -307,7 +312,6 @@
                 return;
             }
             var counter = this.tab_counter[idx];
-            counter.data('toggle', 'tooltip');
             if (count === null) {
                 counter.attr('title', '');
                 counter.text('');
@@ -319,7 +323,6 @@
                 }
                 counter.text(text);
             }
-            counter.tooltip();
         },
         do_search: function() {
             return this.screen.search_filter(this.get_text());
diff --git a/src/tab.js b/src/tab.js
index 0b2bb5dc27..7c8eb2bb13 100644
--- a/src/tab.js
+++ b/src/tab.js
@@ -217,10 +217,7 @@
                     'class': 'glyphicon ' + item.icon,
                     'aria-hidden': 'true'
                 }))
-                .appendTo(group)
-                .data('toggle', 'tooltip')
-                .data('placement', 'bottom')
-                .tooltip();
+                .appendTo(group);
                 this.buttons[item.id].click(this[item.id].bind(this));
             };
             this.menu_def().forEach(add_button.bind(this));
@@ -262,7 +259,7 @@
                 if (!next.length) {
                     next = tab.prevAll('li').first();
                 }
-                tab.tooltip('destroy').remove();
+                tab.remove();
                 content.remove();
                 Sao.Tab.tabs.splice(Sao.Tab.tabs.indexOf(this), 1);
                 if (next) {
@@ -277,7 +274,7 @@
         set_name: function(name) {
             this.name = name;
             this.name_el.text(Sao.common.ellipsize(name, 20));
-            this.name_el.parents('li').first().attr('title', name).tooltip();
+            this.name_el.parents('li').first().attr('title', name);
         }
     });
 
@@ -373,7 +370,6 @@
         .append(tab.name_el);
         jQuery('<li/>', {
             'role': 'presentation',
-            'data-toggle': 'tooltip',
             'data-placement': 'bottom',
             id: 'nav-' + tab.id
         }).append(tab_link)
@@ -482,10 +478,7 @@
                         }))
                         .append(jQuery('<span/>', {
                             'class': 'caret'
-                        }))
-                        .data('toggle', 'tooltip')
-                        .data('placement', 'bottom')
-                        .tooltip())
+                        })))
                     .append(jQuery('<ul/>', {
                         'class': 'dropdown-menu',
                         'role': 'menu',
diff --git a/src/view/form.js b/src/view/form.js
index b50a03f492..c42c851521 100644
--- a/src/view/form.js
+++ b/src/view/form.js
@@ -533,9 +533,7 @@ function eval_pyson(value){
             }
 
             if (attributes.help) {
-                widget.el.data('toggle', 'tooltip');
                 widget.el.attr('title', attributes.help);
-                widget.el.tooltip();
             }
         },
         resize: function() {
@@ -1397,7 +1395,9 @@ function eval_pyson(value){
                 'class': 'input-group-btn'
             }).append(jQuery('<button/>', {
                 'class': 'datepickerbutton btn btn-default',
-                'type': 'button'
+                'type': 'button',
+                'aria-label': Sao.i18n.gettext("Open the calendar"),
+                'title': Sao.i18n.gettext("Open the calendar"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-calendar'
             }))).appendTo(this.date);
@@ -2148,24 +2148,29 @@ function eval_pyson(value){
                 return;
             }
             this.set_text(field.get_client(record));
-            var primary, secondary;
+            var primary, tooltip1, secondary, tooltip2;
             value = field.get(record);
             if (this.has_target(value)) {
                 primary = 'glyphicon-folder-open';
+                tooltip1 = Sao.i18n.gettext("Open the record <F2>");
                 secondary = 'glyphicon-erase';
+                tooltip2 = Sao.i18n.gettext("Clear the field <Del>");
             } else {
                 primary = null;
+                tooltip1 = '';
                 secondary = 'glyphicon-search';
+                tooltip2 = Sao.i18n.gettext("Search a record <F2>");
             }
             if (this.entry.prop('readonly')) {
                 secondary = null;
             }
             [
-                [primary, this.but_primary],
-                [secondary, this.but_secondary]
+                [primary, tooltip1, this.but_primary],
+                [secondary, tooltip2, this.but_secondary]
             ].forEach(function(items) {
                 var icon_name = items[0];
-                var button = items[1];
+                var tooltip = items[1];
+                var button = items[2];
                 var icon = button.find('.glyphicon');
                 icon.removeClass().addClass('glyphicon');
                 // don't use .hide/.show because the display value is not
@@ -2176,6 +2181,8 @@ function eval_pyson(value){
                     button.parent().css('display', 'table-cell');
                     icon.addClass(icon_name);
                 }
+                button.attr('aria-label', tooltip);
+                button.attr('title', tooltip);
             });
         },
         focus: function() {
@@ -2457,7 +2464,8 @@ function eval_pyson(value){
             this.el.addClass('form-inline');
             this.select = jQuery('<select/>', {
                 'class': 'form-control input-sm',
-                'aria-label': attributes.string
+                'aria-label': attributes.string,
+                'title': attributes.string,
             });
             this.el.prepend(jQuery('<span/>').text('-'));
             this.el.prepend(this.select);
@@ -2641,7 +2649,8 @@ function eval_pyson(value){
             this.but_switch = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
                 'type': 'button',
-                'aria-label': Sao.i18n.gettext('Switch')
+                'aria-label': Sao.i18n.gettext("Switch"),
+                'title': Sao.i18n.gettext("Switch"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-list-alt'
             })).appendTo(buttons);
@@ -2650,7 +2659,8 @@ function eval_pyson(value){
             this.but_previous = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
                 'type': 'button',
-                'aria-label': Sao.i18n.gettext('Previous')
+                'aria-label': Sao.i18n.gettext("Previous"),
+                'title': Sao.i18n.gettext("Previous"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-chevron-left'
             })).appendTo(buttons);
@@ -2664,7 +2674,8 @@ function eval_pyson(value){
             this.but_next = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
                 'type': 'button',
-                'aria-label': Sao.i18n.gettext('Next')
+                'aria-label': Sao.i18n.gettext("Next"),
+                'title': Sao.i18n.gettext("Next"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-chevron-right'
             })).appendTo(buttons);
@@ -2677,7 +2688,8 @@ function eval_pyson(value){
                 this.but_add = jQuery('<button/>', {
                     'class': 'btn btn-default btn-sm',
                     'type': 'button',
-                    'aria-label': Sao.i18n.gettext('Add')
+                    'aria-label': Sao.i18n.gettext("Add"),
+                    'title': Sao.i18n.gettext("Add"),
                 }).append(jQuery('<span/>', {
                     'class': 'glyphicon glyphicon-plus'
                 })).appendTo(buttons);
@@ -2686,7 +2698,8 @@ function eval_pyson(value){
                 this.but_remove = jQuery('<button/>', {
                     'class': 'btn btn-default btn-sm',
                     'type': 'button',
-                    'aria-label': Sao.i18n.gettext('Remove')
+                    'aria-label': Sao.i18n.gettext("Remove"),
+                    'title': Sao.i18n.gettext("Remove"),
                 }).append(jQuery('<span/>', {
                     'class': 'glyphicon glyphicon-minus'
                 })).appendTo(buttons);
@@ -2696,7 +2709,8 @@ function eval_pyson(value){
             this.but_new = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
                 'type': 'button',
-                'aria-label': Sao.i18n.gettext('New')
+                'aria-label': Sao.i18n.gettext("New"),
+                'title': Sao.i18n.gettext("New"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-edit'
             })).appendTo(buttons);
@@ -2705,7 +2719,8 @@ function eval_pyson(value){
             this.but_open = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
                 'type': 'button',
-                'aria-label': Sao.i18n.gettext('Open')
+                'aria-label': Sao.i18n.gettext("Open"),
+                'title': Sao.i18n.gettext("Open"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-folder-open'
             })).appendTo(buttons);
@@ -2714,7 +2729,8 @@ function eval_pyson(value){
             this.but_del = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
                 'type': 'button',
-                'aria-label': Sao.i18n.gettext('Delete')
+                'aria-label': Sao.i18n.gettext("Delete"),
+                'title': Sao.i18n.gettext("Delete"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-trash'
             })).appendTo(buttons);
@@ -2723,7 +2739,8 @@ function eval_pyson(value){
             this.but_undel = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
                 'type': 'button',
-                'aria-label': Sao.i18n.gettext('Undelete')
+                'aria-label': Sao.i18n.gettext("Undelete"),
+                'title': Sao.i18n.gettext("Undelete"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-repeat'
             })).appendTo(buttons);
@@ -3144,7 +3161,8 @@ function eval_pyson(value){
             this.but_add = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
                 'type': 'button',
-                'aria-label': Sao.i18n.gettext('Add')
+                'aria-label': Sao.i18n.gettext("Add"),
+                'title': Sao.i18n.gettext("Add"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-plus'
             })).appendTo(buttons);
@@ -3153,7 +3171,8 @@ function eval_pyson(value){
             this.but_remove = jQuery('<button/>', {
                 'class': 'btn btn-default btn-sm',
                 'type': 'button',
-                'aria-label': Sao.i18n.gettext('Remove')
+                'aria-label': Sao.i18n.gettext("Remove"),
+                'title': Sao.i18n.gettext("Remove"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-minus'
             })).appendTo(buttons);
@@ -3361,7 +3380,9 @@ function eval_pyson(value){
 
             this.but_save_as = jQuery('<button/>', {
                 'class': 'btn btn-default',
-                'type': 'button'
+                'type': 'button',
+                'aria-label': Sao.i18n.gettext("Save As"),
+                'title': Sao.i18n.gettext("Save As..."),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-save'
             })).appendTo(group);
@@ -3369,7 +3390,9 @@ function eval_pyson(value){
 
             this.but_select = jQuery('<button/>', {
                 'class': 'btn btn-default',
-                'type': 'button'
+                'type': 'button',
+                'aria-label': Sao.i18n.gettext("Select"),
+                'title': Sao.i18n.gettext("Select..."),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-search'
             })).appendTo(group);
@@ -3377,7 +3400,9 @@ function eval_pyson(value){
 
             this.but_clear = jQuery('<button/>', {
                 'class': 'btn btn-default',
-                'type': 'button'
+                'type': 'button',
+                'aria-label': Sao.i18n.gettext("Clear"),
+                'title': Sao.i18n.gettext("Clear"),
             }).append(jQuery('<span/>', {
                 'class': 'glyphicon glyphicon-erase'
             })).appendTo(group);
diff --git a/src/view/tree.js b/src/view/tree.js
index 32e5049666..d03c363fa6 100644
--- a/src/view/tree.js
+++ b/src/view/tree.js
@@ -115,9 +115,7 @@
                     }
                 }
                 if (column.attributes.help) {
-                    label.data('toggle', 'tooltip');
                     label.attr('title', column.attributes.help);
-                    label.tooltip();
                 }
                 if (column.sortable) {
                     var arrow = jQuery('<span/>');