Accessibility improvements and simplification. Fix ticks.

public/css/default.css

@@ -1,7 +1,6 @@
 @charset "UTF-8";
 
 :root {
-    /* Colors */
     --color-bg: white;
     --color-border: black;
     --color-delete-btn-bg: linen;
@@ -20,7 +19,6 @@
     --color-required: crimson;
     --color-text: black;
 
-    /* border styling */
     --border-width: 2px;
     --border-width-thin: 1px;
     --border-radius: 4px;
@@ -36,6 +34,7 @@ body {
     color: var(--color-text);
 }
 
+/*a { font-weight: bold; } */
 a { font-weight: bold; }
 
 legend, fieldset {
@@ -120,13 +119,13 @@ fieldset.emoji-group {
 }
 
 /* Navbar styling */
-.navbar {
+nav {
     overflow: visible;
     display: flex;
     align-items: center;
 }
 
-.navbar a {
+nav a {
     color: var(--color-text);
     padding: 10px;
     font-size: 16px;
@@ -134,7 +133,7 @@ fieldset.emoji-group {
     text-decoration: none;
 }
 
-.navbar > a:first-child {
+nav > a:first-child {
     padding-left: 0;
 }
 
@@ -144,12 +143,12 @@ fieldset.emoji-group {
    me to have semantically appropriate pure HTML dropdowms
    that work on mobile devices.
 */
-.dropdown {
+details {
     overflow: visible;
     position: relative;
 }
 
-.dropdown summary {
+summary {
     font-size: 16px;
     padding: 10px;
     color: var(--color-text);
@@ -160,23 +159,23 @@ fieldset.emoji-group {
 }
 
 /* Remove the default details arrow on different browsers*/
-.dropdown summary::-webkit-details-marker,
+summary::-webkit-details-marker,
-.dropdown summary::-moz-list-bullet {
+summary::-moz-list-bullet {
     display: none;
     list-style-type: none;
 }
 
 /* Add a downward-facing caret after the button label */
-.dropdown summary::after {
+summary::after {
     content: " ▼";
     font-size: 0.8em;
     margin-left: 1px;
 }
 
 /* Rotate the caret when opened */
-.dropdown[open] summary::after { content: " ▲"; }
+details[open] summary::after { content: " ▲"; }
 
-.dropdown-content {
+.dropdown-items{
     position: absolute;
     background-color: var(--color-bg);
     border: 1px solid var(--color-border);
@@ -187,7 +186,7 @@ fieldset.emoji-group {
     left: 0;
 }
 
-.dropdown-content a {
+.dropdown-items a {
     float: none;
     color: var(--color-text);
     padding: 10px;
@@ -196,24 +195,15 @@ fieldset.emoji-group {
     text-align: left;
 }
 
-/* navbar hover and focus styling */
+nav a:hover,
-.navbar a:hover,
+nav a:focus,
-.navbar a:focus,
+summary:hover,
-.dropdown summary:hover,
+summary:focus,
-.dropdown summary:focus,
+.dropdown-items a:hover,
-.dropdown-content a:hover,
+.dropdown-items a:focus {
-.dropdown-content a:focus {
     background-color: var(--color-primary);
 }
 
-/*
-    The two common display options for responsive layouts are flex and grid.
-        flex (aka Flexbox) aligns items either horizontally or vertically.
-        grid can align items in two dimensions.
-        grid also allows more precise positioning of elements, so I'm using that
-        even though I only have one dimension.
-*/
-
 .home-container { display: grid; }
 
 .home-sidebar {
@@ -227,10 +217,8 @@ fieldset.emoji-group {
     margin: 0 0 1rem 0;
 }
 
-/* Description list: description */
 .profile-data dd { margin: 0; }
 
-/* Description list: term */
 /* Hidden from visual display - screen reader only class */
 /* https://www.sitelint.com/blog/hiding-a-text-but-making-it-accessible-to-a-screen-reader */
 .profile-data dt {
@@ -245,12 +233,7 @@ fieldset.emoji-group {
     width: 1px;
 }
 
-/*
+/* container for greeting + mood emoji (wrapped in a <span>), and "change mood" link */
-    Left-justify the greeting text,
-    right-justify the Change Mood link
-*/
-
-/* greeting text */
 .profile-greeting {
     display: flex;
     justify-content: space-between;
@@ -265,19 +248,16 @@ fieldset.emoji-group {
     gap: 0.4em;
 }
 
-/* define the profile "greeting" style */
 .profile-greeting-content-text {
     font-weight: 600;
     font-size: 1.1em;
 }
 
-/* Style the Change Mood link */
 .change-mood {
     font-size: 0.9em;
     white-space: nowrap;
 }
 
-/* define the profile "about" style */
 .profile-about {
     font-style: italic;
     font-size: 0.95em;
@@ -302,7 +282,6 @@ fieldset.emoji-group {
     margin: 0.5em 0 0 0;
 }
 
-/* Styling for flash messages */
 .flash-messages {
     margin-top: 10px;
     padding: 10px;
@@ -364,7 +343,7 @@ fieldset.emoji-group {
     padding-left: 0.5em;
 }
 
-.tick-time {
+time {
     color: var(--color-text);
     font-size: 0.8em;
     margin-bottom: 0.4em;

src/Controller/HomeController/HomeController.php

@@ -26,10 +26,10 @@ class HomeController extends Controller {
     // POST handler
     // Saves the tick and reloads the homepage
     public function handleTick(){
-        if ($_SERVER['REQUEST_METHOD'] === 'POST' and isset($_POST['tick'])) {
+        if ($_SERVER['REQUEST_METHOD'] === 'POST' and isset($_POST['new_tick'])) {
             // save the tick
-            if (trim($_POST['tick'])){
+            if (trim($_POST['new_tick'])){
-                TickModel::save($_POST['tick']);
+                TickModel::save($_POST['new_tick']);
             }
         }
 

src/View/HomeView/HomeView.php

@@ -4,20 +4,24 @@ class HomeView {
         ob_start();
         ?>
 
-            <ul class="tick-feed">
+            <ul class="tick-feed" role="feed" aria-label="Recent updates">
             <?php foreach ($ticks as $tick): ?>
-                <li class="tick">
+                <?php
-                    <div class="tick-time"><?= Util::escape_html(Util::relative_time($tick['timestamp'])) ?></div>
+                    $datetime = new DateTime($tick['timestamp'], new DateTimeZone('UTC'));
-                    <span class="tick-text"><?= Util::linkify(Util::escape_html($tick['tick'])) ?></span>
+                    $relativeTime = Util::relative_time($tick['timestamp']);
+                ?>
+                <li class="tick" tabindex="0">
+                    <time datetime="<?php echo $datetime->format('c') ?>"><?php echo Util::escape_html($relativeTime) ?></time>
+                    <span class="tick-text"><?php echo Util::linkify(Util::escape_html($tick['tick'])) ?></span>
                 </li>
             <?php endforeach; ?>
             </ul>
             <div class="tick-pagination">
             <?php if ($page > 1): ?>
-                <a href="?page=<?= $page - 1 ?>">&laquo; Newer</a>
+                <a href="?page=<?php echo $page - 1 ?>">&laquo; Newer</a>
             <?php endif; ?>
             <?php if (count($ticks) === $limit): ?>
-                <a href="?page=<?= $page + 1 ?>">Older &raquo;</a>
+                <a href="?page=<?php echo $page + 1 ?>">Older &raquo;</a>
             <?php endif; ?>
             </div>
 

templates/partials/home.php

@@ -32,7 +32,8 @@
                 <div class="profile-tick">
                     <form class="profile-tick-form" method="post">
                         <input type="hidden" name="csrf_token" value="<?= Util::escape_html($_SESSION['csrf_token']) ?>">
-                        <textarea placeholder="What's ticking?"
+                        <textarea name="new_tick"
+                                  placeholder="What's ticking?"
                                   minlength="1"
                                   maxlength="200"
                                   rows="3"></textarea>
@@ -41,11 +42,10 @@
                 </div>
 <?php endif; ?>
             </aside>
-            <main id="ticks" class="home-main">
+            <main id="ticks">
                 <div class="home-header">
                     <h1 class="site-description"><?= $config->siteDescription ?></h1>
                 </div>
                 <?php echo $tickList ?>
             </main>
-
         </div>

templates/partials/navbar.php

@@ -1,10 +1,10 @@
 <?php /** @var ConfigModel $config */ ?>
 <?php /* https://www.w3schools.com/howto/howto_css_dropdown.asp */ ?>
-        <div class="navbar">
+        <nav aria-label="Main navigation">
             <a href="<?= $config->basePath ?>">home</a>
-            <details class="dropdown">
+            <details>
-                <summary>feeds</summary>
+                <summary aria-haspopup="true">feeds</summary>
-                <div class="dropdown-content">
+                <div class="dropdown-items">
                     <a href="<?= $config->basePath ?>feed/rss">rss</a>
                     <a href="<?= $config->basePath ?>feed/atom">atom</a>
                 </div>
@@ -12,9 +12,9 @@
 <?php if (!Session::isLoggedIn()): ?>
             <a href="<?= $config->basePath ?>login">login</a>
 <?php else: ?>
-            <details class="dropdown">
+            <details>
-                <summary>admin</summary>
+                <summary aria-haspopup="true">admin</summary>
-                <div class="dropdown-content">
+                <div class="dropdown-items">
                     <a href="<?= $config->basePath ?>admin">settings</a>
                     <a href="<?= $config->basePath ?>admin/css">css</a>
                     <a href="<?= $config->basePath ?>admin/emoji">emoji</a>
@@ -22,4 +22,4 @@
             </details>
             <a href="<?= $config->basePath ?>logout">logout</a>
 <?php endif; ?>
-        </div>
+        </nav>