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

Author: Jonathan de Flaugergues

packages/api-generator/src/locale/en/VBreadcrumbs.json

@@ -2,11 +2,12 @@
   "props": {
     "collapseInMenu": "When true, overflowing breadcrumb items are collapsed into a contextual menu rather than a static ellipsis.",
     "divider": "Specifies the dividing character between items.",
+    "ellipsis": "Text displayed when breadcrumb items collapsed.",
     "icons": "Specifies that the dividers between items are [v-icon](/components/icons)s.",
     "justifyCenter": "Align the breadcrumbs center.",
     "justifyEnd": "Align the breadcrumbs at the end.",
     "large": "Increase the font-size of the breadcrumb item text to 16px (14px default).",
-    "maxItems": "Determines how many breadcrumb items can be shown before middle items are collapsed."
+    "totalVisible": "Determines how many breadcrumb items can be shown before middle items are collapsed."
   },
   "slots": {
     "divider": "The slot used for dividers.",

packages/docs/src/examples/v-breadcrumbs/slot-collapse-in-menu.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-breadcrumbs :items="items" :max-items="3" collapse-in-menu>
+  <v-breadcrumbs :items="items" :total-visible="3" collapse-in-menu>
   </v-breadcrumbs>
 </template>
 

packages/docs/src/examples/v-breadcrumbs/slot-max-items.vue renamed to packages/docs/src/examples/v-breadcrumbs/slot-total-visible.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-breadcrumbs :items="items" :max-items="3">
+  <v-breadcrumbs :items="items" :total-visible="3">
   </v-breadcrumbs>
 </template>
 

packages/docs/src/pages/en/components/breadcrumbs.md

@@ -81,9 +81,9 @@ You can use the `title` slot to customize each breadcrumb title.
 
 #### Collapsed breadcrumbs
 
-You can use the `maxItems` prop to redefine the maximum number of breadcrumb items displayed before the component collapses.
+You can use the `totalVisible` prop to redefine the maximum number of breadcrumb items displayed before the component collapses.
 
-<ExamplesExample file="v-breadcrumbs/slot-max-items" />
+<ExamplesExample file="v-breadcrumbs/slot-total-visible" />
 
 #### Collapsed with menu
 

packages/vuetify/playgrounds/Playground.breadcrumbs.vue

@@ -1,8 +1,8 @@
 <template>
   <v-app>
     <v-container>
-      <v-breadcrumbs :items="items" :max-items="3" />
-      <v-breadcrumbs :items="items" :max-items="3" collapse-in-menu />
+      <v-breadcrumbs :items="items" :total-visible="3" />
+      <v-breadcrumbs :items="items" :total-visible="3" collapse-in-menu />
     </v-container>
   </v-app>
 </template>

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.sass

@@ -29,6 +29,9 @@
     text-decoration: none
     vertical-align: $breadcrumbs-vertical-align
 
+    &--ellipsis
+      cursor: pointer
+
     &--disabled
       opacity: $breadcrumbs-item-disabled-opacity
       pointer-events: none

packages/vuetify/src/components/VBreadcrumbs/VBreadcrumbs.tsx

@@ -4,7 +4,6 @@ import './VBreadcrumbs.sass'
 // Components
 import { VBreadcrumbsDivider } from './VBreadcrumbsDivider'
 import { VBreadcrumbsItem } from './VBreadcrumbsItem'
-import { VBtn } from '../VBtn'
 import { VIcon } from '../VIcon'
 import { VList, VListItem, VListItemTitle } from '../VList'
 import { VMenu } from '../VMenu'
@@ -20,8 +19,8 @@ import { makeRoundedProps, useRounded } from '@/composables/rounded'
 import { makeTagProps } from '@/composables/tag'
 
 // Utilities
-import { computed, ref, toRef } from 'vue'
-import { genericComponent, isObject, propsFactory, useRender } from '@/util'
+import { computed, ref, toRef, watch } from 'vue'
+import { genericComponent, isObject, noop, propsFactory, useRender } from '@/util'
 
 // Types
 import type { PropType } from 'vue'
@@ -46,16 +45,17 @@ export const makeVBreadcrumbsProps = propsFactory({
     type: String,
     default: '/',
   },
+  ellipsis: {
+    type: String,
+    default: '...',
+  },
   icon: IconValue,
   items: {
     type: Array as PropType<readonly BreadcrumbItem[]>,
     default: () => ([]),
   },
   itemProps: Boolean,
-  maxItems: {
-    type: Number,
-    default: 8,
-  },
+  totalVisible: Number,
 
   ...makeComponentProps(),
   ...makeDensityProps(),
@@ -99,33 +99,36 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
     const items = computed(() => props.items.map(item => {
       return typeof item === 'string' ? { item: { title: item }, raw: item } : { item, raw: item }
     }))
-    const showEllipsis = computed(() => items.value.length >= props.maxItems)
+    const showEllipsis = toRef(() => props.totalVisible ? items.value.length > props.totalVisible : false)
     const enableEllipsis = ref(showEllipsis.value)
 
     const onClickEllipsis = () => {
       enableEllipsis.value = false
     }
 
+    watch(showEllipsis, (value: boolean) => {
+      enableEllipsis.value = value
+    })
+
     useRender(() => {
       const hasPrepend = !!(slots.prepend || props.icon)
 
       return (
         <props.tag
           aria-label="breadcrumbs"
+          class={[
+            'v-breadcrumbs',
+            backgroundColorClasses.value,
+            densityClasses.value,
+            roundedClasses.value,
+            props.class,
+          ]}
+          style={[
+            backgroundColorStyles.value,
+            props.style,
+          ]}
         >
-          <ol
-            class={[
-              'v-breadcrumbs',
-              backgroundColorClasses.value,
-              densityClasses.value,
-              roundedClasses.value,
-              props.class,
-            ]}
-            style={[
-              backgroundColorStyles.value,
-              props.style,
-            ]}
-          >
+          <ol>
           { hasPrepend && (
             <li key="prepend" class="v-breadcrumbs__prepend">
               { !slots.prepend ? (
@@ -193,38 +196,26 @@ export const VBreadcrumbs = genericComponent<new <T extends BreadcrumbItem>(
               <VBreadcrumbsDivider />
 
               <VBreadcrumbsItem
-                disabled={ false }
-                onClick={ onClickEllipsis }
+                tabindex="0"
+                onClick={ props.collapseInMenu ? noop : onClickEllipsis }
+                class="v-breadcrumbs-item--ellipsis"
               >
+                { props.ellipsis }
                 { props.collapseInMenu ? (
-                <VMenu>
-                  {{
-                    activator: ({ props: activatorProps }) => (
-                      <VBtn
-                        icon="mdi-dots-horizontal"
-                        variant="text"
-                        size="x-small"
-                        { ...activatorProps }
-                      />
-                    ),
-                    default: () => (
-                      <VList>
-                        { items.value.slice(1, items.value.length - 1).map(({ item }, index) => (
-                          <VListItem key={ index } value={ index } component="a" href={ 'href' in item ? item.href : undefined }>
-                            <VListItemTitle>{ item.title }</VListItemTitle>
-                          </VListItem>
-                        ))}
-                      </VList>
-                    ),
-                  }}
-                </VMenu>
-                ) : (
-                  <VBtn
-                    icon="mdi-dots-horizontal"
-                    variant="text"
-                    size="x-small"
-                  />
-                )}
+                  <VMenu activator="parent">
+                    {{
+                      default: () => (
+                        <VList>
+                          { items.value.slice(1, items.value.length - 1).map(({ item }, index) => (
+                            <VListItem key={ index } value={ index } component="a" href={ 'href' in item ? item.href : undefined }>
+                              <VListItemTitle>{ item.title }</VListItemTitle>
+                            </VListItem>
+                          ))}
+                        </VList>
+                      ),
+                    }}
+                  </VMenu>
+                ) : null }
               </VBreadcrumbsItem>
 
               <VBreadcrumbsDivider />

packages/vuetify/src/components/VBreadcrumbs/__tests__/VBreadcrumbs.spec.browser.tsx

@@ -111,30 +111,32 @@ describe('VBreadcrumbs', () => {
     expect(screen.getByText('-')).toBeVisible()
   })
 
-  it('should collapse into ellipsis when items exceed maxItems', async () => {
+  it('should collapse into ellipsis when items exceed totalVisible', async () => {
     render(() => (
       <VBreadcrumbs
         items={['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']}
-        maxItems={ 5 }
+        totalVisible={ 5 }
       />
     ))
 
-    const ellipsisBtn = screen.getByCSS('button .mdi-dots-horizontal')
-    expect(ellipsisBtn).toBeVisible()
+    const ellipsis = screen.getByText('...')
+    expect(ellipsis).toBeVisible()
+    expect(ellipsis).toHaveClass('v-breadcrumbs-item--ellipsis')
   })
 
-  it('should expand all items when ellipsis is clicked', async () => {
+  it('should expand all items when ellipsis is clicked and collapseInMenu = false', async () => {
     render(() => (
       <VBreadcrumbs
         items={['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h']}
-        maxItems={ 5 }
+        totalVisible={ 5 }
+        collapseInMenu={ false }
       />
     ))
 
-    const ellipsisBtn = screen.getByCSS('button .mdi-dots-horizontal')
-    expect(ellipsisBtn).toBeVisible()
+    const ellipsis = screen.getByText('...')
+    expect(ellipsis).toBeVisible()
 
-    await ellipsisBtn.click()
+    await ellipsis.click()
 
     const items = screen.getAllByCSS('.v-breadcrumbs-item')
     expect(items).toHaveLength(8)
@@ -149,16 +151,17 @@ describe('VBreadcrumbs', () => {
           { title: 'c', href: '/c' },
           { title: 'd' },
         ]}
-        maxItems={ 3 }
+        totalVisible={ 3 }
         collapseInMenu
       />
     ))
 
-    const activator = screen.getByCSS('button .mdi-dots-horizontal')
-    expect(activator).toBeVisible()
+    const ellipsis = screen.getByText('...')
+    expect(ellipsis).toBeVisible()
 
-    await activator.click()
+    await ellipsis.click()
 
+    // Le menu doit maintenant être rendu
     const listItems = screen.getAllByText(/b|c/)
     expect(listItems).toHaveLength(2)
   })
@@ -167,13 +170,13 @@ describe('VBreadcrumbs', () => {
     render(() => (
       <VBreadcrumbs
         items={['a', 'b', 'c', 'd']}
-        maxItems={ 3 }
+        totalVisible={ 3 }
         collapseInMenu={ false }
       />
     ))
 
-    const activator = screen.getByCSS('button .mdi-dots-horizontal')
-    expect(activator).toBeVisible()
+    const ellipsis = screen.getByText('...')
+    expect(ellipsis).toBeVisible()
 
     const menu = screen.queryByCSS('.v-menu')
     expect(menu).toBeNull()