From 80217727d7ec2be0749a467bfbe4cdf93ec1d74a Mon Sep 17 00:00:00 2001
From: Drew Gillies <drewgil@microsoft.com>
Date: Mon, 7 Jun 2021 17:04:32 +1000
Subject: [PATCH 1/3] Add accessible popovers to vulnerability alerts

---
 .../Scripts/gallery/page-display-package.js   | 27 +++++++++----------
 .../Scripts/gallery/page-manage-packages.js   | 13 +++++++++
 .../Views/Packages/DisplayPackage.cshtml      |  4 +--
 src/NuGetGallery/Views/Users/Packages.cshtml  |  6 +++--
 4 files changed, 32 insertions(+), 18 deletions(-)

diff --git a/src/NuGetGallery/Scripts/gallery/page-display-package.js b/src/NuGetGallery/Scripts/gallery/page-display-package.js
index 78ae481ecf..b6dd390288 100644
--- a/src/NuGetGallery/Scripts/gallery/page-display-package.js
+++ b/src/NuGetGallery/Scripts/gallery/page-display-package.js
@@ -171,18 +171,17 @@ $(function () {
         });
     }
 
-    // Add popover to reserved check mark 
-    $(".reserved-indicator").each(
-        function () {
-            var checkmarkImage = $(this);
-            checkmarkImage.popover({ trigger: 'hover focus' });
-            checkmarkImage.click(function () {
-                checkmarkImage.popover('show');
-                setTimeout(function () {
-                        checkmarkImage.popover('destroy');
-                    },
-                    1000);
-            });
-        }
-    );
+    // Add popover to warning icons
+    var popoverFunction = function () {
+        var checkmarkImage = $(this);
+        checkmarkImage.popover({ trigger: 'hover focus' });
+        checkmarkImage.click(function () {
+            checkmarkImage.popover('show');
+            setTimeout(function () {
+                    checkmarkImage.popover('destroy');
+                },
+                1000);
+        });
+    };
+    $(".ms-Icon--Warning").each(popoverFunction);
 });
diff --git a/src/NuGetGallery/Scripts/gallery/page-manage-packages.js b/src/NuGetGallery/Scripts/gallery/page-manage-packages.js
index 92ca2fa19e..6607d3c201 100644
--- a/src/NuGetGallery/Scripts/gallery/page-manage-packages.js
+++ b/src/NuGetGallery/Scripts/gallery/page-manage-packages.js
@@ -413,6 +413,19 @@
 
         setupColumnSorting();
 
+        // Add popover to warning icons
+        var popoverFunction = function () {
+            var checkmarkImage = $(this);
+            checkmarkImage.popover({ trigger: 'hover focus' });
+            checkmarkImage.click(function () {
+                checkmarkImage.popover('show');
+                setTimeout(function () {
+                        checkmarkImage.popover('destroy');
+                    },
+                    1000);
+            });
+        };
+        $(".ms-Icon--Warning").each(popoverFunction);
     });
 
 })();
\ No newline at end of file
diff --git a/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml b/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
index 6c576ef5cf..28a62799eb 100644
--- a/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
+++ b/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
@@ -828,8 +828,8 @@
                                     }
                                     else
                                     {
-                                        <td tabindex="0" class="package-icon-cell">
-                                            <i class="ms-Icon ms-Icon--Warning package-icon" title="@packageVersion.PackageWarningIconTitle"></i>
+                                        <td tabindex="0" class="package-icon-cell" aria-label="@packageVersion.PackageWarningIconTitle">
+                                            <i class="ms-Icon ms-Icon--Warning package-icon" data-content="@packageVersion.PackageWarningIconTitle" tabindex="0"></i>
                                         </td>
                                     }
                                 </tr>
diff --git a/src/NuGetGallery/Views/Users/Packages.cshtml b/src/NuGetGallery/Views/Users/Packages.cshtml
index 5a5083532b..7275391f12 100644
--- a/src/NuGetGallery/Views/Users/Packages.cshtml
+++ b/src/NuGetGallery/Views/Users/Packages.cshtml
@@ -177,8 +177,10 @@
                         </td>
                     @if (Model.IsManagePackagesVulnerabilitiesEnabled)
                     {
-                        <td class="package-icon-cell">
-                            <i class="ms-Icon ms-Icon--Warning package-icon" data-bind="visible: IsVulnerable" title="This version has at least one known vulnerability. Click on the package name for details."></i>
+                        var title = "This version has at least one known vulnerability. Click on the package name for details.";
+                        <td class="package-icon-cell" aria-label="@title" tabindex="0">
+                            <i class="ms-Icon ms-Icon--Warning package-icon" data-bind="visible: IsVulnerable"
+                               data-content="@title" tabindex="0"></i>
                         </td>
                     }
                         <td class="text-right align-middle package-controls">

From a1fe8f33a7e10f156d1831286d2dbe291feeca81 Mon Sep 17 00:00:00 2001
From: Drew Gillies <drewgil@microsoft.com>
Date: Tue, 8 Jun 2021 13:31:48 +1000
Subject: [PATCH 2/3] Fixed bug and made span the single element for reader and
 popover

---
 .../Scripts/gallery/page-display-package.js           |  2 +-
 .../Scripts/gallery/page-manage-packages.js           |  2 +-
 src/NuGetGallery/Views/Packages/DisplayPackage.cshtml | 11 +++++++----
 src/NuGetGallery/Views/Users/Packages.cshtml          | 11 ++++++-----
 4 files changed, 15 insertions(+), 11 deletions(-)

diff --git a/src/NuGetGallery/Scripts/gallery/page-display-package.js b/src/NuGetGallery/Scripts/gallery/page-display-package.js
index b6dd390288..e4c6795587 100644
--- a/src/NuGetGallery/Scripts/gallery/page-display-package.js
+++ b/src/NuGetGallery/Scripts/gallery/page-display-package.js
@@ -183,5 +183,5 @@ $(function () {
                 1000);
         });
     };
-    $(".ms-Icon--Warning").each(popoverFunction);
+    $(".package-warning-icon").each(popoverFunction);
 });
diff --git a/src/NuGetGallery/Scripts/gallery/page-manage-packages.js b/src/NuGetGallery/Scripts/gallery/page-manage-packages.js
index 6607d3c201..9dc388b4d4 100644
--- a/src/NuGetGallery/Scripts/gallery/page-manage-packages.js
+++ b/src/NuGetGallery/Scripts/gallery/page-manage-packages.js
@@ -425,7 +425,7 @@
                     1000);
             });
         };
-        $(".ms-Icon--Warning").each(popoverFunction);
+        $(".package-warning-icon").each(popoverFunction);
     });
 
 })();
\ No newline at end of file
diff --git a/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml b/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
index 28a62799eb..5d87a7a368 100644
--- a/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
+++ b/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
@@ -774,7 +774,7 @@
                                 rowCount++;
                                 @VersionListDivider(rowCount, versionsExpanded)
                                 <tr class="@(packageVersion.IsCurrent(Model) ? "bg-info" : null)">
-                                    <td tabindex="0">
+                                    <td>
                                         <a href="@Url.Package(packageVersion)" title="@packageVersion.Version">
                                             @packageVersion.Version.Abbreviate(30)
                                         </a>
@@ -795,7 +795,7 @@
                                     {
                                         var packageStatusSummary = packageVersion.PackageStatusSummary;
 
-                                        <td tabindex="0">
+                                        <td>
                                             @if (packageStatusSummary == PackageStatusSummary.Listed ||
                                                  packageStatusSummary == PackageStatusSummary.Unlisted)
                                             {
@@ -828,8 +828,11 @@
                                     }
                                     else
                                     {
-                                        <td tabindex="0" class="package-icon-cell" aria-label="@packageVersion.PackageWarningIconTitle">
-                                            <i class="ms-Icon ms-Icon--Warning package-icon" data-content="@packageVersion.PackageWarningIconTitle" tabindex="0"></i>
+                                        <td class="package-icon-cell">
+                                            <span class="package-warning-icon" aria-label="@packageVersion.PackageWarningIconTitle" 
+                                                  data-content="@packageVersion.PackageWarningIconTitle" tabindex="0">
+                                                <i class="ms-Icon ms-Icon--Warning package-icon"></i>
+                                            </span>
                                         </td>
                                     }
                                 </tr>
diff --git a/src/NuGetGallery/Views/Users/Packages.cshtml b/src/NuGetGallery/Views/Users/Packages.cshtml
index 7275391f12..b2c94bd56e 100644
--- a/src/NuGetGallery/Views/Users/Packages.cshtml
+++ b/src/NuGetGallery/Views/Users/Packages.cshtml
@@ -170,17 +170,18 @@
                         </td>
                     }
                         <td class="align-middle text-nowrap" data-bind="attr: { 'data-sortby': DownloadCount }">
-                            <span data-bind="text: FormattedDownloadCount"></span>
+                            <span data-bind="text: FormattedDownloadCount" tabindex="0"></span>
                         </td>
                         <td class="align-middle text-nowrap" data-bind="attr: { 'data-sortby': VersionSortOrder }">
-                            <span data-bind="text: LatestVersion"></span>
+                            <span data-bind="text: LatestVersion" tabindex="0"></span>
                         </td>
                     @if (Model.IsManagePackagesVulnerabilitiesEnabled)
                     {
                         var title = "This version has at least one known vulnerability. Click on the package name for details.";
-                        <td class="package-icon-cell" aria-label="@title" tabindex="0">
-                            <i class="ms-Icon ms-Icon--Warning package-icon" data-bind="visible: IsVulnerable"
-                               data-content="@title" tabindex="0"></i>
+                        <td class="package-icon-cell">
+                            <span class="package-warning-icon" aria-label="@title" data-content="@title" data-bind="visible: IsVulnerable" tabindex="0">
+                                <i class="ms-Icon ms-Icon--Warning package-icon"></i>
+                            </span>
                         </td>
                     }
                         <td class="text-right align-middle package-controls">

From 7b77e9b1a326d0eb063f872355fb8a78907ccd40 Mon Sep 17 00:00:00 2001
From: Drew Gillies <drewgil@microsoft.com>
Date: Tue, 8 Jun 2021 13:55:40 +1000
Subject: [PATCH 3/3] Addressed feedback

---
 src/NuGetGallery/Scripts/gallery/common.js        | 12 ++++++++++++
 .../Scripts/gallery/page-display-package.js       | 15 ++-------------
 .../Scripts/gallery/page-list-packages.js         | 14 +-------------
 .../Scripts/gallery/page-manage-packages.js       | 14 +-------------
 4 files changed, 16 insertions(+), 39 deletions(-)

diff --git a/src/NuGetGallery/Scripts/gallery/common.js b/src/NuGetGallery/Scripts/gallery/common.js
index cd1cc70b19..660685de57 100644
--- a/src/NuGetGallery/Scripts/gallery/common.js
+++ b/src/NuGetGallery/Scripts/gallery/common.js
@@ -462,6 +462,18 @@
         }
     };
 
+    nuget.setPopovers = function () {
+        var popoverElement = $(this);
+        popoverElement.popover({ trigger: 'hover focus' });
+        popoverElement.click(function () {
+            popoverElement.popover('show');
+            setTimeout(function () {
+                    popoverElement.popover('destroy');
+                },
+                1000);
+        });
+    };
+
     window.nuget = nuget;
 
     jQuery.extend(jQuery.expr.pseudos, {
diff --git a/src/NuGetGallery/Scripts/gallery/page-display-package.js b/src/NuGetGallery/Scripts/gallery/page-display-package.js
index e4c6795587..7cd2b6450f 100644
--- a/src/NuGetGallery/Scripts/gallery/page-display-package.js
+++ b/src/NuGetGallery/Scripts/gallery/page-display-package.js
@@ -171,17 +171,6 @@ $(function () {
         });
     }
 
-    // Add popover to warning icons
-    var popoverFunction = function () {
-        var checkmarkImage = $(this);
-        checkmarkImage.popover({ trigger: 'hover focus' });
-        checkmarkImage.click(function () {
-            checkmarkImage.popover('show');
-            setTimeout(function () {
-                    checkmarkImage.popover('destroy');
-                },
-                1000);
-        });
-    };
-    $(".package-warning-icon").each(popoverFunction);
+    $(".reserved-indicator").each(window.nuget.setPopovers);
+    $(".package-warning-icon").each(window.nuget.setPopovers);
 });
diff --git a/src/NuGetGallery/Scripts/gallery/page-list-packages.js b/src/NuGetGallery/Scripts/gallery/page-list-packages.js
index f5ee810277..3084749f81 100644
--- a/src/NuGetGallery/Scripts/gallery/page-list-packages.js
+++ b/src/NuGetGallery/Scripts/gallery/page-list-packages.js
@@ -1,17 +1,5 @@
 $(function() {
     'use strict';
 
-    $(".reserved-indicator").each(
-        function() {
-            var checkmarkImage = $(this);
-            checkmarkImage.popover({ trigger: 'hover focus' });
-            checkmarkImage.click(function() {
-                checkmarkImage.popover('show');
-                setTimeout(function() {
-                        checkmarkImage.popover('destroy');
-                    },
-                    1000);
-            });
-        }
-    );
+    $(".reserved-indicator").each(window.nuget.setPopovers);
 });
diff --git a/src/NuGetGallery/Scripts/gallery/page-manage-packages.js b/src/NuGetGallery/Scripts/gallery/page-manage-packages.js
index 9dc388b4d4..db7f90d544 100644
--- a/src/NuGetGallery/Scripts/gallery/page-manage-packages.js
+++ b/src/NuGetGallery/Scripts/gallery/page-manage-packages.js
@@ -413,19 +413,7 @@
 
         setupColumnSorting();
 
-        // Add popover to warning icons
-        var popoverFunction = function () {
-            var checkmarkImage = $(this);
-            checkmarkImage.popover({ trigger: 'hover focus' });
-            checkmarkImage.click(function () {
-                checkmarkImage.popover('show');
-                setTimeout(function () {
-                        checkmarkImage.popover('destroy');
-                    },
-                    1000);
-            });
-        };
-        $(".package-warning-icon").each(popoverFunction);
+        $(".package-warning-icon").each(window.nuget.setPopovers);
     });
 
 })();
\ No newline at end of file