Skip to content

<UBlogPost> is not tabbable/accessible #5635

@danielroe

Description

@danielroe

Environment

Is this bug related to Nuxt or Vue?

Nuxt

Package

v4.x

Version

4.2.1

Reproduction

https://nuxt.com/blog

<UBlogPosts class="mb-12 md:grid-cols-2 lg:grid-cols-3">
  <UBlogPost
    v-for="(article, index) in articles"
    :key="article.path"
    :to="article.path"
    :title="article.title"
    :description="article.description"
    :image="{
      src: article.image,
      width: (index === 0 ? 672 : 437),
      height: (index === 0 ? 378 : 246),
      alt: `${article.title} image`
    }"
    :date="formatDateByLocale('en', article.date)"
    :authors="article.authors.map(author => ({ ...author, avatar: { ...author.avatar, alt: `${author.name} avatar` } }))"
    :badge="{ label: article.category, color: 'primary', variant: 'subtle' }"
    :variant="index === 0 ? 'outline' : 'subtle'"
    :orientation="index === 0 ? 'horizontal' : 'vertical'"
    :class="[index === 0 && 'col-span-full']"
  />
</UBlogPosts>

Description

Each blog card has an un-tabbable link which has no height. It is impossible to navigate to these by keyboard.

Additional context

No response

Logs

Metadata

Metadata

Assignees

Labels

bugSomething isn't workingp2-mediumNotable issue or useful enhancementv4#4488

Type

No type

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions