@atlaskit/profilecard 23.4.0 → 23.4.2

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @atlaskit/profilecard
 
+## 23.4.2
+
+### Patch Changes
+
+- [#130443](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/130443)
+  [`85df6ddb8d6de`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/85df6ddb8d6de) -
+  [ux] few UI update for the team profile card
+
+## 23.4.1
+
+### Patch Changes
+
+- [#128871](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/128871)
+  [`a4f35151d2de5`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/a4f35151d2de5) -
+  Fix a11y issue on team profile card toggletip
+
 ## 23.4.0
 
 ### Minor Changes

package/afm-cc/tsconfig.json

@@ -83,6 +83,9 @@
         {
             "path": "../../../design-system/spinner/afm-cc/tsconfig.json"
         },
+        {
+            "path": "../../teams-avatar/afm-cc/tsconfig.json"
+        },
         {
             "path": "../../../design-system/theme/afm-cc/tsconfig.json"
         },

package/afm-jira/tsconfig.json

@@ -83,6 +83,9 @@
 		{
 			"path": "../../../design-system/spinner/afm-jira/tsconfig.json"
 		},
+		{
+			"path": "../../teams-avatar/afm-jira/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/theme/afm-jira/tsconfig.json"
 		},

package/afm-post-office/tsconfig.json

@@ -83,6 +83,9 @@
 		{
 			"path": "../../../design-system/spinner/afm-post-office/tsconfig.json"
 		},
+		{
+			"path": "../../teams-avatar/afm-post-office/tsconfig.json"
+		},
 		{
 			"path": "../../../design-system/theme/afm-post-office/tsconfig.json"
 		},

package/dist/cjs/client/getOrgIdForCloudIdFromAGG.js

@@ -11,7 +11,7 @@ var _graphqlUtils = require("./graphqlUtils");
 var ORG_ID_FROM_CLOUD_ID_QUERY = "query OrgIdFromCloudId($cloudId: ID!) {\n\ttenantContexts(cloudIds: [$cloudId]) {\n\t\torgId\n\t}\n}";
 var addHeaders = function addHeaders(headers) {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.4.0");
+  headers.append('atl-client-version', "23.4.2");
   return headers;
 };
 function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/cjs/client/getTeamFromAGG.js

@@ -66,7 +66,7 @@ var addHeaders = exports.addHeaders = function addHeaders(headers) {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.4.0");
+  headers.append('atl-client-version', "23.4.2");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/Team/TeamProfileCard.js

@@ -12,6 +12,7 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntlNext = require("react-intl-next");
+var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
 var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _loadingButton = _interopRequireDefault(require("@atlaskit/button/loading-button"));
 var _new = _interopRequireWildcard(require("@atlaskit/button/new"));
@@ -61,7 +62,8 @@ var TeamMembers = function TeamMembers(_ref) {
     generateUserLink = _ref.generateUserLink,
     members = _ref.members,
     onUserClick = _ref.onUserClick,
-    includingYou = _ref.includingYou;
+    includingYou = _ref.includingYou,
+    isTriggeredByKeyboard = _ref.isTriggeredByKeyboard;
   var _useIntl = (0, _reactIntlNext.useIntl)(),
     formatMessage = _useIntl.formatMessage;
   var count = members ? members.length : 0;
@@ -70,6 +72,14 @@ var TeamMembers = function TeamMembers(_ref) {
   // Use a ref to track whether this is currently open, so we can fire events
   // iff the more section is being opened (not closed).
   var isMoreMembersOpen = (0, _react.useRef)(false);
+  var avatarRef = (0, _react.useRef)(null);
+  var ref = function ref(element) {
+    if (isTriggeredByKeyboard) {
+      var _avatarRef$current;
+      avatarRef.current = element;
+      (_avatarRef$current = avatarRef.current) === null || _avatarRef$current === void 0 || _avatarRef$current.focus();
+    }
+  };
   var onMoreClick = (0, _react.useCallback)(function () {
     var isOpen = isMoreMembersOpen.current;
     if (!isOpen) {
@@ -93,7 +103,34 @@ var TeamMembers = function TeamMembers(_ref) {
     values: {
       count: count
     }
-  }))), members && members.length > 0 && /*#__PURE__*/_react.default.createElement(_TeamCard.AvatarSection, null, /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+  }))), members && members.length > 0 && /*#__PURE__*/_react.default.createElement(_TeamCard.AvatarSection, null, (0, _platformFeatureFlags.fg)('enable_team_profilecard_toggletip_a11y_fix') ? /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
+    appearance: "stack",
+    data: members.map(function (member, index) {
+      var href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
+      var onClick = onMemberClick(onUserClick, member.id, analytics, index, !!generateUserLink);
+      return {
+        key: member.id,
+        name: member.fullName,
+        src: member.avatarUrl,
+        href: href,
+        onClick: onClick
+      };
+    }),
+    maxCount: avatarGroupMaxCount,
+    showMoreButtonProps: showMoreButtonProps,
+    testId: "profilecard-avatar-group",
+    overrides: {
+      Avatar: {
+        render: function render(Component, props, index) {
+          return index === 0 ? /*#__PURE__*/_react.default.createElement(_avatar.default, (0, _extends2.default)({
+            ref: ref
+          }, props, {
+            testId: "first-member"
+          })) : /*#__PURE__*/_react.default.createElement(Component, props);
+        }
+      }
+    }
+  }) : /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
     appearance: "stack",
     data: members.map(function (member, index) {
       var href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
@@ -248,7 +285,8 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     generateUserLink = _ref5.generateUserLink,
     onUserClick = _ref5.onUserClick,
     viewProfileLink = _ref5.viewProfileLink,
-    viewProfileOnClick = _ref5.viewProfileOnClick;
+    viewProfileOnClick = _ref5.viewProfileOnClick,
+    isTriggeredByKeyboard = _ref5.isTriggeredByKeyboard;
   var allActions = [{
     label: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, _messages.default.teamViewProfile),
     link: viewProfileLink,
@@ -284,7 +322,8 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     members: team.members,
     generateUserLink: generateUserLink,
     includingYou: includingYou,
-    onUserClick: onUserClick
+    onUserClick: onUserClick,
+    isTriggeredByKeyboard: isTriggeredByKeyboard
   }), team.description.trim() && /*#__PURE__*/_react.default.createElement(_TeamCard.DescriptionWrapper, null, /*#__PURE__*/_react.default.createElement(_TeamCard.Description, null, team.description)), /*#__PURE__*/_react.default.createElement(ButtonSection, {
     actions: allActions,
     analytics: analytics

package/dist/cjs/components/Team/TeamProfileCardTrigger.js

@@ -20,6 +20,7 @@ var _analyticsNext = require("@atlaskit/analytics-next");
 var _giveKudos = require("@atlaskit/give-kudos");
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _popup = _interopRequireDefault(require("@atlaskit/popup"));
+var _primitives = require("@atlaskit/primitives");
 var _constants = require("@atlaskit/theme/constants");
 var _filterActions2 = _interopRequireDefault(require("../../internal/filterActions"));
 var _messages = _interopRequireDefault(require("../../messages"));
@@ -123,8 +124,23 @@ var TeamProfileCardTriggerInternal = exports.TeamProfileCardTriggerInternal = /*
         _this.hideProfilecard(_config.DELAY_MS_HIDE);
       }
     });
+    (0, _defineProperty2.default)(_this, "onKeyPress", function (event) {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        _this.setState({
+          isTriggeredByKeyboard: true
+        });
+        _this.showProfilecard(0);
+        if (!_this.state.visible) {
+          _this.fireAnalytics((0, _analytics.cardTriggered)('team', 'click'));
+        }
+      }
+    });
     (0, _defineProperty2.default)(_this, "onClose", function () {
       _this.hideProfilecard();
+      _this.setState({
+        isTriggeredByKeyboard: false
+      });
     });
     (0, _defineProperty2.default)(_this, "openKudosDrawer", function () {
       _this.hideProfilecard(_config.DELAY_MS_HIDE);
@@ -165,7 +181,8 @@ var TeamProfileCardTriggerInternal = exports.TeamProfileCardTriggerInternal = /*
       data: null,
       shouldShowGiveKudos: false,
       teamCentralBaseUrl: undefined,
-      kudosDrawerOpen: false
+      kudosDrawerOpen: false,
+      isTriggeredByKeyboard: false
     });
     (0, _defineProperty2.default)(_this, "clientFetchProfile", function () {
       var _this$props = _this.props,
@@ -235,7 +252,8 @@ var TeamProfileCardTriggerInternal = exports.TeamProfileCardTriggerInternal = /*
       }, /*#__PURE__*/_react.default.createElement(_lazyTeamProfileCard.TeamProfileCardLazy, (0, _extends2.default)({}, newProps, {
         isLoading: isLoading,
         hasError: hasError,
-        errorType: error
+        errorType: error,
+        isTriggeredByKeyboard: _this.state.isTriggeredByKeyboard
       }))));
     });
     (0, _defineProperty2.default)(_this, "renderKudosLauncher", function () {
@@ -257,10 +275,18 @@ var TeamProfileCardTriggerInternal = exports.TeamProfileCardTriggerInternal = /*
     (0, _defineProperty2.default)(_this, "renderTrigger", function (triggerProps) {
       var _this$props3 = _this.props,
         children = _this$props3.children,
+        intl = _this$props3.intl,
         triggerLinkType = _this$props3.triggerLinkType,
         viewProfileLink = _this$props3.viewProfileLink;
       if (triggerLinkType === 'none') {
-        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _this.renderKudosLauncher(), /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
+        return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, _this.renderKudosLauncher(), (0, _platformFeatureFlags.fg)('enable_team_profilecard_toggletip_a11y_fix') ? /*#__PURE__*/_react.default.createElement(_primitives.Box, (0, _extends2.default)({
+          as: "span",
+          role: "button",
+          testId: "team-profilecard-trigger-wrapper",
+          tabIndex: 0,
+          "aria-label": intl.formatMessage(_messages.default.teamProfileCardAriaLabel),
+          onKeyUp: _this.onKeyPress
+        }, triggerProps, _this.triggerListeners), children) : /*#__PURE__*/_react.default.createElement("span", (0, _extends2.default)({
           "data-testid": "team-profilecard-trigger-wrapper"
         }, triggerProps, _this.triggerListeners), children));
       }
@@ -393,4 +419,4 @@ var TeamProfileCardTriggerInternal = exports.TeamProfileCardTriggerInternal = /*
   triggerLinkType: 'link',
   shouldRenderToParent: true
 });
-var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()(TeamProfileCardTriggerInternal);
+var _default = exports.default = (0, _analyticsNext.withAnalyticsEvents)()((0, _reactIntlNext.injectIntl)(TeamProfileCardTriggerInternal));

package/dist/cjs/components/team-profile-card/main.compiled.css

@@ -6,27 +6,26 @@
 ._1dqonqa1{border-style:solid}
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._15a5nqa1{border-top-style:solid}
 ._18m915vq{overflow-y:hidden}
-._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._18u01ejb{margin-left:var(--ds-space-300,24px)}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
-._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
-._1bsb1w8u{width:80%}
 ._1bsb5x59{width:340px}
-._1bsbvbgk{width:4pc}
 ._1e0c1txw{display:flex}
 ._1i53muej{border-top-color:var(--ds-border,#091e4224)}
 ._1reo15vq{overflow-x:hidden}
 ._1ul95x59{min-width:340px}
-._2hwxutpp{margin-right:var(--ds-space-150,9pt)}
+._2hwx1ejb{margin-right:var(--ds-space-300,24px)}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3i1ul9{height:30px}
 ._4t3i1wug{height:auto}
-._4t3ivbgk{height:4pc}
+._4t3i53f4{height:75pt}
 ._5ral1dfr{object-fit:cover}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
-._c71l53f4{max-height:75pt}
 ._kqswstnw{position:absolute}
 ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
 ._s7n4jp4b{vertical-align:top}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
 ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}

package/dist/cjs/components/team-profile-card/main.js

@@ -14,15 +14,15 @@ var _avatarGroup = _interopRequireDefault(require("@atlaskit/avatar-group"));
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
 var _verifiedTeamIcon = require("@atlaskit/people-teams-ui-public/verified-team-icon");
 var _compiled = require("@atlaskit/primitives/compiled");
+var _teamsAvatar = _interopRequireDefault(require("@atlaskit/teams-avatar"));
 var styles = {
   wrapperStyles: "_2rkopd34 _v564nm7n _1reo15vq _18m915vq _189ee4h9 _1dqonqa1 _1h6dmuej _1e0c1txw _2lx21bp4 _1bsb5x59 _1ul95x59 _4t3i1wug",
   containerStyles: "_otyrpxbi",
-  avatarImageContainerStyles: "_kqswstnw _18u0utpp",
-  avatarImageStyles: "_2rkoiti9 _kqswstnw _18u0utpp _4t3ivbgk _1bsbvbgk",
-  headerImageStyles: "_5ral1dfr _s7n4jp4b _c71l53f4 _1bsb1osq",
-  teamInformationStyles: "_18u0utpp _19pkxy5q _2hwxutpp",
-  viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej",
-  viewProfileButtonStyles: "_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _1bsb1w8u _4t3i1ul9 _19pkpxbi"
+  avatarImageStyles: "_kqswstnw _18u01ejb",
+  headerImageStyles: "_5ral1dfr _s7n4jp4b _4t3i53f4 _1bsb1osq",
+  teamInformationStyles: "_18u01ejb _19pku2gc _2hwx1ejb",
+  viewProfileContainerStyles: "_4cvr1h6o _uwhke4h9 _15a5nqa1 _1i53muej _19bv1ejb _u5f31ejb",
+  viewProfileButtonStyles: "_2rkoiti9 _189ee4h9 _1dqonqa1 _1h6dmuej _bfhksm61 _1bsb1osq _4t3i1ul9 _19pkpxbi"
 };
 var TeamCardWrapper = function TeamCardWrapper(_ref) {
   var id = _ref.id,
@@ -42,50 +42,42 @@ var HeaderImage = function HeaderImage(_ref2) {
     alt: "team-header-image"
   });
 };
-var TeamAvatar = function TeamAvatar(_ref3) {
-  var avatarUrl = _ref3.avatarUrl;
-  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
-    as: "img",
-    src: avatarUrl,
-    xcss: styles.avatarImageStyles,
-    alt: "team-avatar-image"
-  });
-};
-var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref4) {
-  var teamId = _ref4.teamId,
-    displayName = _ref4.displayName,
-    description = _ref4.description,
-    avatarImageUrl = _ref4.avatarImageUrl,
-    headerImageUrl = _ref4.headerImageUrl,
-    memberAvatars = _ref4.memberAvatars,
-    memberCount = _ref4.memberCount,
-    isVerified = _ref4.isVerified,
-    teamProfileUrl = _ref4.teamProfileUrl;
+var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref3) {
+  var teamId = _ref3.teamId,
+    displayName = _ref3.displayName,
+    description = _ref3.description,
+    avatarImageUrl = _ref3.avatarImageUrl,
+    headerImageUrl = _ref3.headerImageUrl,
+    memberAvatars = _ref3.memberAvatars,
+    memberCount = _ref3.memberCount,
+    isVerified = _ref3.isVerified,
+    teamProfileUrl = _ref3.teamProfileUrl;
   return /*#__PURE__*/_react.default.createElement(TeamCardWrapper, {
     id: teamId
   }, /*#__PURE__*/_react.default.createElement(HeaderImage, {
     srcUrl: headerImageUrl
   }), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
-    space: "space.150",
+    space: "space.200",
     xcss: styles.containerStyles
   }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     spread: "space-between",
     alignBlock: "center"
-  }, /*#__PURE__*/_react.default.createElement(TeamAvatar, {
-    avatarUrl: avatarImageUrl
-  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.avatarImageStyles
+  }, /*#__PURE__*/_react.default.createElement(_teamsAvatar.default, {
+    size: "medium",
+    src: avatarImageUrl
+  }))), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     xcss: styles.teamInformationStyles,
-    space: "space.150"
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
-    space: "space.150"
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
+    space: "space.200"
+  }, /*#__PURE__*/_react.default.createElement(_compiled.Stack, null, /*#__PURE__*/_react.default.createElement(_compiled.Inline, {
     alignBlock: "center"
   }, /*#__PURE__*/_react.default.createElement(_heading.default, {
-    size: "small"
+    size: "medium"
   }, displayName), isVerified && /*#__PURE__*/_react.default.createElement(_verifiedTeamIcon.VerifiedTeamIcon, {
     showTooltip: true
   })), /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    color: "color.text.subtle"
+    color: "color.text.subtlest"
   }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, {
     defaultMessage: "Contributing team \u2022 {count, plural, one {# member} other {# members}}",
     values: {
@@ -95,12 +87,10 @@ var TeamProfileCard = exports.TeamProfileCard = function TeamProfileCard(_ref4)
   }))), /*#__PURE__*/_react.default.createElement(_compiled.Inline, null, /*#__PURE__*/_react.default.createElement(_avatarGroup.default, {
     appearance: "stack",
     data: memberAvatars
-  })), /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
-    space: "space.050"
-  }, /*#__PURE__*/_react.default.createElement(_compiled.Text, {
-    color: "color.text.subtle",
+  })), description && /*#__PURE__*/_react.default.createElement(_compiled.Text, {
+    color: "color.text",
     maxLines: 3
-  }, description))), teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
+  }, description)), teamProfileUrl && /*#__PURE__*/_react.default.createElement(_compiled.Stack, {
     xcss: styles.viewProfileContainerStyles
   }, /*#__PURE__*/_react.default.createElement(_compiled.Pressable, {
     onClick: function onClick() {

package/dist/cjs/messages.js

@@ -156,6 +156,11 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Direct reports',
     description: "Title for a section on the profile card that show the user's direct reports"
   },
+  teamProfileCardAriaLabel: {
+    id: 'pt.team-profile-card.aria-label',
+    defaultMessage: 'More information about this team',
+    description: 'Aria label for the team profile card'
+  },
   giveKudosButton: {
     id: 'pt.profile-card.give-kudos',
     defaultMessage: 'Give kudos',

package/dist/cjs/util/analytics.js

@@ -45,7 +45,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "23.4.0"
+      packageVersion: "23.4.2"
     }, attributes), {}, {
       firedAt: Math.round((0, _performance.getPageTime)())
     })

package/dist/es2019/client/getOrgIdForCloudIdFromAGG.js

@@ -6,7 +6,7 @@ const ORG_ID_FROM_CLOUD_ID_QUERY = `query OrgIdFromCloudId($cloudId: ID!) {
 }`;
 const addHeaders = headers => {
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.4.0");
+  headers.append('atl-client-version', "23.4.2");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -75,7 +75,7 @@ export const addHeaders = headers => {
   headers.append('X-ExperimentalApi', 'teams-beta');
   headers.append('X-ExperimentalApi', 'team-members-beta');
   headers.append('atl-client-name', "@atlaskit/profilecard");
-  headers.append('atl-client-version', "23.4.0");
+  headers.append('atl-client-version', "23.4.2");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/Team/TeamProfileCard.js

@@ -1,6 +1,7 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useRef, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl-next';
+import Avatar from '@atlaskit/avatar';
 import AvatarGroup from '@atlaskit/avatar-group';
 import LoadingButton from '@atlaskit/button/loading-button';
 import Button, { IconButton, LinkButton } from '@atlaskit/button/new';
@@ -44,7 +45,8 @@ const TeamMembers = ({
   generateUserLink,
   members,
   onUserClick,
-  includingYou
+  includingYou,
+  isTriggeredByKeyboard
 }) => {
   const {
     formatMessage
@@ -55,6 +57,14 @@ const TeamMembers = ({
   // Use a ref to track whether this is currently open, so we can fire events
   // iff the more section is being opened (not closed).
   const isMoreMembersOpen = useRef(false);
+  const avatarRef = useRef(null);
+  const ref = element => {
+    if (isTriggeredByKeyboard) {
+      var _avatarRef$current;
+      avatarRef.current = element;
+      (_avatarRef$current = avatarRef.current) === null || _avatarRef$current === void 0 ? void 0 : _avatarRef$current.focus();
+    }
+  };
   const onMoreClick = useCallback(() => {
     const {
       current: isOpen
@@ -79,7 +89,32 @@ const TeamMembers = ({
     values: {
       count
     }
-  }))), members && members.length > 0 && /*#__PURE__*/React.createElement(AvatarSection, null, /*#__PURE__*/React.createElement(AvatarGroup, {
+  }))), members && members.length > 0 && /*#__PURE__*/React.createElement(AvatarSection, null, fg('enable_team_profilecard_toggletip_a11y_fix') ? /*#__PURE__*/React.createElement(AvatarGroup, {
+    appearance: "stack",
+    data: members.map((member, index) => {
+      const href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
+      const onClick = onMemberClick(onUserClick, member.id, analytics, index, !!generateUserLink);
+      return {
+        key: member.id,
+        name: member.fullName,
+        src: member.avatarUrl,
+        href,
+        onClick
+      };
+    }),
+    maxCount: avatarGroupMaxCount,
+    showMoreButtonProps: showMoreButtonProps,
+    testId: "profilecard-avatar-group",
+    overrides: {
+      Avatar: {
+        render: (Component, props, index) => index === 0 ? /*#__PURE__*/React.createElement(Avatar, _extends({
+          ref: ref
+        }, props, {
+          testId: "first-member"
+        })) : /*#__PURE__*/React.createElement(Component, props)
+      }
+    }
+  }) : /*#__PURE__*/React.createElement(AvatarGroup, {
     appearance: "stack",
     data: members.map((member, index) => {
       const href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
@@ -215,7 +250,8 @@ const TeamProfilecardContent = ({
   generateUserLink,
   onUserClick,
   viewProfileLink,
-  viewProfileOnClick
+  viewProfileOnClick,
+  isTriggeredByKeyboard
 }) => {
   const allActions = [{
     label: /*#__PURE__*/React.createElement(FormattedMessage, messages.teamViewProfile),
@@ -250,7 +286,8 @@ const TeamProfilecardContent = ({
     members: team.members,
     generateUserLink: generateUserLink,
     includingYou: includingYou,
-    onUserClick: onUserClick
+    onUserClick: onUserClick,
+    isTriggeredByKeyboard: isTriggeredByKeyboard
   }), team.description.trim() && /*#__PURE__*/React.createElement(DescriptionWrapper, null, /*#__PURE__*/React.createElement(Description, null, team.description)), /*#__PURE__*/React.createElement(ButtonSection, {
     actions: allActions,
     analytics: analytics

package/dist/es2019/components/Team/TeamProfileCardTrigger.js

@@ -1,11 +1,12 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import React, { Suspense } from 'react';
-import { FormattedMessage } from 'react-intl-next';
+import { FormattedMessage, injectIntl } from 'react-intl-next';
 import { withAnalyticsEvents } from '@atlaskit/analytics-next';
 import { GiveKudosLauncherLazy, KudosType } from '@atlaskit/give-kudos';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Popup from '@atlaskit/popup';
+import { Box } from '@atlaskit/primitives';
 import { layers } from '@atlaskit/theme/constants';
 import filterActions from '../../internal/filterActions';
 import messages from '../../messages';
@@ -98,8 +99,23 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
         this.hideProfilecard(DELAY_MS_HIDE);
       }
     });
+    _defineProperty(this, "onKeyPress", event => {
+      if (event.key === 'Enter' || event.key === ' ') {
+        event.preventDefault();
+        this.setState({
+          isTriggeredByKeyboard: true
+        });
+        this.showProfilecard(0);
+        if (!this.state.visible) {
+          this.fireAnalytics(cardTriggered('team', 'click'));
+        }
+      }
+    });
     _defineProperty(this, "onClose", () => {
       this.hideProfilecard();
+      this.setState({
+        isTriggeredByKeyboard: false
+      });
     });
     _defineProperty(this, "openKudosDrawer", () => {
       this.hideProfilecard(DELAY_MS_HIDE);
@@ -140,7 +156,8 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
       data: null,
       shouldShowGiveKudos: false,
       teamCentralBaseUrl: undefined,
-      kudosDrawerOpen: false
+      kudosDrawerOpen: false,
+      isTriggeredByKeyboard: false
     });
     _defineProperty(this, "clientFetchProfile", () => {
       const {
@@ -208,7 +225,8 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
       }, /*#__PURE__*/React.createElement(TeamProfileCardLazy, _extends({}, newProps, {
         isLoading: isLoading,
         hasError: hasError,
-        errorType: error
+        errorType: error,
+        isTriggeredByKeyboard: this.state.isTriggeredByKeyboard
       }))));
     });
     _defineProperty(this, "renderKudosLauncher", () => {
@@ -230,11 +248,19 @@ export class TeamProfileCardTriggerInternal extends React.PureComponent {
     _defineProperty(this, "renderTrigger", triggerProps => {
       const {
         children,
+        intl,
         triggerLinkType,
         viewProfileLink
       } = this.props;
       if (triggerLinkType === 'none') {
-        return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderKudosLauncher(), /*#__PURE__*/React.createElement("span", _extends({
+        return /*#__PURE__*/React.createElement(React.Fragment, null, this.renderKudosLauncher(), fg('enable_team_profilecard_toggletip_a11y_fix') ? /*#__PURE__*/React.createElement(Box, _extends({
+          as: "span",
+          role: "button",
+          testId: "team-profilecard-trigger-wrapper",
+          tabIndex: 0,
+          "aria-label": intl.formatMessage(messages.teamProfileCardAriaLabel),
+          onKeyUp: this.onKeyPress
+        }, triggerProps, this.triggerListeners), children) : /*#__PURE__*/React.createElement("span", _extends({
           "data-testid": "team-profilecard-trigger-wrapper"
         }, triggerProps, this.triggerListeners), children));
       }
@@ -347,4 +373,4 @@ _defineProperty(TeamProfileCardTriggerInternal, "defaultProps", {
   triggerLinkType: 'link',
   shouldRenderToParent: true
 });
-export default withAnalyticsEvents()(TeamProfileCardTriggerInternal);
+export default withAnalyticsEvents()(injectIntl(TeamProfileCardTriggerInternal));

package/dist/es2019/components/team-profile-card/main.compiled.css

@@ -6,27 +6,26 @@
 ._1dqonqa1{border-style:solid}
 ._1h6dmuej{border-color:var(--ds-border,#091e4224)}._15a5nqa1{border-top-style:solid}
 ._18m915vq{overflow-y:hidden}
-._18u0utpp{margin-left:var(--ds-space-150,9pt)}
+._18u01ejb{margin-left:var(--ds-space-300,24px)}
+._19bv1ejb{padding-left:var(--ds-space-300,24px)}
 ._19pkpxbi{margin-top:var(--ds-space-200,1pc)}
-._19pkxy5q{margin-top:var(--ds-space-400,2pc)}
+._19pku2gc{margin-top:var(--ds-space-100,8px)}
 ._1bsb1osq{width:100%}
-._1bsb1w8u{width:80%}
 ._1bsb5x59{width:340px}
-._1bsbvbgk{width:4pc}
 ._1e0c1txw{display:flex}
 ._1i53muej{border-top-color:var(--ds-border,#091e4224)}
 ._1reo15vq{overflow-x:hidden}
 ._1ul95x59{min-width:340px}
-._2hwxutpp{margin-right:var(--ds-space-150,9pt)}
+._2hwx1ejb{margin-right:var(--ds-space-300,24px)}
 ._2lx21bp4{flex-direction:column}
 ._4cvr1h6o{align-items:center}
 ._4t3i1ul9{height:30px}
 ._4t3i1wug{height:auto}
-._4t3ivbgk{height:4pc}
+._4t3i53f4{height:75pt}
 ._5ral1dfr{object-fit:cover}
 ._bfhksm61{background-color:var(--ds-background-neutral-subtle,#00000000)}
-._c71l53f4{max-height:75pt}
 ._kqswstnw{position:absolute}
 ._otyrpxbi{margin-bottom:var(--ds-space-200,1pc)}
 ._s7n4jp4b{vertical-align:top}
+._u5f31ejb{padding-right:var(--ds-space-300,24px)}
 ._uwhke4h9{border-top-width:var(--ds-border-width,1px)}