Skip to content

Commit

Permalink
Browse files Browse the repository at this point in the history
Add semanticaly clicable button element to result list
- improves usability with keyboard #258
- improves accessbility

See #259 for other relevant discussion
  • Loading branch information
turboMaCk committed Jan 5, 2021
1 parent 01d682f commit 8e4069b
Show file tree
Hide file tree
Showing 3 changed files with 40 additions and 4 deletions.
19 changes: 17 additions & 2 deletions src/Page/Options.elm
Expand Up @@ -154,6 +154,9 @@ viewResultItem channel show item =

else
[]

open =
SearchMsg (Search.ShowDetails item.source.name)
in
[]
-- DEBUG: |> List.append
Expand All @@ -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
)
Expand Down
18 changes: 16 additions & 2 deletions src/Page/Packages.elm
Expand Up @@ -194,6 +194,9 @@ viewResultItem channel show item =

else
[]

open =
SearchMsg (Search.ShowDetails item.source.attr_name)
in
[]
-- DEBUG: |> List.append
Expand Down Expand Up @@ -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 ]
Expand Down
7 changes: 7 additions & 0 deletions src/index.less
Expand Up @@ -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,
Expand Down

0 comments on commit 8e4069b

Please sign in to comment.