Add key shortcuts and role attributes to the filtering menu's links. (#…

…10548) * Make changes to the Filter's 'SelectAll' and 'Clear' links. * Add test cases.
handsontable · Oct 24, 2023 · 1610f41 · 1610f41
1 parent fad392a
commit 1610f41
Show file tree

Hide file tree

Showing 4 changed files with 87 additions and 0 deletions.
diff --git a/handsontable/src/plugins/filters/__tests__/a11y/attributes.spec.js b/handsontable/src/plugins/filters/__tests__/a11y/attributes.spec.js
@@ -0,0 +1,27 @@
+describe('a11y DOM attributes (ARIA tags)', () => {
+  const id = 'testContainer';
+
+  beforeEach(function() {
+    this.$container = $(`<div id="${id}"></div>`).appendTo('body');
+  });
+
+  afterEach(function() {
+    if (this.$container) {
+      destroy();
+      this.$container.remove();
+    }
+  });
+
+  it('should assign the `role=button` to the `Select All` and `Clear` links', async() => {
+    handsontable({
+      colHeaders: true,
+      filters: true,
+      dropdownMenu: true,
+    });
+
+    dropdownMenu(0);
+
+    expect(document.querySelector('.htUISelectAll').getAttribute('role')).toEqual('button');
+    expect(document.querySelector('.htUIClearAll').getAttribute('role')).toEqual('button');
+  });
+});
diff --git a/handsontable/src/plugins/filters/__tests__/keyboardShortcuts.spec.js b/handsontable/src/plugins/filters/__tests__/keyboardShortcuts.spec.js
@@ -131,4 +131,49 @@ describe('Filters keyboard shortcut', () => {
       expect(getSelectedRange()).toEqualCellRange(['highlight: -1,-1 from: -1,-1 to: -1,-1']);
     });
   });
+
+  describe('LinkUI buttons', () => {
+    it('should react to both `Enter` and `Space`', async() => {
+      const countCheckedCheckboxes = () => {
+        return Array.from(
+          document.querySelectorAll('.htUIMultipleSelectHot input[type=checkbox]')
+        ).filter(el => el.checked).length;
+      };
+
+      handsontable({
+        data: getDataForFilters().splice(0, 10),
+        rowHeaders: true,
+        colHeaders: true,
+        filters: true,
+        dropdownMenu: true,
+        navigableHeaders: true,
+      });
+
+      dropdownMenu(1);
+
+      document.querySelector('.htUIClearAll a').focus();
+
+      keyDownUp('enter');
+      await sleep(15);
+      expect(countCheckedCheckboxes()).toEqual(0);
+
+      document.querySelector('.htUISelectAll a').focus();
+
+      keyDownUp('enter');
+      await sleep(15);
+      expect(countCheckedCheckboxes()).toEqual(10);
+
+      document.querySelector('.htUIClearAll a').focus();
+
+      keyDownUp('space');
+      await sleep(15);
+      expect(countCheckedCheckboxes()).toEqual(0);
+
+      document.querySelector('.htUISelectAll a').focus();
+
+      keyDownUp('space');
+      await sleep(15);
+      expect(countCheckedCheckboxes()).toEqual(10);
+    });
+  });
 });
diff --git a/handsontable/src/plugins/filters/menu/focusController.js b/handsontable/src/plugins/filters/menu/focusController.js
@@ -1,6 +1,7 @@
 import { createFocusNavigator } from './focusNavigator';
 import { SelectUI } from '../ui/select';
 import { BaseUI } from '../ui/_base';
+import { LinkUI } from '../ui/link';
 
 const SHORTCUTS_MENU_CONTEXT = 'filters';
 
@@ -100,6 +101,12 @@ export function createMenuFocusController(mainMenu, menuItems) {
           element.openOptions();
           event.preventDefault();
         }
+
+        if (element instanceof LinkUI) {
+          element.activate();
+          event.preventDefault();
+        }
+
         if (!(element instanceof BaseUI)) {
           event.preventDefault();
         }

diff --git a/handsontable/src/plugins/filters/ui/link.js b/handsontable/src/plugins/filters/ui/link.js
@@ -11,6 +11,7 @@ export class LinkUI extends BaseUI {
       href: '#',
       tagName: 'a',
       tabIndex: -1,
+      role: 'button',
     });
   }
 
@@ -53,4 +54,11 @@ export class LinkUI extends BaseUI {
       this.#link.focus();
     }
   }
+
+  /**
+   * Activate the element.
+   */
+  activate() {
+    this.#link.click();
+  }
 }