Search-by-TFM feature flight UI bug fix (#9357)

* Search-by-TFM UI Fix: Input fields were hidden behind feature flight but still being referenced by js changes, which was causing errors

* Also moved framework initialization script to end of js file

* a11y fix

Author: advay26

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

@@ -55,20 +55,6 @@ $(function() {
         }
     }
 
-    // Initialize state for Framework and Tfm checkboxes
-    // NOTE: We first click on all selected Framework checkboxes and then on the selected Tfm checkboxes, which
-    // allows us to correctly handle cases where a Framework AND one of its child Tfms is present in the query
-    initializeFrameworkAndTfmCheckboxes();
-    function initializeFrameworkAndTfmCheckboxes() {
-        var inputFrameworkFilters = searchForm.frameworks.value.split(',').map(f => f.trim()).filter(f => f);
-        var inputTfmFilters = searchForm.tfms.value.split(',').map(f => f.trim()).filter(f => f);
-        searchForm.frameworks.value = "";
-        searchForm.tfms.value = "";
-
-        inputFrameworkFilters.map(id => document.getElementById(id)).forEach(checkbox => checkbox.click());
-        inputTfmFilters.map(id => document.getElementById(id)).forEach(checkbox => checkbox.click());
-    }
-
     // Submit the form when a user changes the selected 'sortBy' option
     searchForm.sortby.addEventListener('change', (e) => {
         searchForm.sortby.value = e.target.value;
@@ -108,4 +94,18 @@ $(function() {
             }
         }
     }
+
+    // Initialize state for Framework and Tfm checkboxes
+    // NOTE: We first click on all selected Framework checkboxes and then on the selected Tfm checkboxes, which
+    // allows us to correctly handle cases where a Framework AND one of its child Tfms is present in the query
+    initializeFrameworkAndTfmCheckboxes();
+    function initializeFrameworkAndTfmCheckboxes() {
+        var inputFrameworkFilters = searchForm.frameworks.value.split(',').map(f => f.trim()).filter(f => f);
+        var inputTfmFilters = searchForm.tfms.value.split(',').map(f => f.trim()).filter(f => f);
+        searchForm.frameworks.value = "";
+        searchForm.tfms.value = "";
+
+        inputFrameworkFilters.map(id => document.getElementById(id)).forEach(checkbox => checkbox.click());
+        inputTfmFilters.map(id => document.getElementById(id)).forEach(checkbox => checkbox.click());
+    }
 });

src/NuGetGallery/Views/Shared/ListPackages.cshtml

@@ -82,15 +82,14 @@
                                 <fieldset id="frameworkfilters">
                                     <legend>
                                         Frameworks
-                                        <a href="@(Model.TargetFrameworkInformationLink)">
+                                        <a href="@(Model.TargetFrameworkInformationLink)" title="Frameworks filter information">
                                             <i class="framework-filter-info-icon ms-Icon ms-Icon--Info" tabindex="0"
                                                data-content="@Strings.FrameworkFilterInformation_Tooltip"
                                                alt="@Strings.FrameworkFilterInformation_Tooltip"></i>
                                         </a>
                                     </legend>
-                                    <input type="text" hidden id="frameworks" name="frameworks" value="@Model.Frameworks">
-                                    <input type="text" hidden id="tfms" name="tfms" value="@Model.Tfms">
-                                    @foreach (var framework in Model.FrameworkFilters.Values) {
+                                    @foreach (var framework in Model.FrameworkFilters.Values)
+                                    {
                                         @AddFrameworkGroupOption(framework.ShortName, framework.DisplayName, framework.Tfms);
                                     }
                                 </fieldset>
@@ -134,6 +133,8 @@
                             </div>
 
                         </div>
+                        <input type="text" hidden id="frameworks" name="frameworks" value="@Model.Frameworks">
+                        <input type="text" hidden id="tfms" name="tfms" value="@Model.Tfms">
                         <input type="hidden" id="prerel" name="prerel" value="@Model.IncludePrerelease.ToString()">
                     </div>
                 }