fixup! fix(cdk-experimental/listbox): change shift+nav behavior

Author: wagnermaciel

src/cdk-experimental/ui-patterns/listbox/listbox.spec.ts

@@ -24,6 +24,7 @@ const home = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 36, 'Home',
 const end = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 35, 'End', mods);
 const space = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 32, ' ', mods);
 const enter = (mods?: ModifierKeys) => createKeyboardEvent('keydown', 13, 'Enter', mods);
+const shift = () => createKeyboardEvent('keydown', 16, 'Shift', {shift: true});
 
 describe('Listbox Pattern', () => {
   function getListbox(inputs: Partial<TestInputs> & Pick<TestInputs, 'items'>) {
@@ -279,18 +280,25 @@ describe('Listbox Pattern', () => {
         expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']);
       });
 
-      it('should toggle the selected state of the next option on Shift + ArrowDown', () => {
+      it('should select a range of options on Shift + ArrowDown/ArrowUp', () => {
+        listbox.onKeydown(shift());
         listbox.onKeydown(down({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']);
         listbox.onKeydown(down({shift: true}));
-        expect(listbox.inputs.value()).toEqual(['Apricot', 'Banana']);
+        expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot', 'Banana']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple']);
       });
 
-      it('should toggle the selected state of the next option on Shift + ArrowUp', () => {
-        listbox.onKeydown(down());
-        listbox.onKeydown(down());
+      it('should not allow wrapping while Shift is held down', () => {
+        listbox.onKeydown(shift());
+        listbox.onKeydown(up({shift: true}));
         listbox.onKeydown(up({shift: true}));
         listbox.onKeydown(up({shift: true}));
-        expect(listbox.inputs.value()).toEqual(['Apricot', 'Apple']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple']);
       });
 
       it('should select contiguous items from the most recently selected item to the focused item on Shift + Space (or Enter)', () => {
@@ -385,18 +393,25 @@ describe('Listbox Pattern', () => {
         expect(listbox.inputs.value()).toEqual(['Apple', 'Banana']);
       });
 
-      it('should toggle the selected state of the next option on Shift + ArrowDown', () => {
+      it('should select a range of options on Shift + ArrowDown/ArrowUp', () => {
+        listbox.onKeydown(shift());
         listbox.onKeydown(down({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']);
         listbox.onKeydown(down({shift: true}));
         expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot', 'Banana']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple', 'Apricot']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple']);
       });
 
-      it('should toggle the selected state of the next option on Shift + ArrowUp', () => {
-        listbox.onKeydown(down());
-        listbox.onKeydown(down());
+      it('should not allow wrapping while Shift is held down', () => {
+        listbox.onKeydown(shift());
+        listbox.onKeydown(up({shift: true}));
         listbox.onKeydown(up({shift: true}));
         listbox.onKeydown(up({shift: true}));
-        expect(listbox.inputs.value()).toEqual(['Banana', 'Apricot', 'Apple']);
+        listbox.onKeydown(up({shift: true}));
+        expect(listbox.inputs.value()).toEqual(['Apple']);
       });
 
       it('should select contiguous items from the most recently selected item to the focused item on Shift + Space (or Enter)', () => {