Merge pull request #3896 from SwiftPackageIndex/issue-3891

Removed custom keyboard navigation in package lists

Author: daveverwer

FrontEnd/main.js

@@ -20,16 +20,3 @@ HTMLElement.prototype.findParentMatching = function (matches) {
     } while ((element = element.parentElement))
     return null
 }
-
-HTMLDocument.prototype.blurFocusedInputElement = function () {
-    const activeElement = this.activeElement
-    if (activeElement.nodeName.toLowerCase() === 'input') activeElement.blur()
-}
-
-Window.prototype.scrollToTop = function () {
-    window.scrollTo(0, 0)
-}
-
-Window.prototype.scrollToBottom = function () {
-    window.scrollTo(0, this.document.body.scrollHeight)
-}

FrontEnd/scripts/dom_helpers.js

@@ -140,7 +140,6 @@
 
     --package-list-border: var(--very-light-grey);
     --package-list-background: var(--very-very-light-grey);
-    --package-list-selectedbackground: var(--very-light-blue);
 
     --error-background: var(--light-red);
     --error-text: var(--mid-red);
@@ -289,7 +288,6 @@
 
         --package-list-border: var(--very-dark-grey);
         --package-list-background: var(--very-very-dark-grey);
-        --package-list-selectedbackground: var(--dark-blue);
 
         --error-background: var(--dark-red);
         --success-background: var(--very-dark-green);

FrontEnd/scripts/keycodes.js

@@ -47,10 +47,6 @@
             }
         }
 
-        &.selected {
-            background-color: var(--package-list-selectedbackground);
-        }
-
         ul.metadata {
             display: inline-flex;
             gap: 10px;

FrontEnd/scripts/package_list_navigation.js

@@ -120,9 +120,6 @@ extension SearchShow {
                 )),
                 .ul(
                     .id("package-list"),
-                    // Let the JavaScript know that keyboard navigation on this package list should
-                    // also include navigation into and out of the query field.
-                    .data(named: "focus-query-field", value: String(true)),
                     .group(
                         model.packageResults.map { .packageListItem(linkUrl: $0.packageURL, packageName: $0.packageName ?? $0.repositoryName, summary: $0.summary, matchingKeywords: model.matchingKeywords(packageKeywords: $0.keywords), repositoryOwner: $0.repositoryOwner, repositoryName: $0.repositoryName, stars: $0.stars, lastActivityAt: $0.lastActivityAt, hasDocs: $0.hasDocs) }
                     )

FrontEnd/styles/colors.scss

@@ -94,7 +94,7 @@ <h1>
           <div class="two-column mobile-reversed">
             <section class="package-results">
               <h4>Matching packages</h4>
-              <ul id="package-list" data-focus-query-field="true">
+              <ul id="package-list">
                 <li>
                   <a href="https://example.com/package/one">
                     <h4>Package One</h4>

FrontEnd/styles/package_list.scss

@@ -101,7 +101,7 @@ <h4>Matching packages where&hellip;</h4>
                   <span class="filter-value">mit</span>
                 </li>
               </ul>
-              <ul id="package-list" data-focus-query-field="true">
+              <ul id="package-list">
                 <li>
                   <a href="https://example.com/package/one">
                     <h4>Package One</h4>

Sources/App/Views/Search/SearchShow+View.swift

@@ -94,7 +94,7 @@ <h1>
           <section class="package-results">
             <h4>Matching packages</h4>
             <p>No packages found.</p>
-            <ul id="package-list" data-focus-query-field="true"></ul>
+            <ul id="package-list"></ul>
             <ul class="pagination">
               <li class="previous">
                 <a href="/search?query=&apos;&gt;&quot;&gt;&lt;/script&gt;&lt;svg/onload=confirm(&apos;XSS&apos;)&gt;&page=2">Previous Page</a>