chore: remove JSRequired component using useHead instead

Author: userquin

app/assets/main.css

@@ -338,3 +338,44 @@ html:has(dialog:modal) {
   overflow: hidden;
   scrollbar-gutter: stable;
 }
+
+/* No-JS Alert Styles */
+.noscript-alert {
+  position: absolute;
+  top: 58px;
+  left: 0;
+  width: 100%;
+
+  padding: 0.5rem 1rem;
+
+  /* Square and no side borders */
+  border-radius: 0;
+  border-top: 0;
+  border-left: 0;
+  border-right: 0;
+  border-bottom: 1px solid #f87171;
+
+  font-size: 0.875rem;
+  line-height: 1.25rem;
+  text-align: center;
+  z-index: 40;
+
+  /* Default (Dark) */
+  background-color: rgba(127, 29, 29, 0.2); /* red-900/20 */
+  color: #fecaca; /* red-200 */
+}
+
+@media (min-width: 768px) {
+  .noscript-alert {
+    padding: 0.75rem 1rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+  }
+}
+
+/* Light theme override */
+:root[data-theme='light'] .noscript-alert {
+  border-color: #b91c1c; /* red-700 */
+  background-color: #fef2f2; /* red-50 */
+  color: #991b1b; /* red-800 */
+}

app/components/JSRequired.vue

@@ -111,6 +111,18 @@ useSeoMeta({
       ? $t('compare.packages.meta_description', { packages: packages.value.join(', ') })
       : $t('compare.packages.meta_description_empty'),
 })
+
+useHead({
+  noscript: [
+    {
+      key: 'js-required',
+      innerHTML: `<div class="noscript-alert" role="alert">
+        ${$t('js_required')}
+      </div>`,
+      tagPosition: 'bodyOpen',
+    },
+  ],
+})
 </script>
 
 <template>
@@ -136,8 +148,6 @@ useSeoMeta({
         </p>
       </header>
 
-      <JSRequired />
-
       <!-- Package selector -->
       <section class="mb-8" aria-labelledby="packages-heading">
         <h2 id="packages-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">

app/pages/compare.vue

@@ -140,7 +140,6 @@ import {
   HeaderConnectorModal,
   HeaderSearchBox,
   InputBase,
-  JSRequired,
   LicenseDisplay,
   LoadingSpinner,
   PackageProvenanceSection,
@@ -2482,14 +2481,6 @@ describe('component accessibility audits', () => {
       expect(results.violations).toEqual([])
     })
   })
-
-  describe('JSRequired', () => {
-    it('should have no accessibility violations', async () => {
-      const component = await mountSuspended(JSRequired)
-      const results = await runAxe(component)
-      expect(results.violations).toEqual([])
-    })
-  })
 })
 
 function applyTheme(colorMode: string, bgTheme: string | null) {
@@ -2613,10 +2604,6 @@ describe('background theme accessibility', () => {
       name: 'PackageList',
       mount: () => mountSuspended(PackageList, { props: { results: [packageResult] } }),
     },
-    {
-      name: 'JSRequired',
-      mount: () => mountSuspended(JSRequired),
-    },
   ]
 
   /**