mirror of
https://github.com/NixOS/nixos-search
synced 2024-11-13 23:47:07 +00:00
Accessibility fixes (#651)
* frontend: fix critical accessibility issues, logo alt and language * frontend: use buttons for pagination, override bootstrap for accessibility * frontend: heading elements in sequential order * frontend: override badge contrast ratio * frontend: fix import * frontend: fixup --------- Co-authored-by: Naïm Favier <n@monade.li>
This commit is contained in:
parent
1ecb696edd
commit
0d663f27fa
4 changed files with 52 additions and 18 deletions
|
@ -19,7 +19,8 @@ import Html
|
|||
)
|
||||
import Html.Attributes
|
||||
exposing
|
||||
( class
|
||||
( alt
|
||||
, class
|
||||
, classList
|
||||
, href
|
||||
, id
|
||||
|
@ -375,7 +376,7 @@ view model =
|
|||
[ div [ class "navbar-inner" ]
|
||||
[ div [ class "container" ]
|
||||
[ a [ class "brand", href "https://nixos.org" ]
|
||||
[ img [ src "https://nixos.org/logo/nix-wiki.png", class "logo" ] []
|
||||
[ img [ alt "NixOS logo", src "https://nixos.org/logo/nix-wiki.png", class "logo" ] []
|
||||
]
|
||||
, div []
|
||||
[ ul [ class "nav pull-left" ]
|
||||
|
|
|
@ -62,6 +62,7 @@ import Html.Attributes
|
|||
, autofocus
|
||||
, class
|
||||
, classList
|
||||
, disabled
|
||||
, href
|
||||
, id
|
||||
, placeholder
|
||||
|
@ -988,7 +989,7 @@ viewChannels nixosChannels outMsg selectedChannel =
|
|||
in
|
||||
List.append
|
||||
[ div []
|
||||
[ h4 [] [ text "Channel: " ]
|
||||
[ h2 [] [ text "Channel: " ]
|
||||
, div
|
||||
[ class "btn-group"
|
||||
, attribute "data-toggle" "buttons-radio"
|
||||
|
@ -1138,9 +1139,11 @@ viewPager :
|
|||
viewPager model total =
|
||||
div []
|
||||
[ ul [ class "pager" ]
|
||||
[ li [ classList [ ( "disabled", model.from == 0 ) ] ]
|
||||
[ a
|
||||
[ onClick <|
|
||||
[ li []
|
||||
[ button
|
||||
[ class "btn"
|
||||
, disabled (model.from == 0)
|
||||
, onClick <|
|
||||
if model.from == 0 then
|
||||
NoOp
|
||||
|
||||
|
@ -1149,9 +1152,11 @@ viewPager model total =
|
|||
]
|
||||
[ text "First" ]
|
||||
]
|
||||
, li [ classList [ ( "disabled", model.from == 0 ) ] ]
|
||||
[ a
|
||||
[ onClick <|
|
||||
, li []
|
||||
[ button
|
||||
[ class "btn"
|
||||
, disabled (model.from == 0)
|
||||
, onClick <|
|
||||
if model.from - model.size < 0 then
|
||||
NoOp
|
||||
|
||||
|
@ -1160,9 +1165,11 @@ viewPager model total =
|
|||
]
|
||||
[ text "Previous" ]
|
||||
]
|
||||
, li [ classList [ ( "disabled", model.from + model.size >= total ) ] ]
|
||||
[ a
|
||||
[ onClick <|
|
||||
, li []
|
||||
[ button
|
||||
[ class "btn"
|
||||
, disabled (model.from + model.size >= total)
|
||||
, onClick <|
|
||||
if model.from + model.size >= total then
|
||||
NoOp
|
||||
|
||||
|
@ -1171,9 +1178,11 @@ viewPager model total =
|
|||
]
|
||||
[ text "Next" ]
|
||||
]
|
||||
, li [ classList [ ( "disabled", model.from + model.size >= total ) ] ]
|
||||
[ a
|
||||
[ onClick <|
|
||||
, li []
|
||||
[ button
|
||||
[ class "btn"
|
||||
, disabled (model.from + model.size >= total)
|
||||
, onClick <|
|
||||
if model.from + model.size >= total then
|
||||
NoOp
|
||||
|
||||
|
|
|
@ -1,12 +1,11 @@
|
|||
<!DOCTYPE html>
|
||||
<html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<title>NixOS Search</title>
|
||||
|
||||
|
||||
<script type="text/javascript" src="https://nixos.org/js/jquery.min.js"></script>
|
||||
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
|
|
|
@ -151,11 +151,12 @@ header .navbar.navbar-static-top {
|
|||
margin-bottom: 0.5em;
|
||||
|
||||
// "Channels: " label
|
||||
& > div > h4 {
|
||||
& > div > h2 {
|
||||
display: inline;
|
||||
vertical-align: middle;
|
||||
font-size: 1.2em;
|
||||
margin-left: 0.2em;
|
||||
line-height: 20px
|
||||
}
|
||||
}
|
||||
}
|
||||
|
@ -549,3 +550,27 @@ header .navbar.navbar-static-top {
|
|||
height: 5em;
|
||||
}
|
||||
}
|
||||
|
||||
/* ------------------------------------------------------------------------- */
|
||||
/* -- Accessibility overrides ---------------------------------------------- */
|
||||
/* ------------------------------------------------------------------------- */
|
||||
.label-info {
|
||||
background: #007dbb;
|
||||
}
|
||||
|
||||
a {
|
||||
color: #007dbb;
|
||||
}
|
||||
|
||||
.pager {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
max-width: 20em;
|
||||
margin: 0 auto;
|
||||
padding: 20px 0;
|
||||
}
|
||||
|
||||
.badge {
|
||||
background-color: #757575
|
||||
}
|
Loading…
Reference in a new issue