[GSoC] KTable Trial for use-case 1

[BabyElias]

Summary

This PR introduces KTable component to Kolibri as a part of GSoC Project : Accessible Sortable Table. The component is still under review in KDS.

Reviewer guidance

• Navigate to [root]/en/facility/#/classes
• Sign in if prompted
• Click on the New Class button
• Add a random class. Once added, the information is displayed using KTable on the classes page.
• Add a few more random classes using New Class button to check functionalities of the table component.

QA Testing Guidance

• Table navigable using both arrow keys and tab key.
• When navigating any cell using arrow key or tab key, the corresponding column header and entire row containing the cell are highlighted.
• Elements within cells that are focusable, receive proper focus using tab key and can be executed using 'Enter' key
• The headers can be sorted by pressing 'Enter' key on them
• The focus ring is visible clearly around the focused elements.
• When viewport is shrinked for smaller devices, navigation using arrow keys/tab key should ensure that each element is clearly visible when navigating through them and does not get hidden by sticky headers.

Testing checklist

• [x] Contributor has fully tested the PR manually
• [ ] If there are any front-end changes, before/after screenshots are included
• [ ] Critical user journeys are covered by Gherkin stories
• [ ] Critical and brittle code paths are covered by unit tests

PR process

• [ ] PR has the correct target branch and milestone
• [ ] PR has 'needs review' or 'work-in-progress' label
• [ ] If PR is ready for review, a reviewer has been added. (Don't use 'Assignees')
• [ ] If this is an important user-facing change, PR or related issue has a 'changelog' label
• [ ] If this includes an internal dependency change, a link to the diff is provided

Reviewer checklist

• PR is fully functional
• PR has been tested for accessibility regressions
• External dependency files were updated if necessary (yarn and pip)
• Documentation is updated
• Contributor is in AUTHORS.md

[github-actions[bot]]

Build Artifacts

Asset type	Download link
PEX file	kolibri-0.18.0.dev0_git.20241009172329.pex
Windows Installer (EXE)	kolibri-0.18.0.dev0+git.20241009172329-windows-setup-unsigned.exe
Debian Package	kolibri_0.18.0.dev0+git.20241009172329-0ubuntu1_all.deb
Mac Installer (DMG)	kolibri-0.18.0.dev0+git.20241009172329.dmg
Android Package (APK)	kolibri-0.18.0.dev0+git.20241009172329-0.1.4-debug.apk
TAR file	kolibri-0.18.0.dev0+git.20241009172329.tar.gz
WHL file	kolibri-0.18.0.dev0+git.20241009172329-py2.py3-none-any.whl

[radinamatic]

This is looking great @BabyElias !!! 👏🏽 Table navigation is fluid, styling as per requirements, activating the Delete class button works, although in one instance it displayed this error in the console:

TypeError: Cannot read properties of undefined (reading '3')

One possible improvement would be in the area of how we notify that the columns are sortable, and after they have been sorted. Let's discuss if we could take some inspiration from examples here.

[MisRob]

@radinamatic mentioned to me that she re-tested and it all worked smooth so in her absence, I am leaving this note as QA approval :) Regarding the improvements suggested in https://dequeuniversity.com/library/aria/table-sortable, Radina is going to clarify the requirements at some point and then we will open a follow-up issue.

[MisRob]

We can do final QA here, but the KDS upgrade as a whole will be handled in https://github.com/learningequality/kolibri/pull/12651 (the test failures should be resolved by that as well as some other breaking changes)

[radinamatic]

As we mentioned during the weekly call, the only remaining issue would be to correct the z-order position of the first cell in the column header (issue visible when the page is scrolled on small screens):

Otherwise, this should be good to go! 👏🏽 💯 🚀 🙂

[MisRob]

Kolibri already has the release with changes needed in this PR. I can rebase and get it ready for merge.

[MisRob]

I did one last quick preview of the latest pex and all looks good! Wonderful work.