fix(WhatsNew): Whats New modal was not displaying

Author: jackdomleo7

src/App.vue

@@ -23,15 +23,13 @@
 </template>
 
 <script setup lang="ts">
-import { defineAsyncComponent } from 'vue'
 import Header from './components/Header.vue'
 import Footer from './components/Footer.vue'
 import InfoBanner from './components/InfoBanner.vue'
 import ApiConfiguration from './components/ApiConfiguration.vue'
 import SearchContent from './components/Features/SearchContent.vue'
 import ComingSoon from './components/ComingSoon.vue'
-
-const WhatsNew = defineAsyncComponent(() => import('./components/WhatsNew.vue'))
+import WhatsNew from './components/WhatsNew.vue'
 </script>
 
 <style lang="scss" scoped>

src/components/Modal.vue

@@ -6,6 +6,7 @@
     aria-modal="true"
     :aria-labelledby="`${id}-heading`"
     :aria-describedby="`${id}-description`"
+    tabindex="-1"
     @cancel="emit('close')"
     @click="handleBackdropClick"
   >
@@ -97,11 +98,8 @@ watch(
       modal.value.showModal()
       document.body.style.overflow = 'hidden'
 
-      // Focus the first focusable element
-      const focusableElements = getFocusableElements()
-      if (focusableElements.length > 0) {
-        focusableElements[0]?.focus()
-      }
+      // Focus the dialog element itself for screen reader announcement
+      modal.value.focus()
 
       // Add keydown listener for focus trap
       modal.value.addEventListener('keydown', handleKeyDown)

src/components/WhatsNew.vue

@@ -25,10 +25,9 @@
 </template>
 
 <script setup lang="ts">
-import { ref, onMounted, defineAsyncComponent } from 'vue'
+import { ref, onMounted } from 'vue'
 import InfoBanner from './InfoBanner.vue'
-
-const Modal = defineAsyncComponent(() => import('./Modal.vue'))
+import Modal from './Modal.vue'
 
 interface Feature {
   id: string
@@ -156,6 +155,7 @@ onMounted(() => {
 
   if (newFeatures.value.length > 0) {
     showModal.value = true
+    console.log('New features since last visit:', newFeatures.value)
   }
 
   updateLastVisitDate()