feat(ui): set role and title at Icon and Loader

hazelcast · Oct 5, 2023 · 019ab0c · 019ab0c
1 parent 244ca2b
commit 019ab0c
Show file tree

Hide file tree

Showing 3 changed files with 27 additions and 6 deletions.
diff --git a/packages/ui/src/Icon.tsx b/packages/ui/src/Icon.tsx
@@ -38,11 +38,23 @@ export type IconProps = {
   className?: string
   containerClassName?: string
   bold?: boolean
+  role?: string
 } & IconAriaProps
 
 export const Icon = forwardRef<HTMLDivElement, IconProps>(
   (
-    { color, icon: IconElement, ariaLabel, ariaLabelledBy, ariaHidden, className, containerClassName, size = 'medium', bold = false },
+    {
+      color,
+      icon: IconElement,
+      ariaLabel,
+      ariaLabelledBy,
+      ariaHidden,
+      className,
+      containerClassName,
+      size = 'medium',
+      bold = false,
+      role = 'img',
+    },
     ref,
   ) => {
     const iconStroke = bold ? styleConsts.iconStrokeWidthBold : styleConsts.iconStrokeWidth
@@ -69,7 +81,7 @@ export const Icon = forwardRef<HTMLDivElement, IconProps>(
 
     return (
       <div className={cn(styles.iconContainer, containerClassName)} ref={ref}>
-        <IconElement role="img" {...props} />
+        <IconElement role={role} {...props} />
       </div>
     )
   },

diff --git a/packages/ui/src/IconButton.tsx b/packages/ui/src/IconButton.tsx
@@ -18,6 +18,8 @@ type IconButtonCommonProps = {
   icon: FeatherIcon
   iconClassName?: string
   iconColor?: string
+  iconRole?: string
+  loaderRole?: string
   kind?: IconButtonKind
   size?: IconProps['size']
   padding?: 'normal'
@@ -66,6 +68,8 @@ export const IconButton = forwardRef<HTMLElement, IconButtonProps>(
       icon,
       iconClassName,
       iconColor,
+      iconRole,
+      loaderRole,
       className,
       size,
       kind = 'transparent',
@@ -121,8 +125,8 @@ export const IconButton = forwardRef<HTMLElement, IconButtonProps>(
             {...rest}
           >
             <span className={styles.body} ref={mergeRefs([ref, tooltipRef])}>
-              {loading && <Loader size={size} />}
-              {!loading && <Icon className={iconClassName} color={iconColor} icon={icon} size={size} ariaHidden />}
+              {loading && <Loader role={loaderRole} size={size} />}
+              {!loading && <Icon role={iconRole} className={iconClassName} color={iconColor} icon={icon} size={size} ariaHidden />}
             </span>
           </Component>
         )}

diff --git a/packages/ui/src/Loader.tsx b/packages/ui/src/Loader.tsx
@@ -10,14 +10,17 @@ export type LoaderProps = {
   size?: IconSize
   kind?: 'primary' | 'contrast' | 'inherit'
   children?: never
+  title?: string
+  role?: string
 } & Pick<SVGAttributes<SVGElement>, 'aria-hidden'>
 
-export const Loader: FC<LoaderProps> = ({ className, size = 'medium', kind = 'inherit', ...props }) => (
+export const Loader: FC<LoaderProps> = ({ className, size = 'medium', kind = 'inherit', role = 'img', title, ...props }) => (
   // https://github.com/feathericons/feather/blob/a718a7e9c39447202f703783336e8ba1c8e32405/icons/loader.svg#L1
   // We cannot use it directly as it has `line` elements not in a sequential order
   // And we need the sequential order to easily calculate animation delay
   <svg
     xmlns="http://www.w3.org/2000/svg"
+    role={role}
     className={cn(
       styles.loader,
       {
@@ -38,9 +41,11 @@ export const Loader: FC<LoaderProps> = ({ className, size = 'medium', kind = 'in
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
-    aria-label="Loader icon"
+    aria-label={title ? title : 'Loader icon'}
+    aria-labelledby="loader-title"
     {...props}
   >
+    {title && <title id="loader-title">{title}</title>}
     <line x1="12" y1="2" x2="12" y2="6" />
     <line x1="4.93" y1="4.93" x2="7.76" y2="7.76" />
     <line x1="2" y1="12" x2="6" y2="12" />