@atlaskit/avatar - npm Package Compare versions

Comparing version 21.1.10 to 21.2.0

CHANGELOG.md

 # @atlaskit/avatar
 
+## 21.2.0
+
+### Minor Changes
+
+- [`51928bbe70c`](https://bitbucket.org/atlassian/atlassian-frontend/commits/51928bbe70c) - [ux] Removes status/presence indicator images from the accessibility tree for the Avatar component.
+
+### Patch Changes
+
+- [`64f11e50567`](https://bitbucket.org/atlassian/atlassian-frontend/commits/64f11e50567) - [ux] Adds accessible name to standalone Presence and Status components.
+- [`0ecd2a2238b`](https://bitbucket.org/atlassian/atlassian-frontend/commits/0ecd2a2238b) - Add more precision to custom component check for status and presence
+
 ## 21.1.10
@@ -4,0 +15,0 @@

dist/cjs/Avatar.js

@@ -9,3 +9,2 @@ "use strict";
 var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
@@ -25,3 +24,3 @@ var _react = require("react");
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.1.10";
+var packageVersion = "21.2.0";
 var getStyles = function getStyles(css, _ref) {
@@ -71,4 +70,4 @@ var size = _ref.size,
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var customPresenceNode = (0, _typeof2.default)(presence) === 'object' ? presence : null;
-  var customStatusNode = (0, _typeof2.default)(status) === 'object' ? status : null;
+  var customPresenceNode = /*#__PURE__*/(0, _react.isValidElement)(presence) ? presence : null;
+  var customStatusNode = /*#__PURE__*/(0, _react.isValidElement)(status) ? status : null;
   var isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';
@@ -75,0 +74,0 @@ var lastAnalytics = (0, _react.useRef)(analyticsContext);

dist/cjs/IconWrapper.js

@@ -32,5 +32,8 @@ "use strict";
     bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat((0, _colors.background)(), ")") : _ref$bgColor,
-    children = _ref.children;
+    children = _ref.children,
+    label = _ref.label;
   return (0, _react.jsx)("span", {
+    "aria-label": label || undefined,
     css: iconWrapperStyles,
+    role: label ? 'img' : 'presentation',
     style: {
@@ -37,0 +40,0 @@ border: "".concat(_constants.BORDER_WIDTH, "px solid ").concat(bgColor),

dist/cjs/Presence.js

@@ -70,4 +70,6 @@ "use strict";
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.default, {
-    bgColor: borderColor
+    bgColor: borderColor,
+    label: typeof presence === 'string' ? presence : undefined
   }, presence ? /*#__PURE__*/_react.default.createElement("svg", {
+    "aria-hidden": "true",
     height: "100%",
@@ -96,2 +98,3 @@ version: "1.1",
   return /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--presence"),
@@ -98,0 +101,0 @@ style: {

dist/cjs/Status.js

@@ -68,4 +68,6 @@ "use strict";
   return /*#__PURE__*/_react.default.createElement(_IconWrapper.default, {
-    bgColor: borderColor
+    bgColor: borderColor,
+    label: typeof status === 'string' ? status : undefined
   }, status ? /*#__PURE__*/_react.default.createElement("svg", {
+    "aria-hidden": "true",
     height: "100%",
@@ -94,2 +96,3 @@ version: "1.1",
   return /*#__PURE__*/_react.default.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--status"),
@@ -96,0 +99,0 @@ style: {

dist/cjs/version.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.1.10",
+	"version": "21.2.0",
 	"sideEffects": false
 }

dist/es2019/Avatar.js

 /** @jsx jsx */
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { createElement, forwardRef, useCallback, useEffect, useRef } from 'react';
+import { createElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from 'react';
 import { ClassNames, jsx } from '@emotion/react';
@@ -13,3 +13,3 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 const packageName = "@atlaskit/avatar";
-const packageVersion = "21.1.10";
+const packageVersion = "21.2.0";
 const getStyles = (css, {
@@ -149,4 +149,4 @@ size,
   } = useAnalyticsEvents();
-  const customPresenceNode = typeof presence === 'object' ? presence : null;
-  const customStatusNode = typeof status === 'object' ? status : null;
+  const customPresenceNode = /*#__PURE__*/isValidElement(presence) ? presence : null;
+  const customStatusNode = /*#__PURE__*/isValidElement(status) ? status : null;
   const isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';
@@ -153,0 +153,0 @@ const lastAnalytics = useRef(analyticsContext);

dist/es2019/IconWrapper.js

@@ -25,5 +25,8 @@ /** @jsx jsx */
   bgColor = `var(--ds-surface-overlay, ${background()})`,
-  children
+  children,
+  label
 }) => jsx("span", {
+  "aria-label": label || undefined,
   css: iconWrapperStyles,
+  role: label ? 'img' : 'presentation',
   style: {
@@ -30,0 +33,0 @@ border: `${BORDER_WIDTH}px solid ${bgColor}`,

dist/es2019/Presence.js

@@ -59,4 +59,6 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 }) => /*#__PURE__*/React.createElement(IconWrapper, {
-  bgColor: borderColor
+  bgColor: borderColor,
+  label: typeof presence === 'string' ? presence : undefined
 }, presence ? /*#__PURE__*/React.createElement("svg", {
+  "aria-hidden": "true",
   height: "100%",
@@ -84,2 +86,3 @@ version: "1.1",
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && `${testId}--presence`,
@@ -86,0 +89,0 @@ style: {

dist/es2019/Status.js

@@ -57,4 +57,6 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
 }) => /*#__PURE__*/React.createElement(IconWrapper, {
-  bgColor: borderColor
+  bgColor: borderColor,
+  label: typeof status === 'string' ? status : undefined
 }, status ? /*#__PURE__*/React.createElement("svg", {
+  "aria-hidden": "true",
   height: "100%",
@@ -82,2 +84,3 @@ version: "1.1",
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && `${testId}--status`,
@@ -84,0 +87,0 @@ style: {

dist/es2019/version.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.1.10",
+	"version": "21.2.0",
 	"sideEffects": false
 }

dist/esm/Avatar.js

 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-import _typeof from "@babel/runtime/helpers/typeof";
 import _taggedTemplateLiteral from "@babel/runtime/helpers/taggedTemplateLiteral";
@@ -9,3 +8,3 @@ var _templateObject;
 // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
-import { createElement, forwardRef, useCallback, useEffect, useRef } from 'react';
+import { createElement, forwardRef, isValidElement, useCallback, useEffect, useRef } from 'react';
 import { ClassNames, jsx } from '@emotion/react';
@@ -20,3 +19,3 @@ import { useAnalyticsEvents } from '@atlaskit/analytics-next';
 var packageName = "@atlaskit/avatar";
-var packageVersion = "21.1.10";
+var packageVersion = "21.2.0";
 var getStyles = function getStyles(css, _ref) {
@@ -66,4 +65,4 @@ var size = _ref.size,
     createAnalyticsEvent = _useAnalyticsEvents.createAnalyticsEvent;
-  var customPresenceNode = _typeof(presence) === 'object' ? presence : null;
-  var customStatusNode = _typeof(status) === 'object' ? status : null;
+  var customPresenceNode = /*#__PURE__*/isValidElement(presence) ? presence : null;
+  var customStatusNode = /*#__PURE__*/isValidElement(status) ? status : null;
   var isValidIconSize = size !== 'xxlarge' && size !== 'xsmall';
@@ -70,0 +69,0 @@ var lastAnalytics = useRef(analyticsContext);

dist/esm/IconWrapper.js

@@ -26,5 +26,8 @@ /** @jsx jsx */
     bgColor = _ref$bgColor === void 0 ? "var(--ds-surface-overlay, ".concat(background(), ")") : _ref$bgColor,
-    children = _ref.children;
+    children = _ref.children,
+    label = _ref.label;
   return jsx("span", {
+    "aria-label": label || undefined,
     css: iconWrapperStyles,
+    role: label ? 'img' : 'presentation',
     style: {
@@ -31,0 +34,0 @@ border: "".concat(BORDER_WIDTH, "px solid ").concat(bgColor),

dist/esm/Presence.js

@@ -59,4 +59,6 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
   return /*#__PURE__*/React.createElement(IconWrapper, {
-    bgColor: borderColor
+    bgColor: borderColor,
+    label: typeof presence === 'string' ? presence : undefined
   }, presence ? /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": "true",
     height: "100%",
@@ -84,2 +86,3 @@ version: "1.1",
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--presence"),
@@ -86,0 +89,0 @@ style: {

dist/esm/Status.js

@@ -57,4 +57,6 @@ // eslint-disable-next-line @repo/internal/fs/filename-pattern-match
   return /*#__PURE__*/React.createElement(IconWrapper, {
-    bgColor: borderColor
+    bgColor: borderColor,
+    label: typeof status === 'string' ? status : undefined
   }, status ? /*#__PURE__*/React.createElement("svg", {
+    "aria-hidden": "true",
     height: "100%",
@@ -82,2 +84,3 @@ version: "1.1",
   return /*#__PURE__*/React.createElement("span", {
+    "aria-hidden": "true",
     "data-testid": testId && "".concat(testId, "--status"),
@@ -84,0 +87,0 @@ style: {

dist/esm/version.json

 {
 	"name": "@atlaskit/avatar",
-	"version": "21.1.10",
+	"version": "21.2.0",
 	"sideEffects": false
 }

dist/types/IconWrapper.d.ts

@@ -6,2 +6,3 @@ /** @jsx jsx */
     children?: ReactNode;
+    label?: string;
 }
@@ -8,0 +9,0 @@ /**

package.json

 {
   "name": "@atlaskit/avatar",
-  "version": "21.1.10",
+  "version": "21.2.0",
   "description": "An avatar is a visual representation of a user or entity.",
@@ -55,3 +55,3 @@ "publishConfig": {
     "@atlaskit/toggle": "^12.5.0",
-    "@atlaskit/tooltip": "^17.6.0",
+    "@atlaskit/tooltip": "^17.7.0",
     "@atlaskit/visual-regression": "*",
@@ -58,0 +58,0 @@ "@atlaskit/webdriver-runner": "*",

report.api.md

@@ -11,2 +11,3 @@ <!-- API Report Version: 2.3 -->
 - [Main Entry Types](#main-entry-types)
+- [Peer Dependencies](#peer-dependencies)
 
@@ -196,1 +197,13 @@ ### Main Entry Types
 <!--SECTION END: Main Entry Types-->
+
+### Peer Dependencies
+
+<!--SECTION START: Peer Dependencies-->
+
+```json
+{
+  "react": "^16.8.0"
+}
+```
+
+<!--SECTION END: Peer Dependencies-->

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

214139

increased by0.79%

Lines of code

3853

increased by0.68%

No dependency changes