diff --git a/.changeset/lemon-lizards-scream.md b/.changeset/lemon-lizards-scream.md new file mode 100644 index 00000000000..2dbb55e8f0d --- /dev/null +++ b/.changeset/lemon-lizards-scream.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Added support for `Avatar` being presentational diff --git a/polaris-react/src/components/Avatar/Avatar.tsx b/polaris-react/src/components/Avatar/Avatar.tsx index 535d8fa65cd..91eb598dbc2 100644 --- a/polaris-react/src/components/Avatar/Avatar.tsx +++ b/polaris-react/src/components/Avatar/Avatar.tsx @@ -109,8 +109,6 @@ export function Avatar({ label = i18n.translate('Polaris.Avatar.labelWithInitials', { initials: splitInitials, }); - } else { - label = i18n.translate('Polaris.Avatar.label'); } const className = classNames( @@ -175,7 +173,11 @@ export function Avatar({ ); return ( - + {svgMarkup} {imageMarkUp} diff --git a/polaris-react/src/components/Avatar/tests/Avatar.test.tsx b/polaris-react/src/components/Avatar/tests/Avatar.test.tsx index 1487bf253c5..7e092749099 100644 --- a/polaris-react/src/components/Avatar/tests/Avatar.test.tsx +++ b/polaris-react/src/components/Avatar/tests/Avatar.test.tsx @@ -169,4 +169,22 @@ describe('', () => { }); }); }); + + describe('accessibilityRole', () => { + it('is presentation role if name, initials, or accessibilityLabel not passed', () => { + const avatar = mountWithApp(); + + expect(avatar).toContainReactComponent('span', { + role: 'presentation', + }); + }); + + it('is img role if name passed', () => { + const avatar = mountWithApp(); + + expect(avatar).toContainReactComponent('span', { + role: 'img', + }); + }); + }); });