@atlaskit/user-picker 13.4.0 → 13.4.2

package/CHANGELOG.md

@@ -1,5 +1,22 @@
 # @atlaskit/user-picker
 
+## 13.4.2
+
+### Patch Changes
+
+- [`38ef9b4fcf137`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/38ef9b4fcf137) -
+  Behind gate `platform_user_picker_fix_redundant_labelledby`, stop promoting `aria-describedby` to
+  `aria-labelledby` on the user-picker input when an `aria-label` is present while still preserving
+  any explicit `aria-labelledby`, so screen readers announce the field's accessible name instead of
+  the description (A11Y-37267).
+- Updated dependencies
+
+## 13.4.1
+
+### Patch Changes
+
+- Updated dependencies
+
 ## 13.4.0
 
 ### Minor Changes

package/compass.yml

@@ -0,0 +1,38 @@
+configVersion: 1
+id: ari:cloud:compass:a436116f-02ce-4520-8fbb-7301462a1674:component/c5751cc6-3513-4070-9deb-af31e86aed34/29500385-dad1-418b-988e-f07bb60740e6
+name: '@atlaskit/user-picker'
+ownerId: ari:cloud:identity::team/8c518cea-39e4-4a9e-976b-2eec1db07eb2 # Search PlEx
+labels:
+  - platform-code
+  - platform-afm
+typeId: OTHER
+fields:
+  tier: 4
+  lifecycle: Active
+  isMonorepoProject: true
+links:
+  - name: Root Repository
+    type: REPOSITORY
+    url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master
+  - name: Slack Channel
+    type: CHAT_CHANNEL
+    url: https://atlassian.enterprise.slack.com/archives/CFG8QANL9 # #help-search-plex
+  - name: User Picker
+    type: REPOSITORY
+    url: https://bitbucket.org/atlassian/atlassian-frontend-monorepo/src/master/platform/packages/elements/user-picker
+customFields:
+  - name: Department
+    type: text
+    value: Eng - Search PLEX
+  - name: Technical Owner
+    type: user
+    value: ari:cloud:identity::user/712020:bc050a72-a59d-487f-8b54-73358ba67dd0 # David Lyon
+  - name: Required Reviewers Opt In
+    type: boolean
+    value: true
+  - name: Reviewer Selection Mechanism
+    type: text
+    value: random(2)
+  - name: Required Reviewer Approvals
+    type: number
+    value: 1

package/dist/cjs/analytics.js

@@ -15,7 +15,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; } // eslint-disable-next-line @typescript-eslint/consistent-type-imports
 // eslint-disable-next-line @atlaskit/platform/prefer-crypto-random-uuid -- Use crypto.randomUUID instead
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "13.3.0";
+var packageVersion = "13.4.1";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/cjs/components/Input.js

@@ -16,6 +16,7 @@ var _getPrototypeOf2 = _interopRequireDefault(require("@babel/runtime/helpers/ge
 var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = _interopRequireDefault(require("react"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _select = require("@atlaskit/select");
 function _callSuper(t, o, e) { return o = (0, _getPrototypeOf2.default)(o), (0, _possibleConstructorReturn2.default)(t, _isNativeReflectConstruct() ? Reflect.construct(o, e || [], (0, _getPrototypeOf2.default)(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; })(); }
@@ -55,9 +56,26 @@ var Input = exports.Input = /*#__PURE__*/function (_React$Component) {
      * Placeholder and Input are linked not via label, aria-label or aria-labeledby, but through aria-describedby.
      * Basically in the getter we reassign Placeholder ID from aria-describedby to aria-labelledby
      * {@link https://github.com/JedWatson/react-select/issues/5651#issue-1731353197 GitHub}
+     *
+     * This reassignment should only apply when the input has no other accessible name.
      */
     function get() {
       var _this$props$ariaLabe;
+      if ((0, _platformFeatureFlags.fg)('platform_user_picker_fix_redundant_labelledby')) {
+        // A11Y-37267: An explicit aria-labelledby is a deliberate association with a visible label
+        // element and is the field's true accessible name (WCAG 2.5.3 Label in Name), so it always
+        // wins. Otherwise we promote aria-describedby -> aria-labelledby to work around
+        // react-select's placeholder linkage bug, but skip that promotion when the input already
+        // has an accessible name via aria-label so the description is announced via
+        // aria-describedby instead.
+        if (this.props['aria-labelledby']) {
+          return this.props['aria-labelledby'];
+        }
+        if (this.props['aria-label']) {
+          return undefined;
+        }
+        return this.props['aria-describedby'];
+      }
       return (_this$props$ariaLabe = this.props['aria-labelledby']) !== null && _this$props$ariaLabe !== void 0 ? _this$props$ariaLabe : this.props['aria-describedby'];
     }
   }, {

package/dist/es2019/analytics.js

@@ -6,7 +6,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 const packageName = "@atlaskit/user-picker";
-const packageVersion = "13.3.0";
+const packageVersion = "13.4.1";
 const UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 const UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/es2019/components/Input.js

@@ -4,6 +4,7 @@ import _defineProperty from "@babel/runtime/helpers/defineProperty";
 import "./Input.compiled.css";
 import { ax, ix } from "@compiled/react/runtime";
 import React from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { components } from '@atlaskit/select';
 const inputStyles = {
   root: "_5ce61rpy _1ir3kb7n _h5gq1rpy"
@@ -31,9 +32,26 @@ export class Input extends React.Component {
    * Placeholder and Input are linked not via label, aria-label or aria-labeledby, but through aria-describedby.
    * Basically in the getter we reassign Placeholder ID from aria-describedby to aria-labelledby
    * {@link https://github.com/JedWatson/react-select/issues/5651#issue-1731353197 GitHub}
+   *
+   * This reassignment should only apply when the input has no other accessible name.
    */
   get ariaLabelledBy() {
     var _this$props$ariaLabe;
+    if (fg('platform_user_picker_fix_redundant_labelledby')) {
+      // A11Y-37267: An explicit aria-labelledby is a deliberate association with a visible label
+      // element and is the field's true accessible name (WCAG 2.5.3 Label in Name), so it always
+      // wins. Otherwise we promote aria-describedby -> aria-labelledby to work around
+      // react-select's placeholder linkage bug, but skip that promotion when the input already
+      // has an accessible name via aria-label so the description is announced via
+      // aria-describedby instead.
+      if (this.props['aria-labelledby']) {
+        return this.props['aria-labelledby'];
+      }
+      if (this.props['aria-label']) {
+        return undefined;
+      }
+      return this.props['aria-describedby'];
+    }
     return (_this$props$ariaLabe = this.props['aria-labelledby']) !== null && _this$props$ariaLabe !== void 0 ? _this$props$ariaLabe : this.props['aria-describedby'];
   }
   get ariaDescribedBy() {

package/dist/esm/analytics.js

@@ -9,7 +9,7 @@ import { fg } from '@atlaskit/platform-feature-flags';
 import { v4 as uuidv4 } from 'uuid';
 import { isCustom, isExternalUser } from './components/utils';
 var packageName = "@atlaskit/user-picker";
-var packageVersion = "13.3.0";
+var packageVersion = "13.4.1";
 var UUID_REGEXP_TEAMS_GROUPS = /^[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_OLD_AAID = /^[a-fA-F0-9]{1,8}:[a-fA-F0-9]{8}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{4}-[a-fA-F0-9]{12}$/;
 var UUID_REGEXP_NEW_AAID = /^[a-fA-F0-9]{24,24}$/;

package/dist/esm/components/Input.js

@@ -11,6 +11,7 @@ import { ax, ix } from "@compiled/react/runtime";
 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 from 'react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { components } from '@atlaskit/select';
 var inputStyles = {
   root: "_5ce61rpy _1ir3kb7n _h5gq1rpy"
@@ -48,9 +49,26 @@ export var Input = /*#__PURE__*/function (_React$Component) {
      * Placeholder and Input are linked not via label, aria-label or aria-labeledby, but through aria-describedby.
      * Basically in the getter we reassign Placeholder ID from aria-describedby to aria-labelledby
      * {@link https://github.com/JedWatson/react-select/issues/5651#issue-1731353197 GitHub}
+     *
+     * This reassignment should only apply when the input has no other accessible name.
      */
     function get() {
       var _this$props$ariaLabe;
+      if (fg('platform_user_picker_fix_redundant_labelledby')) {
+        // A11Y-37267: An explicit aria-labelledby is a deliberate association with a visible label
+        // element and is the field's true accessible name (WCAG 2.5.3 Label in Name), so it always
+        // wins. Otherwise we promote aria-describedby -> aria-labelledby to work around
+        // react-select's placeholder linkage bug, but skip that promotion when the input already
+        // has an accessible name via aria-label so the description is announced via
+        // aria-describedby instead.
+        if (this.props['aria-labelledby']) {
+          return this.props['aria-labelledby'];
+        }
+        if (this.props['aria-label']) {
+          return undefined;
+        }
+        return this.props['aria-describedby'];
+      }
       return (_this$props$ariaLabe = this.props['aria-labelledby']) !== null && _this$props$ariaLabe !== void 0 ? _this$props$ariaLabe : this.props['aria-describedby'];
     }
   }, {

package/dist/types/components/Input.d.ts

@@ -19,6 +19,8 @@ export declare class Input extends React.Component<Props & AriaAttributes> {
      * Placeholder and Input are linked not via label, aria-label or aria-labeledby, but through aria-describedby.
      * Basically in the getter we reassign Placeholder ID from aria-describedby to aria-labelledby
      * {@link https://github.com/JedWatson/react-select/issues/5651#issue-1731353197 GitHub}
+     *
+     * This reassignment should only apply when the input has no other accessible name.
      */
     get ariaLabelledBy(): AriaAttributesType;
     get ariaDescribedBy(): AriaAttributesType;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/user-picker",
-	"version": "13.4.0",
+	"version": "13.4.2",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -16,10 +16,10 @@
 		"@af/integration-testing": "workspace:^",
 		"@af/search-test-utils": "workspace:^",
 		"@af/visual-regression": "workspace:^",
-		"@atlaskit/heading": "^6.1.0",
+		"@atlaskit/heading": "^6.2.0",
 		"@atlassian/a11y-jest-testing": "^0.13.0",
 		"@atlassian/a11y-playwright-testing": "^0.10.0",
-		"@atlassian/feature-flags-test-utils": "^1.1.0",
+		"@atlassian/feature-flags-test-utils": "^1.2.0",
 		"@emotion/styled": "^11.0.0",
 		"@testing-library/dom": "^10.1.0",
 		"@testing-library/jest-dom": "^6.4.5",
@@ -64,22 +64,22 @@
 	},
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-elements-user-picker": "2.168.0",
-		"@atlaskit/analytics-next": "^12.1.0",
+		"@atlaskit/analytics-next": "^12.3.0",
 		"@atlaskit/avatar": "^26.1.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
-		"@atlaskit/icon": "^36.1.0",
-		"@atlaskit/logo": "^21.2.0",
+		"@atlaskit/icon": "^37.0.0",
+		"@atlaskit/logo": "^21.4.0",
 		"@atlaskit/lozenge": "^14.1.0",
 		"@atlaskit/people-teams-ui-public": "^5.1.0",
 		"@atlaskit/platform-feature-flags": "^2.0.0",
-		"@atlaskit/popper": "^8.2.0",
-		"@atlaskit/primitives": "^20.1.0",
+		"@atlaskit/popper": "^8.3.0",
+		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
-		"@atlaskit/select": "^22.2.0",
+		"@atlaskit/select": "^22.5.0",
 		"@atlaskit/spinner": "^20.1.0",
-		"@atlaskit/tag": "^15.1.0",
+		"@atlaskit/tag": "^15.2.0",
 		"@atlaskit/teams-avatar": "^3.1.0",
-		"@atlaskit/tokens": "^15.1.0",
+		"@atlaskit/tokens": "^15.8.0",
 		"@atlaskit/tooltip": "^23.1.0",
 		"@atlaskit/ufo": "^1.0.0",
 		"@babel/runtime": "^7.0.0",
@@ -126,6 +126,9 @@
 		},
 		"jsm-wfo-assignee-recommendation-on-queues": {
 			"type": "boolean"
+		},
+		"platform_user_picker_fix_redundant_labelledby": {
+			"type": "boolean"
 		}
 	}
 }

package/tsconfig.json

@@ -1,6 +1,8 @@
 {
   "extends": "../../../tsconfig.json",
   "include": [
+    "./*.docs.tsx",
+    "./package.json",
     "./src/**/*.ts",
     "./src/**/*.tsx",
     "./docs/**/*.ts",

package/user-picker.docs.tsx

@@ -0,0 +1,55 @@
+/**
+ * Structured MCP docs for `@atlaskit/user-picker`.
+ */
+
+import path from 'path';
+
+import type { StructuredContentSource } from '@atlassian/structured-docs-types/types';
+
+import packageJson from './package.json';
+
+const packagePath = path.resolve(__dirname);
+
+const documentation: StructuredContentSource = {
+	package: {
+		package: '@atlaskit/user-picker',
+		packagePath,
+		packageJson,
+		overview:
+			'A React component for selecting users, teams, and groups. It provides a searchable dropdown with support for single and multi-select modes, custom options, and external users.',
+	},
+	components: [
+		{
+			name: 'UserPicker',
+			description: 'The main user picker component.',
+			status: 'general-availability',
+			import: {
+				name: 'default',
+				package: '@atlaskit/user-picker',
+				type: 'default',
+				packagePath,
+				packageJson,
+			},
+			usageGuidelines: [
+				'Use `UserPicker` for selecting users or teams in forms or filters.',
+				'Supports `isMulti` for selecting multiple items.',
+			],
+			keywords: ['user-picker', 'select', 'user', 'team'],
+			categories: ['elements'],
+			examples: [
+				{
+					name: 'Single user picker',
+					description: 'Basic usage of UserPicker in single-select mode.',
+					source: path.resolve(packagePath, './examples/00-single.tsx'),
+				},
+				{
+					name: 'Multi user picker',
+					description: 'Basic usage of UserPicker in multi-select mode.',
+					source: path.resolve(packagePath, './examples/01-multi.tsx'),
+				},
+			],
+		},
+	],
+};
+
+export default documentation;