feat(VBreadcrumbs): improve accessibility and add menu when collapsed

[jdflaugergues]

Description

This PR improves the VBreadcrumbs component with several accessibility-focused and Material Design–aligned enhancements.

• semantic elements (nav, ol, li) for improved screen-reader support and better compliance with accessibility standards
• automatically wrap to a new line when the breadcrumb trail becomes too long, preventing overflow
• new total-visible prop limits how many items can be displayed before collapsing items into an ellipsis
• optional collapse-in-menu for displaying the hidden items inside an accessible dropdown menu
• menu-props, list-props, and #list-item slot - for deep customization

Markup:

<template>
  <v-app>
    <v-container>
      <h5>show only 2 links</h5>
      <v-breadcrumbs :items="items" :total-visible="2" />
      <h5>responsive</h5>
      <v-breadcrumbs :items="items" :total-visible="$vuetify.display.mdAndDown ? 2 : 7" collapse-from="1" />
      <h5>menu (default)</h5>
      <v-breadcrumbs :items="items" :total-visible="3" collapse-in-menu />
      <h5>menu (customized)</h5>
      <v-breadcrumbs
        :items="items"
        :list-props="{ class: 'pa-1', nav: true, rounded: 'lg', bgColor: 'primary' }"
        :menu-props="{ location: 'left top' }"
        :total-visible="5"
        collapse-in-menu
      >
        <template #list-item="{ item }">
          <v-list-item
            v-bind="item"
            :prepend-icon="item.disabled ? 'mdi-lock' : 'mdi-link'"
            class="mt-0"
            prepend-gap="12"
          />
        </template>
      </v-breadcrumbs>
    </v-container>
  </v-app>
</template>

<script>
  export default {
    name: 'Playground',
    data: () => ({
      items: Array.from({ length: 9 }, (k, v) => ({
        title: `Link ${v + 1}`,
        href: `breadcrumbs_link_${v + 1}`,
        disabled: v === 2,
        prependIcon: v === 2 ? 'mdi-lock' : 'mdi-link',
      })),
    }),
  }
</script>

[J-Sek]

It is coming up nicely.

• would it make sense to collapse only items that exceed the limit? Similar to VPagination. User could have more control and even set the value to 1 and have only the last item visible. I know you attempt to follow MUI, but I can almost foresee we get a feature request for this kind of enhancement in a few months.
• API should probably expose a simple method to collapse expanded items (both inline and menu) programatically
• it would be great to include some ARIA attributes and support screenreaders from day one, if possible

[jdflaugergues]

It is coming up nicely.

• would it make sense to collapse only items that exceed the limit? Similar to VPagination. User could have more control and even set the value to 1 and have only the last item visible. I know you attempt to follow MUI, but I can almost foresee we get a feature request for this kind of enhancement in a few months.
• API should probably expose a simple method to collapse expanded items (both inline and menu) programatically
• it would be great to include some ARIA attributes and support screenreaders from day one, if possible

@J-Sek

• What would be the rule for choosing which breadcrumb items to collapse?
  • The first items? (e.g., for totalVisible = 3 and Link1/Link2/Link3/Link4/Link5/Link6 → …/Link4/Link5/Link6)
  • The first items starting from the second one? (e.g., for totalVisible = 3 and Link1/Link2/Link3/Link4/Link5/Link6 → Link1/…/Link5/Link6)
  • The last items? (e.g., for totalVisible = 3 and Link1/Link2/Link3/Link4/Link5/Link6 → Link1/Link2/…/Link6)
• Which ARIA attributes would you like to add to the component? We already have aria-label="breadcrumbs" on the <nav>, aria-current="page" on the active item, and aria-hidden on the dividers. Maybe add an aria-label on each breadcrumb item?

[J-Sek]

What would be the rule for choosing which breadcrumb items to collapse?

Good question. We could have :collapse-from="{index}" to support all of the scenarios.

Which ARIA attributes would you like to add to the component?

Just something to support the new "ellipsis". I did not check it.. if it already says something reasonable upon keyboard focus, then we should be fine, otherwise I hope it only needs one aria-label.