[a11y] Add popovers to verification checkmarks (#8521)

Add popovers to verification checkmarks
NuGet · Apr 16, 2021 · 5cf5b9b · 5cf5b9b
1 parent ddfb02d
commit 5cf5b9b
Show file tree

Hide file tree

Showing 5 changed files with 25 additions and 1 deletion.
diff --git a/src/NuGetGallery/App_Start/AppActivator.cs b/src/NuGetGallery/App_Start/AppActivator.cs
@@ -170,6 +170,10 @@ private static void BundlingPostStart()
                 .Include("~/Scripts/gallery/clamp.js");
             BundleTable.Bundles.Add(displayPackageScriptBundle);
 
+            var listPackagesScriptBundle = new ScriptBundle("~/Scripts/gallery/page-list-packages.min.js")
+                .Include("~/Scripts/gallery/page-list-packages.js");
+            BundleTable.Bundles.Add(listPackagesScriptBundle);
+
             var managePackagesScriptBundle = new ScriptBundle("~/Scripts/gallery/page-manage-packages.min.js")
                 .Include("~/Scripts/gallery/page-manage-packages.js");
             BundleTable.Bundles.Add(managePackagesScriptBundle);

diff --git a/src/NuGetGallery/NuGetGallery.csproj b/src/NuGetGallery/NuGetGallery.csproj
@@ -1675,6 +1675,7 @@
     <Content Include="App_Data\Files\Content\Symbols-Configuration.json" />
     <Content Include="Scripts\gallery\instrumentation.js" />
     <Content Include="Scripts\gallery\knockout-3.5.1.js" />
+    <Content Include="Scripts\gallery\page-list-packages.js" />
     <Content Include="Views\Shared\SiteMenu.cshtml">
       <SubType>Code</SubType>
     </Content>

diff --git a/src/NuGetGallery/Scripts/gallery/page-list-packages.js b/src/NuGetGallery/Scripts/gallery/page-list-packages.js
@@ -0,0 +1,17 @@
+$(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);
+            });
+        }
+    );
+});
diff --git a/src/NuGetGallery/Views/Shared/ListPackages.cshtml b/src/NuGetGallery/Views/Shared/ListPackages.cshtml
@@ -245,4 +245,6 @@
             location.href = '?q=@Uri.EscapeDataString(Model.SearchTerm)';
         });
     </script>
+
+    @Scripts.Render("~/Scripts/gallery/page-list-packages.min.js")
 }
diff --git a/src/NuGetGallery/Views/Shared/_ListPackage.cshtml b/src/NuGetGallery/Views/Shared/_ListPackage.cshtml
@@ -50,7 +50,7 @@
                     <img class="reserved-indicator"
                          src="~/Content/gallery/img/reserved-indicator.svg"
                          @ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/reserved-indicator-20x20.png"))
-                         title="@Strings.ReservedNamespace_ReservedIndicatorTooltip" />
+                         data-content="@Strings.ReservedNamespace_ReservedIndicatorTooltip" tabindex="0" />
                 }
 
                 @if (showEditButton && (Model.CanEdit || Model.CanManageOwners || Model.CanUnlistOrRelist))