feat(Icons): icons should be decorative by default

versini-org · Feb 26, 2024 · b5d9295 · b5d9295
1 parent df63fe6
commit b5d9295
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 17 deletions.
diff --git a/packages/documentation/.ladle/components.tsx b/packages/documentation/.ladle/components.tsx
@@ -53,7 +53,7 @@ export const Provider: GlobalProvider = ({ children, storyMeta }) => {
 						label="link to UI Components GitHub repository"
 						onClick={handleOnClickGitHub}
 					>
-						<IconGitHub decorative />
+						<IconGitHub />
 					</ButtonIcon>
 				}
 				row2={

diff --git a/packages/documentation/src/System/Icons.stories.tsx b/packages/documentation/src/System/Icons.stories.tsx
@@ -57,5 +57,6 @@ export const Basic: Story<any> = (args) => (
 
 Basic.args = {
 	monotone: false,
-	decorative: true,
+	semantic: false,
+	// decorative: true,
 };
diff --git a/packages/ui-icons/src/components/Icons/IconsTypes.d.ts b/packages/ui-icons/src/components/Icons/IconsTypes.d.ts
@@ -3,12 +3,6 @@ import { SpacingProps } from "@versini/ui-private/dist/utilities";
 export interface IconsProps
 	extends Omit<React.SVGAttributes<SVGElement>, "spacing">,
 		SpacingProps {
-	/**
-	 * Whether or not the icon is decorative only (visual but not
-	 * announced to assistive technologies).
-	 * @default false
-	 */
-	decorative?: boolean;
 	/**
 	 * Whether or not to render the icon in a single color
 	 * @default false
@@ -19,4 +13,10 @@ export interface IconsProps
 	 * but it can be overridden with this prop.
 	 */
 	title?: string;
+	/**
+	 * Whether or not the icon is semantic (visual and
+	 * announced to assistive technologies).
+	 * @default false
+	 */
+	semantic?: boolean;
 }
diff --git a/packages/ui-private/src/components/SvgIcon/SvgIcon.tsx b/packages/ui-private/src/components/SvgIcon/SvgIcon.tsx
@@ -12,7 +12,7 @@ export const SvgIcon = ({
 	defaultClassName,
 	spacing,
 	title,
-	decorative = false,
+	semantic = false,
 	...rest
 }: SvgIconProps) => {
 	const generatedSpacing = getSpacing(spacing);
@@ -28,13 +28,13 @@ export const SvgIcon = ({
 				viewBox={viewBox ? viewBox : defaultViewBox}
 				fill={fill ? fill : "currentColor"}
 				role="img"
-				aria-hidden={decorative}
+				aria-hidden={!semantic}
 				focusable={false}
 				{...rest}
 			>
 				{children}
 			</svg>
-			{title && !decorative && <span className="sr-only">{title}</span>}
+			{title && semantic && <span className="sr-only">{title}</span>}
 		</>
 	);
 };
diff --git a/packages/ui-private/src/components/SvgIcon/SvgIconTypes.d.ts b/packages/ui-private/src/components/SvgIcon/SvgIconTypes.d.ts
@@ -18,12 +18,6 @@ export type SvgIconProps = {
 	 * CSS class(es) to add to the main component wrapper.
 	 */
 	className?: string;
-	/**
-	 * Whether or not the icon is decorative only (visual but not
-	 * announced to assistive technologies).
-	 * @default false
-	 */
-	decorative?: boolean;
 	/**
 	 * CSS class(es) to add to the main component wrapper.
 	 */
@@ -33,6 +27,12 @@ export type SvgIconProps = {
 	 * @default "currentColor"
 	 */
 	fill?: string;
+	/**
+	 * Whether or not the icon is semantic (visual and
+	 * announced to assistive technologies).
+	 * @default false
+	 */
+	semantic?: boolean;
 	/**
 	 * The viewBox to use. If not provided, the default viewBox will be used.
 	 */

diff --git a/packages/ui-private/src/components/SvgIcon/__tests__/SvgIcon.test.tsx b/packages/ui-private/src/components/SvgIcon/__tests__/SvgIcon.test.tsx
@@ -47,4 +47,35 @@ describe("SvgIcon prop tests", () => {
 		const svg = await screen.findByTestId("svgicon-1");
 		expect(svg.getAttribute("class")).toBe("toto");
 	});
+
+	it("should render a decorative icon by default", async () => {
+		render(
+			<SvgIcon
+				data-testid="svgicon-1"
+				defaultViewBox="0 0 448 512"
+				viewBox="0 0 666 666"
+				title="toto"
+			>
+				<path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z" />
+			</SvgIcon>,
+		);
+		const svg = await screen.findByTestId("svgicon-1");
+		expect(svg.getAttribute("aria-hidden")).toBe("true");
+	});
+
+	it("should honor the `semantic` prop", async () => {
+		render(
+			<SvgIcon
+				data-testid="svgicon-1"
+				defaultViewBox="0 0 448 512"
+				viewBox="0 0 666 666"
+				title="toto"
+				semantic
+			>
+				<path d="M8 256a56 56 0 1 1 112 0A56 56 0 1 1 8 256zm160 0a56 56 0 1 1 112 0 56 56 0 1 1 -112 0zm216-56a56 56 0 1 1 0 112 56 56 0 1 1 0-112z" />
+			</SvgIcon>,
+		);
+		const svg = await screen.findByTestId("svgicon-1");
+		expect(svg.getAttribute("aria-hidden")).toBe("false");
+	});
 });