[ReleasePrep][2023.04.25]RI of dev into main

src/Bootstrap/dist/js/bootstrap.js

@@ -585,6 +585,8 @@ if (typeof jQuery === 'undefined') {
     toggle: true
   }
 
+  Collapse.ARIA_EXPANDED_ALLOWED_ROLES = ['application', 'button', 'checkbox', 'combobox', 'gridcell', 'link', 'listbox', 'menuitem', 'row', 'rowheader', 'tab', 'treeitem']
+
   Collapse.prototype.dimension = function () {
     var hasWidth = this.$element.hasClass('width')
     return hasWidth ? 'width' : 'height'
@@ -615,7 +617,11 @@ if (typeof jQuery === 'undefined') {
     this.$element
       .removeClass('collapse')
       .addClass('collapsing')[dimension](0)
-      .attr('aria-expanded', true)
+
+    // the aria-expanded attribute is only allowed when the element has an allowed role
+    if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) {
+      this.$element.attr('aria-expanded', true)
+    }
 
     this.$trigger
       .removeClass('collapsed')
@@ -655,7 +661,11 @@ if (typeof jQuery === 'undefined') {
     this.$element
       .addClass('collapsing')
       .removeClass('collapse in')
-      .attr('aria-expanded', false)
+
+    // the aria-expanded attribute is only allowed when the element has an allowed role
+    if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) {
+      this.$element.attr('aria-expanded', false)
+    }
 
     this.$trigger
       .addClass('collapsed')
@@ -696,7 +706,10 @@ if (typeof jQuery === 'undefined') {
   Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
     var isOpen = $element.hasClass('in')
 
-    $element.attr('aria-expanded', isOpen)
+    if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) {
+      $element.attr('aria-expanded', isOpen)
+    }
+
     $trigger
       .toggleClass('collapsed', !isOpen)
       .attr('aria-expanded', isOpen)
@@ -2345,14 +2358,12 @@ if (typeof jQuery === 'undefined') {
         .end()
         .find('[data-toggle="tab"]')
           .attr('tabindex', "-1")
-          .attr('aria-expanded', false)
           .attr('aria-selected', false)
 
       element
         .addClass('active')
         .find('[data-toggle="tab"]')
           .attr('tabindex', "0")
-          .attr('aria-expanded', true)
           .attr('aria-selected', true)
 
       if (transition) {

src/Bootstrap/js/collapse.js

@@ -38,6 +38,8 @@
     toggle: true
   }
 
+  Collapse.ARIA_EXPANDED_ALLOWED_ROLES = ['application', 'button', 'checkbox', 'combobox', 'gridcell', 'link', 'listbox', 'menuitem', 'row', 'rowheader', 'tab', 'treeitem']
+
   Collapse.prototype.dimension = function () {
     var hasWidth = this.$element.hasClass('width')
     return hasWidth ? 'width' : 'height'
@@ -68,7 +70,11 @@
     this.$element
       .removeClass('collapse')
       .addClass('collapsing')[dimension](0)
-      .attr('aria-expanded', true)
+
+    // the aria-expanded attribute is only allowed when the element has an allowed role
+    if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) {
+      this.$element.attr('aria-expanded', true)
+    }
 
     this.$trigger
       .removeClass('collapsed')
@@ -108,7 +114,11 @@
     this.$element
       .addClass('collapsing')
       .removeClass('collapse in')
-      .attr('aria-expanded', false)
+
+    // the aria-expanded attribute is only allowed when the element has an allowed role
+    if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) {
+      this.$element.attr('aria-expanded', false)
+    }
 
     this.$trigger
       .addClass('collapsed')
@@ -149,7 +159,10 @@
   Collapse.prototype.addAriaAndCollapsedClass = function ($element, $trigger) {
     var isOpen = $element.hasClass('in')
 
-    $element.attr('aria-expanded', isOpen)
+    if (Collapse.ARIA_EXPANDED_ALLOWED_ROLES.includes(this.$element.attr('role'))) {
+      $element.attr('aria-expanded', isOpen)
+    }
+
     $trigger
       .toggleClass('collapsed', !isOpen)
       .attr('aria-expanded', isOpen)

src/Bootstrap/js/tab.js

@@ -77,14 +77,12 @@
         .end()
         .find('[data-toggle="tab"]')
           .attr('tabindex', "-1")
-          .attr('aria-expanded', false)
           .attr('aria-selected', false)
 
       element
         .addClass('active')
         .find('[data-toggle="tab"]')
           .attr('tabindex', "0")
-          .attr('aria-expanded', true)
           .attr('aria-selected', true)
 
       if (transition) {

src/Bootstrap/less/theme/page-api-keys.less

@@ -132,6 +132,11 @@
         border-left: 1px solid @gray-lighter;
       }
     }
+    .package-list {
+      li {
+        overflow-y: visible;
+      }
+    }
   }
 
   .api-key-details:not(:first-child)

src/Bootstrap/less/theme/page-display-package.less

@@ -248,11 +248,19 @@
       overflow: hidden;
       white-space: nowrap;
       text-overflow: ellipsis;
+
+      .profile-icon {
+        margin: 1.5px;
+      }
+
+      .username{
+        margin-left: 6.5px;
+      }
     }
 
     img {
-      margin-right: 8px;
       border-radius: 5px;
+      margin: 2px;
     }
   }
 

src/NuGetGallery/App_Code/ViewHelpers.cshtml

@@ -577,7 +577,7 @@ var hlp = new AccordionHelper(name, formModelStatePrefix, expanded, page);
     </div>
     if (!disabled)
     {
-        <div aria-controls="panel-body" class="panel panel-default panel-collapse collapse @(expanded ? "in" : string.Empty)"
+        <div class="panel panel-default panel-collapse collapse @(expanded ? "in" : string.Empty)"
                 id="@id-container">
             <div class="panel-body">
                 @content(MvcHtmlString.Empty)

src/NuGetGallery/App_Data/Files/Content/Trusted-Image-Domains.json

@@ -34,6 +34,7 @@
         "sonarcloud.io",
         "travis-ci.com",
         "travis-ci.org",
+        "wakatime.com",
         "avatars.githubusercontent.com",
         "raw.github.com",
         "raw.githubusercontent.com",

src/NuGetGallery/Scripts/gallery/async-file-upload.js

@@ -193,8 +193,8 @@
                     break;
                 case "error":
                     // IIS returns 404.13 (NotFound) when maxAllowedContentLength limit is exceeded.
-                    if (fullResponse === "Not Found") {
-                        displayErrors(["The package file exceeds the size limit. Please try again."]);
+                    if (fullResponse === "Not Found" || fullResponse === "Request Entity Too Large") {
+                        displayErrors(["The package file exceeds the size limit of 250 MB. Please reduce the package size and try again."]);
                     }
                     else {
                         displayErrors(model.responseJSON);

src/NuGetGallery/Scripts/gallery/common.js

@@ -461,13 +461,40 @@
     };
 
     nuget.setPopovers = function () {
-        var popoverElement = $(this);
-        var popoverElementDom = this;
+        setPopoversInternal(this, rightWithVerticalFallback);
+    }
+
+    function rightWithVerticalFallback(popoverElement, ownerElement) {
+        // Both numbers below are in CSS pixels.
+        const MinSpaceOnRight = 150;
+        const MinSpaceOnTop = 100;
+
+        const ownerBoundingBox = ownerElement.getBoundingClientRect();
+        const spaceOnRight = window.innerWidth - ownerBoundingBox.right;
+        if (spaceOnRight > MinSpaceOnRight) {
+            return 'right';
+        }
+        const spaceOnTop = ownerBoundingBox.top;
+        if (spaceOnTop > MinSpaceOnTop) {
+            return 'top';
+        }
+
+        return 'bottom';
+    }
+
+    function setPopoversInternal(element, placement) {
+        var popoverElement = $(element);
+        var popoverElementDom = element;
         var originalLabel = popoverElementDom.ariaLabel;
         var popoverHideTimeMS = 2000;
         var popoverFadeTimeMS = 200;
 
-        popoverElement.popover({ trigger: 'hover' });
+        var popoverOptions = { trigger: 'hover', container: 'body' };
+        if (placement) {
+            popoverOptions.placement = placement;
+        }
+
+        popoverElement.popover(popoverOptions);
         popoverElement.click(popoverShowAndHide);
         popoverElement.focus(popoverShowAndHide);
         popoverElement.keyup(function (event) {

src/NuGetGallery/Scripts/gallery/page-list-packages.js

@@ -3,6 +3,14 @@ $(function() {
 
     $(".reserved-indicator").each(window.nuget.setPopovers);
 
+    const storage = window['localStorage'];
+    const focusResultsColumnKey = 'focus_results_column';
+
+    if (storage && storage.getItem(focusResultsColumnKey)) {
+        storage.removeItem(focusResultsColumnKey);
+        document.getElementById('results-column').focus({ preventScroll: true });
+    }
+
     const searchForm = document.forms.search;
     const allFrameworks = document.querySelectorAll('.framework');
     const allTfms = document.querySelectorAll('.tfm');
@@ -69,6 +77,11 @@ $(function() {
     function submitSearchForm() {
         constructFilterParameter(searchForm.frameworks, allFrameworks);
         constructFilterParameter(searchForm.tfms, allTfms);
+
+        if (storage) {
+            storage.setItem(focusResultsColumnKey, true);
+        }
+
         searchForm.submit();
     }
 

src/NuGetGallery/Views/Organizations/_OrganizationAccountManageMembers.cshtml

@@ -40,7 +40,7 @@
                             <input id="new-member-textbox" class="form-control" placeholder="Add existing NuGet.org user" data-bind="textInput: NewMemberUsername, submit: AddMember" aria-label="Enter username to add member"/>
                         </div>
                         <div class="form-group col-sm-3">
-                            <select class="form-control" data-bind="value: AddMemberRole, options: RoleNames" aria-labelledby="RoleNames"></select>
+                            <select class="form-control" data-bind="value: AddMemberRole, options: RoleNames" aria-label="Role Filter"></select>
                         </div>
                         <div class="col-sm-1">
                             <button class="btn btn-primary" type="submit" title="Add new member" aria-label="Add new member" data-bind="click: AddMember">Add</button>
@@ -72,8 +72,8 @@
                         <div>
                             @if (Model.CanManageMemberships)
                             {
-                                <select class="form-control" aria-labelledby="OrganizationViewModel.RoleNames"
-                                        data-bind="value: SelectedRole, options: OrganizationViewModel.RoleNames, event: { change: ToggleIsAdmin }">
+                                <select class="form-control" 
+                                        data-bind="value: SelectedRole, options: OrganizationViewModel.RoleNames, event: { change: ToggleIsAdmin }, attr: { 'aria-label': 'Role for ' + Username }">
                                 </select>
                             }
                             else

src/NuGetGallery/Views/Packages/DisplayPackage.cshtml

@@ -184,7 +184,7 @@
 @helper CommandTab(PackageManagerViewModel packageManager, bool active)
 {
     <li role="presentation" class="@(active ? "active" : string.Empty)">
-        <a href="#@packageManager.Id" aria-expanded="@(active ? "true" : "false")"
+        <a href="#@packageManager.Id"
            id="@packageManager.Id-tab" class="package-manager-tab"
            aria-selected="@(active ? "true" : "false")" tabindex="@(active ? "0" : "-1")"
            aria-controls="@packageManager.Id" role="tab" data-toggle="tab"
@@ -955,11 +955,8 @@
                                             }
                                             else
                                             {
-                                                <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 tabindex="0" class="package-icon-cell package-warning-icon" aria-label="@packageVersion.PackageWarningIconTitle">
+                                                    <i class="ms-Icon ms-Icon--Warning package-icon" title="@packageVersion.PackageWarningIconTitle"></i>
                                                 </td>
                                             }
                                         </tr>
@@ -1276,15 +1273,15 @@
                             <li>
                                 @if (!string.IsNullOrEmpty(owner.EmailAddress))
                                 {
-                                    <a href="@Url.User(owner.Username)" title="@owner.Username">
+                                    <a class="profile-icon" href="@Url.User(owner.Username)" title="@owner.Username">
                                         @ViewHelpers.GravatarImage(
                                             Url,
                                             owner.EmailAddress,
                                             owner.Username,
                                             GalleryConstants.GravatarElementSize)
                                     </a>
                                 }
-                                <a href="@Url.User(owner.Username)" title="@owner.Username">
+                                <a class="username" href="@Url.User(owner.Username)" title="@owner.Username">
                                     @owner.Username
                                 </a>
                             </li>

src/NuGetGallery/Views/Packages/_SupportedFrameworksTable.cshtml

@@ -3,7 +3,10 @@
     <thead>
         <tr>
             <th scope="col" class="framework-table-title"><b>Product</b></th>
-            <th scope="col" class="framework-table-title"><b>Versions</b></th>
+            <th scope="col" class="framework-table-title">
+                <b aria-hidden="true" >Versions</b>
+                <span class="sr-only">Compatible and additional computed target framework versions.</span>
+            </th>
         </tr>
     </thead>
     <tbody>
@@ -21,11 +24,13 @@
                         {
                             if (frameworkVersion.IsComputed)
                             {
-                                <span class="framework-badge-computed framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span aria-hidden="true" class="framework-badge-computed framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span class="sr-only">@frameworkVersion.Framework.GetShortFolderName() was computed.&nbsp;</span>
                             }
                             else
                             {
-                                <span class="framework-badge-asset framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span aria-hidden="true" class="framework-badge-asset framework-table-margin">@frameworkVersion.Framework.GetShortFolderName()</span>
+                                <span class="sr-only">@frameworkVersion.Framework.GetShortFolderName() is compatible.&nbsp;</span>
                             }
                         }
                     </td>

src/NuGetGallery/Views/Shared/ListPackages.cshtml

@@ -135,7 +135,7 @@
                     </div>
                 }
             </div>
-            <div class="@(Model.IsAdvancedSearchFlightEnabled ? "col-md-9" : "col-md-12")" id="results-column">
+            <div class="@(Model.IsAdvancedSearchFlightEnabled ? "col-md-9" : "col-md-12")" id="results-column" tabindex="0">
                 <div class="row">
                     <div class="col-md-9">
                         <h1 tabindex="0">

src/NuGetGallery/Views/Shared/_ListPackage.cshtml

@@ -126,7 +126,7 @@
                 @Model.ShortDescription
                 @if (Model.IsDescriptionTruncated)
                 {
-                    @Html.RouteLink("More information", RouteName.DisplayPackage, new { Model.Id, Model.Version }, new { @title = "More information about " + Model.Id + " package." })
+                    @Html.RouteLink("More information", RouteName.DisplayPackage, new { Model.Id, Model.Version }, new { @title = "More information about " + Model.Id + " package", @aria_label = "More information about " + Model.Id + " package" })
                 }
             </div>
         </div>

src/NuGetGallery/Views/Users/Organizations.cshtml

@@ -12,7 +12,7 @@
                         Url, 
                         CurrentUser, 
                         false, 
-                        @<text>Organizations&nbsp;<span aria-hidden="true" class="ms-font-xl organizations-divider">|</span>&nbsp;<a href="@Url.AddOrganization()" title="Add new organization."><span aria-hidden="true" class="ms-font-m ms-Icon ms-Icon--Add"></span>&nbsp;Add new</a></text>)
+                        @<text>Organizations&nbsp;<span aria-hidden="true" class="ms-font-xl organizations-divider">|</span>&nbsp;<a href="@Url.AddOrganization()" title="Add new organization" aria-label="Add new organization"><span aria-hidden="true" class="ms-font-m ms-Icon ms-Icon--Add"></span>&nbsp;Add new</a></text>)
                 </div>
             </div>
             <hr class="breadcrumb-divider"/>