feat(accordion): toggle via keyboard (#2085)

akveo · Nov 21, 2019 · f8a1b32 · f8a1b32
1 parent 5945d6a
commit f8a1b32
Show file tree

Hide file tree

Showing 2 changed files with 24 additions and 1 deletion.
diff --git a/e2e/accordion.e2e-spec.ts b/e2e/accordion.e2e-spec.ts
@@ -4,7 +4,7 @@
  * Licensed under the MIT License. See License.txt in the project root for license information.
  */
 
-import { browser, element, by } from 'protractor';
+import { browser, element, by, Key } from 'protractor';
 
 import { hasClass } from './e2e-helper';
 
@@ -42,4 +42,25 @@ describe('accordion', () => {
       hasClass(element(by.css('nb-accordion > nb-accordion-item:nth-child(3)')), 'expanded'),
     ).toBeTruthy('second is expanded');
   });
+
+  describe('a11y', () => {
+
+    it('should be interactable through keyboard', () => {
+      expect(
+        hasClass(
+          element(by.css('nb-accordion > nb-accordion-item:nth-child(3)')) , 'expanded',
+        ),
+      ).toBeTruthy();
+
+      return element(by.css('nb-accordion > nb-accordion-item:nth-child(3) > nb-accordion-item-header'))
+        .sendKeys(Key.ENTER)
+        .then(() => {
+            expect(
+              hasClass(
+                element(by.css('nb-accordion > nb-accordion-item:nth-child(3)')), 'collapsed',
+              ),
+            ).toBeTruthy('nb-accordion-item is collapsed');
+        })
+    })
+  })
 });
diff --git a/src/framework/theme/components/accordion/accordion-item-header.component.ts b/src/framework/theme/components/accordion/accordion-item-header.component.ts
@@ -75,6 +75,8 @@ export class NbAccordionItemHeaderComponent implements OnInit, OnDestroy {
   }
 
   @HostListener('click')
+  @HostListener('keydown.space')
+  @HostListener('keydown.enter')
   toggle() {
     this.accordionItem.toggle();
   }