Add semanticaly clickable button element to result list (#260)

- improves usability with keyboard #258
- improves accessbility

See #259 for other relevant discussion

Co-authored-by: Rok Garbas <rok@garbas.si>

src/Page/Options.elm

@@ -154,6 +154,9 @@ viewResultItem channel show item =
 
             else
                 []
+
+        open =
+            SearchMsg (Search.ShowDetails item.source.name)
     in
     []
         -- DEBUG: |> List.append
@@ -175,10 +178,22 @@ viewResultItem channel show item =
         -- DEBUG:     ]
         |> List.append
             (tr
-                [ onClick (SearchMsg (Search.ShowDetails item.source.name))
+                [ onClick open
                 , Search.elementId item.source.name
                 ]
-                [ td [] [ text item.source.name ]
+                [ td []
+                    [ Html.button
+                        [ class "search-result-button"
+                        , Html.Events.custom "click" <|
+                            Json.Decode.succeed
+                                { message = open
+                                , stopPropagation = True
+                                , preventDefault = True
+                                }
+                        ]
+                        [ text item.source.name
+                        ]
+                    ]
                 ]
                 :: packageDetails
             )

src/Page/Packages.elm

@@ -194,6 +194,9 @@ viewResultItem channel show item =
 
             else
                 []
+
+        open =
+            SearchMsg (Search.ShowDetails item.source.attr_name)
     in
     []
         -- DEBUG: |> List.append
@@ -222,10 +225,21 @@ viewResultItem channel show item =
         -- DEBUG:     ]
         |> List.append
             (tr
-                [ onClick (SearchMsg (Search.ShowDetails item.source.attr_name))
+                [ onClick open
                 , Search.elementId item.source.attr_name
                 ]
-                [ td [] [ text <| item.source.attr_name ]
+                [ td []
+                    [ Html.button
+                        [ class "search-result-button"
+                        , Html.Events.custom "click" <|
+                            Json.Decode.succeed
+                                { message = open
+                                , stopPropagation = True
+                                , preventDefault = True
+                                }
+                        ]
+                        [ text item.source.attr_name ]
+                    ]
                 , td [] [ text item.source.pname ]
                 , td [] [ text item.source.pversion ]
                 , td [] [ text <| Maybe.withDefault "" item.source.description ]

src/index.less

@@ -88,6 +88,17 @@ header .navbar.navbar-static-top {
   tbody > td > dl > dd {
     margin-bottom: 1em;
   }
+
+  .search-result-button {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: transparent;
+      display: inline;
+      font: inherit;
+      color: inherit;
+      text-align: inherit;
+  }
 }
 
 .sort-form,