[Redesign] Fix registration's link to the README (#8699)

This change re-adds support for the `#show-readme-container` fragment link generated by the V3 API. I also fixed some ARIA attributes to improve accessibility. Addresses #8698
NuGet · Jul 23, 2021 · ef13809 · ef13809
1 parent 7e88712
commit ef13809
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/NuGetGallery/Scripts/gallery/page-display-package-v2.js b/src/NuGetGallery/Scripts/gallery/page-display-package-v2.js
@@ -56,6 +56,14 @@
     var packageManagerStorageKey = 'preferred_package_manager';
     var bodyStorageKey = 'preferred_body_tab';
 
+    // The V3 registration API links to the display package page's README using
+    // the 'show-readme-container' URL fragment.
+    var restorePreferredBodyTab = true;
+    if (window.location.hash === '#show-readme-container') {
+        $('#readme-body-tab').focus();
+        restorePreferredBodyTab = false;
+    }
+
     if (storage) {
         // Restore preferred package manager selection from localStorage.
         var preferredPackageManagerId = storage.getItem(packageManagerStorageKey);
@@ -64,9 +72,11 @@
         }
 
         // Restore preferred body tab selection from localStorage.
-        var preferredBodyTab = storage.getItem(bodyStorageKey);
-        if (preferredBodyTab) {
-            $('#' + preferredBodyTab).tab('show');
+        if (restorePreferredBodyTab) {
+            var preferredBodyTab = storage.getItem(bodyStorageKey);
+            if (preferredBodyTab) {
+                $('#' + preferredBodyTab).tab('show');
+            }
         }
 
         // Make sure we save the user's preferred body tab to localStorage.

diff --git a/src/NuGetGallery/Views/Packages/DisplayPackageV2.cshtml b/src/NuGetGallery/Views/Packages/DisplayPackageV2.cshtml
@@ -494,14 +494,25 @@
                 <ul class="nav nav-tabs" role="tablist">
                     @if (!Model.Deleted)
                     {
-                        <li role="presentation" class="active"><a href="#readme-tab" aria-controls="ReadMe" role="tab" data-toggle="tab" id="readme-body-tab" class="body-tab">README</a></li>
-                        <li role="presentation"><a href="#dependencies-tab" aria-controls="Dependencies" role="tab" data-toggle="tab" id="dependencies-body-tab" class="body-tab">Dependencies</a></li>
+                        <li role="presentation" class="active" id="show-readme-container">
+                            <a href="#readme-tab" aria-controls="readme-tab" role="tab" data-toggle="tab" id="readme-body-tab" class="body-tab">README</a>
+                        </li>
+                        <li role="presentation">
+                            <a href="#dependencies-tab" aria-controls="dependencies-tab" role="tab" data-toggle="tab" id="dependencies-body-tab" class="body-tab">Dependencies</a>
+                        </li>
                     }
-                    <li role="presentation"><a href="#usedby-tab" aria-controls="UsedBy" role="tab" data-toggle="tab" id="usedby-body-tab" class="body-tab">Used By</a></li>
-                    <li role="presentation"><a href="#versions-tab" aria-controls="Versions" role="tab" data-toggle="tab" id="versions-body-tab" class="body-tab">Versions</a></li>
+                    <li role="presentation">
+                        <a href="#usedby-tab" aria-controls="usedby-tab" role="tab" data-toggle="tab" id="usedby-body-tab" class="body-tab">Used By</a>
+                    </li>
+                    <li role="presentation">
+                        <a href="#versions-tab" aria-controls="versions-tab" role="tab" data-toggle="tab" id="versions-body-tab" class="body-tab">Versions</a>
+                    </li>
+
                     @if (!String.IsNullOrWhiteSpace(Model.ReleaseNotes))
                     {
-                        <li role="presentation"><a href="#releasenotes-tab" aria-controls="ReleaseNotes" role="tab" data-toggle="tab" id="release-body-tab" class="body-tab">Release Notes</a></li>
+                        <li role="presentation">
+                            <a href="#releasenotes-tab" aria-controls="releasenotes-tab" role="tab" data-toggle="tab" id="release-body-tab" class="body-tab">Release Notes</a>
+                        </li>
                     }
                 </ul>
             </div>