(search) Spell out website problems with "atomic elements" instead of having a hover that's inaccessible with keyboard navigation

code/services-application/search-service/java/nu/marginalia/search/model/UrlDetails.java

@@ -7,6 +7,7 @@ import nu.marginalia.model.EdgeUrl;
 import nu.marginalia.model.crawl.DomainIndexingState;
 import nu.marginalia.model.crawl.HtmlFeature;
 
+import java.util.ArrayList;
 import java.util.List;
 import java.util.StringJoiner;
 
@@ -104,25 +105,25 @@ public class UrlDetails implements Comparable<UrlDetails> {
         return Integer.bitCount(features & mask);
     }
 
-    public String getProblems() {
+    public List<UrlProblem> getProblems() {
-        StringJoiner sj = new StringJoiner(", ");
+        List<UrlProblem> problems = new ArrayList<>();
 
         if (isScripts()) {
-            sj.add("Javascript");
+            problems.add(new UrlProblem("Js", "The page uses Javascript"));
         }
         if (isCookies()) {
-            sj.add("Cookies");
+            problems.add(new UrlProblem("Co", "The page uses Cookies"));
         }
         if (isTracking()) {
-            sj.add("Tracking/Analytics");
+            problems.add(new UrlProblem("Tr", "The page uses Tracking/Analytics"));
         }
         if (isAffiliate()) {
-            sj.add("Affiliate Linking");
+            problems.add(new UrlProblem("Af", "The page may use Affiliate Linking"));
         }
         if (isAds()) {
-            sj.add("Ads/Adtech Tracking");
+            problems.add(new UrlProblem("Ad", "The page uses Ads/Adtech Tracking"));
         }
-        return sj.toString();
+        return problems;
 
     }
 
@@ -151,4 +152,8 @@ public class UrlDetails implements Comparable<UrlDetails> {
 
         return 10;
     }
+
+    public static record UrlProblem(String name, String description) {
+
+    }
 }

code/services-application/search-service/resources/templates/search/parts/search-result.hdb

@@ -10,7 +10,9 @@
     <a href="/site/{{url.domain}}" title="Domain Information">Info</a>
     {{#if hasMoreResults}}<a href="/site-search/{{url.domain}}/{{query}}?profile={{profile}}" title="More results from this domain">{{resultsFromSameDomain}}+</a>{{/if}}{{/unless}}
     <div class="meta">
-        {{#if problemCount}} <span class="problems" title="{{problems}}"> ⚠ {{problemCount}} </span> {{/if}}
+        {{#each problems}}
+            <span class="problem" title="{{description}}">{{name}}</span>
+        {{/each}}
         <span aria-hidden="true" class="meta positions"
               title="Positions where keywords were found within the document">{{positions}}</span>
         <div class="screenreader-only">Terms appear in {{positionsCount}} positions</div>

code/services-application/search-service/test/nu/marginalia/search/paperdoll/SearchServicePaperDoll.java

@@ -33,10 +33,7 @@ import org.testcontainers.junit.jupiter.Container;
 import org.testcontainers.junit.jupiter.Testcontainers;
 
 import java.net.URISyntaxException;
-import java.util.ArrayList;
+import java.util.*;
-import java.util.Collection;
-import java.util.List;
-import java.util.Set;
 
 import static org.mockito.ArgumentMatchers.any;
 import static org.mockito.Mockito.when;
@@ -147,6 +144,7 @@ public class SearchServicePaperDoll extends AbstractModule {
 
         registerSearchResult("https://www.example.com/foo", "Foo", "Lorem ipsum dolor sit amet", Set.of(), 0.5, 0.5, ~0L);
         registerSearchResult("https://www.example2.com/bar", "Bar", "Some text goes here", Set.of(), 0.5, 0.5, 1L);
+        registerSearchResult("https://www.example3.com/baz", "All HTML Features", "This one's got every feature", EnumSet.allOf(HtmlFeature.class), 0.5, 0.5, 1L);
 
         for (;;);
     }