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

hazelcast · Oct 12, 2023 · fd1cfa6 · fd1cfa6
1 parent 019ab0c
commit fd1cfa6
Showing 1 changed file with 3 additions and 5 deletions.
diff --git a/packages/ui/src/Loader.tsx b/packages/ui/src/Loader.tsx
@@ -10,11 +10,11 @@ export type LoaderProps = {
   size?: IconSize
   kind?: 'primary' | 'contrast' | 'inherit'
   children?: never
-  title?: string
+  label?: string
   role?: string
 } & Pick<SVGAttributes<SVGElement>, 'aria-hidden'>
 
-export const Loader: FC<LoaderProps> = ({ className, size = 'medium', kind = 'inherit', role = 'img', title, ...props }) => (
+export const Loader: FC<LoaderProps> = ({ className, size = 'medium', kind = 'inherit', role = 'img', label, ...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
@@ -41,11 +41,9 @@ export const Loader: FC<LoaderProps> = ({ className, size = 'medium', kind = 'in
     strokeWidth="2"
     strokeLinecap="round"
     strokeLinejoin="round"
-    aria-label={title ? title : 'Loader icon'}
-    aria-labelledby="loader-title"
+    aria-label={label ? label : 'Loader icon'}
     {...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" />