From 4712aa8da6c659b2bf61b4a2520a33ac755094a5 Mon Sep 17 00:00:00 2001
From: Greg Sarjeant <1686767+gsarjeant@users.noreply.github.com>
Date: Mon, 23 Jun 2025 11:33:37 -0400
Subject: [PATCH] Make mood picker tab-navigable. Other cleanup.

---
 public/css/default.css         | 18 ++++++++++++++++--
 src/View/MoodView/MoodView.php |  2 +-
 templates/partials/css.php     |  4 ++--
 templates/partials/emoji.php   |  4 ++--
 templates/partials/mood.php    |  6 ++++--
 5 files changed, 25 insertions(+), 9 deletions(-)

diff --git a/public/css/default.css b/public/css/default.css
index 7ea9c62..0283a64 100644
--- a/public/css/default.css
+++ b/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);
diff --git a/src/View/MoodView/MoodView.php b/src/View/MoodView/MoodView.php
index 4686ae0..ef38c5f 100644
--- a/src/View/MoodView/MoodView.php
+++ b/src/View/MoodView/MoodView.php
@@ -43,4 +43,4 @@ class MoodView {
         return ob_get_clean();
     }
 }
-?>
\ No newline at end of file
+?>
diff --git a/templates/partials/css.php b/templates/partials/css.php
index 1e04145..b2950a0 100644
--- a/templates/partials/css.php
+++ b/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>
\ No newline at end of file
+</main>
diff --git a/templates/partials/emoji.php b/templates/partials/emoji.php
index 933ee39..790baa4 100644
--- a/templates/partials/emoji.php
+++ b/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>
diff --git a/templates/partials/mood.php b/templates/partials/mood.php
index 1992ea3..ad2dfad 100644
--- a/templates/partials/mood.php
+++ b/templates/partials/mood.php
@@ -1,3 +1,5 @@
 <?php /** @var string $moodPicker */ ?>
-        <h2>How are you feeling?</h2>
-<?php echo $moodPicker; ?>
\ No newline at end of file
+        <h1>How are you feeling?</h1>
+        <main>
+<?php echo $moodPicker; ?>
+        </main>