From dd6b842d6a03c94c87b57602eb1a72f0faac9ea5 Mon Sep 17 00:00:00 2001
From: Kenichi Kamiya <kachick1@gmail.com>
Date: Thu, 5 Sep 2024 02:53:51 +0900
Subject: [PATCH] Fix accessibility insight warnings (#579)

* Add missing labels

* Add comment for non li in ol problem

* Apply high contrast color for revision link

* Apply high contrast color for header

* Standardize plural

* Fix to apply empty label
---
 public/main.css |  4 ++--
 src/Main.elm    | 14 +++++++++++---
 2 files changed, 13 insertions(+), 5 deletions(-)

diff --git a/public/main.css b/public/main.css
index 549eaae..2237243 100644
--- a/public/main.css
+++ b/public/main.css
@@ -66,7 +66,7 @@ a {
   padding: 0 2ch;
   width: 100%;
   height: 100%;
-  color: black;
+  color: whitesmoke;
 }
 
 #page > .header .github-link {
@@ -123,7 +123,7 @@ a {
 
 .revision-link {
   text-decoration: none;
-  color: #003847;
+  color: #00141a;
 }
 
 .users-panel {
diff --git a/src/Main.elm b/src/Main.elm
index 0dc2a85..4d3b288 100644
--- a/src/Main.elm
+++ b/src/Main.elm
@@ -482,6 +482,7 @@ userPanel : Model -> Html Msg
 userPanel model =
     div [ Attr.class "users-panel" ]
         [ ol []
+            -- FIXME: Fix broken HTML structure. Do not include non li in ol. ~ GH-577
             (div [ Attr.class "list-container" ]
                 [ div [ Attr.class "list-item" ] [ addUserInput model ], addUserButton model ]
                 :: (model.users
@@ -537,25 +538,31 @@ newIntervalFields model =
         [ text "/"
         , space
         , select
-            [ Attr.class "value-select"
+            [ Attr.id "duration-hours-select"
+            , Attr.class "value-select"
             , onInput (UpdateInterval MobSession.Hour)
             , Attr.disabled model.mobbing
             ]
             (hoursOptions |> optionsFormatter)
+        , label [ Attr.for "duration-hours-select" ] []
         , text ":"
         , select
-            [ Attr.class "value-select"
+            [ Attr.id "duration-minutes-select"
+            , Attr.class "value-select"
             , onInput (UpdateInterval MobSession.Min)
             , Attr.disabled model.mobbing
             ]
             (minutesOptions |> optionsFormatter)
+        , label [ Attr.for "duration-minutes-select" ] []
         , text ":"
         , select
-            [ Attr.class "value-select"
+            [ Attr.id "duration-seconds-select"
+            , Attr.class "value-select"
             , onInput (UpdateInterval MobSession.Sec)
             , Attr.disabled model.mobbing
             ]
             (secondsOptions |> optionsFormatter)
+        , label [ Attr.for "duration-seconds-select" ] []
         ]
 
 
@@ -667,6 +674,7 @@ appHeader =
             [ img
                 [ Attr.class "github-logo"
                 , Attr.src "/images/github-mark.svg"
+                , Attr.alt "Logo of GitHub"
                 , Attr.draggable "false"
                 , Attr.height 24
                 , Attr.width 24