fix: avatar: tooltip accessibility fix (#949)

* fix: avatar: tooltip accessibility fix

* fix: avatar: added aria attributes as props

* fix: avatar: added props to list story avatar group

* test: update: updated test cases

---------

Co-authored-by: ypatadia-eightfold <[email protected]>

Author: rmotwani-c-eightfold

src/components/Avatar/Avatar.tsx

@@ -257,6 +257,11 @@ const AvatarFallback: FC<AvatarFallbackProps> = React.forwardRef(
       style,
       theme,
       tabIndex = 0,
+      id = 'avatar-id',
+      ariaLabel,
+      roleSet,
+      ariaDescribedBy,
+      ariaOwns,
     },
     ref: Ref<HTMLDivElement>
   ) => {
@@ -290,6 +295,11 @@ const AvatarFallback: FC<AvatarFallbackProps> = React.forwardRef(
 
     return (
       <div
+        id={id}
+        aria-label={ariaLabel}
+        aria-owns={ariaOwns}
+        aria-describedby={ariaDescribedBy}
+        role={roleSet}
         ref={ref}
         className={avatarClasses}
         onClick={onClick}
@@ -369,6 +379,11 @@ export const Avatar: FC<AvatarProps> = React.forwardRef(
       tooltipProps = undefined,
       type = 'square',
       tabIndex = 0,
+      id = 'avatar-id',
+      ariaLabel,
+      roleSet,
+      ariaDescribedBy,
+      ariaOwns,
     },
     ref: Ref<HTMLDivElement>
   ) => {
@@ -582,6 +597,11 @@ export const Avatar: FC<AvatarProps> = React.forwardRef(
         )}
       >
         <AvatarFallback
+          id={id}
+          ariaLabel={ariaLabel}
+          ariaOwns={ariaOwns}
+          ariaDescribedBy={ariaDescribedBy}
+          roleSet={roleSet}
           classNames={wrapperClassNames}
           hashingFunction={hashingFunction}
           onClick={onClick}

src/components/Avatar/Avatar.types.ts

@@ -160,6 +160,10 @@ export interface BaseAvatarProps extends OcBaseProps<HTMLDivElement> {
    * @default 'square'
    */
   type?: 'round' | 'square';
+  ariaLabel?: string;
+  roleSet?: string;
+  ariaDescribedBy?: string;
+  ariaOwns?: string;
 }
 
 export interface AvatarPopupProps extends PopupProps {}
@@ -188,6 +192,10 @@ export interface AvatarProps
    * Hover tooltip
    */
   tooltipProps?: TooltipProps;
+  ariaLabel?: string;
+  roleSet?: string;
+  ariaDescribedBy?: string;
+  ariaOwns?: string;
 }
 
 interface MaxAvatarProps extends BaseAvatarProps {
@@ -267,4 +275,7 @@ export interface AvatarGroupProps extends OcBaseProps<HTMLDivElement> {
    * @default 'square'
    */
   type?: 'round' | 'square';
+  ariaLabel?: string;
+  roleSet?: string;
+  tooltipId?: string;
 }

src/components/Avatar/AvatarGroup.stories.tsx

@@ -72,6 +72,9 @@ const sampleList: User[] = [
 
 const Basic_Story: ComponentStory<typeof AvatarGroup> = (args) => (
   <AvatarGroup
+    tooltipId="avatar-group-tooltip-id"
+    ariaLabel="interviewers"
+    roleSet="button"
     animateOnHover
     maxProps={{
       count: 4,
@@ -200,6 +203,9 @@ const Basic_Story: ComponentStory<typeof AvatarGroup> = (args) => (
 
 const List_Story: ComponentStory<typeof AvatarGroup> = (args) => (
   <AvatarGroup
+    tooltipId="avatar-group-tooltip-id"
+    ariaLabel="interviewers"
+    roleSet="button"
     animateOnHover
     avatarListProps={{
       items: sampleList,

src/components/Avatar/AvatarGroup.tsx

@@ -1,6 +1,6 @@
 'use client';
 
-import React, { Ref } from 'react';
+import React, { Ref, useEffect } from 'react';
 import { Avatar } from './Avatar';
 import { AvatarGroupProps, AvatarGroupVariant } from './Avatar.types';
 import { List } from '../List';
@@ -27,6 +27,9 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = React.forwardRef(
       size,
       style,
       type,
+      ariaLabel,
+      roleSet,
+      tooltipId,
       ...rest
     },
     ref: Ref<HTMLDivElement>
@@ -69,6 +72,11 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = React.forwardRef(
       string | React.JSXElementConstructor<any>
     > = (
       <Avatar
+        ariaLabel={`${numChildren - maxCount} more ${ariaLabel}`}
+        ariaOwns={tooltipId}
+        ariaDescribedBy={tooltipId}
+        roleSet={roleSet}
+        id="avatar-group-max-count"
         size={size}
         type={type}
         fontSize={styles.maxCountFontSize}
@@ -96,6 +104,8 @@ export const AvatarGroup: React.FC<AvatarGroupProps> = React.forwardRef(
           >
         ): JSX.Element => (
           <Tooltip
+            tabIndex={-1}
+            id={tooltipId}
             {...maxProps.tooltipProps}
             classNames={mergeClasses([
               styles.avatarGroupTooltip,

src/components/Avatar/__snapshots__/Avatar.test.tsx.snap

@@ -5,6 +5,7 @@ LoadedCheerio {
   "0": Node {
     "attribs": Object {
       "class": "wrapper-style avatar image-style",
+      "id": "avatar-id",
       "style": "width: 40px; height: 40px; min-width: 40px; min-height: 40px; font-size: 18px;",
       "tabindex": "0",
     },
@@ -34,11 +35,13 @@ LoadedCheerio {
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
+      "id": undefined,
       "style": undefined,
       "tabindex": undefined,
     },
     "x-attribsPrefix": Object {
       "class": undefined,
+      "id": undefined,
       "style": undefined,
       "tabindex": undefined,
     },
@@ -133,6 +136,7 @@ LoadedCheerio {
   "0": Node {
     "attribs": Object {
       "class": "wrapper-style avatar image-style round",
+      "id": "avatar-id",
       "style": "width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 18px;",
       "tabindex": "0",
     },
@@ -162,11 +166,13 @@ LoadedCheerio {
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
+      "id": undefined,
       "style": undefined,
       "tabindex": undefined,
     },
     "x-attribsPrefix": Object {
       "class": undefined,
+      "id": undefined,
       "style": undefined,
       "tabindex": undefined,
     },
@@ -261,6 +267,7 @@ LoadedCheerio {
   "0": Node {
     "attribs": Object {
       "class": "wrapper-style avatar image-style",
+      "id": "avatar-id",
       "style": "width: 32px; height: 32px; min-width: 32px; min-height: 32px; font-size: 18px;",
       "tabindex": "0",
     },
@@ -290,11 +297,13 @@ LoadedCheerio {
     "type": "tag",
     "x-attribsNamespace": Object {
       "class": undefined,
+      "id": undefined,
       "style": undefined,
       "tabindex": undefined,
     },
     "x-attribsPrefix": Object {
       "class": undefined,
+      "id": undefined,
       "style": undefined,
       "tabindex": undefined,
     },