My goal was to make the rating selection accessible but the solution I came up with does not let me tab through them. I ended up hiding the radio inputs because they are not style able.
I would also like feedback on the semantic HTML structure of the component. I used aside for the modal since I figured a rating like this would pop up over a full page.
Hi 😃
Even if the radio buttons can't be styled, it's still possible to hide the default button and create a new custom one using ::before to create its shape and the :checked selector to handle its state !
Have a look at Stephanie Eckles' blog for deeper explanations and step by step process 👌
https://moderncss.dev/pure-css-custom-styled-radio-buttons/#custom-radio-button-style
As far as I know, <aside> isn't meant to be used as a modal landmark but is more likely to be a column on the right side of the page (for an in page navigation for exemple)
I wouldn't have used <main> like that and rather put it where your <aside> actually is because it is the main interest of the page (if we imagine having this rating component inside of a bigger review page)
But overall your component works just fine ! Well done 😄
