Merge pull request #8622 from NuGet/dg-a11y-checkmark-profilepage

Add accessible popovers to reserved checkmarks
NuGet · Jun 8, 2021 · 9b3cf4a · 9b3cf4a
2 parents c159a02 + bd259cd
commit 9b3cf4a
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 1 deletion.
diff --git a/src/NuGetGallery/Scripts/gallery/page-display-package.js b/src/NuGetGallery/Scripts/gallery/page-display-package.js
@@ -170,4 +170,19 @@ $(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);
+            });
+        }
+    );
 });
diff --git a/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml b/src/NuGetGallery/Views/Packages/DisplayPackage.cshtml
@@ -261,7 +261,7 @@
                         <img class="reserved-indicator"
                              src="~/Content/gallery/img/reserved-indicator.svg"
                              @ViewHelpers.ImageFallback(Url.Absolute("~/Content/gallery/img/reserved-indicator-25x25.png"))
-                             title="@Strings.ReservedNamespace_ReservedIndicatorTooltip" />
+                             data-content="@Strings.ReservedNamespace_ReservedIndicatorTooltip" tabindex="0"/>
                     }
                 </h1>
 

diff --git a/src/NuGetGallery/Views/Users/Profiles.cshtml b/src/NuGetGallery/Views/Users/Profiles.cshtml
@@ -93,3 +93,7 @@
         </article>
     </div>
 </section>
+
+@section BottomScripts {
+    @Scripts.Render("~/Scripts/gallery/page-list-packages.min.js")
+}