fix: keyboard navigation when using selectable group activator

vuetifyjs · May 22, 2024 · ff1e855 · ff1e855
1 parent 69f9fbc
commit ff1e855
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx b/packages/vuetify/src/components/VList/__tests__/VListGroup.spec.cy.tsx
@@ -17,7 +17,7 @@ describe('VListGroup', () => {
 
         <VList>
           <VListGroup>
-            {{ activator: props => <VListItem isOpen={ props.isOpen } value={ props.nestedId } title="Group" /> }}
+            {{ activator: props => <VListItem { ...props } title="Group" /> }}
           </VListGroup>
         </VList>
       </CenteredGrid>

diff --git a/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx b/packages/vuetify/src/labs/VTreeview/VTreeviewChildren.tsx
@@ -77,11 +77,15 @@ export const VTreeviewChildren = genericComponent<new <T extends InternalListIte
               <div>
                 <VCheckboxBtn
                   key={ item.value }
-                  tabindex="-1"
                   modelValue={ slotProps.isSelected }
                   loading={ loading }
                   indeterminate={ slotProps.isIndeterminate }
                   onClick={ withModifiers(() => selectItem(slotProps.select, slotProps.isSelected), ['stop']) }
+                  onKeydown={ (e: KeyboardEvent) => {
+                    if (!['Enter', 'Space'].includes(e.key)) return
+                    e.stopPropagation()
+                    selectItem(slotProps.select, slotProps.isSelected)
+                  }}
                 />
               </div>
             )}