Make mood picker tab-navigable. Other cleanup.

public/css/default.css

@@ -4,7 +4,7 @@
     --color-bg: white;
     --color-border: black;
     --color-delete-btn-bg: linen;
-    --color-delete-btn: crimson;
+    --color-delete-btn: #721c24;
     --color-delete-btn-border: lightcoral;
     --color-flash-error: #721c24;
     --color-flash-error-bg: mistyrose;
@@ -373,7 +373,15 @@ time {
 }
 
 /* Mood selection page */
-.mood-option input { display: none; }
+.mood-option input {
+    position: absolute;
+    opacity: 0;
+    width: 1px;
+    height: 1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+}
 
 .mood-option span {
     font-size: 1.4em;
@@ -384,6 +392,12 @@ time {
 
 .mood-option:hover span { background-color: var(--color-mood-hover); }
 
+.mood-option input:focus + span {
+    background-color: var(--color-mood-hover);
+    outline: 2px solid var(--color-focus);
+    outline-offset: 2px;
+}
+
 .mood-option input:checked + span {
     background-color: var(--color-mood-selected);
     outline: var(--border-width) solid var(--color-mood-border);

src/View/MoodView/MoodView.php

@@ -43,4 +43,4 @@ class MoodView {
         return ob_get_clean();
     }
 }
-?>
+?>

templates/partials/css.php

@@ -1,7 +1,7 @@
 <?php /** @var ConfigModel $config */ ?>
 <?php /** @var Array $customCss */ ?>
         <h1>CSS Management</h1>
-        <div>
+        <main>
             <form action="<?= $config->basePath ?>admin/css" method="post" enctype="multipart/form-data">
                 <input type="hidden" name="csrf_token" value="<?= Util::escape_html($_SESSION['csrf_token']) ?>">
                 <fieldset>
@@ -59,4 +59,4 @@
                     </div>
                 </fieldset>
             </form>
-        </div>
+</main>

templates/partials/emoji.php

@@ -1,7 +1,7 @@
 <?php /** @var ConfigModel $config */ ?>
 <?php /** @var array $emojiList */ ?>
         <h1>Emoji Management</h1>
-        <div>
+        <main>
             <form action="<?= $config->basePath ?>admin/emoji" method="post" enctype="multipart/form-data">
                 <input type="hidden" name="csrf_token" value="<?= Util::escape_html($_SESSION['csrf_token']) ?>">
                 <fieldset>
@@ -46,4 +46,4 @@
                 </fieldset>
 <?php endif; ?>
             </form>
-        </div>
+        </main>

templates/partials/mood.php

@@ -1,3 +1,5 @@
 <?php /** @var string $moodPicker */ ?>
-        <h2>How are you feeling?</h2>
+        <h1>How are you feeling?</h1>
-<?php echo $moodPicker; ?>
+        <main>
+<?php echo $moodPicker; ?>
+        </main>