fix(avatars): status ring styling and accessibility (#2022)

Author: jzempel

package-lock.json

@@ -21,6 +21,7 @@
   "sideEffects": false,
   "types": "dist/typings/index.d.ts",
   "dependencies": {
+    "@zendeskgarden/react-typography": "^9.7.0",
     "polished": "^4.3.1",
     "prop-types": "^15.5.7"
   },

packages/avatars/package.json

@@ -34,7 +34,9 @@ describe('Avatar', () => {
       </Avatar>
     );
 
-    expect(getByText(badge)).not.toBeEmptyDOMElement();
+    const element = getByText(badge);
+
+    expect(element).toHaveAttribute('aria-hidden');
   });
 
   it('applies active styling to available status if provided with badge', () => {
@@ -75,49 +77,48 @@ describe('Avatar', () => {
         </Avatar>
       );
 
-      const statusIndicatorElement = getByText('2')?.parentElement;
+      const element = getByText('status: active. 2 notifications');
 
-      expect(statusIndicatorElement).toHaveAttribute(
-        'aria-label',
-        'status: active. 2 notifications'
-      );
+      expect(element).toBeInTheDocument();
     });
 
     it('renders with badge and with a provided status label', () => {
+      const label = 'two notifications';
       const { getByText } = render(
-        <Avatar badge="2" statusLabel="two notifications">
+        <Avatar badge="2" statusLabel={label}>
           <img alt="" />
         </Avatar>
       );
 
-      const statusIndicatorElement = getByText('2')?.parentElement;
+      const element = getByText(label);
 
-      expect(statusIndicatorElement).toHaveAttribute('aria-label', 'two notifications');
+      expect(element).toBeInTheDocument();
     });
 
-    it('renders with status and applies default aria-label for available status', () => {
-      const { getByLabelText } = render(
+    it('renders with status and applies default label for available status', () => {
+      const { getByText } = render(
         <Avatar status="available">
           <img alt="" />
         </Avatar>
       );
 
-      const statusIndicatorElement = getByLabelText('status: available');
+      const element = getByText('status: available');
 
-      expect(statusIndicatorElement).toBeEmptyDOMElement();
+      expect(element).toBeInTheDocument();
     });
 
-    it('renders with status and applies default aria-label for away status', () => {
-      const { getByLabelText, container } = render(
+    it('renders with status and applies default label for away status', () => {
+      const { getByText, container } = render(
         <Avatar status="away">
           <img alt="" />
         </Avatar>
       );
 
-      const statusIndicatorElement = getByLabelText('status: away');
+      const element = getByText('status: away');
       const statusIndicatorSVG = container.querySelector('svg');
 
-      expect(statusIndicatorElement).toContainElement(statusIndicatorSVG);
+      expect(element).toBeInTheDocument();
+      expect(statusIndicatorSVG).toBeInTheDocument();
     });
   });
 

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

@@ -8,6 +8,7 @@
 import React, { Children, forwardRef, useMemo } from 'react';
 import PropTypes from 'prop-types';
 import { useText } from '@zendeskgarden/react-theming';
+import { Span } from '@zendeskgarden/react-typography';
 import ClockIcon12 from '@zendeskgarden/svg-icons/src/12/clock-stroke.svg';
 import ClockIcon16 from '@zendeskgarden/svg-icons/src/16/clock-stroke.svg';
 import ArrowLeftIcon12 from '@zendeskgarden/svg-icons/src/12/arrow-left-sm-stroke.svg';
@@ -59,7 +60,7 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
     }, [computedStatus, badge]);
 
     const shouldValidate = computedStatus !== undefined;
-    const ariaLabel = useText(
+    const label = useText(
       AvatarComponent,
       { statusLabel },
       'statusLabel',
@@ -86,11 +87,11 @@ const AvatarComponent = forwardRef<HTMLElement, IAvatarProps>(
             $size={size}
             $type={computedStatus}
             $surfaceColor={surfaceColor}
-            aria-label={ariaLabel}
             as="figcaption"
           >
+            <Span hidden>{label}</Span>
             {computedStatus === 'active' ? (
-              <span aria-hidden="true">{badge}</span>
+              <span aria-hidden>{badge}</span>
             ) : (
               <>
                 {computedStatus === 'away' ? <ClockIcon data-icon-status={computedStatus} /> : null}

packages/avatars/src/elements/Avatar.tsx

@@ -153,7 +153,7 @@ const sizeStyles = (props: IStyledAvatarProps & ThemeProps<DefaultTheme>) => {
     height: ${size} !important; /* [1] */
     /* stylelint-enable declaration-no-important */
 
-    ::before {
+    &::before {
       box-shadow: ${boxShadow};
     }