Insert checkbox column in Facility > Users KTable to allow user selection

[AllanOXDi]

Summary

This Add checkbox column User table to enable individual and multiple user selection

https://github.com/user-attachments/assets/e562282a-3425-4649-b82e-6d71bc8d1ce0

References

#13426

Reviewer guidance

Check if

• Selection state persists correctly across user interactions
• Select all functionality works with paginated data
• Individual selections update the select all state appropriately
• Accessibility features work with screen readers and keyboard navigation
• Bulk actions can access selected user data correctly

[github-actions[bot]]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.1a0.dev0_git.134.g3124d6c2.pex
Windows Installer (EXE)	kolibri-0.18.1a0.dev0+git.134.g3124d6c2-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.1a0.dev0+git.134.g3124d6c2-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.1a0.dev0+git.134.g3124d6c2.dmg
Android Package (APK)	kolibri-0.18.1a0.dev0+git.134.g3124d6c2-0.1.4-debug.apk
Raspberry Pi Image	kolibri-pi-image-0.18.1a0.dev0+git.134.g3124d6c2.zip
TAR file	kolibri-0.18.1a0.dev0+git.134.g3124d6c2.tar.gz
WHL file	kolibri-0.18.1a0.dev0+git.134.g3124d6c2-py2.py3-none-any.whl

[marcellamaki]

@radinamatic - Jacob has left some code changes for Allan, so I think we will wait to do the full manual QA feedback until the code review is ✅, but I'm adding you as a reviewer for a11y purposes. I'm going to do an initial pass as I do my code review/manual review now, just to catch anything that I can spot, and then I will ask for you to jump in and do the more thorough one :)

[radinamatic]

@AllanOXDi Good work so far, still a few rough edges to smoothen 🙂

The main thing, as you can see in the screenshot, is that the checkbox does not seem to have a label, and NVDA announces:

check box  not checked 

Seems that the strategy to add the aria-label to the checkbox container div is not giving us the results we need... Can you transfer the content of that aria-label to the actual checkbox <label> that is now empty?

Another issue is that there is a superfluous (first) Select announced by NVDA in each of the cells of the first column.

Select  row 2  Select  column 1

This seems to happen because of the aria-label that is added to the container div. If we eliminate that one completely, that should solve the problem.

[AllanOXDi]

Hi @AllanOXDi - really great work so far. Thanks for already addressing so much feedback. I left one small comment regarding using translated strings in aria labels, and I'm going to hand it over to @radinamatic for more robust accessibility testing.

One other (very small) issue I noticed that is mostly a pre-existing problem that has just been exacerbated here is that the tooltip for the identifier is covered by the table cell

It exists in Kolibri-demo as well, but because of the spacing there, the text is legible. It's a small piece of cleanup, but I think worth doing now

@radinamatic - over to you for a11y testing! (Please note that the icon buttons at the top of the table are not intended to be interactive yet).

Hi @marcellamaki , the issue seems to have come from https://github.com/BabyElias/kolibri-design-system/blob/0613a2163071512a86da80591101eb97ba50aa94/lib/KTable/index.vue#L341

[radinamatic]

@AllanOXDi, apologies for the late review 🙏🏽

Checkbox for all the individual users in rows below the header is now properly displaying the wording Select, yey! 👏🏽

Select  check box  checked  

However, the column header cell is still read out as Select all, instead of just Select:

Select all  column header  row 1  column 1
Select all  check box  not checked 

The second line in the above screen reader output is correct, because it is for the actual checkbox inside the first cell, but the header cell itself (and consequently all the cells below in that column) must have as the label just Select.

Technically, we should not even be putting the aria-label on the generic div element (k-checkbox-container). We should, instead place a with the text Select as the first thing directly inside the respective <th> element, same as for the rest of column headers, something like:

<span data...="" data...="" class="">Select</span>

[AllanOXDi]

Okay! Thanks @radinamatic let me fix that

[radinamatic]

More progress, still one thing to fix 😅

We should be good with the header row now, but the output from the 2º (and the following) sounds like this:

Abby L.,admin  row 2  Select column 1
Select  check box  not checked  

We should be injecting the Abby L.,admin part - and mind to put a space after the comma, so it's read separately (Abby L., admin) - INSIDE the <label> element for the checkbox.

Output should sound like this:

row 2  Select column 1
Select Abby L., admin check box  not checked  

[radinamatic]

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉

Select Abby L., Facility coach  check box  checked  

🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉🎉