Accessibility - For filters (wijmo.grid.filter)

Accessibility - For filters (wijmo.grid.filter)

Posted by: srilata.iyengar on 4 January 2024, 11:28 pm EST

• 

  srilata.iyengar

  • Post Options:
  • Link
    Copy

  Posted 4 January 2024, 11:28 pm EST - Updated 4 January 2024, 11:33 pm EST

  Hi Team,
  
  We are using Angular 12 and Wijmo Flex Grid with excel like filter (wijmo.grid.filter) for individual columns

  

  1154×250 8.85 KB

  The filters options are not keyboard focusable and thus cannot be accessed via keyboard. I checked https://developer.mescius.com/blogs/flexgrid-accessibility for anything on filter accessibility, i could not find anything there. Form my understanding this is happening because, for both the column header and the filter button the tabindex is set to negative. Is there anyway to resolve this?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 7 January 2024, 6:28 pm EST

  Hello,

  We have added the headersFocusability property to FlexGrid, which allows keyboard navigation into the row and column headers. You can set this property to focus the columnHeader cell and handle the keydown event on Grid to show the filter dropdown(on any specific key as per your requirement). Please refer to the sample link below for reference:

  https://stackblitz.com/edit/angular-feqfni?file=src%2Fapp%2Fapp.component.ts

  By default, FlexGrid provides a keyboard shortcut to open the filter dropdown. Pressing Alt + Shift + Arrow Down key opens the filter editor of the currently selected column.

  Regards

• 

  srilata.iyengar

  • Post Options:
  • Link
    Copy

  Posted 8 January 2024, 9:39 pm EST

  Thanks, Sonu. I was able to replicate this, however I noticed that I can only go to the header using the arrow keys. If I haven’t selected the first cell with my mouse then arrow keys only scroll left and right as they are supposed to to. THis is the demo of the example you have provided:
  
  https://angular-feqfni.stackblitz.io/

  I have a few additional questions:
  
  *1. If I have the first cell as in the example auto-selected, how can I move to the header without using the mouse to first highlight the cell then use arrow keys?
  
  *2. If i want to have the header as the first cell highlighted instead of the current selection, how can i do that?

• 

  sonu.pandey

  

  • Post Options:
  • Link
    Copy

  Posted 9 January 2024, 6:06 pm EST

  Hello,

  Yes, you are correct. You can only use the arrow keys to navigate on header cells. Currently, there is no direct method or property to select header cells. For this, I have escalated an enhancement to the Dev team. Meanwhile, you can use the workaround provided below:

  1. Use the tab key to move the focus to the FlexGrid element on your application page, then use the arrow keys to navigate between the columnHeader cells (refer to 2 points for setting focus on header cell initially).

  2. Inside the initialized event handler, you can set the focus to the ColumnHeader cell element initially by adding the CSS class and setting the cell types on the grid.

  Sample link: https://stackblitz.com/edit/angular-seadk2?file=src%2Fapp%2Fapp.component.ts

  Regards

• 

  srilata.iyengar

  • Post Options:
  • Link
    Copy

  Posted 10 January 2024, 3:03 am EST

  Thank you for the help, Sonu. Much appreciated!