fix: do not create landmarks for every <section> (#384)

knowler · autofix-ci[bot] · web-flow · commit f94b7decf504 · 2026-01-30T06:26:31.000Z
Co-authored-by: autofix-ci[bot] &lt;114827586+autofix-ci[bot]@users.noreply.github.com&gt;
diff --git a/app/components/OrgMembersPanel.vue b/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">
diff --git a/app/components/OrgTeamsPanel.vue b/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">
diff --git a/app/components/PackageAccessControls.vue b/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') }}
diff --git a/app/components/PackageDependencies.vue b/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
diff --git a/app/components/PackageDeprecatedTree.vue b/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
diff --git a/app/components/PackageInstallScripts.vue b/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"
diff --git a/app/components/PackageMaintainers.vue b/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"
diff --git a/app/components/PackagePlaygrounds.vue b/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>
diff --git a/app/components/PackageSkeleton.vue b/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"
diff --git a/app/components/PackageVersions.vue b/app/components/PackageVersions.vue
@@ -305,12 +305,7 @@ function getTagVersions(tag: string): VersionDisplay[] {
 </script>
 
 <template>
-  <section
-    id="versions"
-    v-if="allTagRows.length > 0"
-    aria-labelledby="versions-heading"
-    class="overflow-hidden scroll-mt-20"
-  >
+  <section id="versions" v-if="allTagRows.length > 0" class="overflow-hidden scroll-mt-20">
     <h2 id="versions-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-3">
       <a
         href="#versions"
diff --git a/app/pages/[...package].vue b/app/pages/[...package].vue
@@ -937,7 +937,7 @@ function handleClick(event: MouseEvent) {
       </header>
 
       <!-- Binary-only packages: Show only execute command (no install) -->
-      <section v-if="isBinaryOnly" aria-labelledby="run-heading" class="area-install scroll-mt-20">
+      <section v-if="isBinaryOnly" class="area-install scroll-mt-20">
         <div class="flex flex-wrap items-center justify-between mb-3">
           <h2 id="run-heading" class="text-xs text-fg-subtle uppercase tracking-wider">
             {{ $t('package.run.title') }}
@@ -1005,12 +1005,7 @@ function handleClick(event: MouseEvent) {
       </section>
 
       <!-- Regular packages: Install command with optional run command -->
-      <section
-        v-else
-        id="get-started"
-        aria-labelledby="get-started-heading"
-        class="area-install scroll-mt-20"
-      >
+      <section v-else id="get-started" class="area-install scroll-mt-20">
         <div class="flex flex-wrap items-center justify-between mb-3">
           <h2
             id="get-started-heading"
@@ -1222,11 +1217,7 @@ function handleClick(event: MouseEvent) {
       </div>
 
       <!-- README -->
-      <section
-        id="readme"
-        aria-labelledby="readme-heading"
-        class="area-readme min-w-0 scroll-mt-20"
-      >
+      <section id="readme" class="area-readme min-w-0 scroll-mt-20">
         <h2 id="readme-heading" class="group text-xs text-fg-subtle uppercase tracking-wider mb-4">
           <a
             href="#readme"
@@ -1266,12 +1257,7 @@ function handleClick(event: MouseEvent) {
           </ClientOnly>
 
           <!-- Keywords -->
-          <section
-            id="keywords"
-            v-if="displayVersion?.keywords?.length"
-            aria-labelledby="keywords-heading"
-            class="scroll-mt-20"
-          >
+          <section id="keywords" v-if="displayVersion?.keywords?.length" class="scroll-mt-20">
             <h2
               id="keywords-heading"
               class="group text-xs text-fg-subtle uppercase tracking-wider mb-3"
@@ -1310,7 +1296,6 @@ function handleClick(event: MouseEvent) {
             v-if="
               displayVersion?.engines && (displayVersion.engines.node || displayVersion.engines.npm)
             "
-            aria-labelledby="compatibility-heading"
             class="scroll-mt-20"
           >
             <h2
diff --git a/app/pages/~[username]/index.vue b/app/pages/~[username]/index.vue
@@ -223,7 +223,7 @@ defineOgImageComponent('Default', {
     </div>
 
     <!-- Package list -->
-    <section v-else-if="results && packages.length > 0" aria-label="User packages">
+    <section v-else-if="results && packages.length > 0">
       <h2 class="text-xs text-fg-subtle uppercase tracking-wider mb-4">
         {{ $t('user.page.packages_title') }}
       </h2>
diff --git a/test/nuxt/components/PackageVersions.spec.ts b/test/nuxt/components/PackageVersions.spec.ts
@@ -843,22 +843,6 @@ describe('PackageVersions', () => {
   })
 
   describe('accessibility', () => {
-    it('has accessible section with labelledby', async () => {
-      const component = await mountSuspended(PackageVersions, {
-        props: {
-          packageName: 'test-package',
-          versions: {
-            '1.0.0': createVersion('1.0.0'),
-          },
-          distTags: { latest: '1.0.0' },
-          time: { '1.0.0': '2024-01-15T12:00:00.000Z' },
-        },
-      })
-
-      const section = component.find('section')
-      expect(section.attributes('aria-labelledby')).toBe('versions-heading')
-    })
-
     it('expand buttons have aria-expanded attribute', async () => {
       const component = await mountSuspended(PackageVersions, {
         props: {
