@atlaskit/profilecard 26.2.0 → 26.2.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/profilecard
 
+## 26.2.1
+
+### Patch Changes
+
+- [`88745c9ee6398`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/88745c9ee6398) -
+  A11Y-35182 Fix Give Kudos button incorrect ARIA role, it should renders as a <button> instead of
+  an <a>
+
 ## 26.2.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', "26.1.7");
+  headers.append('atl-client-version', "26.2.0");
   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', "26.1.7");
+  headers.append('atl-client-version', "26.2.0");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/User/ProfileCard.js

@@ -13,6 +13,7 @@ var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/sli
 var _react = _interopRequireWildcard(require("react"));
 var _reactIntl = require("react-intl");
 var _avatar = _interopRequireDefault(require("@atlaskit/avatar"));
+var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _spinner = _interopRequireDefault(require("@atlaskit/spinner"));
 var _teamsAppInternalAnalytics = require("@atlaskit/teams-app-internal-analytics");
@@ -180,12 +181,30 @@ var Actions = function Actions(_ref) {
     testId: "profilecard-actions"
   }, regularActions.map(function (action, index) {
     var isKudos = action.id === GIVE_KUDOS_ACTION_ID;
+    if (isKudos && (0, _platformFeatureFlags.fg)('fix_give_kudos_btn_incorrect_role')) {
+      var kudosButton = /*#__PURE__*/_react.default.createElement(_new.default, {
+        appearance: "default",
+        key: action.id || index,
+        onClick: function onClick(event) {
+          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
+          }
+          return onActionClick(action, args, event, index);
+        },
+        autoFocus: index === 0 && isTriggeredUsingKeyboard && !isRenderedInPortal,
+        id: "action-button-".concat(action.id),
+        "aria-labelledby": "action-button-".concat(action.id, " profilecard-name-label")
+      }, action.label, /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null)));
+      return /*#__PURE__*/_react.default.createElement(_Card.AnimatedKudosButton, {
+        key: "profile-card-action-kudos_".concat(action.id || index)
+      }, kudosButton);
+    }
     var button = /*#__PURE__*/_react.default.createElement(_teamsLinkButton.TeamsLinkButton, {
       appearance: "default",
       key: action.id || index,
       onClick: function onClick(event) {
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
+        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          args[_key2 - 1] = arguments[_key2];
         }
         return onActionClick(action, args, event, index);
       },
@@ -195,6 +214,8 @@ var Actions = function Actions(_ref) {
       id: "action-button-".concat(action.id),
       "aria-labelledby": "action-button-".concat(action.id, " profilecard-name-label")
     }, action.label, isKudos && /*#__PURE__*/_react.default.createElement(_Card.AnimationWrapper, null, /*#__PURE__*/_react.default.createElement(_Card.KudosBlobAnimation, null)));
+
+    // TODO: Remove this once fix_give_kudos_btn_incorrect_role is fully rolled out
     if (isKudos) {
       return /*#__PURE__*/_react.default.createElement(_Card.AnimatedKudosButton, {
         key: "profile-card-action-kudos_".concat(action.id || index)

package/dist/cjs/util/analytics.js

@@ -12,7 +12,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) { (0, _defineProperty2.default)(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; }
 var PACKAGE_META_DATA = exports.PACKAGE_META_DATA = {
   packageName: (_process$env$_PACKAGE = "@atlaskit/profilecard") !== null && _process$env$_PACKAGE !== void 0 ? _process$env$_PACKAGE : '',
-  packageVersion: (_process$env$_PACKAGE2 = "26.1.7") !== null && _process$env$_PACKAGE2 !== void 0 ? _process$env$_PACKAGE2 : ''
+  packageVersion: (_process$env$_PACKAGE2 = "26.2.0") !== null && _process$env$_PACKAGE2 !== void 0 ? _process$env$_PACKAGE2 : ''
 };
 var TEAM_SUBJECT = 'teamProfileCard';
 var USER_SUBJECT = 'profilecard';
@@ -31,7 +31,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "26.1.7"
+      packageVersion: "26.2.0"
     }, 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', "26.1.7");
+  headers.append('atl-client-version', "26.2.0");
   return headers;
 };
 export async function getOrgIdForCloudIdFromAGG(url, cloudId) {

package/dist/es2019/client/getTeamFromAGG.js

@@ -78,7 +78,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', "26.1.7");
+  headers.append('atl-client-version', "26.2.0");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/User/ProfileCard.js

@@ -2,6 +2,7 @@ import _extends from "@babel/runtime/helpers/extends";
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import Avatar from '@atlaskit/avatar';
+import Button from '@atlaskit/button/new';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
@@ -165,6 +166,19 @@ const Actions = ({
     testId: "profilecard-actions"
   }, regularActions.map((action, index) => {
     const isKudos = action.id === GIVE_KUDOS_ACTION_ID;
+    if (isKudos && fg('fix_give_kudos_btn_incorrect_role')) {
+      const kudosButton = /*#__PURE__*/React.createElement(Button, {
+        appearance: "default",
+        key: action.id || index,
+        onClick: (event, ...args) => onActionClick(action, args, event, index),
+        autoFocus: index === 0 && isTriggeredUsingKeyboard && !isRenderedInPortal,
+        id: `action-button-${action.id}`,
+        "aria-labelledby": `action-button-${action.id} profilecard-name-label`
+      }, action.label, /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null)));
+      return /*#__PURE__*/React.createElement(AnimatedKudosButton, {
+        key: `profile-card-action-kudos_${action.id || index}`
+      }, kudosButton);
+    }
     const button = /*#__PURE__*/React.createElement(TeamsLinkButton, {
       appearance: "default",
       key: action.id || index,
@@ -175,6 +189,8 @@ const Actions = ({
       id: `action-button-${action.id}`,
       "aria-labelledby": `action-button-${action.id} profilecard-name-label`
     }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null)));
+
+    // TODO: Remove this once fix_give_kudos_btn_incorrect_role is fully rolled out
     if (isKudos) {
       return /*#__PURE__*/React.createElement(AnimatedKudosButton, {
         key: `profile-card-action-kudos_${action.id || index}`

package/dist/es2019/util/analytics.js

@@ -2,7 +2,7 @@ var _process$env$_PACKAGE, _process$env$_PACKAGE2;
 import { getPageTime } from './performance';
 export const PACKAGE_META_DATA = {
   packageName: (_process$env$_PACKAGE = "@atlaskit/profilecard") !== null && _process$env$_PACKAGE !== void 0 ? _process$env$_PACKAGE : '',
-  packageVersion: (_process$env$_PACKAGE2 = "26.1.7") !== null && _process$env$_PACKAGE2 !== void 0 ? _process$env$_PACKAGE2 : ''
+  packageVersion: (_process$env$_PACKAGE2 = "26.2.0") !== null && _process$env$_PACKAGE2 !== void 0 ? _process$env$_PACKAGE2 : ''
 };
 const TEAM_SUBJECT = 'teamProfileCard';
 const USER_SUBJECT = 'profilecard';
@@ -19,7 +19,7 @@ const createEvent = (eventType, action, actionSubject, actionSubjectId, attribut
   actionSubjectId,
   attributes: {
     packageName: "@atlaskit/profilecard",
-    packageVersion: "26.1.7",
+    packageVersion: "26.2.0",
     ...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', "26.1.7");
+  headers.append('atl-client-version', "26.2.0");
   return headers;
 };
 export function getOrgIdForCloudIdFromAGG(_x, _x2) {

package/dist/esm/client/getTeamFromAGG.js

@@ -59,7 +59,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', "26.1.7");
+  headers.append('atl-client-version', "26.2.0");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/components/User/ProfileCard.js

@@ -7,6 +7,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { FormattedMessage, useIntl } from 'react-intl';
 import Avatar from '@atlaskit/avatar';
+import Button from '@atlaskit/button/new';
 import { fg } from '@atlaskit/platform-feature-flags';
 import Spinner from '@atlaskit/spinner';
 import { useAnalyticsEvents } from '@atlaskit/teams-app-internal-analytics';
@@ -171,12 +172,30 @@ var Actions = function Actions(_ref) {
     testId: "profilecard-actions"
   }, regularActions.map(function (action, index) {
     var isKudos = action.id === GIVE_KUDOS_ACTION_ID;
+    if (isKudos && fg('fix_give_kudos_btn_incorrect_role')) {
+      var kudosButton = /*#__PURE__*/React.createElement(Button, {
+        appearance: "default",
+        key: action.id || index,
+        onClick: function onClick(event) {
+          for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
+            args[_key - 1] = arguments[_key];
+          }
+          return onActionClick(action, args, event, index);
+        },
+        autoFocus: index === 0 && isTriggeredUsingKeyboard && !isRenderedInPortal,
+        id: "action-button-".concat(action.id),
+        "aria-labelledby": "action-button-".concat(action.id, " profilecard-name-label")
+      }, action.label, /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null)));
+      return /*#__PURE__*/React.createElement(AnimatedKudosButton, {
+        key: "profile-card-action-kudos_".concat(action.id || index)
+      }, kudosButton);
+    }
     var button = /*#__PURE__*/React.createElement(TeamsLinkButton, {
       appearance: "default",
       key: action.id || index,
       onClick: function onClick(event) {
-        for (var _len = arguments.length, args = new Array(_len > 1 ? _len - 1 : 0), _key = 1; _key < _len; _key++) {
-          args[_key - 1] = arguments[_key];
+        for (var _len2 = arguments.length, args = new Array(_len2 > 1 ? _len2 - 1 : 0), _key2 = 1; _key2 < _len2; _key2++) {
+          args[_key2 - 1] = arguments[_key2];
         }
         return onActionClick(action, args, event, index);
       },
@@ -186,6 +205,8 @@ var Actions = function Actions(_ref) {
       id: "action-button-".concat(action.id),
       "aria-labelledby": "action-button-".concat(action.id, " profilecard-name-label")
     }, action.label, isKudos && /*#__PURE__*/React.createElement(AnimationWrapper, null, /*#__PURE__*/React.createElement(KudosBlobAnimation, null)));
+
+    // TODO: Remove this once fix_give_kudos_btn_incorrect_role is fully rolled out
     if (isKudos) {
       return /*#__PURE__*/React.createElement(AnimatedKudosButton, {
         key: "profile-card-action-kudos_".concat(action.id || index)

package/dist/esm/util/analytics.js

@@ -5,7 +5,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
 import { getPageTime } from './performance';
 export var PACKAGE_META_DATA = {
   packageName: (_process$env$_PACKAGE = "@atlaskit/profilecard") !== null && _process$env$_PACKAGE !== void 0 ? _process$env$_PACKAGE : '',
-  packageVersion: (_process$env$_PACKAGE2 = "26.1.7") !== null && _process$env$_PACKAGE2 !== void 0 ? _process$env$_PACKAGE2 : ''
+  packageVersion: (_process$env$_PACKAGE2 = "26.2.0") !== null && _process$env$_PACKAGE2 !== void 0 ? _process$env$_PACKAGE2 : ''
 };
 var TEAM_SUBJECT = 'teamProfileCard';
 var USER_SUBJECT = 'profilecard';
@@ -24,7 +24,7 @@ var createEvent = function createEvent(eventType, action, actionSubject, actionS
     actionSubjectId: actionSubjectId,
     attributes: _objectSpread(_objectSpread({
       packageName: "@atlaskit/profilecard",
-      packageVersion: "26.1.7"
+      packageVersion: "26.2.0"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "26.2.0",
+	"version": "26.2.1",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -181,6 +181,9 @@
 		"teams_app_react_19_upgrade": {
 			"type": "boolean"
 		},
+		"fix_give_kudos_btn_incorrect_role": {
+			"type": "boolean"
+		},
 		"create_modernization_ga_fixes_drop_2": {
 			"type": "boolean"
 		},