@atlaskit/profilecard 23.4.0 → 23.4.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/profilecard
 
+## 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/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.1");
   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.1");
   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/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.1"
     }, 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.1");
   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.1");
   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/messages.js

@@ -150,6 +150,11 @@ const messages = 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/es2019/util/analytics.js

@@ -32,7 +32,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "23.4.0",
+    packageVersion: "23.4.1",
     ...attributes,
     firedAt: Math.round(getPageTime())
   }

package/dist/esm/client/getOrgIdForCloudIdFromAGG.js

@@ -4,7 +4,7 @@ import { AGGQuery } from './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.1");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -57,7 +57,7 @@ export var 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.1");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

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

@@ -6,6 +6,7 @@ function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbol
 function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { _defineProperty(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
 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';
@@ -51,7 +52,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 = useIntl(),
     formatMessage = _useIntl.formatMessage;
   var count = members ? members.length : 0;
@@ -60,6 +62,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 = useRef(false);
+  var avatarRef = 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 = useCallback(function () {
     var isOpen = isMoreMembersOpen.current;
     if (!isOpen) {
@@ -83,7 +93,34 @@ var TeamMembers = function TeamMembers(_ref) {
     values: {
       count: 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(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.createElement(Avatar, _extends({
+            ref: ref
+          }, props, {
+            testId: "first-member"
+          })) : /*#__PURE__*/React.createElement(Component, props);
+        }
+      }
+    }
+  }) : /*#__PURE__*/React.createElement(AvatarGroup, {
     appearance: "stack",
     data: members.map(function (member, index) {
       var href = generateUserLink === null || generateUserLink === void 0 ? void 0 : generateUserLink(member.id);
@@ -238,7 +275,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.createElement(FormattedMessage, messages.teamViewProfile),
     link: viewProfileLink,
@@ -274,7 +312,8 @@ var TeamProfilecardContent = function TeamProfilecardContent(_ref5) {
     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/esm/components/Team/TeamProfileCardTrigger.js

@@ -9,11 +9,12 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 function _callSuper(t, o, e) { return o = _getPrototypeOf(o), _possibleConstructorReturn(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], _getPrototypeOf(t).constructor) : o.apply(t, e)); }
 function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.call(Reflect.construct(Boolean, [], function () {})); } catch (t) {} return (_isNativeReflectConstruct = function _isNativeReflectConstruct() { return !!t; })(); }
 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';
@@ -113,8 +114,23 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
         _this.hideProfilecard(DELAY_MS_HIDE);
       }
     });
+    _defineProperty(_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(cardTriggered('team', 'click'));
+        }
+      }
+    });
     _defineProperty(_this, "onClose", function () {
       _this.hideProfilecard();
+      _this.setState({
+        isTriggeredByKeyboard: false
+      });
     });
     _defineProperty(_this, "openKudosDrawer", function () {
       _this.hideProfilecard(DELAY_MS_HIDE);
@@ -155,7 +171,8 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       data: null,
       shouldShowGiveKudos: false,
       teamCentralBaseUrl: undefined,
-      kudosDrawerOpen: false
+      kudosDrawerOpen: false,
+      isTriggeredByKeyboard: false
     });
     _defineProperty(_this, "clientFetchProfile", function () {
       var _this$props = _this.props,
@@ -225,7 +242,8 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
       }, /*#__PURE__*/React.createElement(TeamProfileCardLazy, _extends({}, newProps, {
         isLoading: isLoading,
         hasError: hasError,
-        errorType: error
+        errorType: error,
+        isTriggeredByKeyboard: _this.state.isTriggeredByKeyboard
       }))));
     });
     _defineProperty(_this, "renderKudosLauncher", function () {
@@ -247,10 +265,18 @@ export var TeamProfileCardTriggerInternal = /*#__PURE__*/function (_React$PureCo
     _defineProperty(_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.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));
       }
@@ -383,4 +409,4 @@ _defineProperty(TeamProfileCardTriggerInternal, "defaultProps", {
   triggerLinkType: 'link',
   shouldRenderToParent: true
 });
-export default withAnalyticsEvents()(TeamProfileCardTriggerInternal);
+export default withAnalyticsEvents()(injectIntl(TeamProfileCardTriggerInternal));

package/dist/esm/messages.js

@@ -150,6 +150,11 @@ var messages = 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/esm/util/analytics.js

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

package/dist/types/components/Team/TeamProfileCardTrigger.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { type WrappedComponentProps } from 'react-intl-next';
 import { type AnalyticsEventPayload } from '@atlaskit/analytics-next';
 import { type TriggerProps } from '@atlaskit/popup/types';
 import type { AnalyticsFromDuration, AnalyticsProps, ProfileCardAction, Team, TeamProfileCardTriggerProps, TeamProfileCardTriggerState } from '../../types';
-export declare class TeamProfileCardTriggerInternal extends React.PureComponent<TeamProfileCardTriggerProps & AnalyticsProps, TeamProfileCardTriggerState> {
+export declare class TeamProfileCardTriggerInternal extends React.PureComponent<TeamProfileCardTriggerProps & AnalyticsProps & WrappedComponentProps, TeamProfileCardTriggerState> {
     static defaultProps: Partial<TeamProfileCardTriggerProps>;
     _isMounted: boolean;
     showTimer: number;
@@ -16,6 +17,7 @@ export declare class TeamProfileCardTriggerInternal extends React.PureComponent<
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
     onMouseEnter: () => void;
     onMouseLeave: () => void;
+    onKeyPress: (event: React.KeyboardEvent) => void;
     onClose: () => void;
     openKudosDrawer: () => void;
     closeKudosDrawer: () => void;
@@ -46,22 +48,7 @@ export declare class TeamProfileCardTriggerInternal extends React.PureComponent<
     renderPopup(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
     render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<TeamProfileCardTriggerProps & AnalyticsProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & {
-    cloudId?: string | undefined;
-    orgId?: string | undefined;
-    teamId?: string | undefined;
-    resourceClient?: import("../../types").ProfileClient | undefined;
-    actions?: ProfileCardAction[] | undefined;
-    position?: import("../../types").ProfilecardTriggerPosition | undefined;
-    trigger?: "hover" | "click" | "hover-click" | undefined;
-    children?: React.ReactNode;
-    addFlag?: ((flag: any) => void) | undefined;
-    viewingUserId?: string | undefined;
-    generateUserLink?: ((userId: string) => string) | undefined;
-    onUserClick?: ((userId: string, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-    viewProfileLink?: string | undefined;
-    viewProfileOnClick?: ((event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
-    shouldRenderToParent?: boolean | undefined;
-    triggerLinkType?: "link" | "none" | "clickable-link" | undefined;
-} & {} & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<TeamProfileCardTriggerProps & AnalyticsProps & WrappedComponentProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export default _default;

package/dist/types/messages.d.ts

@@ -149,6 +149,11 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    teamProfileCardAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     giveKudosButton: {
         id: string;
         defaultMessage: string;

package/dist/types/types.d.ts

@@ -203,6 +203,7 @@ export interface TeamProfileCardTriggerState {
     shouldShowGiveKudos?: boolean;
     teamCentralBaseUrl?: string;
     kudosDrawerOpen: boolean;
+    isTriggeredByKeyboard?: boolean;
 }
 export interface TeamProfilecardCoreProps {
     /**
@@ -252,10 +253,10 @@ export interface TeamProfileCardTriggerProps extends TeamProfilecardCoreProps {
     /** The id of the team. */
     teamId: string;
     /**
-    The id of the organization that the team belongs to.
-    Currently this is unused, but will become necessary in the future.
+    Optional orgId. The id of the organization that the team belongs to.
+        Not in use.
    */
-    orgId: string;
+    orgId?: string;
     /** An instance of ProfileClient. */
     resourceClient: ProfileClient;
     /**
@@ -299,6 +300,11 @@ export interface TeamProfileCardTriggerProps extends TeamProfilecardCoreProps {
 
     Look at the example on "Trigger Link Types" for more in-depth analysis, or
     ask in #help-people-and-teams-xpc on Slack for our recommendations.
+
+        @deprecated
+        Consumers should always pass it as "none" from now on.
+        Consumers should be responsible to implement wrapper of our profilecard trigger, for example a link
+        We are keeping the original comments longer for existing exps
    */
     triggerLinkType?: 'none' | 'link' | 'clickable-link';
     /**
@@ -311,7 +317,7 @@ export interface TeamProfileCardTriggerProps extends TeamProfilecardCoreProps {
      */
     addFlag?: (flag: any) => void;
     /**
-     * Optional cloudId. Pass this if rendering card within a sited context.
+     * Mandatory cloudId. Used to fetch team.
      */
     cloudId?: string;
     /**
@@ -431,6 +437,8 @@ export interface TeamProfilecardProps extends TeamProfilecardCoreProps {
     clientFetchProfile?: () => void;
     /** Details relevant to passing around analytics. */
     analytics: AnalyticsFunction;
+    /** Set auto focus for actionable items */
+    isTriggeredByKeyboard?: boolean;
 }
 export interface MessageIntlProviderProps {
     children: React.ReactNode;

package/dist/types-ts4.5/components/Team/TeamProfileCardTrigger.d.ts

@@ -1,8 +1,9 @@
 import React from 'react';
+import { type WrappedComponentProps } from 'react-intl-next';
 import { type AnalyticsEventPayload } from '@atlaskit/analytics-next';
 import { type TriggerProps } from '@atlaskit/popup/types';
 import type { AnalyticsFromDuration, AnalyticsProps, ProfileCardAction, Team, TeamProfileCardTriggerProps, TeamProfileCardTriggerState } from '../../types';
-export declare class TeamProfileCardTriggerInternal extends React.PureComponent<TeamProfileCardTriggerProps & AnalyticsProps, TeamProfileCardTriggerState> {
+export declare class TeamProfileCardTriggerInternal extends React.PureComponent<TeamProfileCardTriggerProps & AnalyticsProps & WrappedComponentProps, TeamProfileCardTriggerState> {
     static defaultProps: Partial<TeamProfileCardTriggerProps>;
     _isMounted: boolean;
     showTimer: number;
@@ -16,6 +17,7 @@ export declare class TeamProfileCardTriggerInternal extends React.PureComponent<
     onClick: (event: React.MouseEvent<HTMLElement>) => void;
     onMouseEnter: () => void;
     onMouseLeave: () => void;
+    onKeyPress: (event: React.KeyboardEvent) => void;
     onClose: () => void;
     openKudosDrawer: () => void;
     closeKudosDrawer: () => void;
@@ -46,22 +48,7 @@ export declare class TeamProfileCardTriggerInternal extends React.PureComponent<
     renderPopup(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
     render(): string | number | boolean | Iterable<React.ReactNode> | React.JSX.Element | null | undefined;
 }
-declare const _default: React.ForwardRefExoticComponent<Pick<Omit<TeamProfileCardTriggerProps & AnalyticsProps, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps>, never> & {
-    cloudId?: string | undefined;
-    orgId?: string | undefined;
-    teamId?: string | undefined;
-    resourceClient?: import("../../types").ProfileClient | undefined;
-    actions?: ProfileCardAction[] | undefined;
-    position?: import("../../types").ProfilecardTriggerPosition | undefined;
-    trigger?: "hover" | "click" | "hover-click" | undefined;
-    children?: React.ReactNode;
-    addFlag?: ((flag: any) => void) | undefined;
-    viewingUserId?: string | undefined;
-    generateUserLink?: ((userId: string) => string) | undefined;
-    onUserClick?: ((userId: string, event: React.MouseEvent<Element, MouseEvent>) => void) | undefined;
-    viewProfileLink?: string | undefined;
-    viewProfileOnClick?: ((event?: React.MouseEvent<Element, MouseEvent> | undefined) => void) | undefined;
-    shouldRenderToParent?: boolean | undefined;
-    triggerLinkType?: "link" | "none" | "clickable-link" | undefined;
-} & {} & React.RefAttributes<any>>;
+declare const _default: React.ForwardRefExoticComponent<Omit<Omit<TeamProfileCardTriggerProps & AnalyticsProps & WrappedComponentProps, "intl"> & {
+    forwardedRef?: React.Ref<any> | undefined;
+}, keyof import("@atlaskit/analytics-next").WithAnalyticsEventsProps> & React.RefAttributes<any>>;
 export default _default;

package/dist/types-ts4.5/messages.d.ts

@@ -149,6 +149,11 @@ declare const messages: {
         defaultMessage: string;
         description: string;
     };
+    teamProfileCardAriaLabel: {
+        id: string;
+        defaultMessage: string;
+        description: string;
+    };
     giveKudosButton: {
         id: string;
         defaultMessage: string;

package/dist/types-ts4.5/types.d.ts

@@ -206,6 +206,7 @@ export interface TeamProfileCardTriggerState {
     shouldShowGiveKudos?: boolean;
     teamCentralBaseUrl?: string;
     kudosDrawerOpen: boolean;
+    isTriggeredByKeyboard?: boolean;
 }
 export interface TeamProfilecardCoreProps {
     /**
@@ -255,10 +256,10 @@ export interface TeamProfileCardTriggerProps extends TeamProfilecardCoreProps {
     /** The id of the team. */
     teamId: string;
     /**
-    The id of the organization that the team belongs to.
-    Currently this is unused, but will become necessary in the future.
+    Optional orgId. The id of the organization that the team belongs to.
+        Not in use.
    */
-    orgId: string;
+    orgId?: string;
     /** An instance of ProfileClient. */
     resourceClient: ProfileClient;
     /**
@@ -302,6 +303,11 @@ export interface TeamProfileCardTriggerProps extends TeamProfilecardCoreProps {
 
     Look at the example on "Trigger Link Types" for more in-depth analysis, or
     ask in #help-people-and-teams-xpc on Slack for our recommendations.
+
+        @deprecated
+        Consumers should always pass it as "none" from now on.
+        Consumers should be responsible to implement wrapper of our profilecard trigger, for example a link
+        We are keeping the original comments longer for existing exps
    */
     triggerLinkType?: 'none' | 'link' | 'clickable-link';
     /**
@@ -314,7 +320,7 @@ export interface TeamProfileCardTriggerProps extends TeamProfilecardCoreProps {
      */
     addFlag?: (flag: any) => void;
     /**
-     * Optional cloudId. Pass this if rendering card within a sited context.
+     * Mandatory cloudId. Used to fetch team.
      */
     cloudId?: string;
     /**
@@ -437,6 +443,8 @@ export interface TeamProfilecardProps extends TeamProfilecardCoreProps {
     clientFetchProfile?: () => void;
     /** Details relevant to passing around analytics. */
     analytics: AnalyticsFunction;
+    /** Set auto focus for actionable items */
+    isTriggeredByKeyboard?: boolean;
 }
 export interface MessageIntlProviderProps {
     children: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "23.4.0",
+	"version": "23.4.1",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -64,13 +64,13 @@
 		"@atlaskit/icon": "^25.0.0",
 		"@atlaskit/lozenge": "^12.2.0",
 		"@atlaskit/menu": "^3.1.0",
-		"@atlaskit/modal-dialog": "^13.1.0",
-		"@atlaskit/people-teams-ui-public": "^3.0.0",
+		"@atlaskit/modal-dialog": "^13.3.0",
+		"@atlaskit/people-teams-ui-public": "^3.1.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/popup": "^2.0.0",
-		"@atlaskit/primitives": "^14.1.0",
-		"@atlaskit/rovo-agent-components": "^2.2.0",
-		"@atlaskit/rovo-triggers": "^2.3.0",
+		"@atlaskit/primitives": "^14.2.0",
+		"@atlaskit/rovo-agent-components": "^2.3.0",
+		"@atlaskit/rovo-triggers": "^2.4.0",
 		"@atlaskit/spinner": "^18.0.0",
 		"@atlaskit/theme": "^18.0.0",
 		"@atlaskit/tokens": "^4.5.0",
@@ -153,6 +153,9 @@
 		},
 		"ptc_migrate_buttons": {
 			"type": "boolean"
+		},
+		"enable_team_profilecard_toggletip_a11y_fix": {
+			"type": "boolean"
 		}
 	},
 	"sideEffects": [