accessibility improvements to form and toast

index.html

@@ -60,23 +60,20 @@
       </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>
+    <div id="toast" role="status" class="c-toast"></div>
 
     <main id="main" aria-busy="true">
       <h1 class="u-visually-hidden">Time Zones</h1>
       <div class="l-stack">
         <div id="timecard-list" class="u-contents"></div>
-        <form class="c-tile" id="tz-select" action="" method="get">
+        <form
+          class="c-tile"
+          id="tz-select"
+          action=""
+          method="get"
+          aria-labelledby="tz-select-label"
+        >
+          <p class="u-visually-hidden" id="tz-select-label">Add a timezone</p>
           <div class="c-field c-field--compact">
             <input
               class="c-field__input c-field__input--reset"
@@ -110,5 +107,8 @@ <h1 class="u-visually-hidden">Time Zones</h1>
     <script type="text/x-yui3-template" id="timezone-tmpl">
       {TEMPLATE:./src/templates/timezone.tmpl}
     </script>
+    <script type="text/x-yui3-template" id="toast-update-tmpl">
+      {TEMPLATE:./src/templates/toast-update.tmpl}
+    </script>
   </body>
 </html>

src/css/components/toast.css

@@ -18,20 +18,10 @@
   flex-grow: 1;
 }
 
-.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;
-}

src/js/modules/views/pwa-toast.js

@@ -8,6 +8,9 @@ YUI.add(
       Y.View,
       [],
       {
+        template: Y.Template.Micro.compile(
+          Y.one('#toast-update-tmpl').getHTML(),
+        ),
         events: {
           '.c-toast__confirm': { click: 'confirm' },
           '.c-toast__close': { click: 'close' },
@@ -29,7 +32,12 @@ YUI.add(
         },
 
         toggle(needsRefresh) {
-          this.get('container').toggleClass('c-toast--visible', !!needsRefresh);
+          const $container = this.get('container');
+          if (needsRefresh) {
+            $container.setHTML(this.template()).addClass('c-toast--visible');
+            return;
+          }
+          $container.empty().removeClass('c-toast--visible');
         },
 
         confirm() {
@@ -50,6 +58,6 @@ YUI.add(
   },
   '1.0.0',
   {
-    requires: ['app'],
+    requires: ['app', 'template-micro'],
   },
 );

src/templates/toast-update.tmpl

@@ -0,0 +1,5 @@
+<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>

vite.config.mjs

@@ -10,7 +10,7 @@ const htmlPlugin = () => {
   return {
     name: 'html-transform',
     transformIndexHtml(html) {
-      return html.replace(/\{TEMPLATE:([^}]+)\}/, (_, match) => {
+      return html.replace(/\{TEMPLATE:([^}]+)\}/g, (_, match) => {
         const template = resolve(__dirname, match);
         if (!existsSync(template)) {
           console.error(`Unable to locate template: ${template}`);