Merge branch 'main' into fix/analytics-inputs-display

Author: danielroe

app/assets/main.css

@@ -154,7 +154,7 @@ button {
 
 /* Skip link */
 .skip-link {
-  position: absolute;
+  position: fixed;
   top: -100%;
   left: 0;
   padding: 0.5rem 1rem;
@@ -165,6 +165,15 @@ button {
   transition: top 0.2s ease;
 }
 
+html[dir='rtl'] .skip-link {
+  left: unset;
+  right: 0;
+}
+
+.skip-link:hover {
+  color: var(--bg);
+  text-decoration: underline;
+}
 .skip-link:focus {
   top: 0;
 }

app/components/OrgMembersPanel.vue

@@ -286,11 +286,7 @@ watch(lastExecutionTime, () => {
 </script>
 
 <template>
-  <section
-    v-if="isConnected"
-    aria-labelledby="members-heading"
-    class="bg-bg-subtle border border-border rounded-lg overflow-hidden"
-  >
+  <section v-if="isConnected" class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
     <!-- Header -->
     <div class="flex items-center justify-between p-4 border-b border-border">
       <h2 id="members-heading" class="font-mono text-sm font-medium flex items-center gap-2">

app/components/OrgTeamsPanel.vue

@@ -255,11 +255,7 @@ watch(lastExecutionTime, () => {
 </script>
 
 <template>
-  <section
-    v-if="isConnected"
-    aria-labelledby="teams-heading"
-    class="bg-bg-subtle border border-border rounded-lg overflow-hidden"
-  >
+  <section v-if="isConnected" class="bg-bg-subtle border border-border rounded-lg overflow-hidden">
     <!-- Header -->
     <div class="flex items-center justify-start p-4 border-b border-border">
       <h2 id="teams-heading" class="font-mono text-sm font-medium flex items-center gap-2">

app/components/PackageAccessControls.vue

@@ -150,7 +150,7 @@ watch(
 </script>
 
 <template>
-  <section v-if="isConnected && orgName" aria-labelledby="access-heading">
+  <section v-if="isConnected && orgName">
     <div class="flex items-center justify-between mb-3">
       <h2 id="access-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
         {{ $t('package.access.title') }}

app/components/PackageDependencies.vue

@@ -70,12 +70,7 @@ const sortedOptionalDependencies = computed(() => {
 <template>
   <div class="space-y-8">
     <!-- Dependencies -->
-    <section
-      id="dependencies"
-      v-if="sortedDependencies.length > 0"
-      aria-labelledby="dependencies-heading"
-      class="scroll-mt-20"
-    >
+    <section id="dependencies" v-if="sortedDependencies.length > 0" class="scroll-mt-20">
       <h2
         id="dependencies-heading"
         class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
@@ -167,12 +162,7 @@ const sortedOptionalDependencies = computed(() => {
     </section>
 
     <!-- Peer Dependencies -->
-    <section
-      id="peer-dependencies"
-      v-if="sortedPeerDependencies.length > 0"
-      aria-labelledby="peer-dependencies-heading"
-      class="scroll-mt-20"
-    >
+    <section id="peer-dependencies" v-if="sortedPeerDependencies.length > 0" class="scroll-mt-20">
       <h2
         id="peer-dependencies-heading"
         class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
@@ -239,7 +229,6 @@ const sortedOptionalDependencies = computed(() => {
     <section
       id="optional-dependencies"
       v-if="sortedOptionalDependencies.length > 0"
-      aria-labelledby="optional-dependencies-heading"
       class="scroll-mt-20"
     >
       <h2

app/components/PackageDeprecatedTree.vue

@@ -43,11 +43,7 @@ function getDepthStyle(depth: DependencyDepth) {
 </script>
 
 <template>
-  <section
-    v-if="status === 'success' && hasDeprecated"
-    aria-labelledby="deprecated-tree-heading"
-    class="relative"
-  >
+  <section v-if="status === 'success' && hasDeprecated" class="relative">
     <div class="rounded-lg border overflow-hidden" :class="bannerColor">
       <!-- Header -->
       <button

app/components/PackageInstallScripts.vue

@@ -18,7 +18,7 @@ const isExpanded = shallowRef(false)
 </script>
 
 <template>
-  <section aria-labelledby="install-scripts-heading">
+  <section>
     <h2
       id="install-scripts-heading"
       class="text-xs text-fg-subtle uppercase tracking-wider mb-3 flex items-center gap-2"

app/components/PackageMaintainers.vue

@@ -168,12 +168,7 @@ watch(
 </script>
 
 <template>
-  <section
-    id="maintainers"
-    v-if="maintainers?.length"
-    aria-labelledby="maintainers-heading"
-    class="scroll-mt-20"
-  >
+  <section id="maintainers" v-if="maintainers?.length" class="scroll-mt-20">
     <h2 id="maintainers-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
       <a
         href="#maintainers"

app/components/PackagePlaygrounds.vue

@@ -108,7 +108,7 @@ function focusMenuItem(index: number) {
 </script>
 
 <template>
-  <section v-if="links.length > 0" aria-labelledby="playgrounds-heading">
+  <section v-if="links.length > 0">
     <h2 id="playgrounds-heading" class="text-xs text-fg-subtle uppercase tracking-wider mb-3">
       {{ $t('package.playgrounds.title') }}
     </h2>

app/components/PackageSkeleton.vue

@@ -101,7 +101,7 @@
     </header>
 
     <!-- Install section: mb-8 -->
-    <section aria-labelledby="install-heading-skeleton" class="mb-8">
+    <section class="mb-8">
       <h2
         id="install-heading-skeleton"
         class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
@@ -121,7 +121,7 @@
     <div class="grid lg:grid-cols-3 gap-8">
       <!-- Main content (README): lg:col-span-2 order-2 lg:order-1 -->
       <div class="lg:col-span-2 order-2 lg:order-1">
-        <section aria-labelledby="readme-heading-skeleton">
+        <section>
           <h2
             id="readme-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-4"
@@ -152,7 +152,7 @@
       <!-- Sidebar: order-1 lg:order-2 space-y-8 -->
       <aside class="order-1 lg:order-2 space-y-8">
         <!-- Maintainers -->
-        <section aria-labelledby="maintainers-heading-skeleton">
+        <section>
           <h2
             id="maintainers-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
@@ -170,7 +170,7 @@
         </section>
 
         <!-- Keywords -->
-        <section aria-labelledby="keywords-heading-skeleton">
+        <section>
           <h2
             id="keywords-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
@@ -189,7 +189,7 @@
         </section>
 
         <!-- Versions -->
-        <section aria-labelledby="versions-heading-skeleton">
+        <section>
           <h2
             id="versions-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"
@@ -222,7 +222,7 @@
         </section>
 
         <!-- Dependencies -->
-        <section aria-labelledby="dependencies-heading-skeleton">
+        <section>
           <h2
             id="dependencies-heading-skeleton"
             class="text-xs text-fg-subtle uppercase tracking-wider mb-3"