Add accessible popovers to vulnerability alerts (#8624)

Add accessible popovers to vulnerability alerts
NuGet · Jun 8, 2021 · 820656c · 820656c
1 parent 9b3cf4a
commit 820656c
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 34 deletions.
diff --git 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
@@ -171,18 +171,6 @@ $(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);
-            });
-        }
-    );
+    $(".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
@@ -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
@@ -413,6 +413,7 @@
 
         setupColumnSorting();
 
+        $(".package-warning-icon").each(window.nuget.setPopovers);
     });
 
 })();
diff --git 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">
-                                            <i class="ms-Icon ms-Icon--Warning package-icon" title="@packageVersion.PackageWarningIconTitle"></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
@@ -170,15 +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">
-                            <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>
+                            <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">
-Original file line number
+Diff line change
@@ Expand Up / @@ -413,6 +413,7 @@ @@
             setupColumnSorting();
+            $(".package-warning-icon").each(window.nuget.setPopovers);
         });
     })();