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>
This commit is contained in:
Marek Fajkus 2021-01-06 15:58:41 +01:00 committed by GitHub
parent 01d682f980
commit f624c117cb
Failed to generate hash of commit
3 changed files with 44 additions and 4 deletions

View file

@ -154,6 +154,9 @@ viewResultItem channel show item =
else else
[] []
open =
SearchMsg (Search.ShowDetails item.source.name)
in in
[] []
-- DEBUG: |> List.append -- DEBUG: |> List.append
@ -175,10 +178,22 @@ viewResultItem channel show item =
-- DEBUG: ] -- DEBUG: ]
|> List.append |> List.append
(tr (tr
[ onClick (SearchMsg (Search.ShowDetails item.source.name)) [ onClick open
, Search.elementId item.source.name , 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 :: packageDetails
) )

View file

@ -194,6 +194,9 @@ viewResultItem channel show item =
else else
[] []
open =
SearchMsg (Search.ShowDetails item.source.attr_name)
in in
[] []
-- DEBUG: |> List.append -- DEBUG: |> List.append
@ -222,10 +225,21 @@ viewResultItem channel show item =
-- DEBUG: ] -- DEBUG: ]
|> List.append |> List.append
(tr (tr
[ onClick (SearchMsg (Search.ShowDetails item.source.attr_name)) [ onClick open
, Search.elementId item.source.attr_name , 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.pname ]
, td [] [ text item.source.pversion ] , td [] [ text item.source.pversion ]
, td [] [ text <| Maybe.withDefault "" item.source.description ] , td [] [ text <| Maybe.withDefault "" item.source.description ]

View file

@ -88,6 +88,17 @@ header .navbar.navbar-static-top {
tbody > td > dl > dd { tbody > td > dl > dd {
margin-bottom: 1em; 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, .sort-form,