[Rating] Add random name when none is provided (#18284)

Author: Vitao18

docs/src/modules/components/DiamondSponsors.js

@@ -44,6 +44,7 @@ export default function DiamondSponsors() {
         {t('diamondSponsors')}
       </Typography>
       <a
+        aria-label={t('diamondSponsors')}
         className={classes.placeholder}
         rel="noopener noreferrer"
         target="_blank"

docs/src/pages/components/rating/HoverRating.js

@@ -23,7 +23,7 @@ function IconContainer(props) {
   const { value, ...other } = props;
   return (
     <Tooltip title={labels[value] || ''}>
-      <div {...other} />
+      <span {...other} />
     </Tooltip>
   );
 }

docs/src/pages/components/rating/HoverRating.tsx

@@ -22,7 +22,7 @@ function IconContainer(props: IconContainerProps) {
   const { value, ...other } = props;
   return (
     <Tooltip title={labels[value] || ''}>
-      <div {...other} />
+      <span {...other} />
     </Tooltip>
   );
 }

docs/src/pages/components/rating/SimpleRating.js

@@ -20,7 +20,7 @@ export default function SimpleRating() {
       </Box>
       <Box component="fieldset" mb={3} borderColor="transparent">
         <Typography component="legend">Read only</Typography>
-        <Rating value={value} readOnly />
+        <Rating name="read-only" value={value} readOnly />
       </Box>
       <Box component="fieldset" mb={3} borderColor="transparent">
         <Typography component="legend">Disabled</Typography>

docs/src/pages/components/rating/SimpleRating.tsx

@@ -20,7 +20,7 @@ export default function SimpleRating() {
       </Box>
       <Box component="fieldset" mb={3} borderColor="transparent">
         <Typography component="legend">Read only</Typography>
-        <Rating value={value} readOnly />
+        <Rating name="read-only" value={value} readOnly />
       </Box>
       <Box component="fieldset" mb={3} borderColor="transparent">
         <Typography component="legend">Disabled</Typography>

packages/material-ui-lab/src/Rating/Rating.js

@@ -64,6 +64,7 @@ export const styles = theme => ({
     clip: 'rect(0 0 0 0)',
     height: 1,
     margin: -1,
+    color: '#000',
     overflow: 'hidden',
     padding: 0,
     position: 'absolute',
@@ -136,7 +137,7 @@ const Rating = React.forwardRef(function Rating(props, ref) {
     icon = defaultIcon,
     IconContainerComponent = IconContainer,
     max = 5,
-    name,
+    name: nameProp,
     onChange,
     onChangeActive,
     onMouseLeave,
@@ -148,6 +149,15 @@ const Rating = React.forwardRef(function Rating(props, ref) {
     ...other
   } = props;
 
+  const [defaultName, setDefaultName] = React.useState();
+  const name = nameProp || defaultName;
+  React.useEffect(() => {
+    // Fallback to this default id when possible.
+    // Use the random value for client-side rendering only.
+    // We can't use it server-side.
+    setDefaultName(`mui-rating-${Math.round(Math.random() * 1e5)}`);
+  }, []);
+
   const valueProp = roundValueToPrecision(valueProp2, precision);
   const theme = useTheme();
   const [{ hover, focus }, setState] = React.useState({