@axinom/mosaic-ui 0.66.0-rc.11 → 0.66.0-rc.12

package/src/components/LandingPageTiles/LandingPageTiles.stories.tsx

@@ -2,6 +2,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
 import { createGroups, getRandomInt } from '../../helpers/storybook';
+import { SvgElement } from '../VisualElements/SvgElement';
 import { LandingPageTiles } from './LandingPageTiles';
 import { LandingPageItem } from './LandingPageTiles.model';
 
@@ -15,7 +16,7 @@ const defaultContainer = {
 
 const DefaultIcon: React.FC = () => {
   return (
-    <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 40 40">
+    <SvgElement viewBox="0 0 40 40">
       <path
         vectorEffect="non-scaling-stroke"
         fill="none"
@@ -23,7 +24,7 @@ const DefaultIcon: React.FC = () => {
         d="M39,39H1V1h38V39z M39.1,26l-8.4-8.7l-9.1,11.5
 	l-6.4-5.4L3.6,39.1 M12.8,7.8c-2.4,0-4.4,2-4.4,4.4s2,4.4,4.4,4.4s4.4-2,4.4-4.4S15.3,7.8,12.8,7.8z"
       />
-    </svg>
+    </SvgElement>
   );
 };
 

package/src/components/LandingPageTiles/TileLarge/TileLarge.spec.tsx

@@ -84,7 +84,11 @@ describe('TileLarge', () => {
   });
 
   it('renders an icon when passed as a string URL', () => {
-    const wrapper = shallow(<TileLarge {...mockProps} />);
+    const wrapper = mount(
+      <MemoryRouter>
+        <TileLarge {...mockProps} />
+      </MemoryRouter>,
+    );
     const iconUrl = wrapper.find('img').prop('src');
 
     expect(iconUrl).toBe(`${mockProps.icon}`);

package/src/components/LandingPageTiles/TileLarge/TileLarge.tsx

@@ -3,6 +3,7 @@ import React from 'react';
 import { Link } from 'react-router-dom';
 import { useValueOrOnDemand } from '../../../hooks/useValueOrOnDemand/useValueOrOnDemand';
 import { Loader } from '../../Loaders/Loader/Loader';
+import { ImgElement } from '../../VisualElements';
 import { LandingPageItem } from '../LandingPageTiles.model';
 import classes from './TileLarge.scss';
 
@@ -56,7 +57,7 @@ export const TileLarge: React.FC<TileLargeProps> = ({
         {React.isValidElement(icon)
           ? icon
           : typeof icon === 'string' && (
-              <img src={icon} alt={`${label} icon`} />
+              <ImgElement src={icon} decorative={true} />
             )}
       </div>
       <div className={classes.titlesSection}>

package/src/components/LandingPageTiles/TileSmall/TileSmall.spec.tsx

@@ -1,5 +1,6 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
+import { MemoryRouter } from 'react-router';
 import { TileSmall, TileSmallProps } from './TileSmall';
 
 const mockProps: TileSmallProps = {
@@ -31,7 +32,11 @@ describe('TileSmall', () => {
   });
 
   it('renders an icon when passed a string URL', () => {
-    const wrapper = shallow(<TileSmall {...mockProps} />);
+    const wrapper = mount(
+      <MemoryRouter>
+        <TileSmall {...mockProps} />
+      </MemoryRouter>,
+    );
     const iconUrl = wrapper.find('img').prop('src');
 
     expect(iconUrl).toBe(`${mockProps.icon}`);

package/src/components/LandingPageTiles/TileSmall/TileSmall.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React from 'react';
 import { Link } from 'react-router-dom';
+import { ImgElement } from '../../VisualElements';
 import { LandingPageItem } from '../LandingPageTiles.model';
 import classes from './TileSmall.scss';
 
@@ -50,7 +51,7 @@ export const TileSmall: React.FC<TileSmallProps> = ({
         {React.isValidElement(icon)
           ? icon
           : typeof icon === 'string' && (
-              <img src={icon} alt={`${label} icon`} />
+              <ImgElement src={icon} decorative={true} />
             )}
       </div>
 

package/src/components/List/ListHeader/ColumnLabel/ColumnLabel.spec.tsx

@@ -1,4 +1,4 @@
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React from 'react';
 import { SortData } from '../../List.model';
 import { ColumnLabel } from './ColumnLabel';
@@ -37,7 +37,7 @@ describe('ColumnLabel', () => {
   });
 
   it('renders the directional arrows by default', () => {
-    const wrapper = shallow(<ColumnLabel propertyName={'test-prop'} />);
+    const wrapper = mount(<ColumnLabel propertyName="test-prop" />);
 
     const dirArrows = wrapper.find('svg');
     const clickWrapper = wrapper.find('.clickWrapper');

package/src/components/List/ListHeader/ColumnLabel/ColumnLabel.tsx

@@ -1,6 +1,7 @@
 import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
 import { noop } from '../../../../helpers/utils';
+import { SvgElement } from '../../../VisualElements/SvgElement';
 import { ColumnSortKeys, SortData } from '../../List.model';
 import classes from './ColumnLabel.scss';
 
@@ -73,26 +74,18 @@ export const ColumnLabel = <T,>({
             {label ?? propertyName}
           </span>
           <div className={classes.arrows}>
-            <svg
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 13 10"
-            >
+            <SvgElement viewBox="0 0 13 10">
               <path
                 className={clsx({ [classes.sorted]: direction === 'asc' })}
                 d="M1.5,7.3l4.8-5.7l5.2,5.7"
               ></path>
-            </svg>
-            <svg
-              version="1.1"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 13 10"
-            >
+            </SvgElement>
+            <SvgElement viewBox="0 0 13 10">
               <path
                 className={clsx({ [classes.sorted]: direction === 'desc' })}
                 d="M11.5,2.8L6.7,8.5L1.5,2.8"
               ></path>
-            </svg>
+            </SvgElement>
           </div>
         </div>
       </div>

package/src/components/Loaders/ImageLoader/ImageLoader.spec.tsx

@@ -1,5 +1,5 @@
 /* eslint-disable @typescript-eslint/no-non-null-assertion */
-import { shallow } from 'enzyme';
+import { mount, shallow } from 'enzyme';
 import React, { ReactNode, SyntheticEvent } from 'react';
 import ContentLoader from 'react-content-loader';
 import { act } from 'react-dom/test-utils';
@@ -18,7 +18,7 @@ describe('ImageLoader', () => {
     const mockWidth = 'test-width';
     const mockAlt = 'test-alt';
 
-    const wrapper = shallow(
+    const wrapper = mount(
       <ImageLoader
         imgSrc={mockSrc}
         alt={mockAlt}
@@ -39,7 +39,7 @@ describe('ImageLoader', () => {
   });
 
   it('renders the loading animation while an image is loading', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const wrapper = mount(<ImageLoader imgSrc="" />);
 
     const loader = wrapper.find(ContentLoader);
     const imgDisplay = wrapper.find('img').prop('style')?.display;
@@ -49,9 +49,10 @@ describe('ImageLoader', () => {
   });
 
   it('renders the image after loading has completed', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const wrapper = mount(<ImageLoader imgSrc="" />);
 
     wrapper.find('img').prop('onLoad')!({} as SyntheticEvent);
+    wrapper.update();
 
     const loader = wrapper.find(ContentLoader);
     const imgDisplay = wrapper.find('img').prop('style')?.display;
@@ -63,7 +64,7 @@ describe('ImageLoader', () => {
   it('emits onLoad callback with img src after successful load', () => {
     const spy = jest.fn();
     const mockUrl = 'mock-url';
-    const wrapper = shallow(<ImageLoader imgSrc={mockUrl} onLoad={spy} />);
+    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onLoad={spy} />);
 
     wrapper.find('img').prop('onLoad')!({} as SyntheticEvent);
 
@@ -77,9 +78,7 @@ describe('ImageLoader', () => {
     };
     const spy = jest.fn();
     const mockUrl = 'mock-url';
-    const wrapper = shallow(
-      <ImageLoader imgSrc={mockUrl} onImageClick={spy} />,
-    );
+    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onImageClick={spy} />);
 
     const image = wrapper.find('img');
 
@@ -93,9 +92,10 @@ describe('ImageLoader', () => {
   });
 
   it('renders the fallback background color when loading has failed', () => {
-    const wrapper = shallow(<ImageLoader imgSrc="" />);
+    const wrapper = mount(<ImageLoader imgSrc="" />);
 
     wrapper.find('img').prop('onError')!({} as SyntheticEvent);
+    wrapper.update();
 
     const loader = wrapper.find(ContentLoader);
     const fallbackContainer = wrapper.find('.container').at(1);
@@ -107,11 +107,12 @@ describe('ImageLoader', () => {
 
   it('renders a fallback image when loading has failed', () => {
     const mockFallbackUrl = 'mock-url';
-    const wrapper = shallow(
+    const wrapper = mount(
       <ImageLoader imgSrc="" fallbackSrc={mockFallbackUrl} />,
     );
 
     wrapper.find('img').prop('onError')!({} as SyntheticEvent);
+    wrapper.update();
 
     const loader = wrapper.find(ContentLoader);
     const images = wrapper.find('img');
@@ -127,7 +128,7 @@ describe('ImageLoader', () => {
   it('emits onError callback with img src after load failure', () => {
     const spy = jest.fn();
     const mockUrl = 'mock-url';
-    const wrapper = shallow(<ImageLoader imgSrc={mockUrl} onError={spy} />);
+    const wrapper = mount(<ImageLoader imgSrc={mockUrl} onError={spy} />);
 
     wrapper.find('img').prop('onError')!({} as SyntheticEvent);
 
@@ -142,9 +143,7 @@ describe('ImageLoader', () => {
         <circle r="50" />
       </svg>
     );
-    const wrapper = shallow(
-      <ImageLoader imgSrc="" loadingSkeleton={mockSVG} />,
-    );
+    const wrapper = mount(<ImageLoader imgSrc="" loadingSkeleton={mockSVG} />);
 
     const svg = wrapper.find(`#${mockId}`);
 

package/src/components/Loaders/ImageLoader/ImageLoader.tsx

@@ -2,6 +2,7 @@ import clsx from 'clsx';
 import React, { ReactNode, useCallback, useEffect, useState } from 'react';
 import ContentLoader from 'react-content-loader';
 import { noop } from '../../../helpers/utils';
+import { ImgElement } from '../../VisualElements/ImgElement';
 import { SquareOutlineSkeleton } from '../skeletons';
 import classes from './ImageLoader.scss';
 
@@ -140,7 +141,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
       )}
       <div className={classes.imageContainer}>
         {state !== ImageLoaderState.Failed && imgSrc !== undefined && (
-          <img
+          <ImgElement
             src={imgSrc}
             height={imgHeight}
             width={imgWidth}
@@ -149,7 +150,7 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
               objectFit: 'contain',
               maxWidth: '100%',
             }}
-            alt={alt}
+            alt={alt ? alt : 'Loaded content image'}
             onLoad={onLoadHandler}
             onError={onErrorHandler}
             onClick={onImageClick}
@@ -159,11 +160,12 @@ export const ImageLoader: React.FC<ImageLoaderProps> = ({
         )}
         {state === ImageLoaderState.Failed &&
           (fallbackSrc ? (
-            <img
+            <ImgElement
               className={classes.fallBackImage}
               src={String(fallbackSrc)}
               height={imgHeight}
               width={imgWidth}
+              alt="Image unavailable"
             />
           ) : (
             <div

package/src/components/PageHeader/PageHeaderAction/PageHeaderAction.tsx

@@ -9,6 +9,7 @@ import {
   useConfirmationDelay,
 } from '../../ConfirmDialog';
 import { IconName, Icons } from '../../Icons';
+import { ImgElement } from '../../VisualElements';
 import {
   PageHeaderActionProps,
   PageHeaderActionType,
@@ -142,7 +143,12 @@ const PageHeaderJSAction: React.FC<PageHeaderJsActionProps> = ({
         <div className={classes.icon}>
           {!confirmation &&
             (typeof icon === 'string' ? (
-              <img src={icon} alt={imgAlt} />
+              <ImgElement
+                src={icon}
+                {...(imgAlt
+                  ? { alt: imgAlt ?? `${label} icon` }
+                  : { decorative: true })}
+              />
             ) : (
               <Icons icon={icon} className={classes.pageHeaderActionsIcons} />
             ))}
@@ -208,7 +214,12 @@ const PageHeaderNavigationAction: React.FC<PageHeaderNavigationActionProps> = ({
     >
       <div className={classes.icon}>
         {typeof headerIcon === 'string' ? (
-          <img src={headerIcon} alt={imgAlt} />
+          <ImgElement
+            src={headerIcon}
+            {...(imgAlt
+              ? { alt: imgAlt ?? `${label} icon` }
+              : { decorative: true })}
+          />
         ) : (
           <Icons icon={headerIcon} className={classes.pageHeaderActionsIcons} />
         )}

package/src/components/VisualElements/ImgElement.spec.tsx

@@ -0,0 +1,92 @@
+import { shallow } from 'enzyme';
+import React from 'react';
+import { ImgElement } from './ImgElement';
+
+describe('ImgElement', () => {
+  it('renders meaningful image with alt text', () => {
+    const alt = 'Test image';
+    const src = '/test.jpg';
+    const wrapper = shallow(<ImgElement src={src} alt={alt} />);
+
+    const img = wrapper.find('img');
+    expect(img.prop('src')).toBe(src);
+    expect(img.prop('alt')).toBe(alt);
+    expect(img.prop('aria-hidden')).toBeUndefined();
+    expect(img.prop('role')).toBeUndefined();
+  });
+
+  it('renders decorative image with accessibility attributes', () => {
+    const src = '/decorative.jpg';
+    const wrapper = shallow(<ImgElement src={src} decorative={true} />);
+
+    const img = wrapper.find('img');
+    expect(img.prop('src')).toBe(src);
+    expect(img.prop('alt')).toBe('');
+    expect(img.prop('aria-hidden')).toBe('true');
+    expect(img.prop('role')).toBe('presentation');
+  });
+
+  it('forwards additional HTML img attributes for meaningful images', () => {
+    const width = 100;
+    const height = 200;
+    const className = 'test-class';
+
+    const wrapper = shallow(
+      <ImgElement
+        src="/test.jpg"
+        alt="Test image"
+        width={width}
+        height={height}
+        className={className}
+      />,
+    );
+
+    const img = wrapper.find('img');
+    expect(img.prop('width')).toBe(width);
+    expect(img.prop('height')).toBe(height);
+    expect(img.prop('className')).toBe(className);
+  });
+
+  it('forwards additional HTML img attributes for decorative images', () => {
+    const width = 50;
+    const height = 60;
+    const className = 'icon';
+
+    const wrapper = shallow(
+      <ImgElement
+        src="/decorative.jpg"
+        decorative={true}
+        width={width}
+        height={height}
+        className={className}
+      />,
+    );
+
+    const img = wrapper.find('img');
+    expect(img.prop('width')).toBe(width);
+    expect(img.prop('height')).toBe(height);
+    expect(img.prop('className')).toBe(className);
+  });
+
+  it('uses meaningful image behavior by default', () => {
+    const alt = 'Default behavior';
+    const wrapper = shallow(<ImgElement src="/default.jpg" alt={alt} />);
+
+    const img = wrapper.find('img');
+    expect(img.prop('alt')).toBe(alt);
+    expect(img.prop('aria-hidden')).toBeUndefined();
+    expect(img.prop('role')).toBeUndefined();
+  });
+
+  it('renders with decorative=false explicitly', () => {
+    const alt = 'Explicit meaningful';
+    const wrapper = shallow(
+      <ImgElement src="/explicit.jpg" alt={alt} decorative={false} />,
+    );
+
+    const img = wrapper.find('img');
+    expect(img.prop('alt')).toBe(alt);
+    expect(img.prop('aria-hidden')).toBeUndefined();
+    expect(img.prop('role')).toBeUndefined();
+  });
+});

package/src/components/VisualElements/ImgElement.tsx

@@ -0,0 +1,72 @@
+import React from 'react';
+
+type BaseImgElementProps = Omit<
+  React.ImgHTMLAttributes<HTMLImageElement>,
+  'alt'
+>;
+
+/** Props for decorative images - alt text not needed or allowed */
+export interface DecorativeImageProps {
+  /** Whether the image is decorative (sets aria-hidden="true", alt="", and role="presentation") */
+  decorative: true;
+  /** Alt text - not needed when decorative */
+  alt?: never;
+}
+
+/** Props for meaningful images - alt text is required */
+export interface MeaningfulImageProps {
+  /** Whether the image is decorative (sets aria-hidden="true", alt="", and role="presentation") */
+  decorative?: false;
+  /** Alt text - required for non-decorative images */
+  alt: string;
+}
+
+/** Union type for all image accessibility configurations */
+export type ImageAccessibilityProps =
+  | DecorativeImageProps
+  | MeaningfulImageProps;
+
+export type ImgElementProps = BaseImgElementProps & ImageAccessibilityProps;
+
+/**
+ * Centralized image component with proper accessibility handling.
+ * Provides consistent image rendering across the application with automatic
+ * accessibility attributes based on the decorative flag.
+ *
+ * For non-decorative images, alt text is required to ensure accessibility.
+ * For decorative images, alt text is automatically set to empty string.
+ *
+ * @example Basic image with required alt text
+ * <ImgElement
+ *   src="/path/to/image.jpg"
+ *   alt="Description of the image"
+ * />
+ *
+ * @example Decorative image (alt not required or allowed)
+ * <ImgElement
+ *   src="/path/to/decorative.jpg"
+ *   decorative={true}
+ * />
+ *
+ * @example Navigation icon
+ * <ImgElement
+ *   src="/icons/menu.svg"
+ *   decorative={true}
+ *   width={24}
+ *   height={24}
+ * />
+ */
+export const ImgElement: React.FC<ImgElementProps> = ({
+  decorative = false,
+  ...imgProps
+}) => {
+  const accessibilityProps = decorative
+    ? {
+        'aria-hidden': 'true' as const,
+        alt: '',
+        role: 'presentation' as const,
+      }
+    : {};
+
+  return <img {...accessibilityProps} {...imgProps} />;
+};

package/src/components/VisualElements/SvgElement.spec.tsx

@@ -0,0 +1,160 @@
+import { mount, shallow } from 'enzyme';
+import React from 'react';
+import { SvgElement, SvgElementProps } from './SvgElement';
+
+describe('SvgElement', () => {
+  it('renders the component without crashing', () => {
+    const wrapper = shallow(<SvgElement />);
+
+    expect(wrapper).toBeTruthy();
+  });
+
+  it('renders with default viewBox', () => {
+    const wrapper = mount(<SvgElement />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('viewBox')).toBe('0 0 40 40');
+  });
+
+  it('renders with custom viewBox', () => {
+    const customViewBox = '0 0 24 24';
+    const wrapper = mount(<SvgElement viewBox={customViewBox} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('viewBox')).toBe(customViewBox);
+  });
+
+  it('passes down className to svg element', () => {
+    const testClass = 'custom-icon-class';
+    const wrapper = mount(<SvgElement className={testClass} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.hasClass(testClass)).toBe(true);
+  });
+
+  it('renders children inside svg', () => {
+    const d = 'M10 10L20 20';
+    const cx = 15;
+    const cy = 15;
+    const r = 5;
+    const wrapper = mount(
+      <SvgElement>
+        <path d={d} />
+        <circle cx={cx} cy={cy} r={r} />
+      </SvgElement>,
+    );
+    const circle = wrapper.find('circle');
+
+    expect(wrapper.find('path')).toHaveLength(1);
+    expect(wrapper.find('circle')).toHaveLength(1);
+    expect(wrapper.find('path').prop('d')).toBe(d);
+    expect(circle.prop('cx')).toBe(cx);
+    expect(circle.prop('cy')).toBe(cy);
+    expect(circle.prop('r')).toBe(r);
+  });
+
+  it('renders as decorative icon by default', () => {
+    const wrapper = mount(<SvgElement />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('presentation');
+    expect(svg.prop('aria-hidden')).toBe('true');
+    expect(svg.prop('aria-label')).toBeUndefined();
+  });
+
+  it('renders as semantic icon when aria-label is provided', () => {
+    const ariaLabel = 'Custom icon description';
+    const wrapper = mount(<SvgElement aria-label={ariaLabel} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(svg.prop('aria-label')).toBe(ariaLabel);
+  });
+
+  it('renders as semantic icon when title is provided', () => {
+    const title = 'Icon tooltip';
+    const wrapper = mount(<SvgElement title={title} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(wrapper.find('title')).toHaveLength(1);
+    expect(wrapper.find('title').text()).toBe(title);
+  });
+
+  it('renders as semantic icon when both aria-label and title are provided', () => {
+    const ariaLabel = 'Icon description';
+    const title = 'Icon tooltip';
+    const wrapper = mount(<SvgElement aria-label={ariaLabel} title={title} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('img');
+    expect(svg.prop('aria-hidden')).toBeUndefined();
+    expect(svg.prop('aria-label')).toBe(ariaLabel);
+    expect(wrapper.find('title')).toHaveLength(1);
+    expect(wrapper.find('title').text()).toBe(title);
+  });
+
+  it('does not render title element when title prop is not provided', () => {
+    const wrapper = mount(<SvgElement aria-label="Icon" />);
+
+    expect(wrapper.find('title')).toHaveLength(0);
+  });
+
+  it('applies default SVG attributes', () => {
+    const wrapper = mount(<SvgElement />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('focusable')).toBe('false');
+  });
+
+  it('passes through additional SVG attributes', () => {
+    const customProps: SvgElementProps = {
+      id: 'custom-id',
+      'data-testid': 'custom-svg',
+      fill: 'currentColor',
+      stroke: 'red',
+      strokeWidth: '2',
+    };
+
+    const wrapper = mount(<SvgElement {...customProps} />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('id')).toBe('custom-id');
+    expect(svg.prop('data-testid')).toBe('custom-svg');
+    expect(svg.prop('fill')).toBe('currentColor');
+    expect(svg.prop('stroke')).toBe('red');
+    expect(svg.prop('strokeWidth')).toBe('2');
+  });
+
+  it('allows overriding default attributes', () => {
+    const wrapper = mount(
+      <SvgElement
+        version="2.0"
+        xmlns="http://custom-namespace.com"
+        focusable="true"
+      />,
+    );
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('version')).toBe('2.0');
+    expect(svg.prop('xmlns')).toBe('http://custom-namespace.com');
+    expect(svg.prop('focusable')).toBe('true');
+  });
+
+  it('prioritizes explicit role over calculated role', () => {
+    const wrapper = mount(<SvgElement role="button" aria-label="Click me" />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('role')).toBe('button');
+  });
+
+  it('prioritizes explicit aria-hidden over calculated value', () => {
+    const wrapper = mount(<SvgElement aria-hidden="false" />);
+    const svg = wrapper.find('svg');
+
+    expect(svg.prop('aria-hidden')).toBe('false');
+    expect(svg.prop('role')).toBe('presentation'); // Still decorative without label/title
+  });
+});