Make tooltip block sitewide accessible and fix warning icon accessibility issue (#10060)

* Make tooltip block sitewide accessible and fix warning icon key accessibility issue

* Remove unnecessary extra line and whitespace

Author: Goodyear2017

src/Bootstrap/dist/css/bootstrap-theme.css

@@ -633,4 +633,47 @@ body[id="/"] {
   background-repeat: no-repeat;
   background-attachment: fixed;
   color: var(--neutralForeground1Rest);
-}
+}
+/* For tooltip */
+.tooltip-target {
+  position: relative;
+  text-decoration: none;
+  color: var(--brandForegroundLinkRest);
+  cursor: pointer;
+
+  &:hover {
+    color: var(--brandForegroundLinkHover);
+  }
+
+  &.tooltip-icon--black-icon {
+    color: var(--neutralForeground1Rest);
+  }
+}
+
+.tooltip-wrapper.popover {
+  min-width: 276px;
+  position: absolute;
+  transform: translateY(-50%);
+  top: calc(50%);
+}
+
+.tooltip-wrapper.popover.tooltip-with-icon {
+  top: calc(50%);
+}
+
+.tooltip-block {
+  position: relative;
+  color: var(--neutralForeground1Rest);
+
+  .popover-content {
+    display: block;
+  }
+
+  .popover {
+    left: -9999px;
+    display: inline-block;
+  }
+  .popover.show {
+    left: 0;
+  }
+}

src/Bootstrap/less/theme/base.less

@@ -295,37 +295,5 @@
       display: none;
     }
   }
-  
-  /* For tooltip */
-  .tooltip-target {
-    position: relative;
-    text-decoration: none;
-    color: var(--brandForegroundLinkRest);
-    cursor: pointer;
-
-    &:hover {
-      color: var(--brandForegroundLinkHover);
-    }
-  }
-  
-  .tooltip-wrapper.popover {
-    min-width: 276px;
-    position: absolute;
-    transform: translateY(-50%);
-    top: calc(50%);
-  }
-  
-  .tooltip-wrapper.popover.tooltip-with-icon {
-    top: calc(50%);
-  }
-  
-  .tooltip-block {
-    position: relative;
-    color: var(--neutralForeground1Rest);
-  
-    .popover-content {
-      display: block;
-    }
-  }
 }
 

src/Bootstrap/less/theme/page-list-packages.less

@@ -675,4 +675,14 @@
             $("#footer-privacy-policy-link").after(" - <a class='button' href = 'javascript: window.nuget.wcpSiteConsent.manageConsent()' > Manage Cookies</a >")
         }
     });
+    //for tooltip hover and focus
+    $('.tooltip-target').each(function () {
+        $(this).on('mouseenter focusin', function () {
+            $(this).find('.tooltip-wrapper').addClass('show');
+        });
+        $(this).on('mouseleave focusout', function () {
+            $(this).find('.tooltip-wrapper').removeClass('show');
+        });
+    });
+
 }());

src/NuGetGallery/Content/gallery/css/bootstrap.min.css

@@ -212,16 +212,7 @@ $(function() {
     $(".reserved-indicator").each(window.nuget.setPopovers);
     $(".package-warning--vulnerable").each(window.nuget.setPopovers);
     $(".package-warning--deprecated").each(window.nuget.setPopovers);
-    //for tooltip hover and focus
-    $('.tooltip-target').each(function () {
-        $(this).on('mouseenter focusin', function () {
-            $(this).find('.tooltip-wrapper').addClass('show');
-        });
-        $(this).on('mouseleave focusout', function () {
-            $(this).find('.tooltip-wrapper').removeClass('show');
-        });
-    });
-
+    
     // for using arrow keys in Framwork filter mode checkbox tree 
     $('.tfmTab li input').each(function () {
         $(this).on('keydown', function (e) {

src/NuGetGallery/Scripts/gallery/common.js

@@ -971,8 +971,18 @@
                                             }
                                             else
                                             {
-                                                <td tabindex="0" class="package-icon-cell package-warning-icon" aria-label="@packageVersion.PackageWarningIconTitle">
-                                                    <i tabindex="0" class="ms-Icon ms-Icon--Warning package-icon" title="@packageVersion.PackageWarningIconTitle"></i>
+                                                <td tabindex="0" class="package-icon-cell package-warning-icon">
+                                                    <a class="tooltip-target tooltip-icon--black-icon" href="javascript:void(0)" role="button"  aria-describedby="[email protected]" >
+                                                        <i class="ms-Icon ms-Icon--Warning package-icon"></i>
+                                                        <span class="tooltip-block" role="tooltip" id="[email protected]">
+                                                            <span class="tooltip-wrapper tooltip-with-icon popover right">
+                                                                <span class="arrow"></span>
+                                                                <span class="popover-content">
+                                                                    @packageVersion.PackageWarningIconTitle
+                                                                </span>
+                                                            </span>
+                                                        </span>
+                                                    </a>
                                                 </td>
                                             }
                                         </tr>