[test][avatar] Add axe tests and docs

docs/data/material/components/avatars/AvatarA11yImage.js

@@ -0,0 +1,17 @@
+import Avatar from '@mui/material/Avatar';
+import Stack from '@mui/material/Stack';
+
+// A 1x1 data-URI image so a real `<img>` renders in the regression harness,
+// which blocks network image requests (see test/regressions/index.test.js).
+// This exercises the working-image path (`alt` forwarded to a native `<img>`)
+// for the axe `image-alt` rule (WCAG 1.1.1).
+const dataUri =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=';
+
+export default function AvatarA11yImage() {
+  return (
+    <Stack direction="row" spacing={2}>
+      <Avatar alt="Remy Sharp" src={dataUri} />
+    </Stack>
+  );
+}

docs/data/material/components/avatars/AvatarA11yImage.tsx

@@ -0,0 +1,17 @@
+import Avatar from '@mui/material/Avatar';
+import Stack from '@mui/material/Stack';
+
+// A 1x1 data-URI image so a real `<img>` renders in the regression harness,
+// which blocks network image requests (see test/regressions/index.test.js).
+// This exercises the working-image path (`alt` forwarded to a native `<img>`)
+// for the axe `image-alt` rule (WCAG 1.1.1).
+const dataUri =
+  'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAC0lEQVR4nGNgYAAAAAMAASsJTYQAAAAASUVORK5CYII=';
+
+export default function AvatarA11yImage() {
+  return (
+    <Stack direction="row" spacing={2}>
+      <Avatar alt="Remy Sharp" src={dataUri} />
+    </Stack>
+  );
+}

docs/data/material/components/avatars/AvatarA11yImage.tsx.preview

@@ -0,0 +1 @@
+<Avatar alt="Remy Sharp" src={dataUri} />

docs/data/material/components/avatars/avatars.a11y.json

@@ -0,0 +1,150 @@
+{
+  "AvatarA11yImage": {
+    "rules": {
+      "aria-allowed-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-conditional-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-prohibited-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-valid-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-valid-attr-value": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "image-alt": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "nested-interactive": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      }
+    }
+  },
+  "BackgroundLetterAvatars": {
+    "rules": {
+      "aria-allowed-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-conditional-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-prohibited-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-valid-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-valid-attr-value": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "color-contrast": {
+        "status": "fail",
+        "tags": ["wcag2aa"]
+      }
+    }
+  },
+  "IconAvatars": {
+    "rules": {
+      "aria-allowed-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-conditional-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-hidden-focus": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-prohibited-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-valid-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-valid-attr-value": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      }
+    }
+  },
+  "LetterAvatars": {
+    "rules": {
+      "aria-allowed-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-conditional-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-prohibited-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-valid-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-valid-attr-value": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "color-contrast": {
+        "status": "incomplete",
+        "tags": ["wcag2aa"]
+      }
+    }
+  },
+  "VariantAvatars": {
+    "rules": {
+      "aria-allowed-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-conditional-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-hidden-focus": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-prohibited-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-valid-attr": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "aria-valid-attr-value": {
+        "status": "pass",
+        "tags": ["wcag2a"]
+      },
+      "color-contrast": {
+        "status": "incomplete",
+        "tags": ["wcag2aa"]
+      }
+    }
+  }
+}

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

@@ -278,4 +278,30 @@ describe('<Avatar />', () => {
       ),
     ).not.to.throw();
   });
+
+  describe('accessibility', () => {
+    // 1.3.1 Info and Relationships: the root is a generic container, and the
+    // no-image states are decorative, so no spurious semantics are exposed.
+    it('renders a generic root with no ARIA role', () => {
+      const { container } = render(<Avatar alt="Remy Sharp" src="/fake.png" />);
+      expect(container.firstChild).to.have.tagName('div');
+      expect(container.firstChild).not.to.have.attribute('role');
+    });
+
+    it('hides the Person fallback from assistive technology', () => {
+      const { container } = render(<Avatar />);
+      const fallback = container.querySelector('svg');
+      expect(fallback).to.have.attribute('data-testid', 'PersonIcon');
+      expect(fallback).to.have.attribute('aria-hidden', 'true');
+    });
+
+    it('hides a decorative SvgIcon child from assistive technology', () => {
+      const { container } = render(
+        <Avatar>
+          <CancelIcon />
+        </Avatar>,
+      );
+      expect(container.querySelector('svg')).to.have.attribute('aria-hidden', 'true');
+    });
+  });
 });