@zendeskgarden/react-avatars 8.62.2 → 8.63.0

package/dist/index.cjs.js

@@ -53,9 +53,7 @@ function _extends$4() {
 }
 
 var _g$1;
-
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-
 var SvgClockStroke$1 = function SvgClockStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -63,8 +61,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g$1 || (_g$1 = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -80,9 +77,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
 };
 
 var _g;
-
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
 var SvgClockStroke = function SvgClockStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -90,8 +85,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g || (_g = /*#__PURE__*/React__namespace.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -107,9 +101,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
 };
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
 var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -117,8 +109,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M2.146 6.854a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L3.707 6H9.5a.5.5 0 0 1 0 1H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2Z"
@@ -126,9 +117,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
 };
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React__namespace.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -136,8 +125,7 @@ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React__namespace.createElement("path", {
     fill: "currentColor",
     d: "M3.146 8.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.707 8H12.5a.5.5 0 0 1 0 1H4.707l2.147 2.146a.5.5 0 1 1-.708.707l-3-3Z"
@@ -150,7 +138,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
 const COMPONENT_ID$6 = 'avatars.text';
 const StyledText = styled__default.default.span.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -218,7 +206,7 @@ const colorStyles$2 = props => {
 };
 const StyledStatusIndicatorBase = styled__default.default.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -257,7 +245,7 @@ const colorStyles$1 = props => {
 };
 const StyledStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -333,7 +321,7 @@ const sizeStyles$1 = props => {
 };
 const StyledAvatar = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -346,7 +334,7 @@ StyledAvatar.defaultProps = {
 const COMPONENT_ID$2 = 'avatars.status-indicator.status';
 const StyledStandaloneStatus = styled__default.default.figure.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -362,7 +350,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled__default.default.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -374,7 +362,7 @@ StyledStandaloneStatusCaption.defaultProps = {
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled__default.default(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
@@ -433,7 +421,7 @@ const AvatarComponent = React.forwardRef((_ref, ref) => {
     type: computedStatus,
     surfaceColor: surfaceColor,
     "aria-label": statusLabel,
-    role: "img"
+    as: "figcaption"
   }, computedStatus === 'active' ? React__namespace.default.createElement("span", {
     "aria-hidden": "true"
   }, badge) : React__namespace.default.createElement(React__namespace.default.Fragment, null, computedStatus === 'away' ? React__namespace.default.createElement(ClockIcon, {
@@ -477,21 +465,23 @@ const StatusIndicator = React.forwardRef((_ref, ref) => {
   const ariaLabel = reactTheming.useText(StatusIndicator, {
     'aria-label': label
   }, 'aria-label', defaultLabel);
-  return React__namespace.default.createElement(StyledStandaloneStatus, _extends$4({
-    role: "status",
-    ref: ref
-  }, props), React__namespace.default.createElement(StyledStandaloneStatusIndicator, {
-    role: "img",
-    type: type,
-    size: isCompact ? 'small' : 'medium',
-    "aria-label": ariaLabel
-  }, type === 'away' ? React__namespace.default.createElement(ClockIcon, {
-    "data-icon-status": type,
-    "aria-hidden": "true"
-  }) : null, type === 'transfers' ? React__namespace.default.createElement(ArrowLeftIcon, {
-    "data-icon-status": type,
-    "aria-hidden": "true"
-  }) : null), children && React__namespace.default.createElement(StyledStandaloneStatusCaption, null, children));
+  return (
+    React__namespace.default.createElement(StyledStandaloneStatus, _extends$4({
+      role: "status",
+      ref: ref
+    }, props), React__namespace.default.createElement(StyledStandaloneStatusIndicator, {
+      role: "img",
+      type: type,
+      size: isCompact ? 'small' : 'medium',
+      "aria-label": ariaLabel
+    }, type === 'away' ? React__namespace.default.createElement(ClockIcon, {
+      "data-icon-status": type,
+      "aria-hidden": "true"
+    }) : null, type === 'transfers' ? React__namespace.default.createElement(ArrowLeftIcon, {
+      "data-icon-status": type,
+      "aria-hidden": "true"
+    }) : null), children && React__namespace.default.createElement(StyledStandaloneStatusCaption, null, children))
+  );
 });
 StatusIndicator.displayName = 'StatusIndicator';
 StatusIndicator.propTypes = {

package/dist/index.esm.js

@@ -28,9 +28,7 @@ function _extends$4() {
 }
 
 var _g$1;
-
 function _extends$3() { _extends$3 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$3.apply(this, arguments); }
-
 var SvgClockStroke$1 = function SvgClockStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$3({
     xmlns: "http://www.w3.org/2000/svg",
@@ -38,8 +36,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g$1 || (_g$1 = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -55,9 +52,7 @@ var SvgClockStroke$1 = function SvgClockStroke(props) {
 };
 
 var _g;
-
 function _extends$2() { _extends$2 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$2.apply(this, arguments); }
-
 var SvgClockStroke = function SvgClockStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$2({
     xmlns: "http://www.w3.org/2000/svg",
@@ -65,8 +60,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _g || (_g = /*#__PURE__*/React.createElement("g", {
     fill: "none",
     stroke: "currentColor"
@@ -82,9 +76,7 @@ var SvgClockStroke = function SvgClockStroke(props) {
 };
 
 var _path$1;
-
 function _extends$1() { _extends$1 = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends$1.apply(this, arguments); }
-
 var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends$1({
     xmlns: "http://www.w3.org/2000/svg",
@@ -92,8 +84,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
     height: 12,
     focusable: "false",
     viewBox: "0 0 12 12",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path$1 || (_path$1 = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M2.146 6.854a.5.5 0 0 1 0-.708l2-2a.5.5 0 1 1 .708.708L3.707 6H9.5a.5.5 0 0 1 0 1H3.707l1.147 1.146a.5.5 0 1 1-.708.708l-2-2Z"
@@ -101,9 +92,7 @@ var SvgArrowLeftSmStroke$1 = function SvgArrowLeftSmStroke(props) {
 };
 
 var _path;
-
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
-
 var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
   return /*#__PURE__*/React.createElement("svg", _extends({
     xmlns: "http://www.w3.org/2000/svg",
@@ -111,8 +100,7 @@ var SvgArrowLeftSmStroke = function SvgArrowLeftSmStroke(props) {
     height: 16,
     focusable: "false",
     viewBox: "0 0 16 16",
-    "aria-hidden": "true",
-    role: "img"
+    "aria-hidden": "true"
   }, props), _path || (_path = /*#__PURE__*/React.createElement("path", {
     fill: "currentColor",
     d: "M3.146 8.854a.5.5 0 0 1 0-.708l3-3a.5.5 0 1 1 .708.708L4.707 8H12.5a.5.5 0 0 1 0 1H4.707l2.147 2.146a.5.5 0 1 1-.708.707l-3-3Z"
@@ -125,7 +113,7 @@ const STATUS = ['available', 'away', 'transfers', 'offline'];
 const COMPONENT_ID$6 = 'avatars.text';
 const StyledText = styled.span.attrs({
   'data-garden-id': COMPONENT_ID$6,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledText",
   componentId: "sc-1a6hivh-0"
@@ -193,7 +181,7 @@ const colorStyles$2 = props => {
 };
 const StyledStatusIndicatorBase = styled.div.attrs({
   'data-garden-id': COMPONENT_ID$5,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStatusIndicatorBase",
   componentId: "sc-1rininy-0"
@@ -232,7 +220,7 @@ const colorStyles$1 = props => {
 };
 const StyledStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID$4,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStatusIndicator",
   componentId: "sc-16t9if3-0"
@@ -308,7 +296,7 @@ const sizeStyles$1 = props => {
 };
 const StyledAvatar = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID$3,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledAvatar",
   componentId: "sc-608m04-0"
@@ -321,7 +309,7 @@ StyledAvatar.defaultProps = {
 const COMPONENT_ID$2 = 'avatars.status-indicator.status';
 const StyledStandaloneStatus = styled.figure.attrs({
   'data-garden-id': COMPONENT_ID$2,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatus",
   componentId: "sc-1ow4nfj-0"
@@ -337,7 +325,7 @@ function sizeStyles(props) {
 }
 const StyledStandaloneStatusCaption = styled.figcaption.attrs({
   'data-garden-id': COMPONENT_ID$1,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusCaption",
   componentId: "sc-aalyk1-0"
@@ -349,7 +337,7 @@ StyledStandaloneStatusCaption.defaultProps = {
 const COMPONENT_ID = 'avatars.status-indicator.indicator';
 const StyledStandaloneStatusIndicator = styled(StyledStatusIndicatorBase).attrs({
   'data-garden-id': COMPONENT_ID,
-  'data-garden-version': '8.62.2'
+  'data-garden-version': '8.63.0'
 }).withConfig({
   displayName: "StyledStandaloneStatusIndicator",
   componentId: "sc-1xt1heq-0"
@@ -408,7 +396,7 @@ const AvatarComponent = forwardRef((_ref, ref) => {
     type: computedStatus,
     surfaceColor: surfaceColor,
     "aria-label": statusLabel,
-    role: "img"
+    as: "figcaption"
   }, computedStatus === 'active' ? React__default.createElement("span", {
     "aria-hidden": "true"
   }, badge) : React__default.createElement(React__default.Fragment, null, computedStatus === 'away' ? React__default.createElement(ClockIcon, {
@@ -452,21 +440,23 @@ const StatusIndicator = forwardRef((_ref, ref) => {
   const ariaLabel = useText(StatusIndicator, {
     'aria-label': label
   }, 'aria-label', defaultLabel);
-  return React__default.createElement(StyledStandaloneStatus, _extends$4({
-    role: "status",
-    ref: ref
-  }, props), React__default.createElement(StyledStandaloneStatusIndicator, {
-    role: "img",
-    type: type,
-    size: isCompact ? 'small' : 'medium',
-    "aria-label": ariaLabel
-  }, type === 'away' ? React__default.createElement(ClockIcon, {
-    "data-icon-status": type,
-    "aria-hidden": "true"
-  }) : null, type === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
-    "data-icon-status": type,
-    "aria-hidden": "true"
-  }) : null), children && React__default.createElement(StyledStandaloneStatusCaption, null, children));
+  return (
+    React__default.createElement(StyledStandaloneStatus, _extends$4({
+      role: "status",
+      ref: ref
+    }, props), React__default.createElement(StyledStandaloneStatusIndicator, {
+      role: "img",
+      type: type,
+      size: isCompact ? 'small' : 'medium',
+      "aria-label": ariaLabel
+    }, type === 'away' ? React__default.createElement(ClockIcon, {
+      "data-icon-status": type,
+      "aria-hidden": "true"
+    }) : null, type === 'transfers' ? React__default.createElement(ArrowLeftIcon, {
+      "data-icon-status": type,
+      "aria-hidden": "true"
+    }) : null), children && React__default.createElement(StyledStandaloneStatusCaption, null, children))
+  );
 });
 StatusIndicator.displayName = 'StatusIndicator';
 StatusIndicator.propTypes = {

package/dist/typings/elements/StatusIndicator.d.ts

@@ -6,6 +6,12 @@
  */
 import React from 'react';
 import { IStatusIndicatorProps } from '../types';
+/**
+ * 1. role='status' on `div` is valid WAI-ARIA usage in this context.
+ *    https://www.w3.org/TR/wai-aria-1.1/#status
+ * 2. role='img' on `svg` is valid WAI-ARIA usage in this context.
+ *    https://dequeuniversity.com/rules/axe/4.2/svg-img-alt
+ */
 /**
  * @extends HTMLAttributes<HTMLElement>
  */

package/dist/typings/types/index.d.ts

@@ -17,9 +17,9 @@ export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
     /** Applies system styling for representing objects, brands, or products */
     isSystem?: boolean;
     /** Specifies the avatar size */
-    size?: typeof SIZE[number];
+    size?: (typeof SIZE)[number];
     /** Applies status styling */
-    status?: typeof STATUS[number];
+    status?: (typeof STATUS)[number];
     /** Specifies the status label */
     statusLabel?: string;
     /** Sets the badge text and applies active styling */
@@ -27,7 +27,7 @@ export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
 }
 export interface IStatusIndicatorProps extends HTMLAttributes<HTMLElement> {
     /** Applies status type for styling and default aria-label */
-    type?: typeof STATUS[number];
+    type?: (typeof STATUS)[number];
     /** Applies compact styling */
     isCompact?: boolean;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@zendeskgarden/react-avatars",
-  "version": "8.62.2",
+  "version": "8.63.0",
   "description": "Components relating to avatars in the Garden Design System",
   "license": "Apache-2.0",
   "author": "Zendesk Garden <garden@zendesk.com>",
@@ -31,7 +31,7 @@
     "styled-components": "^4.2.0 || ^5.0.0"
   },
   "devDependencies": {
-    "@zendeskgarden/react-theming": "^8.62.2",
+    "@zendeskgarden/react-theming": "^8.63.0",
     "@zendeskgarden/svg-icons": "6.33.0"
   },
   "keywords": [
@@ -44,5 +44,5 @@
     "access": "public"
   },
   "zendeskgarden:src": "src/index.ts",
-  "gitHead": "27a7d6c021f3360396af60d51ecbf66e9076a405"
+  "gitHead": "4b8715305a769881b143c7195c5b31e687422926"
 }