Accessibility - For checkboxes

Accessibility - For checkboxes

Posted by: srilata.iyengar on 10 January 2024, 3:25 am EST

• 

  srilata.iyengar

  • Post Options:
  • Link
    Copy

  Posted 10 January 2024, 3:25 am EST - Updated 10 January 2024, 3:30 am EST

  I am using Flexgrid and i have a checkbox in my flexgrid

  

  910×374 30.2 KB

  By default, when the page loads the first row (not including header) and the first cell under Firm name is selected.

  When i select the checkbox number on row number 3,

  

  1045×270 33.1 KB

  - the row 1 content is still selected. Because of which the aria is not getting input and the checkbox says blank.

  When i select the empty area around the checkbox on row number 4 then the correct row is getting selected and the screen reader is getting the right feedback from aria. I want the checkbox also to work this way, how can i go about that?

  

  1052×269 37.6 KB

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 10 January 2024, 7:34 pm EST

  Hi Srilata,

  To select the checkbox when the blank space in the rowHeader is clicked, you need to handle the mousedown event on the flexGrid’s hostElement and call the click() method on the checkbox element present in that rowHeader.

  Also, when the checkbox is clicked, then the cell selection is not changed. To change the selection to the selected row, please handle the click event on the hostElement of the flexgrid and use the select() method to select the first cell present in that row.

  Please refer to this sample that demonstrates both the functionalities:

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 10 January 2024, 7:35 pm EST

  Hi,

  Please refer to this sample that demonstrates both the functionalities: https://stackblitz.com/edit/angular-12-check-selector

  Thank you.

  Regards

• 

  srilata.iyengar

  • Post Options:
  • Link
    Copy

  Posted 11 January 2024, 12:02 am EST

  Thank you Anirudh, this worked seamlessly. However i am facing a new issue, i would also want this to work with keyboard options, would you have anything i can use as reference for that?

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 11 January 2024, 11:51 pm EST

  Hi Srilata,

  Thank you for notifying that the solution worked when row is checked using mouse.

  As per my understanding, now the requirement is to get a shortcut, that can be used to select the row. For this, you need to handle the keydown event on the hostElement of the FlexGrid. In the handler of the event please toggle the isSelected property of the row whenever the key combination is “Shift+Space” or any other key combination as per your requirement.

  Please refer to this sample for reference: https://stackblitz.com/edit/angular-12-check-selector-8wntbw

  Let me know if you face any issues while implementing this approach. Thank you.

  Regards

• 

  srilata.iyengar

  • Post Options:
  • Link
    Copy

  Posted 15 February 2024, 10:06 pm EST - Updated 15 February 2024, 10:11 pm EST

  Hi Anirudh, I had a few follow up questions on the solution provided -

  1. I have used headervisibility, but i am not able to select the row headers because the focus is on the first cell and it keeps getting selected and deselected.

  2. We are using the checkbox as row headers in many of our pages and even if i can manage to select it with the space, it is not reading out the associated label. Even in the example provided, the checkboxes are not intuitive to users who depend on accessibility.
     
     

     

     1404×598 76.6 KB

  3. This issue is ONLY happening when the checkboxes are row headers and not in cases where they are in middle of the flex-grid

  4. The labels need to be read when checkbox is being selected and the state of checkbox is to be known.

  5. We are using something similar to https://stackblitz.com/edit/angular-qyrxun?file=app%2Fapp.component.ts,app%2Fapp.component.html with our implementation.

  Can we please set up a call for the same on Monday Morning /Today evening as a LARGE number of pages are being impacted because it is not passing the accessibility test.

• 

  anirudh.verma

  

  • Post Options:
  • Link
    Copy

  Posted 19 February 2024, 6:27 pm EST

  Hi Srilata,

  We are extremely sorry for the late reply.

  Could you please elaborate on “I am not able to select the row headers because the focus is on the first cell, and it keeps getting selected and deselected”? Are you referring to the situation when the headersFocusability property is set? The selection keeps jumping back to the data cell instead of being focused on the rowHeader after the row is selected. If you are facing issues while using the functionality of headersFocusability, then let me inform you that there has been a significant change in the functionality of this property in the upcoming release. You may check the same by using the current nightly (5.20241.1-nightly.d20240215.t020127). Please do not use nightly versions for production. If you still face the same issue in the latest nightly, then please let us know.

  As per my understanding, you want the screen reader to announce the state (“checked”/“not checked”) when the state of the checkbox is changed after pressing the “Space” key. If this is the requirement, then allow me to inform you that the checkbox state is not announced by the screen reader because the focus is not currently set on the rowHeader cell. So, it is reading the state of the cell and not of the checkbox.

  If you set the headersFocusability property to “All” and try changing the selection to the rowHeader cell by using the “Arrow keys”, and then select the cells, then you may notice that the screen reader announces the state of the checkbox. However, I am currently looking into the feasibility of the behavior that the screen reader can detect and announce the change in the state of the checkbox while the focus is on the rowHeader cell.

  Regarding the sample (https://stackblitz.com/edit/angular-qyrxun) that you have shared in the previous query, please let me know if you are using the “Selector” class for all your grids and want this functionality, or you are making custom checkboxes in the rowHeaders and want this functionality with it? It is necessary so that I can investigate this issue further as per your use case.

  Also, it would take some time to resolve this issue as it requires a thorough investigation regarding the standard behavior for accessibility and feasibility of that implementation with the current requirement.

  Thank you for your patience and understanding.

  Regards