@atlaskit/profilecard 26.17.0 → 26.17.2

package/CHANGELOG.md

@@ -1,5 +1,19 @@
 # @atlaskit/profilecard
 
+## 26.17.2
+
+### Patch Changes
+
+- [`f89e6f648b1fc`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/f89e6f648b1fc) -
+  Improve profile card accessibility
+- Updated dependencies
+
+## 26.17.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 26.17.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.16.4");
+  headers.append('atl-client-version', "26.17.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', "26.16.4");
+  headers.append('atl-client-version', "26.17.1");
   return headers;
 };
 function getTeamFromAGG(_x, _x2, _x3) {

package/dist/cjs/components/Icon/IconLabel.js

@@ -44,9 +44,13 @@ var IconLabel = exports.default = /*#__PURE__*/function (_React$PureComponent) {
         label: "".concat(this.props.icon),
         color: "var(--ds-text-subtlest, #6B6E76)"
       }) : null;
+      var label = /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelIcon, null, displayIcon), /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelText, null, this.props.children));
+      if (this.props.isDescriptionListItem) {
+        return label;
+      }
       return /*#__PURE__*/_react.default.createElement(_Card.DetailsLabel, {
         extraTopSpace: this.props.extraTopSpace
-      }, /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelIcon, null, displayIcon), /*#__PURE__*/_react.default.createElement(_Card.DetailsLabelText, null, this.props.children));
+      }, label);
     }
   }]);
 }(_react.default.PureComponent);

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

@@ -15,6 +15,7 @@ var _react = _interopRequireWildcard(require("react"));
 var _react2 = require("@compiled/react");
 var _reactIntl = require("react-intl");
 var _lozenge = _interopRequireDefault(require("@atlaskit/lozenge/lozenge"));
+var _fg = require("@atlaskit/platform-feature-flags/fg");
 var _compiled = require("@atlaskit/primitives/compiled");
 var _expValEquals = require("@atlaskit/tmp-editor-statsig/exp-val-equals");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
@@ -155,16 +156,21 @@ var ProfileCardDetails = exports.ProfileCardDetails = function ProfileCardDetail
   return /*#__PURE__*/_react.default.createElement(_Card.DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard), meta && /*#__PURE__*/_react.default.createElement(_Card.JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/_react.default.createElement(_compiled.Box, {
     paddingBlockStart: "space.150"
   }, lozenges) : lozenges, /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    as: (0, _fg.fg)('ptc-a11y-42024-profilecard-details-list') ? 'dl' : 'div',
     xcss: styles.detailedListWrapperNext
   }, /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
     icon: "email",
-    extraTopSpace: true
+    extraTopSpace: true,
+    isDescriptionListItem: (0, _fg.fg)('ptc-a11y-42024-profilecard-details-list')
   }, props.email), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
-    icon: "time"
+    icon: "time",
+    isDescriptionListItem: (0, _fg.fg)('ptc-a11y-42024-profilecard-details-list')
   }, props.timestring), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
-    icon: "companyName"
+    icon: "companyName",
+    isDescriptionListItem: (0, _fg.fg)('ptc-a11y-42024-profilecard-details-list')
   }, props.companyName), /*#__PURE__*/_react.default.createElement(_Icon.IconLabel, {
-    icon: "location"
+    icon: "location",
+    isDescriptionListItem: (0, _fg.fg)('ptc-a11y-42024-profilecard-details-list')
   }, props.location)), /*#__PURE__*/_react.default.createElement(_ReportingLinesDetails.default, {
     reportingLines: props.reportingLines,
     reportingLinesProfileUrl: props.reportingLinesProfileUrl,

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.16.4") !== null && _process$env$_PACKAGE2 !== void 0 ? _process$env$_PACKAGE2 : ''
+  packageVersion: (_process$env$_PACKAGE2 = "26.17.1") !== 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.16.4"
+      packageVersion: "26.17.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', "26.16.4");
+  headers.append('atl-client-version', "26.17.1");
   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.16.4");
+  headers.append('atl-client-version', "26.17.1");
   return headers;
 };
 export async function getTeamFromAGG(url, teamId, siteId) {

package/dist/es2019/components/Icon/IconLabel.js

@@ -23,9 +23,13 @@ export default class IconLabel extends React.PureComponent {
       label: `${this.props.icon}`,
       color: "var(--ds-text-subtlest, #6B6E76)"
     }) : null;
+    const label = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DetailsLabelIcon, null, displayIcon), /*#__PURE__*/React.createElement(DetailsLabelText, null, this.props.children));
+    if (this.props.isDescriptionListItem) {
+      return label;
+    }
     return /*#__PURE__*/React.createElement(DetailsLabel, {
       extraTopSpace: this.props.extraTopSpace
-    }, /*#__PURE__*/React.createElement(DetailsLabelIcon, null, displayIcon), /*#__PURE__*/React.createElement(DetailsLabelText, null, this.props.children));
+    }, label);
   }
 }
 _defineProperty(IconLabel, "defaultProps", {

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

@@ -6,6 +6,7 @@ import React, { useRef } from 'react';
 import { cx } from '@compiled/react';
 import { FormattedMessage } from 'react-intl';
 import Lozenge from '@atlaskit/lozenge/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box, Text } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
@@ -149,16 +150,21 @@ export const ProfileCardDetails = props => {
   return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/React.createElement(Box, {
     paddingBlockStart: "space.150"
   }, lozenges) : lozenges, /*#__PURE__*/React.createElement(Box, {
+    as: fg('ptc-a11y-42024-profilecard-details-list') ? 'dl' : 'div',
     xcss: styles.detailedListWrapperNext
   }, /*#__PURE__*/React.createElement(IconLabel, {
     icon: "email",
-    extraTopSpace: true
+    extraTopSpace: true,
+    isDescriptionListItem: fg('ptc-a11y-42024-profilecard-details-list')
   }, props.email), /*#__PURE__*/React.createElement(IconLabel, {
-    icon: "time"
+    icon: "time",
+    isDescriptionListItem: fg('ptc-a11y-42024-profilecard-details-list')
   }, props.timestring), /*#__PURE__*/React.createElement(IconLabel, {
-    icon: "companyName"
+    icon: "companyName",
+    isDescriptionListItem: fg('ptc-a11y-42024-profilecard-details-list')
   }, props.companyName), /*#__PURE__*/React.createElement(IconLabel, {
-    icon: "location"
+    icon: "location",
+    isDescriptionListItem: fg('ptc-a11y-42024-profilecard-details-list')
   }, props.location)), /*#__PURE__*/React.createElement(ReportingLinesDetails, {
     reportingLines: props.reportingLines,
     reportingLinesProfileUrl: props.reportingLinesProfileUrl,

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.16.4") !== null && _process$env$_PACKAGE2 !== void 0 ? _process$env$_PACKAGE2 : ''
+  packageVersion: (_process$env$_PACKAGE2 = "26.17.1") !== 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.16.4",
+    packageVersion: "26.17.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', "26.16.4");
+  headers.append('atl-client-version', "26.17.1");
   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.16.4");
+  headers.append('atl-client-version', "26.17.1");
   return headers;
 };
 export function getTeamFromAGG(_x, _x2, _x3) {

package/dist/esm/components/Icon/IconLabel.js

@@ -37,9 +37,13 @@ var IconLabel = /*#__PURE__*/function (_React$PureComponent) {
         label: "".concat(this.props.icon),
         color: "var(--ds-text-subtlest, #6B6E76)"
       }) : null;
+      var label = /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DetailsLabelIcon, null, displayIcon), /*#__PURE__*/React.createElement(DetailsLabelText, null, this.props.children));
+      if (this.props.isDescriptionListItem) {
+        return label;
+      }
       return /*#__PURE__*/React.createElement(DetailsLabel, {
         extraTopSpace: this.props.extraTopSpace
-      }, /*#__PURE__*/React.createElement(DetailsLabelIcon, null, displayIcon), /*#__PURE__*/React.createElement(DetailsLabelText, null, this.props.children));
+      }, label);
     }
   }]);
 }(React.PureComponent);

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

@@ -8,6 +8,7 @@ import React, { useRef } from 'react';
 import { cx } from '@compiled/react';
 import { FormattedMessage } from 'react-intl';
 import Lozenge from '@atlaskit/lozenge/lozenge';
+import { fg } from '@atlaskit/platform-feature-flags/fg';
 import { Box, Text } from '@atlaskit/primitives/compiled';
 import { expValEquals } from '@atlaskit/tmp-editor-statsig/exp-val-equals';
 import Tooltip from '@atlaskit/tooltip';
@@ -146,16 +147,21 @@ export var ProfileCardDetails = function ProfileCardDetails(props) {
   return /*#__PURE__*/React.createElement(DetailsGroup, null, renderName(props.nickname, props.fullName, meta, nameRef, isRenderedInPortal, isTriggeredUsingKeyboard), meta && /*#__PURE__*/React.createElement(JobTitleLabel, null, meta), meta && props.customLozenges && props.customLozenges.length > 0 ? /*#__PURE__*/React.createElement(Box, {
     paddingBlockStart: "space.150"
   }, lozenges) : lozenges, /*#__PURE__*/React.createElement(Box, {
+    as: fg('ptc-a11y-42024-profilecard-details-list') ? 'dl' : 'div',
     xcss: styles.detailedListWrapperNext
   }, /*#__PURE__*/React.createElement(IconLabel, {
     icon: "email",
-    extraTopSpace: true
+    extraTopSpace: true,
+    isDescriptionListItem: fg('ptc-a11y-42024-profilecard-details-list')
   }, props.email), /*#__PURE__*/React.createElement(IconLabel, {
-    icon: "time"
+    icon: "time",
+    isDescriptionListItem: fg('ptc-a11y-42024-profilecard-details-list')
   }, props.timestring), /*#__PURE__*/React.createElement(IconLabel, {
-    icon: "companyName"
+    icon: "companyName",
+    isDescriptionListItem: fg('ptc-a11y-42024-profilecard-details-list')
   }, props.companyName), /*#__PURE__*/React.createElement(IconLabel, {
-    icon: "location"
+    icon: "location",
+    isDescriptionListItem: fg('ptc-a11y-42024-profilecard-details-list')
   }, props.location)), /*#__PURE__*/React.createElement(ReportingLinesDetails, {
     reportingLines: props.reportingLines,
     reportingLinesProfileUrl: props.reportingLinesProfileUrl,

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.16.4") !== null && _process$env$_PACKAGE2 !== void 0 ? _process$env$_PACKAGE2 : ''
+  packageVersion: (_process$env$_PACKAGE2 = "26.17.1") !== 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.16.4"
+      packageVersion: "26.17.1"
     }, attributes), {}, {
       firedAt: Math.round(getPageTime())
     })

package/dist/types/components/Icon/IconLabel.d.ts

@@ -3,6 +3,7 @@ type Props = {
     icon: string;
     children?: React.ReactNode;
     extraTopSpace?: boolean;
+    isDescriptionListItem?: boolean;
 };
 export default class IconLabel extends React.PureComponent<Props> {
     static defaultProps: {

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/profilecard",
-	"version": "26.17.0",
+	"version": "26.17.2",
 	"description": "A React component to display a card with user information.",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -47,7 +47,7 @@
 		"@atlaskit/dropdown-menu": "^18.0.0",
 		"@atlaskit/empty-state": "^12.0.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
-		"@atlaskit/give-kudos": "^6.12.0",
+		"@atlaskit/give-kudos": "^6.13.0",
 		"@atlaskit/heading": "^7.0.0",
 		"@atlaskit/icon": "^37.3.0",
 		"@atlaskit/link": "5.0.0",
@@ -60,7 +60,7 @@
 		"@atlaskit/primitives": "^22.2.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/rovo-agent-components": "^8.3.0",
-		"@atlaskit/rovo-triggers": "^10.7.0",
+		"@atlaskit/rovo-triggers": "^10.11.0",
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/teams-app-config": "^2.2.0",
 		"@atlaskit/teams-app-internal-analytics": "^2.3.0",
@@ -68,11 +68,11 @@
 		"@atlaskit/teams-avatar": "^4.1.0",
 		"@atlaskit/teams-public": "^2.7.0",
 		"@atlaskit/theme": "^28.0.0",
-		"@atlaskit/tmp-editor-statsig": "^146.0.0",
-		"@atlaskit/tokens": "^16.6.0",
+		"@atlaskit/tmp-editor-statsig": "^147.0.0",
+		"@atlaskit/tokens": "^16.7.0",
 		"@atlaskit/tooltip": "^24.0.0",
 		"@babel/runtime": "^7.0.0",
-		"@compiled/react": "^1.0.0",
+		"@compiled/react": "^1.0.2",
 		"date-fns": "^2.17.0",
 		"date-fns-tz": "^2.0.0",
 		"graphql": "^15.8.0",
@@ -126,6 +126,9 @@
 		"manual-studio-entry-link": {
 			"type": "boolean"
 		},
+		"ptc-a11y-42024-profilecard-details-list": {
+			"type": "boolean"
+		},
 		"enable_ptc_townsquare_reporting_lines_unsharded": {
 			"type": "boolean"
 		},