fix(select): support using shift + arrow key to toggle items in a mul…

…ti-select (#9037) Based on the accessibility guidelines for a multi-selection listbox (https://www.w3.org/TR/wai-aria-practices-1.1/#Listbox), potentially we can support toggling the previous/next item if the user presses shift + up/down arrow.
angular · Jan 8, 2018 · 76055a4 · 76055a4
1 parent 3e99bcc
commit 76055a4
Show file tree

Hide file tree

Showing 2 changed files with 70 additions and 0 deletions.
diff --git a/src/lib/select/select.spec.ts b/src/lib/select/select.spec.ts
@@ -403,6 +403,68 @@ describe('MatSelect', () => {
               .toBe(false, 'Expected panel to stay closed.');
         }));
 
+        it('should toggle the next option when pressing shift + DOWN_ARROW on a multi-select',
+          fakeAsync(() => {
+            fixture.destroy();
+
+            const multiFixture = TestBed.createComponent(MultiSelect);
+            const event = createKeyboardEvent('keydown', DOWN_ARROW);
+            Object.defineProperty(event, 'shiftKey', {get: () => true});
+
+            multiFixture.detectChanges();
+            select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
+
+            multiFixture.componentInstance.select.open();
+            multiFixture.detectChanges();
+            flush();
+
+            expect(multiFixture.componentInstance.select.value).toBeFalsy();
+
+            dispatchEvent(select, event);
+            multiFixture.detectChanges();
+
+            expect(multiFixture.componentInstance.select.value).toEqual(['pizza-1']);
+
+            dispatchEvent(select, event);
+            multiFixture.detectChanges();
+
+            expect(multiFixture.componentInstance.select.value).toEqual(['pizza-1', 'tacos-2']);
+          }));
+
+        it('should toggle the previous option when pressing shift + UP_ARROW on a multi-select',
+          fakeAsync(() => {
+            fixture.destroy();
+
+            const multiFixture = TestBed.createComponent(MultiSelect);
+            const event = createKeyboardEvent('keydown', UP_ARROW);
+            Object.defineProperty(event, 'shiftKey', {get: () => true});
+
+            multiFixture.detectChanges();
+            select = multiFixture.debugElement.query(By.css('mat-select')).nativeElement;
+
+            multiFixture.componentInstance.select.open();
+            multiFixture.detectChanges();
+            flush();
+
+            // Move focus down first.
+            for (let i = 0; i < 5; i++) {
+              dispatchKeyboardEvent(select, 'keydown', DOWN_ARROW);
+              multiFixture.detectChanges();
+            }
+
+            expect(multiFixture.componentInstance.select.value).toBeFalsy();
+
+            dispatchEvent(select, event);
+            multiFixture.detectChanges();
+
+            expect(multiFixture.componentInstance.select.value).toEqual(['chips-4']);
+
+            dispatchEvent(select, event);
+            multiFixture.detectChanges();
+
+            expect(multiFixture.componentInstance.select.value).toEqual(['sandwich-3', 'chips-4']);
+          }));
+
         it('should prevent the default action when pressing space', fakeAsync(() => {
           const event = dispatchKeyboardEvent(select, 'keydown', SPACE);
           expect(event.defaultPrevented).toBe(true);

diff --git a/src/lib/select/select.ts b/src/lib/select/select.ts
@@ -662,7 +662,15 @@ export class MatSelect extends _MatSelectMixinBase implements AfterContentInit,
       event.preventDefault();
       this._keyManager.activeItem._selectViaInteraction();
     } else {
+      const isArrowKey = keyCode === DOWN_ARROW || keyCode === UP_ARROW;
+      const previouslyFocusedIndex = this._keyManager.activeItemIndex;
+
       this._keyManager.onKeydown(event);
+
+      if (this._multiple && isArrowKey && event.shiftKey && this._keyManager.activeItem &&
+          this._keyManager.activeItemIndex !== previouslyFocusedIndex) {
+        this._keyManager.activeItem._selectViaInteraction();
+      }
     }
   }