@atlaskit/user-picker 13.4.1 → 13.4.2

package/CHANGELOG.md

@@ -1,5 +1,16 @@
 # @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

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.4.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.4.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.4.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.1",
+	"version": "13.4.2",
 	"description": "Fabric component for display a dropdown to select a user from",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -64,7 +64,7 @@
 	},
 	"dependencies": {
 		"@atlaskit/afm-i18n-platform-elements-user-picker": "2.168.0",
-		"@atlaskit/analytics-next": "^12.2.0",
+		"@atlaskit/analytics-next": "^12.3.0",
 		"@atlaskit/avatar": "^26.1.0",
 		"@atlaskit/feature-gate-js-client": "^6.0.0",
 		"@atlaskit/icon": "^37.0.0",
@@ -72,14 +72,14 @@
 		"@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.5.0",
+		"@atlaskit/popper": "^8.3.0",
+		"@atlaskit/primitives": "^20.6.0",
 		"@atlaskit/react-compiler-gating": "^0.2.0",
 		"@atlaskit/select": "^22.5.0",
 		"@atlaskit/spinner": "^20.1.0",
 		"@atlaskit/tag": "^15.2.0",
 		"@atlaskit/teams-avatar": "^3.1.0",
-		"@atlaskit/tokens": "^15.5.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"
 		}
 	}
 }