@atlaskit/media-avatar-picker 28.1.2 → 28.1.4

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (5) hide show
  1. package/CHANGELOG.md +16 -0
  2. package/dist/cjs/avatar-list/index.js +5 -1
  3. package/dist/es2019/avatar-list/index.js +5 -1
  4. package/dist/esm/avatar-list/index.js +5 -1
  5. package/package.json +11 -5
package/CHANGELOG.md CHANGED
@@ -1,5 +1,21 @@
1
1
  # @atlaskit/media-avatar-picker
2
2
 
3
+ ## 28.1.4
4
+
5
+ ### Patch Changes
6
+
7
+ - Updated dependencies
8
+
9
+ ## 28.1.3
10
+
11
+ ### Patch Changes
12
+
13
+ - [`8215497858752`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/8215497858752) -
14
+ [ux] A11Y-41990: Predefined avatar radio buttons without their own name now expose a positional
15
+ accessible name (e.g. "Default avatar option 1") so screen reader users can identify each option.
16
+ Gated behind `platform_media_a11y_avatar_radio_label`.
17
+ - Updated dependencies
18
+
3
19
  ## 28.1.2
4
20
 
5
21
  ### Patch Changes
package/dist/cjs/avatar-list/index.js CHANGED
@@ -15,6 +15,7 @@ var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/de
15
15
  var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
16
16
  var _reactIntl = require("react-intl");
17
17
  var _mediaUi = require("@atlaskit/media-ui");
18
+ var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
18
19
  function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
19
20
  function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
20
21
  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; }
@@ -46,6 +47,9 @@ var AvatarList = exports.AvatarList = function AvatarList(_ref) {
46
47
  };
47
48
  var cards = avatars.map(function (avatar, idx) {
48
49
  var elementKey = "predefined-avatar-".concat(idx);
50
+ var fallbackAvatarLabel = (0, _platformFeatureFlags.fg)('platform_media_a11y_avatar_radio_label') ? intl.formatMessage(_mediaUi.messages.select_an_avatar_option, {
51
+ number: idx + 1
52
+ }) : undefined;
49
53
  return /*#__PURE__*/React.createElement("label", {
50
54
  key: elementKey,
51
55
  className: (0, _runtime.ax)(["_u5f31b66 _1e0c116y"])
@@ -53,7 +57,7 @@ var AvatarList = exports.AvatarList = function AvatarList(_ref) {
53
57
  type: "radio",
54
58
  name: "avatar",
55
59
  value: avatar.dataURI,
56
- "aria-label": avatar.name || undefined,
60
+ "aria-label": avatar.name || fallbackAvatarLabel,
57
61
  checked: avatar === selectedAvatar,
58
62
  onChange: createOnItemClickHandler(avatar),
59
63
  onFocus: function onFocus() {
package/dist/es2019/avatar-list/index.js CHANGED
@@ -5,6 +5,7 @@ import { ax, ix } from "@compiled/react/runtime";
5
5
  import { useIntl } from 'react-intl';
6
6
  import { messages } from '@atlaskit/media-ui';
7
7
  import { useState } from 'react';
8
+ import { fg } from '@atlaskit/platform-feature-flags';
8
9
  const smallAvatarImageStyles = null;
9
10
  const avatarListWrapperStyles = null;
10
11
  const labelStyles = null;
@@ -26,6 +27,9 @@ export const AvatarList = ({
26
27
  };
27
28
  const cards = avatars.map((avatar, idx) => {
28
29
  const elementKey = `predefined-avatar-${idx}`;
30
+ const fallbackAvatarLabel = fg('platform_media_a11y_avatar_radio_label') ? intl.formatMessage(messages.select_an_avatar_option, {
31
+ number: idx + 1
32
+ }) : undefined;
29
33
  return /*#__PURE__*/React.createElement("label", {
30
34
  key: elementKey,
31
35
  className: ax(["_u5f31b66 _1e0c116y"])
@@ -33,7 +37,7 @@ export const AvatarList = ({
33
37
  type: "radio",
34
38
  name: "avatar",
35
39
  value: avatar.dataURI,
36
- "aria-label": avatar.name || undefined,
40
+ "aria-label": avatar.name || fallbackAvatarLabel,
37
41
  checked: avatar === selectedAvatar,
38
42
  onChange: createOnItemClickHandler(avatar),
39
43
  onFocus: () => setIsFocused({
package/dist/esm/avatar-list/index.js CHANGED
@@ -9,6 +9,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
9
9
  import { useIntl } from 'react-intl';
10
10
  import { messages } from '@atlaskit/media-ui';
11
11
  import { useState } from 'react';
12
+ import { fg } from '@atlaskit/platform-feature-flags';
12
13
  var smallAvatarImageStyles = null;
13
14
  var avatarListWrapperStyles = null;
14
15
  var labelStyles = null;
@@ -37,6 +38,9 @@ export var AvatarList = function AvatarList(_ref) {
37
38
  };
38
39
  var cards = avatars.map(function (avatar, idx) {
39
40
  var elementKey = "predefined-avatar-".concat(idx);
41
+ var fallbackAvatarLabel = fg('platform_media_a11y_avatar_radio_label') ? intl.formatMessage(messages.select_an_avatar_option, {
42
+ number: idx + 1
43
+ }) : undefined;
40
44
  return /*#__PURE__*/React.createElement("label", {
41
45
  key: elementKey,
42
46
  className: ax(["_u5f31b66 _1e0c116y"])
@@ -44,7 +48,7 @@ export var AvatarList = function AvatarList(_ref) {
44
48
  type: "radio",
45
49
  name: "avatar",
46
50
  value: avatar.dataURI,
47
- "aria-label": avatar.name || undefined,
51
+ "aria-label": avatar.name || fallbackAvatarLabel,
48
52
  checked: avatar === selectedAvatar,
49
53
  onChange: createOnItemClickHandler(avatar),
50
54
  onFocus: function onFocus() {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@atlaskit/media-avatar-picker",
3
- "version": "28.1.2",
3
+ "version": "28.1.4",
4
4
  "description": "A component to select, drag and resize image avatars. It also provides a default list of predefined avatars.",
5
5
  "publishConfig": {
6
6
  "registry": "https://registry.npmjs.org/"
@@ -32,18 +32,18 @@
32
32
  "dependencies": {
33
33
  "@atlaskit/button": "^24.3.0",
34
34
  "@atlaskit/css": "^1.0.0",
35
- "@atlaskit/flag": "^18.1.0",
35
+ "@atlaskit/flag": "^18.2.0",
36
36
  "@atlaskit/form": "^16.1.0",
37
37
  "@atlaskit/icon": "^37.0.0",
38
- "@atlaskit/media-ui": "^30.6.0",
38
+ "@atlaskit/media-ui": "^30.7.0",
39
39
  "@atlaskit/modal-dialog": "^16.1.0",
40
40
  "@atlaskit/platform-feature-flags": "^2.0.0",
41
- "@atlaskit/primitives": "^20.5.0",
41
+ "@atlaskit/primitives": "^21.0.0",
42
42
  "@atlaskit/range": "^11.1.0",
43
43
  "@atlaskit/react-compiler-gating": "^0.2.0",
44
44
  "@atlaskit/spinner": "^20.1.0",
45
45
  "@atlaskit/textfield": "^9.1.0",
46
- "@atlaskit/tokens": "^15.5.0",
46
+ "@atlaskit/tokens": "^15.8.0",
47
47
  "@atlaskit/visually-hidden": "^4.1.0",
48
48
  "@babel/runtime": "^7.0.0",
49
49
  "@compiled/react": "^0.20.0",
@@ -59,6 +59,7 @@
59
59
  "@atlaskit/media-core": "^38.0.0",
60
60
  "@atlaskit/media-test-helpers": "^42.2.0",
61
61
  "@atlassian/a11y-jest-testing": "^0.13.0",
62
+ "@atlassian/feature-flags-test-utils": "^1.2.0",
62
63
  "@atlassian/testing-library": "^0.11.0",
63
64
  "@testing-library/react": "^16.3.0",
64
65
  "@testing-library/user-event": "^14.4.3",
@@ -67,6 +68,11 @@
67
68
  "react-dom": "^18.2.0",
68
69
  "react-intl": "^7.0.0"
69
70
  },
71
+ "platform-feature-flags": {
72
+ "platform_media_a11y_avatar_radio_label": {
73
+ "type": "boolean"
74
+ }
75
+ },
70
76
  "techstack": {
71
77
  "@repo/internal": {
72
78
  "design-tokens": [