Add semanticaly clicable button element to result list

turboMaCk · turboMaCk · commit 8e4069b50220 · 2021-01-05T21:58:14.000+01:00
- improves usability with keyboard #258 - improves accessbility See #259 for other relevant discussion
diff --git a/src/Page/Options.elm b/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
             )
diff --git a/src/Page/Packages.elm b/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 ]
diff --git a/src/index.less b/src/index.less
@@ -88,6 +88,13 @@ header .navbar.navbar-static-top {
   tbody > td > dl > dd {
     margin-bottom: 1em;
   }
+
+  .search-result-button {
+      margin: 0;
+      padding: 0;
+      border: 0;
+      background: transparent;
+  }
 }
 
 .sort-form,

Original file line number	Diff line number	Diff line change
`@@ -88,6 +88,13 @@ header .navbar.navbar-static-top {`
`88`	`88`	`tbody > td > dl > dd {`
`89`	`89`	`margin-bottom: 1em;`
`90`	`90`	`}`
	`91`	`+`
	`92`	`+ .search-result-button {`
	`93`	`+ margin: 0;`
	`94`	`+ padding: 0;`
	`95`	`+ border: 0;`
	`96`	`+ background: transparent;`
	`97`	`+ }`
`91`	`98`	`}`
`92`	`99`
`93`	`100`	`.sort-form,`