Add kg filter menu to design system and use it in kg explorer

[edlu77]

• Filter menu improvements #2076

[nx-cloud]

View your CI Pipeline Execution ↗ for commit b88a984

Command	Status	Duration	Result
nx affected --targets=lint,test,compodoc --conf...	✅ Succeeded	3m 17s	View ↗
nx affected --target=build,build-webcomponent,b...	✅ Succeeded	4m 59s	View ↗

---

☁️ Nx Cloud last updated this comment at 2026-03-23 21:17:49 UTC

[github-actions]

🚀 Preview Deploy Report

✅ Successfully deployed preview here

[LibbyUX]

Hi @edlu77 - Thank you for getting this started, it's looking great! This will make the KG way more accessible. A few observations and questions:

Font sizes

In the preview, I'm seeing label medium in places where label small should be, so something may have bugged out! I noticed this on the navigation header breadcrumbs in the FTU explorer homepage and the KG Explorer. I also see it in the KG's metadata page in the select.

KG keyboard navigation

For the filter menu, is it possible to attach our new search lists (implemented for CNS) that can be navigated via keyboard?

Additionally, regarding the old digital object search list with the tooltips in the listing. Angular does not recommend any other buttons other than checkboxes in lists for accessibility, so we can replace this pattern with a new search list as well.

Figma

• KG Explorer Design System | Filter menu + search list

[edlu77]

@LibbyUX The font sizes look good on my end. Let me know if the issue comes back though!

The search list is the same as in the design system so it should be keyboard navigable.

[LibbyUX]

Thank you so much, @edlu77 !

[LibbyUX]

@edlu77 - Definitely approved but I do have one more request, if we can squeeze it in: Can we turn on the category counting for the filter menu so we can see how many unique items we have for each filter category?

[LibbyUX]

Iconic. Katy will love this update. Thank you so much @edlu77 !