studio/cunningham
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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

Browse Source 
'offscreen' and 'c__offscreen' were duplicated, merge these two classes
in a dedicated utils file.
This commit is contained in:
Lebaud Antoine
2023-10-13 21:23:09 +02:00
committed by aleb_the_flash
parent b714c3d543
commit d5fcf500b7
6 changed files with 16 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
packages/react/src/components/Forms/LabelledBox/index.tsx
View File

@@ -33,7 +33,7 @@ export const LabelledBox = ({
<label <label
className={classNames("labelled-box__label", { className={classNames("labelled-box__label", {
placeholder: labelAsPlaceholder, placeholder: labelAsPlaceholder,
offscreen: hideLabel, c__offscreen: hideLabel,
})} })}
htmlFor={htmlFor} htmlFor={htmlFor}
id={labelId} id={labelId}

2
packages/react/src/components/Forms/Select/mono.spec.tsx
View File

@@ -1569,7 +1569,7 @@ describe("<Select/>", () => {
name: "City", name: "City",
}); });
const label = screen.getByText("City")!.parentElement!; 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 () => { it("renders menu empty placeholder when there are no options to display", async () => {

2
packages/react/src/components/Forms/Select/multi.spec.tsx
View File

@@ -726,7 +726,7 @@ describe("<Select multi={true} />", () => {
name: "Cities", name: "Cities",
}); });
const label = screen.getByText("Cities")!.parentElement!; 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 () => { it("is possible to select again the last deleted item", async () => {

2
packages/react/src/index.scss
View File

@@ -4,7 +4,7 @@
@use "cunningham-tokens"; @use "cunningham-tokens";
@use "@openfun/cunningham-tokens/default-tokens"; @use "@openfun/cunningham-tokens/default-tokens";
@use "./components/Accessibility"; @use "utils/accessibility";
@use "./components/Button"; @use "./components/Button";
@use "./components/DataGrid"; @use "./components/DataGrid";
@use "./components/Forms/Checkbox"; @use "./components/Forms/Checkbox";

12
packages/react/src/utils/_accessibility.scss Normal file
View File

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

14
packages/react/src/utils/_index.scss
View File

@@ -1,19 +1,5 @@
@use "sass:math"; @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) { @function strip-unit($number) {
// Divide $number by its own unit to get a unitless 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." // According to math.div documentation, "Any units shared by both numbers will be canceled out."