[Redesign] Fix registration's link to the README

[loic-sharma]

Background

For packages with an embedded readme, registration's readmeUrl links to the display package page using the #show-readme-container URL fragment. For example: https://api.nuget.org/v3/registration5-gz-semver2/knapcode.torsharp/index.json:

Example registration JSON for package with embedded readme...

{
  ...

  "items": [
    {
      ...

      "items": [
        {
          ...

          "@id": "https://api.nuget.org/v3/registration5-gz-semver2/knapcode.torsharp/2.7.0.json",
          "catalogEntry": {
            ...
            "licenseUrl": "https://www.nuget.org/packages/Knapcode.TorSharp/2.7.0/license",
            "readmeUrl": "https://www.nuget.org/packages/Knapcode.TorSharp/2.7.0#show-readme-container",
            ...
            "version": "2.7.0"
          },
          ...
        },

        ...
      ],

      ...
    }
  ]

  ...
}

Fix

In the current design, this is implemented using Bootstrap 3's collapse component. The redesign broke this feature as it uses Bootstrap 3's tab component instead, which does not support opening using fragments. This change re-adds support for the #show-readme-container fragment link using Javascript.

I also fixed some ARIA attributes to improve accessibility.

Addresses #8698

[joelverhagen]

I think the expander section works generically with:

NuGetGallery/src/NuGetGallery/Scripts/gallery/common.js

Lines 230 to 233 in dab8259

	// If the URI fragment (hash) matches the expander ID, automatically expand the section.
	if (document.location.hash === showId) {
	hidden.collapse('show');
	}

Would it make sense to do something similar for tabs?

[loic-sharma]

@joelverhagen Nice catch, I didn't realize we had implemented that URL functionality.

Would it make sense to do something similar for tabs?

This would be useful, but this particular fix wouldn't use that general/shared logic. The URL fragment to open the README, show-readme-container, is specific to the naming scheme we use for collapsible sections (and changing this URL fragment would require rebuilding registration). Tabs use a different naming scheme: readme-tab, dependencies-tab, etc... If we add generic "open tab using URL fragment" logic, ideally it would work using this new naming scheme with a URL fragment like #readme-tab. So if we add generic logic, we would still need this "backwards compatibility" hack to support the existing registration API.

I'd suggest we punt the generic logic until we have a scenarios that would use this logic. Let me know if you feel otherwise @joelverhagen .

[zhhyu]

I am not very sure. Do we need the id here?

[loic-sharma]

Yup, as the browser will move down the page to the element with the show-readme-container ID when I have the URL fragment #show-readme-container. (The .focus() in javascript does not do that, it simply highlights the element)