From 77e8c6aa8f502c7b38a260510c266debfeb7a3ee Mon Sep 17 00:00:00 2001 From: Dan Brady Date: Thu, 20 Apr 2023 10:00:03 -0400 Subject: [PATCH 1/2] [Avatar] Adds presentational avatar --- .changeset/lemon-lizards-scream.md | 5 +++++ polaris-react/src/components/Avatar/Avatar.tsx | 8 +++++--- .../components/Avatar/tests/Avatar.test.tsx | 18 ++++++++++++++++++ 3 files changed, 28 insertions(+), 3 deletions(-) create mode 100644 .changeset/lemon-lizards-scream.md diff --git a/.changeset/lemon-lizards-scream.md b/.changeset/lemon-lizards-scream.md new file mode 100644 index 00000000000..e33450572a0 --- /dev/null +++ b/.changeset/lemon-lizards-scream.md @@ -0,0 +1,5 @@ +--- +'@shopify/polaris': patch +--- + +Avatar supports being presentational when additional content gives context. (Ex. In a Users list when a name is supplied, the Avatar can be presentational only and does not need a label.) 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', + }); + }); + }); }); From 11bd4f912137bc032dbc7079301781859eae0c11 Mon Sep 17 00:00:00 2001 From: Chloe Rice Date: Thu, 29 Jun 2023 15:58:51 -0400 Subject: [PATCH 2/2] Update .changeset/lemon-lizards-scream.md --- .changeset/lemon-lizards-scream.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/.changeset/lemon-lizards-scream.md b/.changeset/lemon-lizards-scream.md index e33450572a0..2dbb55e8f0d 100644 --- a/.changeset/lemon-lizards-scream.md +++ b/.changeset/lemon-lizards-scream.md @@ -2,4 +2,4 @@ '@shopify/polaris': patch --- -Avatar supports being presentational when additional content gives context. (Ex. In a Users list when a name is supplied, the Avatar can be presentational only and does not need a label.) +Added support for `Avatar` being presentational