a11y improvements to the status bar

dwightjack · Nov 5, 2024 · 2636377 · 2636377
1 parent d7ea544
commit 2636377
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 12 deletions.
diff --git a/index.html b/index.html
@@ -60,6 +60,18 @@
       </symbol>
     </svg>
 
+    <div id="toast" role="status" class="c-toast">
+      <p class="c-toast__message">
+        New content available, click on reload button to update.
+      </p>
+      <button class="c-button c-toast__button c-toast__confirm" type="button">
+        Reload
+      </button>
+      <button class="c-button c-toast__button c-toast__close" type="button">
+        Close
+      </button>
+    </div>
+
     <main id="main" aria-busy="true">
       <h1 class="u-visually-hidden">Time Zones</h1>
       <div class="l-stack">
@@ -94,13 +106,6 @@ <h1 class="u-visually-hidden">Time Zones</h1>
     <div role="status" class="c-loader c-loader--visible" id="loader">
       <span class="u-visually-hidden">Loading...</span>
     </div>
-    <div id="toast" role="status" class="c-toast">
-      <p class="c-toast__message">
-        New content available, click on reload button to update.
-      </p>
-      <button class="c-button c-toast__confirm" type="button">Reload</button>
-      <button class="c-button c-toast__close" type="button">Close</button>
-    </div>
 
     <script type="text/x-yui3-template" id="timezone-tmpl">
       {TEMPLATE:./src/templates/timezone.tmpl}

diff --git a/src/css/components/toast.css b/src/css/components/toast.css
@@ -9,18 +9,29 @@
   inline-size: 100%;
   min-inline-size: 0;
   margin: 0;
-  padding: var(--s-2);
-  background-color: var(--color-background-primary);
-  color: var(--color-text-primary);
-  font-size: var(--font-size-s);
   gap: var(--s-2);
+  opacity: 0.1;
 }
 
 .c-toast__message {
   flex-basis: calc(var(--toast-breakpoint) * 999);
   flex-grow: 1;
 }
 
-.c-toast:not(.c-toast--visible) {
+.c-toast > * {
   display: none;
+  transition-behavior: allow-discreet;
+  transition: display 0.1s normal 0.5s;
+}
+
+.c-toast.c-toast--visible {
+  padding: var(--s-2);
+  opacity: 1;
+  background-color: var(--color-background-primary);
+  color: var(--color-text-primary);
+  font-size: var(--font-size-s);
+}
+
+.c-toast.c-toast--visible > * {
+  display: block;
 }