liferay / clay

A web implementation of the Lexicon Experience Language
http://clayui.com
Other
208 stars 467 forks source link

feat(@clayui/card): LPD-1261 Add name to group all radio type inputs #5828

Closed veroglez closed 1 month ago

veroglez commented 1 month ago

Hi guys!,

I am sending this pull because while fixing this bug https://liferay.atlassian.net/browse/LPD-1261, I realized the following:

https://github.com/liferay/clay/assets/9701095/51e8abd8-830f-4812-b611-c29b2eecbefe

As you see in the video, when you navigate by keyboard, the navigation does not recognize which radio button is selected, and when you return to the cards, the radio input that is not selected is focused.

This happens because to group the radio buttons in a group it is necessary to add the same name to all the inputs https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role.

For that reason, for the radio buttons to work correctly I have added the name as required in radioProps (apart from value), this being the correct behavior:

https://github.com/liferay/clay/assets/9701095/4712d646-2b32-422f-8d45-624ffd5991b2

Let me know what you think, thanks in advance! :smiley: