HFP-3584 H5P actionbar: Fix semantics + stop using title (h5p#133)

* HFP-3548 Implement H5P.Tooltip * HFP-3548 Improve code and avoid duplication * HFP-3548 Implement configurable position for tooltip * HFP-3548 Add positional css to tooltip * HFP-3584 Add accessible tooltip to action-bar Co-authored-by: Pål Jørgensen <[email protected]>
One-Learning-Community · Aug 15, 2022 · 60f7a9e · 60f7a9e
1 parent 573d1ba
commit 60f7a9e
Showing 1 changed file with 6 additions and 3 deletions.
diff --git a/js/h5p-action-bar.js b/js/h5p-action-bar.js
@@ -35,14 +35,15 @@ H5P.ActionBar = (function ($, EventDispatcher) {
       var handler = function () {
         self.trigger(type);
       };
-      var $actionButton = H5P.jQuery('<li/>', {
+
+      let $actionList = H5P.jQuery('<li/>', {
         'class': 'h5p-button h5p-noselect h5p-' + (customClass ? customClass : type),
         appendTo: $actions
       });
 
       H5P.jQuery('<button/>', {
         tabindex: 0,
-        title: H5P.t(type + 'Description'),
+        'aria-label': H5P.t(type + 'Description'),
         html: H5P.t(type),
         on: {
           click: handler,
@@ -53,9 +54,11 @@ H5P.ActionBar = (function ($, EventDispatcher) {
             }
           }
         },
-        appendTo: $actionButton
+        appendTo: $actionList
       });
 
+      new H5P.Tooltip($actionButton.get(0));
+
       hasActions = true;
     };