[Avatar] Use structured / semantic markup for avatars and avatar groups

docs/pages/material-ui/api/avatar-group.json

@@ -2,6 +2,7 @@
   "props": {
     "children": { "type": { "name": "node" } },
     "classes": { "type": { "name": "object" } },
+    "component": { "type": { "name": "elementType" } },
     "componentsProps": {
       "type": { "name": "shape", "description": "{ additionalAvatar?: object }" },
       "default": "{}"

docs/translations/api-docs/avatar-group/avatar-group.json

@@ -3,6 +3,7 @@
   "propDescriptions": {
     "children": "The avatars to stack.",
     "classes": "Override or extend the styles applied to the component. See <a href=\"#css\">CSS API</a> below for more details.",
+    "component": "The component used for the root node. Either a string to use a HTML element or a component.",
     "componentsProps": "The props used for each slot inside the AvatarGroup.",
     "max": "Max avatars to show before +x.",
     "spacing": "Spacing between avatars.",

packages/mui-material/src/AvatarGroup/AvatarGroup.d.ts

@@ -17,6 +17,11 @@ export interface AvatarGroupProps extends StandardProps<React.HTMLAttributes<HTM
    * Override or extend the styles applied to the component.
    */
   classes?: Partial<AvatarGroupClasses>;
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component?: React.ElementType;
   /**
    * The props used for each slot inside the AvatarGroup.
    * @default {}

packages/mui-material/src/AvatarGroup/AvatarGroup.js

@@ -67,6 +67,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
   const {
     children: childrenProp,
     className,
+    component = 'div',
     componentsProps = {},
     max = 5,
     spacing = 'medium',
@@ -80,6 +81,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
     ...props,
     max,
     spacing,
+    component,
     variant,
   };
 
@@ -115,6 +117,7 @@ const AvatarGroup = React.forwardRef(function AvatarGroup(inProps, ref) {
 
   return (
     <AvatarGroupRoot
+      as={component}
       ownerState={ownerState}
       className={clsx(classes.root, className)}
       ref={ref}
@@ -167,6 +170,11 @@ AvatarGroup.propTypes /* remove-proptypes */ = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * The component used for the root node.
+   * Either a string to use a HTML element or a component.
+   */
+  component: PropTypes.elementType,
   /**
    * The props used for each slot inside the AvatarGroup.
    * @default {}

packages/mui-material/src/AvatarGroup/AvatarGroup.spec.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react';
+import AvatarGroup from '@mui/material/AvatarGroup';
+
+<AvatarGroup component="ul" />;
+<AvatarGroup variant="circular" />;
+<AvatarGroup variant="rounded" />;
+<AvatarGroup variant="square" />;
+
+// @ts-expect-error
+<AvatarGroup variant="unknown" />;

packages/mui-material/src/AvatarGroup/AvatarGroup.test.js

@@ -18,7 +18,7 @@ describe('<AvatarGroup />', () => {
       muiName: 'MuiAvatarGroup',
       refInstanceof: window.HTMLDivElement,
       testVariantProps: { max: 10, spacing: 'small', variant: 'square' },
-      skip: ['componentProp', 'componentsProp'],
+      skip: ['componentsProp'],
     }),
   );