From 266df877bedadb9e798cee2bf37016b19623dfd6 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?S=C3=A9bastien=20Romain?= <sromain@talend.com>
Date: Mon, 11 Dec 2023 14:09:56 +0100
Subject: [PATCH] fix: don't rely on global sr-only classname to hide the icons
 from the IconsProvider (#5051)

---
 .changeset/swift-flies-rescue.md              |  5 +++
 .../IconsProvider/IconsProvider.module.scss   | 11 ++++++
 .../IconsProvider/IconsProvider.tsx           | 36 ++++++++++---------
 3 files changed, 35 insertions(+), 17 deletions(-)
 create mode 100644 .changeset/swift-flies-rescue.md
 create mode 100644 packages/design-system/src/components/IconsProvider/IconsProvider.module.scss

diff --git a/.changeset/swift-flies-rescue.md b/.changeset/swift-flies-rescue.md
new file mode 100644
index 0000000000..92040e4ad0
--- /dev/null
+++ b/.changeset/swift-flies-rescue.md
@@ -0,0 +1,5 @@
+---
+'@talend/design-system': patch
+---
+
+fix: don't rely on global sr-only classname to hide the icons from the IconsProvider
diff --git a/packages/design-system/src/components/IconsProvider/IconsProvider.module.scss b/packages/design-system/src/components/IconsProvider/IconsProvider.module.scss
new file mode 100644
index 0000000000..1566bc4c79
--- /dev/null
+++ b/packages/design-system/src/components/IconsProvider/IconsProvider.module.scss
@@ -0,0 +1,11 @@
+.hidden {
+	border: 0;
+	clip: rect(0, 0, 0, 0);
+	height: 1px;
+	margin: -1px;
+	overflow: hidden;
+	padding: 0;
+	position: absolute;
+	white-space: nowrap;
+	width: 1px;
+}
diff --git a/packages/design-system/src/components/IconsProvider/IconsProvider.tsx b/packages/design-system/src/components/IconsProvider/IconsProvider.tsx
index 10afff180f..8b6f0b4d41 100644
--- a/packages/design-system/src/components/IconsProvider/IconsProvider.tsx
+++ b/packages/design-system/src/components/IconsProvider/IconsProvider.tsx
@@ -1,6 +1,10 @@
-import { VisuallyHidden } from '../VisuallyHidden';
+import { ReactElement, RefObject, useEffect, useRef, useState } from 'react';
+
+import classNames from 'classnames';
+
 import assetsAPI from '@talend/assets-api';
-import { ReactElement, RefObject, useState, useEffect, useRef } from 'react';
+
+import style from './IconsProvider.module.scss';
 
 const DEFAULT_BUNDLES = [
 	assetsAPI.getURL('/dist/svg-bundle/all.svg', '@talend/icons'),
@@ -85,7 +89,7 @@ function addBundle(response: Response, url: string) {
 		return response.text().then(content => {
 			if (content.startsWith('<svg')) {
 				const container = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
-				container.setAttribute('class', 'tc-iconsprovider sr-only');
+				container.setAttribute('class', classNames('tc-iconsprovider', style.hidden));
 				container.setAttribute('aria-hidden', 'true');
 				container.setAttribute('focusable', 'false');
 				container.setAttribute('xmlns', 'http://www.w3.org/2000/svg');
@@ -159,20 +163,18 @@ export function IconsProvider({
 
 	return (
 		(shouldRender && (
-			<VisuallyHidden>
-				<svg
-					xmlns="http://www.w3.org/2000/svg"
-					focusable="false"
-					className="tc-iconsprovider"
-					ref={ref}
-				>
-					{Object.keys(iconset).map((id, index) => (
-						<symbol key={index} id={id}>
-							{iconset[id]}
-						</symbol>
-					))}
-				</svg>
-			</VisuallyHidden>
+			<svg
+				xmlns="http://www.w3.org/2000/svg"
+				focusable="false"
+				className={classNames('tc-iconsprovider', style.hidden)}
+				ref={ref}
+			>
+				{Object.keys(iconset).map((id, index) => (
+					<symbol key={index} id={id}>
+						{iconset[id]}
+					</symbol>
+				))}
+			</svg>
 		)) ||
 		null
 	);