c8h4/aux-search
1
0
Fork 0
Code Issues Pull requests Packages Releases Activity

Accessibility fixes (#651)

Browse source 
* 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:
Marco Daniel Martins 2023-04-27 21:43:27 +02:00 committed by GitHub
parent 1ecb696edd
commit 0d663f27fa
Failed to generate hash of commit
4 changed files with 52 additions and 18 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
frontend/src/Main.elm
View file

@ -19,7 +19,8 @@ import Html
) )
import Html.Attributes import Html.Attributes
exposing exposing
( class ( alt
, class
, classList , classList
, href , href
, id , id
@ -375,7 +376,7 @@ view model =
[ div [ class "navbar-inner" ] [ div [ class "navbar-inner" ]
[ div [ class "container" ] [ div [ class "container" ]
[ a [ class "brand", href "https://nixos.org" ] [ 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 [] , div []
[ ul [ class "nav pull-left" ] [ ul [ class "nav pull-left" ]

35
frontend/src/Search.elm
View file

@ -62,6 +62,7 @@ import Html.Attributes
, autofocus , autofocus
, class , class
, classList , classList
, disabled
, href , href
, id , id
, placeholder , placeholder
@ -988,7 +989,7 @@ viewChannels nixosChannels outMsg selectedChannel =
in in
List.append List.append
[ div [] [ div []
[ h4 [] [ text "Channel: " ] [ h2 [] [ text "Channel: " ]
, div , div
[ class "btn-group" [ class "btn-group"
, attribute "data-toggle" "buttons-radio" , attribute "data-toggle" "buttons-radio"
@ -1138,9 +1139,11 @@ viewPager :
viewPager model total = viewPager model total =
div [] div []
[ ul [ class "pager" ] [ ul [ class "pager" ]
[ li [ classList [ ( "disabled", model.from == 0 ) ] ] [ li []
[ a [ button
[ onClick <| [ class "btn"
, disabled (model.from == 0)
, onClick <|
if model.from == 0 then if model.from == 0 then
NoOp NoOp
@ -1149,9 +1152,11 @@ viewPager model total =
] ]
[ text "First" ] [ text "First" ]
] ]
, li [ classList [ ( "disabled", model.from == 0 ) ] ] , li []
[ a [ button
[ onClick <| [ class "btn"
, disabled (model.from == 0)
, onClick <|
if model.from - model.size < 0 then if model.from - model.size < 0 then
NoOp NoOp
@ -1160,9 +1165,11 @@ viewPager model total =
] ]
[ text "Previous" ] [ text "Previous" ]
] ]
, li [ classList [ ( "disabled", model.from + model.size >= total ) ] ] , li []
[ a [ button
[ onClick <| [ class "btn"
, disabled (model.from + model.size >= total)
, onClick <|
if model.from + model.size >= total then if model.from + model.size >= total then
NoOp NoOp
@ -1171,9 +1178,11 @@ viewPager model total =
] ]
[ text "Next" ] [ text "Next" ]
] ]
, li [ classList [ ( "disabled", model.from + model.size >= total ) ] ] , li []
[ a [ button
[ onClick <| [ class "btn"
, disabled (model.from + model.size >= total)
, onClick <|
if model.from + model.size >= total then if model.from + model.size >= total then
NoOp NoOp

3
frontend/src/index.html
View file

@ -1,12 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<title>NixOS Search</title> <title>NixOS Search</title>
<script type="text/javascript" src="https://nixos.org/js/jquery.min.js"></script> <script type="text/javascript" src="https://nixos.org/js/jquery.min.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />

27
frontend/src/index.scss
View file

@ -151,11 +151,12 @@ header .navbar.navbar-static-top {
margin-bottom: 0.5em; margin-bottom: 0.5em;
// "Channels: " label // "Channels: " label
& > div > h4 { & > div > h2 {
display: inline; display: inline;
vertical-align: middle; vertical-align: middle;
font-size: 1.2em; font-size: 1.2em;
margin-left: 0.2em; margin-left: 0.2em;
line-height: 20px
} }
} }
} }
@ -549,3 +550,27 @@ header .navbar.navbar-static-top {
height: 5em; 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
}