Selectable list

[AlexVelezLl]

Summary

• Adds a filterable selectable list component following the listbox pattern described in https://www.w3.org/WAI/ARIA/apg/patterns/listbox/
• Updates KDS depencency to target this PR Add presentational prop to KCheckbox kolibri-design-system#1044 that introduces a presentational prop to KCheckbox to achieve the recommended listbox pattern. So we shouldnt merge this PR until Add presentational prop to KCheckbox kolibri-design-system#1044 is released.

References

Closes #13408.

Reviewer guidance

I have created a dummy side panel in the facilities plugin > classes tab. So go to facilities > classes and check the list behaviour with dummy data.

[github-actions]

Build Artifacts

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

[MisRob]

Would you please test @radinamatic?

[MisRob]

Code reads very easily, and uses all the approaches we agreed to use. I haven't noticed anything suspicious. Very nice work here @AlexVelezLl.

I think I will leave @nucleogenesis or @LianaHarris360 to be a main code reviewer.

As for a11y, we will see what @radinamatic's testing reveals. I haven't looked into details, however the overall approach is well aligned with what we all chatted about 😊

[MisRob]

🙏

[MisRob]

👍

[MisRob]

👍

[nucleogenesis]

Code changes LGTM - let's wait for @radinamatic & @pcenov to QA before approval, but everything codewise looks great!

[pcenov]

Thanks @AlexVelezLl - looks great, we'll further test it once it's fully integrated.

[radinamatic]

Great work @AlexVelezLl ! 👏🏽

If we could, there are these two important things to achieve that will, I believe, improve even the example on the APG site 😅 (that you implemented exactly):

a) when user navigates to an option NVDA rightfully announces that it is an item in the list, and its position:

Select an option  list
Option 1  1 of 15

However, even though the list label says Select an option, user is not explicitly informed that the option in focus is actionable/clickable, and I believe we should make that clearer. One possibility would be to make it that NVDA announces clickable after each of the items, same as it would after a checkbox, but that might be a bit verbose and repetitive. Would it be possible to add the Options are clickable string to be announced by NVDA:

Select an option  list  Options are clickable
Option 1  1 of 15

b) more surprisingly for me was to find (it is extant in the APG example too) that when the option is deselected, that change of state is not announced by NVDA 😕

I would expect that deselecting an option, when the aria-selected property changes to false would also be announced, same as when it changes to true. So I'm again 😕

Other possible points of improvement;

3. Complete or improve the screen reader output when selecting all options. Checkbox itself works without issues, and the change of state is properly announced, but it would be beneficial to the user to be informed of the full outcome of them checking the checkbox 😉

   

My suggestion would be to pass to the screen reader the All N options are selected when the user checks the Select all options checkbox, and No options selected when they uncheck the checkbox.

4. When the list of options is long, and some are below the fold, the page does not scroll when keyboard user is navigating to those options below the fold, and they cannot see where they are. Screen reader users might not be inconvenienced, but sighted keyboard users are 🙂

[AlexVelezLl]

Hi @radinamatic! Just pushed some changes that should fix the points you mentioned :). Would be great if you can take a look at it again 👐.

[radinamatic]

I feel like Aladdin: all I have to do is express a wish and the genie @AlexVelezLl will grant it! 🤩 👏🏽 🙇🏽‍♀️
(and I definitively had maaaaany more than 3 already 😅)

[radinamatic]

So great to see this, excellent job! 💯 🎉