fix(a11y): Hide hidden actions bar from a11y tree

static/index.html

@@ -42,12 +42,11 @@
         </p>
       </section>
       <section class="output" data-mode="booster" data-state="ready">
-        <div class="actions">
-          <!-- <button class="share">Share</button> -->
+        <div class="actions" aria-hidden="true">
           <div class="buttons">
-            <button class="save">Save</button>
-            <button class="toggle-name" data-include>Trainer Name</button>
-            <button class="generate-new">New Pokémon</button>
+            <button class="save" tabindex="-1">Save</button>
+            <button class="toggle-name" data-include tabindex="-1">Trainer Name</button>
+            <button class="generate-new" tabindex="-1">New Pokémon</button>
           </div>
           <div class="duration"><span class="elapsed">0.0</span>s (ETA: <span class="eta">40</span>s)</div>
         </div>

static/js/index.js

@@ -25,7 +25,8 @@ const generate = async () => {
   try {
     const scene = document.querySelector('.scene');
     const cardSlot = scene.querySelector('.card-slot');
-    const durationDisplay = document.querySelector('.duration');
+    const actions = document.querySelector('.actions');
+    const durationDisplay = actions.querySelector('.duration');
 
     scene.removeEventListener('mousemove', mousemoveHandlerForPreviousCard, true);
     cardSlot.innerHTML = '';
@@ -36,7 +37,9 @@ const generate = async () => {
     pokeName = details.name;
     const task = await createTask(details.energy_type);
 
-    document.querySelector('.actions').style.opacity = '1';
+    actions.style.opacity = '1';
+    actions.setAttribute('aria-hidden', 'false');
+    actions.querySelectorAll('button').forEach((button) => button.setAttribute('tabindex', '0'));
     durationDisplay.classList.add('displayed');
     const timer = durationTimer(durationDisplay);
     const timerCleanup = timer().cleanup;