Tooltip icon to be tabbed and showing the tooltip (#3431)

* Tooltip tab-able.

* adding role as button to tooltip icon

* Tooltip: adding eventListner for enter to focus

* remove the event listener

libs/features/icons/icons.css

@@ -80,10 +80,14 @@
   border-color: transparent transparent #0469E3;
 }
 
-.milo-tooltip:hover::before {
+.milo-tooltip:hover::before,
+.milo-tooltip:focus::before,
+.milo-tooltip:active::before {
   display: block; 
 }
 
-.milo-tooltip:hover::after {
+.milo-tooltip:hover::after,
+.milo-tooltip:focus::after,
+.milo-tooltip:active::after {
   display: block;
 }

libs/features/icons/icons.js

@@ -46,6 +46,8 @@ function decorateToolTip(icon) {
   // Position is the next to last part of a tooltip
   const place = conf.pop()?.trim().toLowerCase() || 'right';
   icon.className = `icon icon-info milo-tooltip ${place}`;
+  icon.setAttribute('tabindex', '0');
+  icon.setAttribute('role', 'button');
   wrapper.parentElement.replaceChild(icon, wrapper);
 }