♻️(react) merge duplicated scss classes related to accessibility

'offscreen' and 'c__offscreen' were duplicated, merge these two classes
in a dedicated utils file.

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}

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 () => {

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 () => {

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";

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;
+}

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."