feat(avatars): allow null aria-label on StatusIndicator to mark as decorative (#2031)

Author: jzempel

package-lock.json

@@ -43,22 +43,22 @@ export const StatusMenuStory: Story = ({ isCompact }) => {
             isCompact={isCompact}
           >
             <Item value="offline">
-              <StatusIndicator isCompact={isCompact} type="offline">
+              <StatusIndicator aria-label={null} isCompact={isCompact} type="offline">
                 Offline
               </StatusIndicator>
             </Item>
             <Item value="available">
-              <StatusIndicator isCompact={isCompact} type="available">
+              <StatusIndicator aria-label={null} isCompact={isCompact} type="available">
                 Online
               </StatusIndicator>
             </Item>
             <Item value="transfers">
-              <StatusIndicator isCompact={isCompact} type="transfers">
+              <StatusIndicator aria-label={null} isCompact={isCompact} type="transfers">
                 Transfers only
               </StatusIndicator>
             </Item>
             <Item value="away">
-              <StatusIndicator isCompact={isCompact} type="away">
+              <StatusIndicator aria-label={null} isCompact={isCompact} type="away">
                 Away
               </StatusIndicator>
             </Item>

packages/avatars/demo/~patterns/stories/StatusMenuStory.tsx

@@ -55,5 +55,13 @@ describe('StatusIndicator', () => {
 
       expect(getByRole('img')).toHaveAttribute('aria-label', `status: ${type}`);
     });
+
+    it.each(STATUS)('renders "$1" status type, and with aria label removed', type => {
+      const { container } = render(<StatusIndicator aria-label={null} type={type} />);
+      const imgElement = container.firstChild?.firstChild;
+
+      expect(imgElement).not.toHaveAttribute('aria-label');
+      expect(imgElement).toHaveAttribute('aria-hidden');
+    });
   });
 });

packages/avatars/src/elements/StatusIndicator.spec.tsx

@@ -41,7 +41,13 @@ export const StatusIndicator = forwardRef<HTMLElement, IStatusIndicatorProps>(
     }
 
     const defaultLabel = useMemo(() => ['status'].concat(type || []).join(': '), [type]);
-    const ariaLabel = useText(StatusIndicator, { 'aria-label': label }, 'aria-label', defaultLabel);
+    const ariaLabel = useText(
+      StatusIndicator,
+      { 'aria-label': label },
+      'aria-label',
+      defaultLabel,
+      label !== null
+    );
 
     return (
       // [1]
@@ -50,10 +56,11 @@ export const StatusIndicator = forwardRef<HTMLElement, IStatusIndicatorProps>(
         {/* [2] */}
         {/* eslint-disable-next-line jsx-a11y/prefer-tag-over-role */}
         <StyledStandaloneStatusIndicator
+          aria-hidden={label === null ? true : undefined}
+          aria-label={ariaLabel}
           role="img"
           $type={type}
           $size={isCompact ? 'small' : 'medium'}
-          aria-label={ariaLabel}
         >
           {type === 'away' ? <ClockIcon data-icon-status={type} aria-hidden="true" /> : null}
           {type === 'transfers' ? (
@@ -69,6 +76,7 @@ export const StatusIndicator = forwardRef<HTMLElement, IStatusIndicatorProps>(
 StatusIndicator.displayName = 'StatusIndicator';
 
 StatusIndicator.propTypes = {
+  'aria-label': PropTypes.string,
   type: PropTypes.oneOf(STATUS),
   isCompact: PropTypes.bool
 };

packages/avatars/src/elements/StatusIndicator.tsx

@@ -25,7 +25,8 @@ const COMPONENT_ID = 'avatars.status_indicator';
 const [xxs, xs, s, m, l] = SIZE;
 
 const sizeStyles = (props: IStatusIndicatorProps & ThemeProps<DefaultTheme>) => {
-  const isVisible = !includes([xxs, xs], props.$size);
+  const isVisible = props.$size !== xxs;
+  const iconSize = props.$size === xs ? `${props.theme.space.base * 2}px` : undefined;
   const borderWidth = getStatusBorderOffset(props);
 
   let padding = '0';
@@ -58,6 +59,8 @@ const sizeStyles = (props: IStatusIndicatorProps & ThemeProps<DefaultTheme>) =>
 
     & > svg {
       ${!isVisible && 'display: none;'}
+      width: ${iconSize};
+      height: ${iconSize};
     }
   `;
 };

packages/avatars/src/styled/StyledStatusIndicator.ts

@@ -37,6 +37,7 @@ const sizeStyles = (props: IStyledStatusIndicatorProps) => {
    *    we need to remove the circle
    * 2. when @zendeskgarden/css-bedrock is present, max-height needs to be unset due to icon being
    *    resized incorrectly
+   * 3. prevent arrowhead cutting off in the transfers icon
    */
   return css`
     border: ${offset} ${props.theme.borderStyles.solid};
@@ -48,14 +49,15 @@ const sizeStyles = (props: IStyledStatusIndicatorProps) => {
     & > svg {
       position: absolute;
       top: -${offset};
-      left: -${offset};
+      inset-inline-start: -${offset};
       transform-origin: 50% 50%;
       animation: ${iconFadeIn} ${TRANSITION_DURATION}s;
       max-height: unset; /* [2] */
 
       /* stylelint-disable-next-line selector-no-qualifying-type */
       &[data-icon-status='transfers'] {
         transform: scale(${props.theme.rtl ? -1 : 1}, 1);
+        inset-inline-start: ${props.$size === 'extrasmall' ? '-1px' : undefined}; /* [3] */
       }
 
       /* stylelint-disable-next-line selector-no-qualifying-type */

packages/avatars/src/styled/StyledStatusIndicatorBase.ts

@@ -44,7 +44,9 @@ export interface IAvatarProps extends HTMLAttributes<HTMLElement> {
   badge?: string | number;
 }
 
-export interface IStatusIndicatorProps extends HTMLAttributes<HTMLElement> {
+export interface IStatusIndicatorProps extends Omit<HTMLAttributes<HTMLElement>, 'aria-label'> {
+  /** Overrides the label for the status indicator. Use `null` to mark the indicator as decorative. */
+  'aria-label'?: string | null;
   /** Applies status type for styling and default aria-label */
   type?: (typeof STATUS)[number];
   /** Applies compact styling */