From d5fcf500b795582b165f4f631d16053d19b04b97 Mon Sep 17 00:00:00 2001
From: Lebaud Antoine <lebaud.antoine131@gmail.com>
Date: Fri, 13 Oct 2023 21:23:09 +0200
Subject: [PATCH] =?UTF-8?q?=E2=99=BB=EF=B8=8F(react)=20merge=20duplicated?=
 =?UTF-8?q?=20scss=20classes=20related=20to=20accessibility?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

'offscreen' and 'c__offscreen' were duplicated, merge these two classes
in a dedicated utils file.
---
 .../src/components/Forms/LabelledBox/index.tsx     |  2 +-
 .../src/components/Forms/Select/mono.spec.tsx      |  2 +-
 .../src/components/Forms/Select/multi.spec.tsx     |  2 +-
 packages/react/src/index.scss                      |  2 +-
 packages/react/src/utils/_accessibility.scss       | 12 ++++++++++++
 packages/react/src/utils/_index.scss               | 14 --------------
 6 files changed, 16 insertions(+), 18 deletions(-)
 create mode 100644 packages/react/src/utils/_accessibility.scss

diff --git a/packages/react/src/components/Forms/LabelledBox/index.tsx b/packages/react/src/components/Forms/LabelledBox/index.tsx
index 5fe5f72..db1a22d 100644
--- a/packages/react/src/components/Forms/LabelledBox/index.tsx
+++ b/packages/react/src/components/Forms/LabelledBox/index.tsx
@@ -33,7 +33,7 @@ export const LabelledBox = ({
         <label
           className={classNames("labelled-box__label", {
             placeholder: labelAsPlaceholder,
-            offscreen: hideLabel,
+            c__offscreen: hideLabel,
           })}
           htmlFor={htmlFor}
           id={labelId}
diff --git a/packages/react/src/components/Forms/Select/mono.spec.tsx b/packages/react/src/components/Forms/Select/mono.spec.tsx
index a04eaa4..0526b5e 100644
--- a/packages/react/src/components/Forms/Select/mono.spec.tsx
+++ b/packages/react/src/components/Forms/Select/mono.spec.tsx
@@ -1569,7 +1569,7 @@ describe("<Select/>", () => {
         name: "City",
       });
       const label = screen.getByText("City")!.parentElement!;
-      expect(Array.from(label.classList)).toContain("offscreen");
+      expect(Array.from(label.classList)).toContain("c__offscreen");
     });
 
     it("renders menu empty placeholder when there are no options to display", async () => {
diff --git a/packages/react/src/components/Forms/Select/multi.spec.tsx b/packages/react/src/components/Forms/Select/multi.spec.tsx
index e2cff66..01e50b4 100644
--- a/packages/react/src/components/Forms/Select/multi.spec.tsx
+++ b/packages/react/src/components/Forms/Select/multi.spec.tsx
@@ -726,7 +726,7 @@ describe("<Select multi={true} />", () => {
         name: "Cities",
       });
       const label = screen.getByText("Cities")!.parentElement!;
-      expect(Array.from(label.classList)).toContain("offscreen");
+      expect(Array.from(label.classList)).toContain("c__offscreen");
     });
 
     it("is possible to select again the last deleted item", async () => {
diff --git a/packages/react/src/index.scss b/packages/react/src/index.scss
index 7309940..155cefc 100644
--- a/packages/react/src/index.scss
+++ b/packages/react/src/index.scss
@@ -4,7 +4,7 @@
 @use "cunningham-tokens";
 @use "@openfun/cunningham-tokens/default-tokens";
 
-@use "./components/Accessibility";
+@use "utils/accessibility";
 @use "./components/Button";
 @use "./components/DataGrid";
 @use "./components/Forms/Checkbox";
diff --git a/packages/react/src/utils/_accessibility.scss b/packages/react/src/utils/_accessibility.scss
new file mode 100644
index 0000000..2869996
--- /dev/null
+++ b/packages/react/src/utils/_accessibility.scss
@@ -0,0 +1,12 @@
+.c__offscreen {
+  position: absolute;
+  width: 1px;
+  height: 1px !important;
+  padding: 0 !important;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0 !important;
+}
diff --git a/packages/react/src/utils/_index.scss b/packages/react/src/utils/_index.scss
index 033f001..2e5768f 100644
--- a/packages/react/src/utils/_index.scss
+++ b/packages/react/src/utils/_index.scss
@@ -1,19 +1,5 @@
 @use "sass:math";
 
-.c__offscreen {
-  position: absolute;
-  width: 1px;
-  height: 1px;
-  padding: 0;
-  margin: -1px;
-  overflow: hidden;
-  clip: rect(0, 0, 0, 0);
-  clip-path: inset(50%);
-  white-space: nowrap;
-  border: 0;
-}
-
-
 @function strip-unit($number) {
   // Divide $number by its own unit to get a unitless number.
   // According to math.div documentation, "Any units shared by both numbers will be canceled out."