[Feature] Add Clickable Labels for Checkbox Elements in resourcenav List

[SisiVero]

Problem

Currently, the checkbox elements in the resourcenav filter list can only be selected by clicking on the checkbox itself, rather than on the associated label text. This creates a less intuitive experience for users who expect the label text to be clickable.

Description

This feature would allow users to select checkboxes by clicking on the associated label text. By adding unique id attributes to each checkbox and using the for attribute on the <label>, we can link each label to its checkbox. This approach will enable users to click either the checkbox or the label to toggle the checkbox state, improving accessibility and usability.

Alternatives

• Wrapping the checkbox inside the element: This would also allow label-click toggling but may alter the HTML structure in a way that's less manageable.

• Using JavaScript to toggle the checkbox state on label click: This could work without modifying the HTML, but it introduces additional complexity.

The proposed solution (using id and for attributes) keeps the HTML structure intact and aligns well with standard accessibility practices.

Additional context

Implementing this feature will improve the experience for users who expect clickable labels, making the interface more intuitive and accessible. Additionally, it aligns with best practices for form controls and accessibility standards.

Implementation

• I would be interested in implementing this feature.

[akshaytyagi482]

i want to contribute on this kindly assign this to me

[SumaiyaaRq]

Hi @akshaytyagi482 , please go through Contribution Guidelines — Creative Commons Open Source to know how issues and PRs are managed here .
Since the issue is ready for work now , you can work on it and go ahead with submitting a PR for it !
Hope that helps you !
All the best !!