@atlaskit/share 4.3.0 → 4.4.0

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/share
 
+## 4.4.0
+
+### Minor Changes
+
+- [`b5a13856081`](https://bitbucket.org/atlassian/atlassian-frontend/commits/b5a13856081) - [ux] Better accessibility support and copy for the Share dialog
+
+## 4.3.1
+
+### Patch Changes
+
+- [`6febf275a0a`](https://bitbucket.org/atlassian/atlassian-frontend/commits/6febf275a0a) - [ux] Rename Roadmap to Timeline in the shared success message for roadmap share content type
+
 ## 4.3.0
 
 ### Minor Changes

package/dist/cjs/components/CommentField.js

@@ -16,7 +16,8 @@ var CommentField = function CommentField(_ref) {
   var intl = (0, _reactIntlNext.useIntl)();
   return /*#__PURE__*/_react.default.createElement(_form.Field, {
     name: "comment",
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    label: intl.formatMessage(_i18n.messages.commentLabel)
   }, function (_ref2) {
     var fieldProps = _ref2.fieldProps;
     return /*#__PURE__*/_react.default.createElement(_textarea.default, (0, _extends2.default)({}, fieldProps, {

package/dist/cjs/components/ShareButton.js

@@ -9,9 +9,12 @@ var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends")
 var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 var _react = _interopRequireDefault(require("react"));
 var _customThemeButton = _interopRequireDefault(require("@atlaskit/button/custom-theme-button"));
-var _excluded = ["text"];
-var ShareButton = /*#__PURE__*/_react.default.forwardRef(function ShareButton(_ref, ref) {
+var _excluded = ["text", "aria-haspopup"];
+var ShareButton = /*#__PURE__*/_react.default.forwardRef(
+// Discard aria-haspopup
+function ShareButton(_ref, ref) {
   var text = _ref.text,
+    _ariaHasPopup = _ref['aria-haspopup'],
     props = (0, _objectWithoutProperties2.default)(_ref, _excluded);
   return /*#__PURE__*/_react.default.createElement(_customThemeButton.default, (0, _extends2.default)({
     ref: ref,

package/dist/cjs/components/UserPickerField.js

@@ -29,6 +29,9 @@ function _isNativeReflectConstruct() { if (typeof Reflect === "undefined" || !Re
 var REQUIRED = 'REQUIRED';
 exports.REQUIRED = REQUIRED;
 var DEBOUNCE_MS = 150;
+var USER_PICKER_FIELD_LABEL = 'share-user-picker-field-label';
+var USER_PICKER_FIELD_PLACEHOLDER = 'share-user-picker-field-placeholder';
+var USER_PICKER_ARIA_LABEL = "".concat(USER_PICKER_FIELD_LABEL, " ").concat(USER_PICKER_FIELD_PLACEHOLDER);
 var validate = function validate(value) {
   return value && value instanceof Array && value.length > 0 ? undefined : REQUIRED;
 };
@@ -54,34 +57,61 @@ var getPlaceHolderMessageDescriptor = function getPlaceHolderMessageDescriptor()
   var isBrowseUsersDisabled = arguments.length > 2 ? arguments[2] : undefined;
   if (!allowEmail) {
     var _placeholderMessage = {
-      jira: _i18n.messages.userPickerExistingUserOnlyPlaceholder,
-      confluence: _i18n.messages.userPickerGenericExistingUserOnlyPlaceholder
+      jira: _i18n.messages.userPickerPlaceholderEmailDisabledJira,
+      // We can use the same message as when emails are not disabled, since
+      // emails are not mentioned in this placeholder as it would be too long
+      confluence: _i18n.messages.userPickerPlaceholderConfluence
     };
     return _placeholderMessage[product];
   }
   if (isBrowseUsersDisabled) {
-    return _i18n.messages.userPickerGenericEmailOnlyPlaceholder;
+    return _i18n.messages.userPickerPlaceholderBrowseUsersDisabled;
   }
   var placeholderMessage = {
-    jira: _i18n.messages.userPickerGenericPlaceholderJira,
-    confluence: _i18n.messages.userPickerGenericPlaceholder
+    jira: _i18n.messages.userPickerPlaceholderJira,
+    confluence: _i18n.messages.userPickerPlaceholderConfluence
   };
   return placeholderMessage[product];
 };
-var requiredMessagesWithEmail = {
-  confluence: _i18n.messages.userPickerRequiredMessage,
-  jira: _i18n.messages.userPickerRequiredMessageJira
-};
-var requiredMessagesWithoutEmail = {
-  confluence: _i18n.messages.userPickerRequiredExistingUserOnlyMessage,
-  jira: _i18n.messages.userPickerRequiredExistingUserOnlyMessageJira
+var getLabelMessageDescriptor = function getLabelMessageDescriptor() {
+  var product = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'confluence';
+  var allowEmail = arguments.length > 1 ? arguments[1] : undefined;
+  var isBrowseUsersDisabled = arguments.length > 2 ? arguments[2] : undefined;
+  if (!allowEmail) {
+    var _labelMessage = {
+      jira: _i18n.messages.userPickerLabelEmailDisabledJira,
+      confluence: _i18n.messages.userPickerLabelEmailDisabledConfluence
+    };
+    return _labelMessage[product];
+  }
+  if (isBrowseUsersDisabled) {
+    return _i18n.messages.userPickerLabelBrowseUsersDisabled;
+  }
+  var labelMessage = {
+    jira: _i18n.messages.userPickerLabelJira,
+    confluence: _i18n.messages.userPickerLabelConfluence
+  };
+  return labelMessage[product];
 };
-var getRequiredMessage = function getRequiredMessage(product, allowEmail, isBrowseUsersDisabled) {
+var getRequiredMessage = function getRequiredMessage() {
+  var product = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : 'confluence';
+  var allowEmail = arguments.length > 1 ? arguments[1] : undefined;
+  var isBrowseUsersDisabled = arguments.length > 2 ? arguments[2] : undefined;
+  if (!allowEmail) {
+    var _requiredMessage = {
+      jira: _i18n.messages.userPickerRequiredMessageEmailDisabledJira,
+      confluence: _i18n.messages.userPickerRequiredMessageEmailDisabledConfluence
+    };
+    return _requiredMessage[product];
+  }
   if (isBrowseUsersDisabled) {
-    return _i18n.messages.userPickerRequiredMessageEmailOnly;
+    return _i18n.messages.userPickerRequiredMessageBrowseUsersDisabled;
   }
-  var emailMessages = allowEmail ? requiredMessagesWithEmail : requiredMessagesWithoutEmail;
-  return emailMessages[product];
+  var requiredMessage = {
+    jira: _i18n.messages.userPickerRequiredMessageJira,
+    confluence: _i18n.messages.userPickerRequiredMessageConfluence
+  };
+  return requiredMessage[product];
 };
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -160,7 +190,6 @@ var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
         loadOptions: this.loadOptions,
         isMulti: true,
         width: '100%',
-        placeholder: /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getPlaceHolderMessageDescriptor(product, allowEmail, isBrowseUsersDisabled)),
         allowEmail: allowEmail,
         noOptionsMessage: getNoOptionsMessage(isPublicLink, allowEmail),
         isLoading: isLoading,
@@ -171,10 +200,14 @@ var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
       var UserPickerComponent = enableSmartUserPicker && !isBrowseUsersDisabled ? _smartUserPicker.default : _userPicker.default;
       var menuPortalTarget = (0, _utils.getMenuPortalTargetCurrentHTML)(selectPortalRef);
       return /*#__PURE__*/_react.default.createElement(_form.Field, {
+        label: /*#__PURE__*/_react.default.createElement("span", {
+          id: USER_PICKER_FIELD_LABEL
+        }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getLabelMessageDescriptor(product, allowEmail, isBrowseUsersDisabled))),
         name: "users",
         validate: validate,
         defaultValue: defaultValue,
-        transform: this.handleUserPickerTransform
+        transform: this.handleUserPickerTransform,
+        isRequired: true
       }, function (_ref2) {
         var fieldProps = _ref2.fieldProps,
           fieldValidationError = _ref2.error,
@@ -183,7 +216,12 @@ var UserPickerFieldComponent = /*#__PURE__*/function (_React$Component) {
         var addMoreMessage = shareError !== null && shareError !== void 0 && shareError.errorCode ? null : intl.formatMessage(_i18n.messages.userPickerAddMoreMessage);
         var wasValidationOrShareError = !!fieldValidationError || !!shareError;
         return /*#__PURE__*/_react.default.createElement(_react.default.Fragment, null, /*#__PURE__*/_react.default.createElement(UserPickerComponent, (0, _extends2.default)({}, fieldProps, commonPickerProps, smartUserPickerProps, {
+          "aria-labelledby": USER_PICKER_ARIA_LABEL,
+          "aria-required": true,
           addMoreMessage: addMoreMessage,
+          placeholder: /*#__PURE__*/_react.default.createElement("span", {
+            id: USER_PICKER_FIELD_PLACEHOLDER
+          }, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, getPlaceHolderMessageDescriptor(product, allowEmail, isBrowseUsersDisabled))),
           menuPortalTarget: menuPortalTarget
         })), helperMessage && !wasValidationOrShareError && /*#__PURE__*/_react.default.createElement(_form.HelperMessage, null, helperMessage), !fieldValid && fieldValidationError === REQUIRED && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, /*#__PURE__*/_react.default.createElement(_reactIntlNext.FormattedMessage, requiredMessage)), shareError && shareError.errorCode && /*#__PURE__*/_react.default.createElement(_form.ErrorMessage, null, shareError.message, "\xA0", shareError.helpUrl && /*#__PURE__*/_react.default.createElement("a", {
           target: "_blank",

package/dist/cjs/components/analytics/analytics.js

@@ -13,7 +13,7 @@ var buildAttributes = function buildAttributes() {
   var attributes = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : {};
   return _objectSpread({
     packageName: "@atlaskit/share",
-    packageVersion: "4.3.0"
+    packageVersion: "4.4.0"
   }, attributes);
 };
 var createEvent = function createEvent(eventType, source, action, actionSubject, actionSubjectId) {

package/dist/cjs/i18n/en.js

@@ -18,7 +18,7 @@ var _default = {
   'fabric.elements.share.copypubliclink.button.text': 'Copy public link',
   'fabric.elements.share.failure.icon.label': 'Error icon',
   'fabric.elements.share.failure.message': 'Unable to share',
-  'fabric.elements.share.form.comment.placeholder': 'Add a message',
+  'fabric.elements.share.form.comment.placeholder': 'Anything they should know?',
   'fabric.elements.share.form.info.message.no.invite.confluence': 'Recipients will see the name of the page and your message',
   'fabric.elements.share.form.info.message.no.invite.jira': 'Recipients will see the name of the issue and your message',
   'fabric.elements.share.form.no-permissions': 'You do not have the ability to share.',

package/dist/cjs/i18n.js

@@ -41,36 +41,92 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'You do not have the ability to share.',
     description: 'Copy to show when a user can not share.'
   },
+  commentLabel: {
+    id: 'fabric.elements.share.form.comment.label',
+    defaultMessage: 'Message (optional)',
+    description: 'Label for the comment field in the Share form.'
+  },
   commentPlaceholder: {
     id: 'fabric.elements.share.form.comment.placeholder',
-    defaultMessage: 'Add a message',
+    defaultMessage: 'Anything they should know?',
     description: 'Placeholder for the comment field in Share form.'
   },
-  userPickerGenericPlaceholder: {
-    id: 'fabric.elements.share.form.user-picker.placeholder.generic',
-    defaultMessage: 'Enter name, group, team or email',
-    description: 'Generic placeholder for the user picker field in Share form.'
-  },
-  userPickerGenericExistingUserOnlyPlaceholder: {
-    id: 'fabric.elements.share.form.user-picker.placholder.generic.existingUserOnly',
-    defaultMessage: 'Enter name, group or team',
-    description: 'Existing user only placeholder for the user picker field in Share form (emails are not an option).'
-  },
-  userPickerGenericPlaceholderJira: {
+  // Email disabled (Jira)
+  userPickerLabelEmailDisabledJira: {
+    id: 'fabric.elements.share.form.user-picker.label.email-disabled-jira',
+    defaultMessage: 'Names or teams',
+    description: 'Label for the user picker field in the Share form in Jira with no email option.'
+  },
+  userPickerPlaceholderEmailDisabledJira: {
+    id: 'fabric.elements.share.form.user-picker.placeholder.email-disabled-jira',
+    defaultMessage: 'e.g. Maria, Team Orange',
+    description: 'Placeholder for the user picker field in the Share form in Jira with no email option. These examples should be localized.'
+  },
+  userPickerRequiredMessageEmailDisabledJira: {
+    id: 'fabric.elements.share.form.user-picker.validation.required-message.email-disabled-jira',
+    defaultMessage: 'Select at least one person or team',
+    description: 'Error message for the user picker field in the Share form in Jira with no email option, when no entries are selected.'
+  },
+  // Email disabled (Confluence)
+  userPickerLabelEmailDisabledConfluence: {
+    id: 'fabric.elements.share.form.user-picker.label.email-disabled-confluence',
+    defaultMessage: 'Names, teams, or groups',
+    description: 'Label for the user picker field in the Share form in Confluence with no email option.'
+  },
+  userPickerRequiredMessageEmailDisabledConfluence: {
+    id: 'fabric.elements.share.form.user-picker.validation.required-message.email-disabled-confluence',
+    defaultMessage: 'Select at least one person, team, or group',
+    description: 'Error message for the user picker field in the Share form in Confluence with no email option, when no entries are selected.'
+  },
+  // Browse users disabled
+  userPickerLabelBrowseUsersDisabled: {
+    id: 'fabric.elements.share.form.user-picker.label.email-only',
+    defaultMessage: 'Emails',
+    description: 'Label for the user picker field in the Share form when browse user permissions are disabled.'
+  },
+  userPickerPlaceholderBrowseUsersDisabled: {
+    id: 'fabric.elements.share.form.user-picker.placeholder.email-only',
+    defaultMessage: 'e.g. maria@company.com',
+    description: 'Placeholder for the user picker field in the Share form when browse user permissions are disabled. These examples should be localized.'
+  },
+  userPickerRequiredMessageBrowseUsersDisabled: {
+    id: 'fabric.elements.share.form.user-picker.validation.required-message.email-only',
+    defaultMessage: 'Select at least one email',
+    description: 'Error message for the user picker field in the Share form in when browse user permissions are disabled, when no entries are selected.'
+  },
+  // Generic (Jira)
+  userPickerLabelJira: {
+    id: 'fabric.elements.share.form.user-picker.label.jira',
+    defaultMessage: 'Names, teams, or emails',
+    description: 'Label for the user picker field in the Share form in Jira.'
+  },
+  userPickerPlaceholderJira: {
     id: 'fabric.elements.share.form.user-picker.placeholder.jira',
-    defaultMessage: 'Enter name, team or email',
-    description: 'Generic placeholder for the user picker field in Share form. ' + 'This message is used only for Jira product because Jira does not have Group concept.'
-  },
-  userPickerExistingUserOnlyPlaceholder: {
-    id: 'fabric.elements.share.form.user-picker.placeholder.existingUserOnly',
-    defaultMessage: 'Enter name or team',
-    description: 'Existing user only placeholder for the user picker field in Share form.'
-  },
-  userPickerGenericEmailOnlyPlaceholder: {
-    id: 'fabric.elements.share.form.user-picker.placeholder.emailOnly',
-    defaultMessage: 'Enter email',
-    description: 'Email only placeholder for the user picker field in Share form.'
+    defaultMessage: 'e.g. Maria, Team Orange, maria@company.com',
+    description: 'Placeholder for the user picker field in the Share form in Jira. These examples should be localized.'
   },
+  userPickerRequiredMessageJira: {
+    id: 'fabric.elements.share.form.user-picker.validation.required-message.jira',
+    defaultMessage: 'Select at least one person, team, or email',
+    description: 'Error message for the user picker field in the Share form in Jira, when no entries are selected.'
+  },
+  // Generic (Confluence)
+  userPickerLabelConfluence: {
+    id: 'fabric.elements.share.form.user-picker.label.confluence',
+    defaultMessage: 'Names, teams, groups, or emails',
+    description: 'Label for the user picker field in the Share form in Confluence.'
+  },
+  userPickerPlaceholderConfluence: {
+    id: 'fabric.elements.share.form.user-picker.placeholder.confluence',
+    defaultMessage: 'e.g. Maria, Team Orange, group-one',
+    description: 'Placeholder for the user picker field in the Share form in Confluence. These examples should be localized.'
+  },
+  userPickerRequiredMessageConfluence: {
+    id: 'fabric.elements.share.form.user-picker.validation.required-message.confluence',
+    defaultMessage: 'Select at least one person, team, group, or email',
+    description: 'Error message for the user picker field in the Share form in Confluence, when no entries are selected.'
+  },
+  // Common messages
   userPickerAddMoreMessage: {
     id: 'fabric.elements.share.form.user-picker.add-more',
     defaultMessage: 'Enter more',
@@ -81,26 +137,6 @@ var messages = (0, _reactIntlNext.defineMessages)({
     defaultMessage: 'Select at least one user, group, team or email.',
     description: 'Required error message for the user picker field in Share form.'
   },
-  userPickerRequiredMessageJira: {
-    id: 'fabric.elements.share.form.user-picker.validation.required.jira',
-    defaultMessage: 'Select at least one user, team or email.',
-    description: 'Required error message for the user picker field in Share form. ' + 'This message is used only for Jira product because Jira does not have Group concept.'
-  },
-  userPickerRequiredMessageEmailOnly: {
-    id: 'fabric.elements.share.form.user-picker.validation.required.email-only',
-    defaultMessage: 'Select at least one email.',
-    description: 'Required error message for the user picker field when email only enabled in Share form. ' + 'This message is used for both jira and confluence.'
-  },
-  userPickerRequiredExistingUserOnlyMessage: {
-    id: 'fabric.elements.share.form.user-picker.validation.required.existingUserOnly',
-    defaultMessage: 'Select at least one user, group or team.',
-    description: 'Required error message for the user picker field in Share form when email is not allowed.'
-  },
-  userPickerRequiredExistingUserOnlyMessageJira: {
-    id: 'fabric.elements.share.form.user-picker.validation.required.jira.existingUserOnly',
-    defaultMessage: 'Select at least one user or team.',
-    description: 'Required error message for the user picker field in Share form when email is not allowed. ' + 'This message is used only for Jira product because Jira does not have Group concept.'
-  },
   userPickerExistingUserOnlyNoOptionsMessage: {
     id: 'fabric.elements.share.form.user-picker.no-options.existingUserOnly',
     defaultMessage: "We couldn\u2019t find any results for \"{inputValue}\".",
@@ -170,7 +206,7 @@ var messages = (0, _reactIntlNext.defineMessages)({
     id: 'fabric.elements.share.success.message',
     defaultMessage: '{object, select,' + 'blogpost {Blog post shared}' + 'board {Board shared}' + 'calendar {Calendar shared}' + 'draft {Draft shared}' +
     // this is a placeholder for Invite to edit in Confluence
-    'filter {Filter shared}' + 'issue {Issue shared}' + 'summary {Summary shared}' + 'list {List shared}' + 'timeline {Timeline shared}' + 'form {Form shared}' + 'media {Media shared}' + 'page {Page shared}' + 'project {Project shared}' + 'pullrequest {Pull Request shared}' + 'question {Question shared}' + 'report {Report shared}' + 'repository {Repository shared}' + 'request {Request shared}' + 'roadmap {Roadmap shared}' + 'site {Site shared}' + 'space {Space shared}' + 'other {Link Shared}' + '}',
+    'filter {Filter shared}' + 'issue {Issue shared}' + 'summary {Summary shared}' + 'list {List shared}' + 'timeline {Timeline shared}' + 'form {Form shared}' + 'media {Media shared}' + 'page {Page shared}' + 'project {Project shared}' + 'pullrequest {Pull Request shared}' + 'question {Question shared}' + 'report {Report shared}' + 'repository {Repository shared}' + 'request {Request shared}' + 'roadmap {Timeline shared}' + 'site {Site shared}' + 'space {Space shared}' + 'other {Link Shared}' + '}',
     description: 'Default text for share success message displayed in a flag'
   },
   shareToIntegrationButtonText: {

package/dist/cjs/version.json

@@ -1,4 +1,4 @@
 {
 	"name": "@atlaskit/share",
-	"version": "4.3.0"
+	"version": "4.4.0"
 }

package/dist/es2019/components/CommentField.js

@@ -10,7 +10,8 @@ export const CommentField = ({
   const intl = useIntl();
   return /*#__PURE__*/React.createElement(Field, {
     name: "comment",
-    defaultValue: defaultValue
+    defaultValue: defaultValue,
+    label: intl.formatMessage(messages.commentLabel)
   }, ({
     fieldProps
   }) => /*#__PURE__*/React.createElement(TextArea, _extends({}, fieldProps, {

package/dist/es2019/components/ShareButton.js

@@ -1,8 +1,11 @@
 import _extends from "@babel/runtime/helpers/extends";
 import React from 'react';
 import Button from '@atlaskit/button/custom-theme-button';
-export const ShareButton = /*#__PURE__*/React.forwardRef(function ShareButton({
+export const ShareButton = /*#__PURE__*/React.forwardRef(
+// Discard aria-haspopup
+function ShareButton({
   text,
+  'aria-haspopup': _ariaHasPopup,
   ...props
 }, ref) {
   return /*#__PURE__*/React.createElement(Button, _extends({

package/dist/es2019/components/UserPickerField.js

@@ -10,6 +10,9 @@ import { MAX_PICKER_HEIGHT } from './styles';
 import { allowEmails, getMenuPortalTargetCurrentHTML } from './utils';
 export const REQUIRED = 'REQUIRED';
 const DEBOUNCE_MS = 150;
+const USER_PICKER_FIELD_LABEL = 'share-user-picker-field-label';
+const USER_PICKER_FIELD_PLACEHOLDER = 'share-user-picker-field-placeholder';
+const USER_PICKER_ARIA_LABEL = `${USER_PICKER_FIELD_LABEL} ${USER_PICKER_FIELD_PLACEHOLDER}`;
 const validate = value => {
   return value && value instanceof Array && value.length > 0 ? undefined : REQUIRED;
 };
@@ -29,34 +32,55 @@ const getNoOptionsMessage = (isPublicLink, allowEmail) => ({
 const getPlaceHolderMessageDescriptor = (product = 'confluence', allowEmail, isBrowseUsersDisabled) => {
   if (!allowEmail) {
     const placeholderMessage = {
-      jira: messages.userPickerExistingUserOnlyPlaceholder,
-      confluence: messages.userPickerGenericExistingUserOnlyPlaceholder
+      jira: messages.userPickerPlaceholderEmailDisabledJira,
+      // We can use the same message as when emails are not disabled, since
+      // emails are not mentioned in this placeholder as it would be too long
+      confluence: messages.userPickerPlaceholderConfluence
     };
     return placeholderMessage[product];
   }
   if (isBrowseUsersDisabled) {
-    return messages.userPickerGenericEmailOnlyPlaceholder;
+    return messages.userPickerPlaceholderBrowseUsersDisabled;
   }
   const placeholderMessage = {
-    jira: messages.userPickerGenericPlaceholderJira,
-    confluence: messages.userPickerGenericPlaceholder
+    jira: messages.userPickerPlaceholderJira,
+    confluence: messages.userPickerPlaceholderConfluence
   };
   return placeholderMessage[product];
 };
-const requiredMessagesWithEmail = {
-  confluence: messages.userPickerRequiredMessage,
-  jira: messages.userPickerRequiredMessageJira
-};
-const requiredMessagesWithoutEmail = {
-  confluence: messages.userPickerRequiredExistingUserOnlyMessage,
-  jira: messages.userPickerRequiredExistingUserOnlyMessageJira
+const getLabelMessageDescriptor = (product = 'confluence', allowEmail, isBrowseUsersDisabled) => {
+  if (!allowEmail) {
+    const labelMessage = {
+      jira: messages.userPickerLabelEmailDisabledJira,
+      confluence: messages.userPickerLabelEmailDisabledConfluence
+    };
+    return labelMessage[product];
+  }
+  if (isBrowseUsersDisabled) {
+    return messages.userPickerLabelBrowseUsersDisabled;
+  }
+  const labelMessage = {
+    jira: messages.userPickerLabelJira,
+    confluence: messages.userPickerLabelConfluence
+  };
+  return labelMessage[product];
 };
-const getRequiredMessage = (product, allowEmail, isBrowseUsersDisabled) => {
+const getRequiredMessage = (product = 'confluence', allowEmail, isBrowseUsersDisabled) => {
+  if (!allowEmail) {
+    const requiredMessage = {
+      jira: messages.userPickerRequiredMessageEmailDisabledJira,
+      confluence: messages.userPickerRequiredMessageEmailDisabledConfluence
+    };
+    return requiredMessage[product];
+  }
   if (isBrowseUsersDisabled) {
-    return messages.userPickerRequiredMessageEmailOnly;
+    return messages.userPickerRequiredMessageBrowseUsersDisabled;
   }
-  const emailMessages = allowEmail ? requiredMessagesWithEmail : requiredMessagesWithoutEmail;
-  return emailMessages[product];
+  const requiredMessage = {
+    jira: messages.userPickerRequiredMessageJira,
+    confluence: messages.userPickerRequiredMessageConfluence
+  };
+  return requiredMessage[product];
 };
 
 // eslint-disable-next-line @repo/internal/react/no-class-components
@@ -130,7 +154,6 @@ export class UserPickerFieldComponent extends React.Component {
       loadOptions: this.loadOptions,
       isMulti: true,
       width: '100%',
-      placeholder: /*#__PURE__*/React.createElement(FormattedMessage, getPlaceHolderMessageDescriptor(product, allowEmail, isBrowseUsersDisabled)),
       allowEmail,
       noOptionsMessage: getNoOptionsMessage(isPublicLink, allowEmail),
       isLoading,
@@ -141,10 +164,14 @@ export class UserPickerFieldComponent extends React.Component {
     const UserPickerComponent = enableSmartUserPicker && !isBrowseUsersDisabled ? SmartUserPicker : UserPicker;
     const menuPortalTarget = getMenuPortalTargetCurrentHTML(selectPortalRef);
     return /*#__PURE__*/React.createElement(Field, {
+      label: /*#__PURE__*/React.createElement("span", {
+        id: USER_PICKER_FIELD_LABEL
+      }, /*#__PURE__*/React.createElement(FormattedMessage, getLabelMessageDescriptor(product, allowEmail, isBrowseUsersDisabled))),
       name: "users",
       validate: validate,
       defaultValue: defaultValue,
-      transform: this.handleUserPickerTransform
+      transform: this.handleUserPickerTransform,
+      isRequired: true
     }, ({
       fieldProps,
       error: fieldValidationError,
@@ -156,7 +183,12 @@ export class UserPickerFieldComponent extends React.Component {
       const addMoreMessage = shareError !== null && shareError !== void 0 && shareError.errorCode ? null : intl.formatMessage(messages.userPickerAddMoreMessage);
       const wasValidationOrShareError = !!fieldValidationError || !!shareError;
       return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(UserPickerComponent, _extends({}, fieldProps, commonPickerProps, smartUserPickerProps, {
+        "aria-labelledby": USER_PICKER_ARIA_LABEL,
+        "aria-required": true,
         addMoreMessage: addMoreMessage,
+        placeholder: /*#__PURE__*/React.createElement("span", {
+          id: USER_PICKER_FIELD_PLACEHOLDER
+        }, /*#__PURE__*/React.createElement(FormattedMessage, getPlaceHolderMessageDescriptor(product, allowEmail, isBrowseUsersDisabled))),
         menuPortalTarget: menuPortalTarget
       })), helperMessage && !wasValidationOrShareError && /*#__PURE__*/React.createElement(HelperMessage, null, helperMessage), !fieldValid && fieldValidationError === REQUIRED && /*#__PURE__*/React.createElement(ErrorMessage, null, /*#__PURE__*/React.createElement(FormattedMessage, requiredMessage)), shareError && shareError.errorCode && /*#__PURE__*/React.createElement(ErrorMessage, null, shareError.message, "\xA0", shareError.helpUrl && /*#__PURE__*/React.createElement("a", {
         target: "_blank",

package/dist/es2019/components/analytics/analytics.js

@@ -1,7 +1,7 @@
 import { isEmail, isTeam, isUser } from '@atlaskit/smart-user-picker';
 const buildAttributes = (attributes = {}) => ({
   packageName: "@atlaskit/share",
-  packageVersion: "4.3.0",
+  packageVersion: "4.4.0",
   ...attributes
 });
 const createEvent = (eventType, source, action, actionSubject, actionSubjectId, attributes = {}) => ({

package/dist/es2019/i18n/en.js

@@ -12,7 +12,7 @@ export default {
   'fabric.elements.share.copypubliclink.button.text': 'Copy public link',
   'fabric.elements.share.failure.icon.label': 'Error icon',
   'fabric.elements.share.failure.message': 'Unable to share',
-  'fabric.elements.share.form.comment.placeholder': 'Add a message',
+  'fabric.elements.share.form.comment.placeholder': 'Anything they should know?',
   'fabric.elements.share.form.info.message.no.invite.confluence': 'Recipients will see the name of the page and your message',
   'fabric.elements.share.form.info.message.no.invite.jira': 'Recipients will see the name of the issue and your message',
   'fabric.elements.share.form.no-permissions': 'You do not have the ability to share.',