Add initial value? Yup!
Set a placeholder? sure!
Attach a label? nay.
Consider:
- [mandatory] enter a label
- label visibility [on, off]
- [if visibility = on] label position [top, left, right, button]
- label alignment
-
aria-label="3 out of 5" isn't read since its hosting element (span) isn't an interactive element. A "group" role should be added to animate the aria-label prop.
-
Radio buttons have no accName.
But why use radio buttons when the component isn't interactive? When the rating is only informative it should be styled to just read "between 1 to 5, the current average rating of this XXX is 3.5, based on 150 votes (why not let the user edit this number?). -
The [data-hook="rating-display-reviews-count"] element shouldn't have any tabindex and no need for aria-label since its not read in the first place (span is not an interactive element) + there is a text node which the user controls...
The checkbox is missing a label.
Why not add an option, or even better - a mandatory option to enter a label + set if visible or not + set its position (above, to the left, to the right). This would definitely be less daunting for most users
Why not call this strip "add a quote" ... and render it as an HTML quote?