feat: enhance accessibility by adding aria-busy attribute to SVG comp…

…onent

- Set aria-busy to true by default to indicate loading state
- Update aria-busy to false once SVG is fully loaded
- Improve accessibility for screen readers and assistive technologies

packages/svg-react/src/Svg.tsx

@@ -2,7 +2,7 @@ import { getSvg } from '@pplancq/svg-core';
 import { forwardRef, type SVGProps, useImperativeHandle, useLayoutEffect, useRef } from 'react';
 import { useSafeState } from './useSafeState.js';
 
-type SvgProps = SVGProps<SVGSVGElement> & {
+type SvgProps = Omit<SVGProps<SVGSVGElement>, 'aria-busy'> & {
   src: string;
   alt?: string;
 };
@@ -28,7 +28,11 @@ export const Svg = forwardRef<SVGSVGElement, SvgProps>(({ src, alt, ...props },
     getSvg(src, svg).then(result => {
       if (!result) {
         setHasError(true);
+
+        return;
       }
+
+      result.setAttribute('aria-busy', 'false');
     });
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [hasError, src]);
@@ -37,7 +41,7 @@ export const Svg = forwardRef<SVGSVGElement, SvgProps>(({ src, alt, ...props },
     return alt ? <span>{alt}</span> : null;
   }
 
-  return <svg {...props} ref={svgRef} aria-label={alt || props['aria-label']} />;
+  return <svg {...props} ref={svgRef} aria-label={props['aria-label'] || alt} aria-busy />;
 });
 
 Svg.displayName = 'Svg';

packages/svg-react/tests/Svg.test.tsx

@@ -27,6 +27,25 @@ describe('<Svg />', () => {
     });
   });
 
+  it('should have change on attribute aria-busy', async () => {
+    fetchMock.mockResolvedValueOnce({
+      headers: new Headers([[CONTENT_TYPE, MINE_TYPE_SVG]]),
+      text: () => Promise.resolve(svgData),
+    });
+
+    render(<Svg src="/foo.svg" aria-hidden aria-label="foo" />);
+    const svg = screen.getByLabelText('foo');
+
+    expect(svg).toHaveAttribute('aria-busy', 'true');
+
+    await waitFor(() => {
+      const element = screen.getByLabelText('circle');
+      expect(element).toBeInTheDocument();
+    });
+
+    expect(svg).toHaveAttribute('aria-busy', 'false');
+  });
+
   it('renders fallback when src not found', async () => {
     fetchMock.mockRejectedValue({
       headers: new Headers(),