fix: don't rely on global sr-only classname to hide the icons from th…

…e IconsProvider (#5051)
Talend · Dec 11, 2023 · 266df87 · 266df87
1 parent 1bc49cd
commit 266df87
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 17 deletions.
diff --git a/.changeset/swift-flies-rescue.md 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
@@ -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
@@ -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
 	);